This is my Jquery for scroll on click. For first click it scrolls but don't -135 to scroll but from second click onwards it works properly
`
$(".jum-button a").click(function(event) {
var jump =$(this).attr("data-id");
$(jump).each(function() {
$jumpvalue = $(jump).offset().top-135;
var qid = $('.question_row').attr('id');
$('html, body').animate({
scrollTop: $jumpvalue
}, 1000);
});
});
PHP
`
<?php
while ( have_rows( 'add_jump_link_treatment','option' ) ) : the_row();
$label_jump = get_sub_field("label_jump_treatment",'option');
$jump_icon = get_sub_field("jump_icon_treatment",'option');
$id_for_jump_section =
get_sub_field("id_for_jump_section_treatment",'option');
?>
<img src="<?php echo $jump_icon;?>" alt="" class="jump_icon">
<a class="button_link jump-link-button" data-id="#<?php echo
$id_for_jump_section; ?>"><?php echo $label_jump; ?></a>
<?php
endwhile;
?>
I want to scroll to the div on click but fixed Element was Hiding content so I wanted to add - 135px x so content don't hide.
Related
hai iam trying to place hover in an dynamic image have to show a dynamic div, if remove mouse div has to be hidden, if i over to the div after hover on image div needs to remain visible if i move out from the div it has to be hidden i tried something like this, but not working as expected, If i over to image div appears if i place mouseout tag there it hides the div once i remove the mouse couldn't use the options in the div, if i place the mouse out in div once i remove the mouse from image the div not closing, sorry for bad english as solutions for this case?
<img onmouseover="GoView_respond(<?php echo $print->Friend_id;?>);" onmouseout="ExitView_respond_one(<?php echo $print->Friend_id;?>);">
<div class="respond_request" style="display:none;" id="pending_req_<?php echo $print->Friend_id;?>" >
<p class="user_details" onmouseout="ExitView_respond(<?php echo $print->Friend_id;?>);">
</div>
<script>
function GoView_respond(id){
console.log('hovering');
document.getElementById("pending_req_"+id).style.display="block";
}
var cl=0;
function ExitView_respond(id){
console.log('not hovering');
if(cl!=1){
document.getElementById("pending_req_"+id).style.display="none";
}
}
</script>
Well, there are various ways to achieve this.
You could for example trick by setting a little timeout that will allow the mouse to reach the user details html node and vice-versa.
Let me be more explicit, according to your case
<?php
class Friend
{
public $Friend_id;
public $Friend_details;
public $Friend_image;
public function __construct($id, $details, $image){
$this->Friend_id = $id;
$this->Friend_details = $details;
$this->Friend_image = $image;
}
}
$print = new Friend(1, 'The very first user', 'http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
?>
<img class="user_image" id="user_image_<?php echo $print->Friend_id; ?>" src="<?php echo $print->Friend_image; ?>" alt="some image" />
<div class="user_details" id="user_details_<?php echo $print->Friend_id; ?>">
<h5>User details</h5>
<?php echo $print->Friend_details; ?>
</div>
<style>
.user_details {
display: none;
background-color: lightgray;
width: 250px;
padding: 15px;
}
</style>
<script>
var userImages = document.getElementsByClassName('user_image');
for(var i = 0; i < userImages.length; i++){
var
userImage = userImages[i],
userId = userImage.id.replace('user_image_', ''),
thisUserDetails = document.getElementById('user_details_' + userId),
mouseOutTimeout = 100, // Here is the trick
mouseTimer = null; // Needed in order to hide the details after that little timeout
userImage.addEventListener('mouseout', function(){
mouseTimer = setTimeout(function(){
thisUserDetails.style.display = 'none';
}, mouseOutTimeout);
});
userImage.addEventListener('mouseover', function(){
clearTimeout(mouseTimer);
thisUserDetails.style.display = 'block';
});
thisUserDetails.addEventListener('mouseout', function(){
var _this = this;
mouseTimer = setTimeout(function(){
_this.style.display = 'none';
}, mouseOutTimeout);
});
thisUserDetails.addEventListener('mouseover', function(){
clearTimeout(mouseTimer);
});
}
</script>
Note: I've used getElementsByClassName and addEventListener here, that are not compatible with IE8 and earlier. Check this link for getElementsByClassName compatibility and this one for addEventListener.
Hope it help.
I am trying to randomly position thumbnail images on wordpress. The images should not overlap. Also, the z-index in not really working (the images should go behind all other elements).
The content is dynamically generated through a php document.
I am trying to avoid plugins so I am doing it like this:
<?php if ( has_post_thumbnail() ) : ?><div class="js-container bottomdrag">
<script type="text/javascript">
$( document ).ready(function() {
$('.js-container a').each(function() {
var height = window.innerHeight/2;
var width = window.innerWidth/2;
//This var top should provide a scroll so that the user gradually finds the images
var top = Math.floor(Math.random() * (($(window).height() * 3) - height));
var left = Math.floor(Math.random() * 55);
$(this).css({
"z-index":"-999",
"top": top,
//this margin-bottom is there to allow some space after the last image so that the user can scroll it
"margin-bottom":"30" + "vh",
"left": left + "vw",
"position":"absolute",
"display":"block",
});
});
});
</script>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?></div> <!--end of js-container-->
Would you be able to light my way?
Here is the page: http://dev.visualvisual.com/works/
This does the job better but Z-index is still not working.
<?php if ( has_post_thumbnail() ) : ?><div class="js-container bottomdrag">
<script type="text/javascript">
function randomMargin(){
$('.attachment-post-thumbnail').each(function(){
randomizeObject(this);
});
}
function randomMargin(){
$('.attachment-post-thumbnail').each(function(){
randomizeObject(this);
});
}
function randomizeObject(el){
var randomnumber1=Math.floor(Math.random()*70);
console.log(randomnumber1);
var randomnumber2=Math.floor(Math.random()*50);
console.log(randomnumber2);
$(el).css({"margin-top": randomnumber1+"vh", "margin-left": randomnumber2+"vw", "z-index":"-999"});
}
randomMargin();
</script>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?></div> <!--end of js-container-->
</a>
<?php endif; ?>
So I have a table where each cell is a name of a game and when you click it it needs to show in a fancybox the results of the user which clicked the cell (I use table Indexes to get the GameID and the Session variable to get userID) which will be used to load the results from a second PHP page.
If I click on a cell for the first time the fancybox will not display anything and after I close fancybox and click on any cell again it works fine. Am I doing something wrong?
This is the whole javascript:
$(".jogos").fancybox({
'hideOnContentClick': true,
'onComplete':function(element)
{
var gameIdx = $(element).index();
var cateIdx = $(element).parent().parent().index();
var gameIdxPHP;
var catIdxPHP;
var gameID;
var userId = '<?php echo $_SESSION['userID']; ?>'
<?php
for ($i=1; $i<= count($categoryArray);$i++)
{
for ($j=1; $j<=count($categoryArray[$i-1]->gamelist);$j++)
{
?>
catIdxPHP = '<?php echo $i ?>' -1;
gameIdxPHP = '<?php echo $j ?>' -1;
if (catIdxPHP == cateIdx && gameIdxPHP == gameIdx)
{
gameID = '<?php echo $categoryArray[$i-1]->gamelist[$j-1]->GameID; ?>';
$("#graphic").load("backoffice/resUserNivel2short.php", {userId:userId,gameID:gameID}, function(){ });
}
<?php
}
}
?>
}
});
HTML
<div style="display:none">
<div id="data">
<div id="graphic">
</div>
</div>
</div>
Sample code of the link
<a href="#data" class="jogos" id="cat<?php echo $i; ?>jogo<?php echo $j; ?>" >
You have display:none on the parent of your fancybox therefor the grafic isnt displayed.
The Grafic element isn't inside the dom yet if you use display:none initially. Try to use clip: rect instead as a class and add/remove that class using the fancybox callbacks.
Try this code:
$('.jogos').fancybox({
'onStart': function() {
$("#data").removeClass('hidden');
},
'onClosed': function() {
$("#data").addClass('hidden');
}
});
CSS:
.hidden {
clip: rect(1px 1px 1px 1px);
position: absolute;
)}
HTML:
<div>
<div id="data" class="hidden">
<div id="graphic">
</div>
</div>
</div>
I am using Fancybox jquery.I have a link when I click on this link at that time I retrieve images via AJAX.I want these images open in Fancybox directly.
This is my html code-
Store Pictures
Store Pictures
<div id="storeModal"></div>
This is my jquery code--
$(document).ready(function(){
$('.store_pictures_click').click(function(e){
e.preventDefault();
var store_name = $(this).attr('id');
$.post('<?php echo site_url("cart/change_store_pictures"); ?>',{store_name:store_name},
function(data){
$('#storeModal').html(data);
$('.fancybox').fancybox();
}
);
});
});
This is my PHP code-
$store_name = $this->input->post('store_name');
$this->load->model('Store_Pictures_model');
$data['store_pictures'] = $this->Store_Pictures_model->get_store_pictures($store_name);
echo '<p>';
foreach($data['store_pictures'] as $store_picture){
?>
<a class="fancybox" href="<?php echo base_url('uploads/images/full/'.$store_picture->store_picture); ?>" ></a>
<?php
}
echo '</p>';
But I am not able to see popup of fancybox with slider.Please help me guys.
Thanks in advance!!!
Changes in the view:
Store Pictures
Store Pictures
<script type="text/javascript">
$(function(){
$(".store_pictures_click").fancybox({
type : 'iframe',
autoSize : false,
/*beforeLoad : function() {
this.width = parseInt(this.href.match(/width=[0-9]+/i)[0].replace('width=',''));
this.height = parseInt(this.href.match(/height=[0-9]+/i)[0].replace('height=',''));
//this.width = $('.fancybox-iframe').contents().find('.fancybox-skin').width();
//this.height = $('.fancybox-iframe').contents().find('.fancybox-skin').height();
},*/
width : "710px",
height : "290px",
'scrolling' : 'no',
'titleShow' : false,
//padding : 0,
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>
Your controller:
function change_store_pictures(){
$store_name = $this->uri->segment( 3 );
$this->load->model('Store_Pictures_model');
$data['store_pictures'] = $this->Store_Pictures_model->get_store_pictures($store_name);
$this->load->view("pic_popup", $data);
}
Your pic_popup.php:
<?php
//print_r( $store_picture );
?>
<a class="fancybox" href="<?php echo base_url('uploads/images/full/'.$store_picture->store_picture); ?>" >
<img src="<?=base_url('uploads/images/full/'.$store_picture->store_picture)?>">
</a>
Hope it helps. :D
I will try to explain the best I can. Basically I have a grid (masonry) of items and I want to append ajax loaded content (wordpress single.php post) inside each grid div (red).
I have a div class called ajaxcontainer inside each red div that I populate with content. When I click the a href trigger content gets appended as it should, this works once but when I click another item in the grid the old ajaxcontainer gets populated with new content from that href. Basically duplicating.
I want the old ajaxcontainer to keep the old content even though I click another item.
HTML
<article style="background:<?php echo $color ?>;" id="post-<?php the_ID(); ?>"
<?php post_class($classes); ?>>
<div class="hover">
<h2><?php echo $head ?></h2>
<p class="tags"><?php echo $tagsstring; ?></p>
<?php echo $url ?>
<a class="trick" rel="<?php the_permalink(); ?>" href="<?php the_permalink();?>">goto</a>
</div>
<div class="thumbnail <?php echo $paddingstring?>" style="background-image:url(<?php echo $thumbnail[0] ?>);">
</div>
</article><!-- #post-## -->
What I have right now:
$.ajaxSetup({
cache: false,
success: function (result, status, xhr) {
// not showing the alert
console.log('success');
var $this = jQuery(this)
$('.ajaxcontainer', $this).hide().fadeIn();
},
beforeSend: function () {
console.log('beforesend');
$(".ajaxcontainer").html("loading...");
},
complete: function (xhr, stat) {
// hide dialog // works
}
});
$(".trick").each(function () {
$(this).on("click", function (e) {
$(this).parents('.item').append("<div class='ajaxcontainer'>hello world</div>")
var post_link = $(this).attr("href");
$(".ajaxcontainer").load(post_link + ' #content');
return false;
});
});
Any help is appreciated :)
I maybe wrong, but from what I see, if you have duplicated content, next() could help.
Something like $(this).parents('.item').next().append("hello world") in the function.