I first do this and it works:
$(document).ready(function() {
var delay = 0;
var myLeft = $("#container").offset().left;
var myRight = myLeft + $("#container").outerWidth();
var newWidth = $("#container").width();
$("#head").animate({width: newWidth});
$("#head").css("marginLeft", myLeft).css("marginRight", myRight);
$('.box').each(function() {
$(this).delay(delay).fadeIn();
delay += 250;
});
});
Then i run this but it does't work, ideally it would have to work on each window resize:
function doSomething() {
var myLeft = $("#container").offset().left;
var myRight = myLeft + $("#container").outerWidth();
var newWidth = $("#container").width();
$("#head").animate({width: newWidth});
$("#head").css("marginLeft", myLeft).css("marginRight", myRight);
};
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});
But it looks like as the new sizes are not applied each time there is a window resize, anyone?
Try
$("#head").css("margin-left", myLeft + "px").css("margin-right", myRight + "px");
You also seam to be using an unnecessary "each" clause as you're not doing anything for each box, only on #head. Are you sure you mean that?
window resize was happening before the new values were set therefore the trick was to include a timer delay for the window resize event:
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
});
$(window).resize(function() {
delay(function(){
if ($("#head").width() != $("#container").width()){
var myLeft = $("#container").offset().left;
var newWidth = $("#container").innerWidth();
var myRight = $(window).width() - ($("#container").offset().left + $("#container").outerWidth());
$("#head").animate({ width: newWidth, marginLeft: myLeft, marginRight: myRight }, "fast");
}
}, 1000);
});
Related
Currently I have a script which starts a progress bar the moment a user starts scrolling.
Is it possible to change this to when the user gets to 340px from the top of the page?
Here is a demo of my site: http://pixsols.com/test/wordpress/reading-progress/
Here is my current code:
(function ( $ ) {
$.fn.progressScroll = function(options) {
var settings = $.extend({
fontSize : 20,
color : '#009ACF',
height : '5px',
textArea : 'dark',
}, options);
// element state info
var docOffset = $(this).offset().top,
elmHeight = $(this).height(),
winHeight = $(window).height();
// listen for scroll changes
$(window).on('scroll', function() {
var docScroll = $(window).scrollTop(),
windowOffset = docOffset - docScroll,
viewedPortion = winHeight + docScroll - docOffset;
if($(window).scrollTop() > 0) {
if($('.scrollWrapper').hasClass('hidden')) {
$('.scrollWrapper').removeClass('hidden').hide();
$('.scrollWrapper').slideDown('slow');
}
} else {
$('.scrollWrapper').slideUp('slow');
$('.scrollWrapper').addClass('hidden');
}
if(viewedPortion < 0) { viewedPortion = 0; }
if(viewedPortion > elmHeight) { viewedPortion = elmHeight; }
// calculate viewed percentage
var viewedPercentage = viewedPortion / elmHeight;
// set percent in progress element
$('.scroll-bar').css('width', (viewedPercentage*100)+'%' );
});
var self = this;
$(window).on('resize', function() {
docOffset = $(self).offset().top;
elmHeight = $(self).height();
winHeight = $(window).height();
$(window).trigger('scroll');
});
$(window).trigger('scroll');
var $el = $('.scroll-bar').css(settings);
return $el;
};
}( jQuery ));
My guess would be to manipulate this:
windowOffset = docOffset - docScroll,
Probably you should add or subtract 320px from windowOffset. So for example"
windowOffset = docOffset - docScroll + 320,
i am trying to get a div to slide down about 200px down a page using javascript when the user clicks another div which acts as a close button.
can someone please show me how i would do this?
<script>
$('.chat_close').click(function(e){
$('.chat_box').slideDown();
});
</script>
Someone already asked the same question a while ago. Avinash replied:
var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;
window.onload = function() {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px'; //not so imp,just for my example
controler.onclick = function() {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height); // Current height
var init = (new Date()).getTime(); //start time
var height = (toggled = !toggled) ? maxheight: minheight; //if toggled
var disp = height - parseInt(slider.style.height);
timer = setInterval(function() {
var instance = (new Date()).getTime() - init; //animating time
if(instance <= time ) { //0 -> time seconds
var pos = instanceheight + Math.floor(disp * instance / time);
slider.style.height = pos + 'px';
}else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
}
},1);
};
};
You can see it here at this URL:
http://jsbin.com/azewi5
Use animate
Also, use .on
<script type="text/javascript">
$('.chat_close').on('click', function(e){
$('.chat_box').animate({"top": "200px");
});
</script>
HTML:
<div class="chat_close">
</div>
Is it possible of getting the width/height of browser each time BEFORE the resize() is triggered?
$(window).resize(function() {
});
This is due to I'm calculating the difference before/after browser has resize().
You would have to store the previous value, a little like this
var prevHeight = 0;
var prevWidth = 0;
$(document).ready(function() {
prevHeight = $(window).height();
prevWidth = $(window).width();
});
$(window).resize(function() {
var currentHeight = $(window).height();
var currentWidth = $(window).width();
//do difference stuff
prevHeight = currentHeight;
prevWidth = currentWidth;
});
I'm new to Stack Overflow, so excuse me if I'm completely doing something I shouldn't be doing, and let me know so I can learn.
Anyway! The code:
$(document).ready(function() {
var imgWidth = $(".window").width();
var imgSize = $(".image_reel img").size();
var imgReelWidth = imgWidth * imgSize;
$(".image_reel").css({
width: imgReelWidth});
var num = 960;
var numImgs = $('div.image_reel img').length;
var currentSlide = 0;
setInterval(function() {
currentSlide++;
if (currentSlide != numImgs) {
$(".image_reel").animate({
left: -num
}, 1000);
}
else {
var setWidth = numImgs - 1;
var newSlideNum = num * setWidth;
$(".image_reel").animate({
left: newSlideNum
}, 1000);
currentSlide = 0;
}
}, 2000);
});
What this code is supposed to be doing (or at least I thought it was...) is that after 2 seconds, it will loop through the if statement and check if the "current slide" is equal to the amount of images there are. Now I checked with the alert function to see if all the numbers are correct and they are, but for some reason, the slider is only working once, and that's it. Any ideas why?
Thanks in advance guys.
This might be your problem:
var numImgs = $('div.image_reel img').length;
This holds the number of images at the moment it's called, not every time you call it. Replace numImgs with $('div.image_reel img').length in your code, and see if it works:
$(document).ready(function() {
var imgWidth = $(".window").width();
var imgSize = $(".image_reel img").size();
$(".image_reel").css('width', imgWidth * imgSize);
var num = 960;
var currentSlide = 0;
var setWidth = 0;
var newSlideNum = 0;
setInterval(function() {
currentSlide++;
if (currentSlide < $('div.image_reel img').length) {
$(".image_reel").animate({left: -num}, 1000);
} else {
setWidth = numImgs - 1;
newSlideNum = num * setWidth;
$(".image_reel").animate({left: newSlideNum}, 1000);
currentSlide = 0;
}
}, 2000);
});
I am doing a small javascript animation. this is my code :
window.onload = function () {
var heading = document.getElementsByTagName('h1')[0];
heading.onclick = function () {
var divHeight = 250;
var speed = 10;
var myInterval = 0;
alert(divHeight);
slide();
function slide() {
if (divHeight == 250) {
myInterval = setInterval(slideUp, 30);
} else {
myInterval = setInterval(slideDwn, 30);
alert('i am called as slide down')
}
}
function slideUp() {
var anima = document.getElementById('anima');
if (divHeight <= 0) {
divHeight = 0;
anima.style.height = '0px';
clearInterval(myInterval);
} else {
divHeight -= speed;
if (divHeight < 0) divHeight = 0;
anima.style.height = divHeight + 'px';
}
}
function slideDwn() {
var anima = document.getElementById('anima');
if (divHeight >= 250) {
divHeight = 250;
clearInterval(myInterval);
} else {
divHeight += speed;
anima.style.height = divHeight + 'px';
}
}
}
}
i am using above code for simple animation. i need to get the result 250 on the first click, as well second click i has to get 0 value. but it showing the 250 with unchanged. but i am assigning the value to set '0', once the div height reached to '0'.
what is the issue with my code? any one help me?
Everytime you click on the div the divHeight variable is reset to 250, thus your code never calls slideDwn. Moving the divHeight declaration outside the event handler should do the trick.
Also, your div wont have the correct size when any of the 2 animations end. You're setting the divHeight variable to 250 or 0 correctly, but never actually setting anima.style.height after that.
I've rewritten your code into something simpler and lighter. The main difference here is that we're using a single slide() function here, and that the height of the div in question is stored in a variable beforehand to ensure that the element slides into the correct position.
Note that this is a very simplistic implementation and assumes that the div carries no padding. (The code uses ele.clientHeight and ele.style.height interchangeably, which admittedly, is a pretty bad choice, but is done here to keep the code simple)
var heading = document.getElementsByTagName('h1')[0],
anima = document.getElementById('anima'),
divHeight = anima.clientHeight,
speed = 10,
myInterval = 0,
animating = false;
function slide(speed, goal) {
if(Math.abs(anima.clientHeight - goal) <= speed){
anima.style.height = goal + 'px';
animating = false;
clearInterval(myInterval);
} else if(anima.clientHeight - goal > 0){
anima.style.height = (anima.clientHeight - speed) + 'px';
} else {
anima.style.height = (anima.clientHeight + speed) + 'px';
}
}
heading.onclick = function() {
if(!animating) {
animating = true;
var goal = (anima.clientHeight >= divHeight) ? 0 : divHeight;
myInterval = setInterval(slide, 13, speed, goal);
}
}
See http://www.jsfiddle.net/yijiang/dWJgG/2/ for a simple demo.
I've corrected your code a bit (See working demo)
window.onload = function () {
var heading = document.getElementsByTagName('h1')[0];
var anima = document.getElementById('anima');
var divHeight = 250;
heading.onclick = function () {
var speed = 10;
var myInterval = 0;
function slideUp() {
divHeight -= speed;
if (divHeight <= 0) {
divHeight = 0;
clearInterval(myInterval);
}
anima.style.height = divHeight + 'px';
}
function slideDwn() {
divHeight += speed;
if (divHeight >= 250) {
divHeight = 250;
clearInterval(myInterval);
}
anima.style.height = divHeight + 'px';
}
function slide() {
console.log(divHeight )
if (divHeight == 250) {
myInterval = setInterval(slideUp, 30);
} else {
myInterval = setInterval(slideDwn, 30);
}
}
slide();
}
}