Develop Reference

Elements reverting back to original sizes after JQuery animation

So I am trying to get my header to change its size to become smaller after the user scrolls a certain distance down the page, the animations for the header to get bigger and smaller execute at the right time. Only issue is on the animation to make the header bigger, the animation happens as it should but as soon as it has finished animated the header reverts back to its original size for some reason. Not sure if this makes any difference but the header has its position set to fixed in the css. I have never come across an issue like this so have no idea what is going wrong, and googling it hasn't helped me either.
You can view the issue here: http://eventrem.com
Full Javascript:
function getScrollOffsets() {
var doc = document, w = window;
var x, y, docEl;
if ( typeof w.pageYOffset === 'number' ) {
x = w.pageXOffset;
y = w.pageYOffset;
} else {
docEl = (doc.compatMode && doc.compatMode === 'CSS1Compat')?
doc.documentElement: doc.body;
x = docEl.scrollLeft;
y = docEl.scrollTop;
}
return {x:x, y:y};
}
var IsHeaderBig;
window.onload = function() {
var offset = getScrollOffsets();
if (offset.y > 100) {
IsHeaderBig = false;
animateHeaderSmall(0);
} else {
IsHeaderBig = true;
animateHeaderBig(0);
}
}
window.addEventListener('scroll', function(){
var offset = getScrollOffsets();
if (offset.y > 100) {
//Make Small
if (IsHeaderBig) {
IsHeaderBig = false;
animateHeaderSmall(300);
}
} else {
//Make Big
if (!IsHeaderBig) {
IsHeaderBig = true;
animateHeaderBig(300);
}
}
});
function animateHeaderBig(speed) {
var header = $("#headerContainer");
var buffer = $("#homeBuffer");
header.animate({
height:'548px'
}, speed, function() {});
buffer.animate({
height:'470px'
}, speed, function() {});
}
function animateHeaderSmall(speed) {
var header = $("#headerContainer");
var buffer = $("#homeBuffer");
header.animate({
height:'100px'
}, speed, function() {});
buffer.animate({
height:'100px'
}, speed, function() {});
}

The easy solution is to handle the complete function and set the values there.
function animateHeaderBig(speed) {
var header = $("#headerContainer");
var buffer = $("#homeBuffer");
header.animate({
height:'548px'
}, {
duration: speed,
complete: function() {
$(this).css('height', '548px');
}
});
buffer.animate({
height:'470px'
}, {
duration: speed,
complete: function() {
$(this).css('height', '470px');
}
});

How to select between a list css classes

I have a div with a next and previous button
<div class="b1"></div>
<input type="button" class="btnP" value="Prev"/>
<input type="button" class="btnN" value="Next"/>
and a list of css classes
.b1 { background-color:#fff;}
.b2 { background-color:#000;}
.b3 { background-color:#123;}
.b4 { background-color:#444;}
.b5 { background-color:#bbb;}
which i want to use for that div when the user press the next or previous button by that numbering order.
This is what i did so far:
http://jsfiddle.net/51dq5num/
var size_ini = 1;
$(".btnN").click(function () {
var size_increase = size_ini++;
var size_increase1 = size_ini;
$("#content").html("<span>" + size_increase + "</span>").removeClass().addClass("b" + size_increase);
if (size_increase > 4) {
size_ini = 1;
}
});
I manage to get the next button working but i'm not sure how to do it for the previous button
Is there a better way to do this rather then adding and removing css classes from the div?

Try this :
$(".btnP").click(function () {
var size_increase = $("#content").attr("class").substring(2, 1);
size_increase--;
if (size_increase < 1) {
size_increase = 5;
}
$("#content").html("<span>" + size_increase + "</span>").removeClass().addClass("b" + size_increase);
});
jsFiddle : http://jsfiddle.net/51dq5num/7/

You can do something like this:
var newClass = function(div, next) {
div[0].className = div[0].className.replace(/b\d+/, "b" + newClass[next ? 'next' : 'prev']());
};
newClass.atual = 1;
newClass.last = 5;
newClass.next = function(){
this.atual = (this.atual == this.last ? 1 : this.atual + 1);
return this.atual;
};
newClass.prev = function(){
this.atual = (this.atual == 1 ? this.last : this.atual - 1);
return this.atual;
};
var myDiv = $("#content");
$(".btnN").click(function () {
newClass(myDiv, true);
});
$(".btnP").click(function () {
newClass(myDiv, false);
});
Jsfiddle here.

This is a combined solution for both buttons.
var size_ini = 0;
$("input[type='button']").click(function () {
if($(this).hasClass("btnN"))
{
size_ini=size_ini+1;
var c="b"+size_ini;
$("#content").removeClass().addClass(c).html("TG"+size_ini);
}
else
{
size_ini=size_ini-1;
var c="b"+size_ini;
$("#content").removeClass().addClass(c).html("TG"+size_ini);
}
});
Note as it is not mentioned i have not checked on the max condition thus btnP can increase the counter infinitely.You can put it in a condn and limit it to a max value.

http://jsfiddle.net/n8dLgh3L/1/
Here is js code to increase and decrease.
var size_ini = 0;
$(".btnN").click(function () {
if (size_ini > 4) {
size_ini = 1;
} else {
size_ini++
}
$("#content").html("<span>" + size_ini + "</span>").removeClass().addClass("b" + size_ini);
});
$(".btnP").click(function () {
var size_decrease = $("#content").attr("class").substring(1, 2);
if (size_decrease <= 1) {
size_decrease = 5;
} else {
size_decrease--;
}
$("#content").html("<span>" + size_decrease + "</span>").removeClass().addClass("b" + size_decrease);
});

You ca achieve this with the help of .substr() for incrementing the number of class. Have a look.
function Getnumber(classNumber,nav)
{
var no=0;
if(nav=="P")
{
no=parseInt(classNumber.substr(1,2))-1;
}
else
{
no=parseInt(classNumber.substr(1,2))+1;
}
return no;
}
$(".btnN").on("click",function(){
var oldClass=$('div').attr("class");
var num=Getnumber(oldClass,"N");
if(num<6)
$('div').addClass("b"+num).removeClass(oldClass);
});
$(".btnP").on("click",function(){
var oldClass=$('div').attr("class");
var num=Getnumber(oldClass,"P");
if(num>0)
$('div').addClass("b"+num).removeClass(oldClass);
});
Feel free to ask.

Animation ( bar fills up over time ) with Jquery (Suggestion)

I would like to replicate the same functionality as at ign.com, where the indicator bar fills up over time. I got it working but I got some sync issues after a while. So i'm open to suggestions to do it from scratch (I'm beginner with all this animation stuff).
This is the code.
function GoProgressBar() {
var $lineStatus = $('.featured-articles-line-status');
$lineStatus.css('width', '0px');
$lineStatus.animate({ width: '694px' }, 12000, 'linear', GoProgressBar);
};
function GoOverlay(width, isLast, currentWidth) {
var $overlayLine = $('.status-overlay');
if (isLast) {
$overlayLine.css('width', '0px');
return;
}
if (currentWidth) {
$overlayLine.css('width', currentWidth);
$overlayLine.animate({ width: width }, 700);
} else {
$overlayLine.css('width', '0px');
$overlayLine.animate({ width: width }, 700);
}
};
function ShowNextElement() {
var $elements = $('.element'),
$overlayLine = $('.status-overlay'),
$liElements = $('#elements li'),
width;
if (currentElement === elements[elements.length - 1]) {
currentWidth = $overlayLine.width() + 'px',
width = currentWidth + $($liElements[(elements.length - 1)]).outerWidth() + 'px';
GoOverlay(width, true, currentWidth);
currentElement = elements[0];
$elements.hide();
$(currentElement).fadeIn(1000);
return;
}
i = elements.indexOf(currentElement) + 1;
var currentTab = $liElements[(i - 1)],
currentWidth = $overlayLine.width();
if (currentWidth) {
width = currentWidth + $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, currentWidth);
} else {
width = $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, false);
}
currentElement = elements[i];
$elements.hide();
$(currentElement).fadeIn(1000);
}
Thanks!

http://jqueryui.com/progressbar/
You could try this..
There are more features in addition to this,check it out.
Might come useful :)

There are a wealth of ways in which you could do this.
You should have some kind of controller to manage the show and hide.
var Application = {
show : function() {
jQuery('.application-overlay').stop().animate({ top: 40 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 1000},500);
},
hide : function() {
jQuery('.application-overlay').stop().animate({ top: -1200 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 200},500);
}
};
Then you have your triggers : Application.show();
jQuery(document).ready(function() {
jQuery('.cf-speakers .span2 a').hover(function() {
jQuery('span',this).stop().animate({ opacity: 1.0 },100);
}, function() {
jQuery('span',this).stop().animate({ opacity: 0.0 },100);
});;
jQuery('.apply-now').click(function(e) {
Application.show();
e.stopPropagation();
e.preventDefault();
});
jQuery('body').click(function(e) {
var application = jQuery('.application-overlay');
if( application.has(e.target).length === 0)
Application.hide();
});
jQuery('.gallery a').click(function(e) {
var src = jQuery(this).attr('href');
jQuery('.main-container img').hide().attr('src', src).fadeIn('fast');
jQuery('.gallery a').each(function() {
jQuery(this).removeClass('active');
});
jQuery(this).addClass('active');
e.stopPropagation();
e.preventDefault();
});
});
Your css would of course come into play also but that can be left to you!
This should give you an example of what you need .. But you're already on the right track, sometimes there is merit in reusing other people code too you know! :)

Keep dropdown open on hover jQuery

I'm making a quick animated drop down. I have it working great when you mouseover and mouseout on the initial button. I just cant get the HTML div that drops down to "hold" when you're hovered on the dropdown itself. here is a fiddle of what I'm doing: http://jsfiddle.net/kAhNd/
here's what I'm doing in the JS:
$('.navBarClickOrHover').mouseover(function () {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '200px'
});
}).mouseout(function () {
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
} else {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '0px'
});
}
});
It works, but the element doesn't stay dropped down when you have your mouse over it. I added in
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
}
to try to make it do nothing when you're hovered over '.dropdownCont'.
Having a hard time explaining it. I'm sorry, I hope I make sense. Any help would be awesome! here's my Fiddle: http://jsfiddle.net/kAhNd/

Here is your code transformed http://jsfiddle.net/krasimir/kAhNd/3/
var button = $('.navBarClickOrHover');
var isItOverTheDropdown = false;
var showDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '200px'
});
targetDropDown.off("mouseenter").on("mouseenter", function() {
isItOverTheDropdown = true;
});
targetDropDown.off("mouseleave").on("mouseleave", function() {
isItOverTheDropdown = false;
hideDropDown();
});
}
var hideDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '0px'
});
}
$('.navBarClickOrHover').mouseover(function () {
showDropDown();
}).mouseout(function () {
setTimeout(function() {
!isItOverTheDropdown ? hideDropDown : '';
}, 500);
});
I guess that this is what you want to achieve.

Need to add a delay on mouse-out to this code

This is some javascript for a drupal 6.x module called "Views Popup".
https://drupal.org/project/views_popup
I can't seem to set a delay on the popup when the mouse moves off the link that triggers the popup. I have the title, teaser text and a more link in the popup and users need to be able to move the mouse off the link (image) in order to click on the "read more" link. I've tried adjusting all the settings in the code below, but none seem to relate to this. I'm not a coder, but I think something needs to be added to make this work. Any suggestions would be greatly appreciated.
Here's the code:
var popup_time = 0;
var popup_elem = 0;
var popup_show_timer = 0;
var popup_reset_timer = 0;
$(function() {
popup_reset();
$(".views-popup").appendTo("body");
});
Drupal.behaviors.viewsPopup = function(context) {
$(".views-popup-row").mouseover(function() {
popup_show(this);
})
.mouseout(function() {
popup_hide(this);
})
.mousemove(function(e) {
popup_move(this,e);
});
}
function popup_move(me,evt){
var e, top, left;
if (Drupal.settings.views_popup.follow_mouse){
left = evt.pageX + 15;
top = evt.pageY;
$("#views-popup-" + $(me).attr("id")).css({
left: left + 'px',
top: top + 'px'
});
}
}
function popup_show(me) {
var p, e, top, left, pos ;
var x = $(me).attr("id");
e = $("#views-popup-" + $(me).attr("id"));
if (e == popup_elem) {
return ; // already handled
}
if (! Drupal.settings.views_popup.follow_mouse){
pos = $(me).offset();
left = 20 + pos.left - $(document).scrollLeft();
top = 2 + pos.top + $(me).outerHeight() - $(document).scrollTop();
$(e).css({
left: left + 'px',
top: top + 'px'
});
}
popup_clear_show_timer();
if (popup_elem) {
popup_elem.hide();
popup_time = 500 ;
}
popup_elem = e;
if ( popup_time == 0 ) {
popup_show_now();
} else {
popup_show_timer = setTimeout("popup_show_now();",popup_time);
}
}
function popup_show_now() {
popup_show_timer = 0 ;
if(popup_elem) {
popup_elem.show();
clearTimeout(popup_reset_timer);
popup_time = 0;
}
}
function popup_clear_show_timer(){
if (popup_show_timer) {
clearTimeout(popup_show_timer);
popup_show_timer = 0;
}
}
function popup_hide(me) {
e = $("#views-popup-" + $(me).attr("id"));
popup_clear_show_timer();
clearTimeout(popup_reset_timer);
e.hide();
if(e == popup_elem) {
popup_elem = 2;
}
popup_reset_timer = setTimeout('popup_reset()',Drupal.settings.views_popup.reset_time);
}
function popup_reset(){
popup_time = Drupal.settings.views_popup.popup_delay;
}

So, assuming the above code works how you want -- and that you want to set a delay for the popup to hide, what you can do is call javascript's setTimeout(function, delay) function, which initiates a callback after delay milliseconds.
function popup_hide(me) {
e = $("#views-popup-" + $(me).attr("id"));
popup_clear_show_timer();
clearTimeout(popup_reset_timer);
var delay = 1000; // ms
setTimeout(e.hide, delay); // <------- here
if(e == popup_elem) {
popup_elem = 2;
}
popup_reset_timer = setTimeout('popup_reset()',Drupal.settings.views_popup.reset_time);
}
This will call e.hide (the function) after 1 second has passed.