i have a jquery for the bar following when scroll down/up but it has delay
CSS
#rightbar_scroll {position: absolute;top: 0;right: 0;z-index: 10000; }
jQuery(document).ready(function(){
var jQuerysidebar = jQuery("#rightbar_scroll"),
jQuerywindow = jQuery(window),
offset = jQuerysidebar.offset(),
topPadding = 20;
jQuerywindow.scroll(function() {
if (jQuerywindow.scrollTop() > offset.top) {
jQuerysidebar.stop().animate({
marginTop: jQuerywindow.scrollTop() - offset.top + topPadding
});
} else {
jQuerysidebar.stop().animate({
marginTop: 0
});
}
});
});
i want it no delay, how do i add position like the box "Similar Questions" at the right side when ask question in this site?
Thank you, sorry my English not good
Try to use jQuery.css() instead jQuery.animate()
jQuerysidebar.css({
marginTop: jQuerywindow.scrollTop() - offset.top + topPadding
});
Change the position of #rightbar_scroll to fixed, if the page is scrolled >= offset.top
And don't forget to change it back to absolute, if the page is scrolled back again...
Related
I have a JavaScript code which is going to go on a WordPress CMS in the index.php file of my theme (see javascript code below). I have succeeded in making the scroll work, but when I resize the window (when the responsiveness sets in) the banner goes all the way to the left of my screen. I had thought that by disabling the JavaScript with a plain div tag, the responsiveness work. So I figured out that if I disable the JavaScript at that point when the width of the containing tag was less than 600 I could make it work (by simply removing the JavaScript). It does not work.
I am not sure that the JavaScript solution is the best solution. Can anyone help? Any suggestions will be welcomed...
<script type = "text/javascript" >
$(document).ready(function () {
var $sidebar = $(".follow-scroll"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 20;
$window.scroll(function () {
//disable javascript if width larget less than 600
if ($('.outern').width() < 600) {
return;
} else {
//enable scroll folowing feature otherwise
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 20
});
}
}
});
});
</script>
Thank you
jQuery's resize() listens for when the windows width/height changes.
I am using this jquery to move towards a map after a selection with . I want to only do it when the browser is less than 1000px but the layout shifts to a top down layout.
$(document).ready(function() {
$( ".mapjumpul li:nth-last-child(2)" ).append("<a id='mapjump2'></a>");
});
U should be able to do this with mediaqueries as well :
#mapjump2 {
display : none;
}
#media (min-height: 1000px) {
#mapjump2 {
display : inline;
}
}
I would do this with JQuery
<script>
var screen = $(window)
if (screen.width < 1000) {
$( ".mapjumpul li:nth-last-child(2)" ).append("<a id='mapjump2'></a>");
}
</script>
So I have the code:
header("Location: ".$config['site_url']."index.php#login-box");
Which is my attempt to trigger the html code for a jquery login form if the user is not logged in:
<li><a class="log" href="#login-box"><span class="hover" style="opacity: 0;"></span></a></li>
But when it runs all it does is add #login-box to then end of my url and doesn't trigger the #login-box href. Pretty lame attempt I know, but any ideas?
This is the jquery script, how would I add the code you mentioned to it properly?
$(document).ready(function() {
$('a.login-window2').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
Here is a little snippet that should do the trick, using jQuery as you mentioned:
$(function(){
$("a.login-window2").click(function(){
//Getting the variable's value from a link
var loginBox = $(this).attr("href");
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
"margin-top" : -popMargTop,
"margin-left" : -popMargLeft
});
// Add the mask to body
$("body").append("<div id=\"mask\"></div>");
$("#mask").fadeIn(300);
return(false);
});
// When clicking on the button close or the mask layer the popup closed
$("a.close, #mask").live("click", function(){
$("#mask , .login-popup").fadeOut(300, function(){
$("#mask").remove();
});
return(false);
});
// Check the hash
var hash = $(location).attr("hash");
if(hash == "#login-box") {
$("a.login-window2").click();
}
});
Put this in your index.php file and run your code from inside the if statement.
It's a mistake in your code.
Use: name="#login-box"
instead of: href="#login-box"
I am using the jquery masonry on my website http://zakiyadavidson.com.
I am wanting to do a rollover effect such as what is on http://damiencorrell.com/. My end result would be when you rollover a picture text appears.
I attempted to add in the below js code:
//Set div dimensions equal to image's dimensions:
$('#image_holder1').width($('#image_1').width());
$('#image_holder1').height($('#image_1').height());
$('#image_1').each(function(){
//set css of right:
$(this).css({right: '-' + $(this).width() + 'px'})})
//tell the browser what to do when hovering on the div:
$('#image_holder1').hover(function() {
//when mouse hover:
$('#image_0').animate({
right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
},
function() {
//when mouse out, no hover:
$('#image_0').animate({
right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
});
Along with the above js code I added in the css block below:
#image_holder1 {
overflow: hidden;
}
.image1 {
position: absolute;
}
The masonry html looks like the below with the above added changes:
<div class="box photo col3" id="image_holder1">
<img id="image_0" src="image_17.jpg" title="Family First" alt="Family First" />
<img id="image_1" src="image_17Hover.jpg" />
...
Rather than the images showing as you mouse over you are able to see it soon as you load the page. The masonry layout is now not aligned properly. Is it because I have the function under the onload event? Any assistance is greatly appreciated.
I figured it out!!!
A simple Jquery script does the trick and will allow you to do as many pictures as necessary!!
<script>
jQuery(function () {
$(".imgSwap img").hover(function () {
this.src = this.src.replace("_off", "_on");
}, function () {
this.src = this.src.replace("_on", "_off");
});
});
</script>
I hope this helps others of you.
You can check out the working script by going to my site http://zakiyadavidson.com
I have a pinterest style site and made a jquery script that spaces the cubes evenly no matter how big the browser is. For some reason on page load it has some overlapping cubes which didn't exist before. I talked with the guy that helped me make it and he said it's probly because of the code before the code that creates the blocks and positions them. It crashes the javascript.
I think it's because of the $(window).scroll ajax loading code but I can't seem to pinpoint the problem. I tried moving positionBlocks(); around and nothing changes. If you load the page in your browser and then change your browser size then it positions them correctly but obviously I want it to look right when the user first gets there.
function setupBlocks() {
windowWidth = $(window).width();
blocks = [];
// Calculate the margin so the blocks are evenly spaced within the window
colCount = Math.floor(windowWidth/(colWidth+margin*2));
spaceLeft = (windowWidth - ((colWidth*colCount)+margin*2)) / 2;
spaceLeft -= margin;
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.block').each(function(i){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':(leftPos+spaceLeft)+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
}
// Function to get the Min value in Array
Array.min = function(array) {
return Math.min.apply(Math, array);
};
var curlimit=<?php echo $curlimit; ?>;
var totalnum=<?php echo $num_rws; ?>;
var perpage=<?Php echo $perpage ?>;
var working_already=false;
$(document).ready(function() {
//($(window).scrollTop() + $(window).height() )> $(document).height()*0.8
// old ($(window).scrollTop() + $(window).height() == $(document).height())
$(window).resize(setupBlocks);
$(window).scroll(function() {
if(($(window).scrollTop() + $(window).height() )> $(document).height()*0.90 && totalnum>0 && working_already==false ) {
} else return false;
working_already=true;
$("div#loading_bar").fadeIn("slow");
curlimit=curlimit+perpage;
$("div#loading_data_location").html("");
$.get('get_cubes.php?page=<?php echo $_GET['page'] ?>&curlimit='+curlimit, function(response) {
$("div#loading_data_location").html(response);
$("div#ColumnContainer").append($("div#loading_data_location").html());
$("a#bigpic").fancybox({
'onComplete' : imageLoadComplete,
'onClosed' : imageClosed,
'type': 'ajax' });
if ($("div#loading_data_location").text()=="")
totalnum=0;
else
totalnum=<?php echo $num_rws; ?>;
$('.like:not(.liked)').click(like_box);
$('.save:not(.saved)').click(save_box);
$('.follow:not(.following)').click(follow);
$("div#loading_bar").fadeOut("fast");
$("div#loading_data_location").html('');
setupBlocks();
working_already=false;
});
});
I had to add this to the end of my script:
<script language="javascript">
$(window).bind("load", function() {
setupBlocks();
});
</script>
and then this to the end of the on scroll ajax load. Sometimes jquery just needs a little kick in the face haha:
setTimeout(function(){setupBlocks();},100);