I have a pop-up for a website that asks the user to sign up if they aren't already signed in. I'm using a script called "subscribe-better.js" (https://github.com/peachananr/subscribe-better) and this works great for loading the popup when the user first enters the site.
However, I want this pop-up to show when a user clicks a button. This is my button:
<div id="popClick" class="button btn">Sign Up to Proceed</div>
and here is how I am calling the pop-up:
<script>
$(document).ready(function() {
$(".subscribe-me2").subscribeBetter({
trigger: "onclick",
animation: "fade",
delay: 0,
showOnce: true,
autoClose: false,
scrollableModal: false
});
});
</script>
<div class="subscribe-me2">
Sample Pop Up Content Here
</div>
And the code to make it pop-up. You'll see I've added the case for onclick but nothing is happening when I click my button. I also tried instead of document.ready() to call the pop-up within a $('#popClick').click() but that didn't make the pop-up appear either. How can I fix the switch statement to make the pop-up appear when the #popClick button is clicked?
!function($){
var defaults = {
trigger: "atendpage", // atendpage | onload | onidle
animation: "fade", // fade | flyInRight | flyInLeft | flyInUp | flyInDown
delay: 0,
showOnce: true,
autoClose: false,
scrollableModal: false
};
$.fn.subscribeBetter = function(options){
var settings = $.extend({}, defaults, options),
el = $(this),
shown = false,
animating = false;
el.addClass("sb");
$.fn.openWindow = function() {
var el = $(this);
if(el.is(":hidden") && shown == false && animating == false) {
animating = true;
setTimeout(function() {
if (settings.scrollableModal == true) {
if($(".sb-overlay").length < 1) {
$("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div><div class='sb sb-withoverlay'>" + $(".sb").html() + "</div></div>");
$(".sb-close-backdrop, .sb-close-btn").one("click", function() {
$(".sb.sb-withoverlay").closeWindow();
return false;
});
$(".sb.sb-withoverlay").removeClass("sb-animation-" + settings.animation.replace('In', 'Out')).addClass("sb-animation-" + settings.animation);
setTimeout(function(){
$(".sb.sb-withoverlay").show();
$("body").addClass("sb-open sb-open-with-overlay");
}, 300);
}
} else {
if ($(".sb-overlay").length < 1) {
$("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div></div>");
$(".sb").removeClass("sb-animation-" + settings.animation.replace('In', 'Out')).addClass("sb-animation-" + settings.animation);
$(".sb-close-backdrop, .sb-close-btn").one("click", function() {
$(".sb").closeWindow();
return false;
});
setTimeout(function(){
$(".sb").show();
$("body").addClass("sb-open");
}, 300);
}
}
if (settings.showOnce == true) shown = true;
animating = false;
}, settings.delay);
}
}
$.fn.closeWindow = function() {
var el = $(this);
if(el.is(":visible") && animating == false) {
animating = true;
if (settings.scrollableModal == true) {
$(".sb.sb-withoverlay").removeClass("sb-animation-" + settings.animation).addClass("sb-animation-" + settings.animation.replace('In', 'Out'));
setTimeout(function(){
$(".sb.sb-withoverlay").hide();
$("body").removeClass("sb-open sb-open-with-overlay");
setTimeout(function() {
$(".sb-overlay").remove();
}, 300);
}, 300);
} else {
$(".sb").removeClass("sb-animation-" + settings.animation).addClass("sb-animation-" + settings.animation.replace('In', 'Out'));
setTimeout(function(){
$(".sb").hide();
$("body").removeClass("sb-open");
setTimeout(function() {
$(".sb-overlay").remove();
}, 300);
}, 300);
}
animating = false;
}
}
$.fn.scrollDetection = function (trigger, onDone) {
var t, l = (new Date()).getTime();
$(window).scroll(function(){
var now = (new Date()).getTime();
if(now - l > 400){
$(this).trigger('scrollStart');
l = now;
}
clearTimeout(t);
t = setTimeout(function(){
$(window).trigger('scrollEnd');
}, 300);
});
if (trigger == "scrollStart") {
$(window).bind('scrollStart', function(){
$(window).unbind('scrollEnd');
onDone();
});
}
if (trigger == "scrollEnd") {
$(window).bind('scrollEnd', function(){
$(window).unbind('scrollStart');
onDone();
});
}
}
switch(settings.trigger) {
case "atendpage":
$(window).scroll(function(){
var yPos = $(window).scrollTop();
if (yPos >= ($(document).height() - $(window).height()) ) {
el.openWindow();
} else {
if (yPos + 300 < ($(document).height() - $(window).height()) ) {
if(settings.autoClose == true) {
el.closeWindow();
}
}
}
});
break;
case "onload":
$(window).load(function(){
el.openWindow();
if(settings.autoClose == true) {
el.scrollDetection("scrollStart", function() {
el.closeWindow();
});
}
});
break;
case "onidle":
$(window).load(function(){
el.scrollDetection("scrollEnd", function() {
el.openWindow();
});
if(settings.autoClose == true) {
el.scrollDetection("scrollStart", function() {
el.closeWindow();
});
}
});
break;
case "onclick":
$('#popClick').click(function(){
el.openWindow();
});
break;
}
}
}(window.jQuery);
I believe the problem is that you're using 'showOnce' which globally limits the popup from showing more than once. So, your onclick probably is firing (I'd suggest adding a console.log in to be sure) but then if(el.is(":hidden") && shown == false && animating == false) { in the openWindow function is no longer true.
Related
I am working on this demo. Why is click on event causing to jump to odd numbers instead of incrementing one by one?
$(function() {
var action;
$(".number-spinner button").mousedown(function () {
btn = $(this);
input = btn.closest('.number-spinner').find('input');
btn.closest('.number-spinner').find('button').prop("disabled", false);
if (btn.attr('data-dir') == 'up') {
action = setInterval(function(){
if ( input.attr('max') == undefined || parseInt(input.val()) < parseInt(input.attr('max')) ) {
input.val(parseInt(input.val())+1);
}else{
btn.prop("disabled", true);
clearInterval(action);
}
}, 50);
} else {
action = setInterval(function(){
if ( input.attr('min') == undefined || parseInt(input.val()) > parseInt(input.attr('min')) ) {
input.val(parseInt(input.val())-1);
}else{
btn.prop("disabled", true);
clearInterval(action);
}
}, 50);
}
}).mouseup(function(){
clearInterval(action);
});
});
var tab = null;
var menuSelector = null;
jQuery(function ($) {
console.log('test');
//howtos tab
function changeMenuSelector() {
if ($( document ).width() > 967) {
menuSelector = 'top-menu-nav';
} else {
menuSelector = 'mobile_menu';
}
}
changeMenuSelector();
$( window ).resize(function() {
changeMenuSelector();
});
$('#'+menuSelector+' a[href*="howtos"]').on('click', function(event){
var e = event;
var $ = jQuery;
setTimeout(function () {
e.preventDefault();
console.log('pluto');
window.localStorage.setItem('tab', 'et_pb_tab_0');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
window.localStorage.removeItem('tab');
}
},1000);});
$('#'+menuSelector +' a[href*="projects"]').on('click', function(e){
e.preventDefault();
console.log('pluto');
localStorage.setItem('tab', 'et_pb_tab_1');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
localStorage.removeItem('tab');
}
});
$('#'+menuSelector +' a[href*="reviews"]').on('click', function(e){
e.preventDefault();
console.log('pluto');
localStorage.setItem('tab', 'et_pb_tab_2');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
localStorage.removeItem('tab');
}
});
$('#'+menuSelector +' a[href*="elearning"]').on('click', function(e){
e.preventDefault();
console.log('pluto');
localStorage.setItem('tab', 'et_pb_tab_3');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
localStorage.removeItem('tab');
}
});
$('#'+menuSelector +' a[href*="others"]').on('click', function(e){
e.preventDefault();
console.log('pluto');
localStorage.setItem('tab', 'et_pb_tab_4');
if(window.location.pathname.indexOf('blog-posts') === -1)
{
window.location.href='http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li."+tab+">a")[0].click();
localStorage.removeItem('tab');
}
});
if (!!localStorage.getItem('tab')) {
tab = localStorage.getItem('tab');
console.log(tab);
setTimeout(function(){$("li."+tab+">a")[0].click();}, 1)
$("html, body").animate({ scrollTop: $('.et_pb_module.et_pb_tabs.et_pb_tabs_0').offset().top },
1000);
localStorage.removeItem('tab');
}
});
I have created a script to show tabs in Divi when you click on a menu entry. Divi does not use ids and hrefs for this, so I had to use a script.
The problem that I am facing is that this script that I made does not work with Divi's mobile menu.
I checked if menuSelector changed properly and if changeMenuSelector got executed as expected.
Furthermore, $('#'+menuSelector+' a[href*="howtos"]').length returns 1 in console and if I run $('#'+menuSelector+' a[href*="howtos"]')[0] in console I obtain the expected DOM element whehter I have the browser window sized for mobile or for desktop devices.
I also tried using setTimeout in case the issue was that it needed some time to accomplish an earlier action without any luck.
Therefore, is there anyone that could tell me why this does not work when the website is running in mobile mode?
I solved the issue by refactoring the code like this:
jQuery(function ($) {
console.log('test');
var tab = null;
var menuSelector = null;
var guard = false;
function changeMenuSelector() {
if ($(document).width() > 967) {
menuSelector = 'top-menu-nav';
guard = false;
initEventListeners(guard);
} else {
menuSelector = 'mobile_menu';
guard = true;
initEventListeners(guard);
}
}
function initEventListeners(guard) {
var localGuard = null;
if (localGuard != guard) {
var hrefs = ['howtos', 'projects', 'reviews', 'elearning', 'others'];
hrefs.forEach(
function (element, index, array) {
$('#' + menuSelector + ' a[href*="' + element + '"]').off();
console.log(element);
$('#' + menuSelector + ' a[href*="' + element + '"]').on('click', function (e) {
e.preventDefault();
console.log('pluto');
window.localStorage.setItem('tab', 'et_pb_tab_' + index);
if (window.location.pathname.indexOf('blog-posts') === -1) {
window.location.href = 'http://www.davidepugliese.com/blog-posts/';
} else {
tab = localStorage.getItem('tab');
$("li." + tab + ">a")[0].click();
$("html, body").animate({ scrollTop: $('.et_pb_module.et_pb_tabs.et_pb_tabs_0').offset().top },
1000);
window.localStorage.removeItem('tab');
}
});
});
localGuard = guard;
}
}
changeMenuSelector();
initEventListeners();
$(window).resize(function () {
changeMenuSelector();
});
if (!!localStorage.getItem('tab')) {
tab = localStorage.getItem('tab');
console.log(tab);
setTimeout(function(){$("li."+tab+">a")[0].click();}, 1)
$("html, body").animate({ scrollTop: $('.et_pb_module.et_pb_tabs.et_pb_tabs_0').offset().top },
1000);
localStorage.removeItem('tab');
}
});
I'm currently modifying the FlexNav Plugin. Instead of hovering to open the sub-menus, I changed it to open by click.
The problem now is that it takes two clicks to open a submenu.
I understand the problem is the fact that the code adds the class "flexnav-show" to the submenu ul when the menu is opened intitially. A click on the submenu trigger then removes this class, which causes nothing, and a second click add it again opening the submenu.
If anyone can point me to the right place in the code where i can avoid adding the class on all ul's. Or, if someone has a better idea...
$.fn.flexNav = function(options) {
var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector;
settings = $.extend({
'animationSpeed': 250,
'transitionOpacity': true,
'buttonSelector': '.menu-button',
'hoverIntent': false,
'hoverIntentTimeout': 150,
'calcItemWidths': false,
'hover': false
}, options);
$nav = $(this);
$nav.addClass('with-js');
if (settings.transitionOpacity === true) {
$nav.addClass('opacity');
}
$nav.find("li").each(function() {
if ($(this).has("ul").length) {
return $(this).addClass("item-with-ul").find("ul").hide();
}
});
if (settings.calcItemWidths === true) {
$top_nav_items = $nav.find('>li');
count = $top_nav_items.length;
nav_width = 100 / count;
nav_percent = nav_width + "%";
}
if ($nav.data('breakpoint')) {
breakpoint = $nav.data('breakpoint');
}
showMenu = function() {
if ($nav.hasClass('lg-screen') === true && settings.hover === true) {
if (settings.transitionOpacity === true) {
return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"],
opacity: "toggle"
}, settings.animationSpeed);
} else {
return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"]
}, settings.animationSpeed);
}
}
};
resetMenu = function() {
if ($nav.hasClass('lg-screen') === true && $(this).find('>ul').hasClass('flexnav-show') === true && settings.hover === true) {
if (settings.transitionOpacity === true) {
return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"],
opacity: "toggle"
}, settings.animationSpeed);
} else {
return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"]
}, settings.animationSpeed);
}
}
};
resizer = function() {
var selector;
if ($(window).width() <= breakpoint) {
$nav.removeClass("lg-screen").addClass("sm-screen");
if (settings.calcItemWidths === true) {
$top_nav_items.css('width', '100%');
}
selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
$(selector).removeClass('active');
return $('.one-page li a').on('click', function() {
return $nav.removeClass('flexnav-show');
});
} else if ($(window).width() > breakpoint) {
$nav.removeClass("sm-screen").addClass("lg-screen");
if (settings.calcItemWidths === true) {
$top_nav_items.css('width', nav_percent);
}
$nav.removeClass('flexnav-show').find('.item-with-ul').on();
$('.item-with-ul').find('ul').removeClass('flexnav-show');
resetMenu();
if (settings.hoverIntent === true) {
return $('.item-with-ul').hoverIntent({
over: showMenu,
out: resetMenu,
timeout: settings.hoverIntentTimeout
});
} else if (settings.hoverIntent === false) {
return $('.item-with-ul').on('mouseenter', showMenu).on('mouseleave', resetMenu);
}
}
};
$(settings['buttonSelector']).data('navEl', $nav);
touch_selector = '.item-with-ul, ' + settings['buttonSelector'];
$(touch_selector).append('<span class="touch-button"><i class="navicon">▼</i></span>');
toggle_selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
$(toggle_selector).on('click', function(e) {
var $btnParent, $thisNav, bs;
$(toggle_selector).toggleClass('active');
e.preventDefault();
e.stopPropagation();
bs = settings['buttonSelector'];
$btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs);
$thisNav = $btnParent.data('navEl');
return $thisNav.toggleClass('flexnav-show');
});
$('.touch-button').on('click', function(e) {
var $sub, $touchButton;
$sub = $(this).parent('.item-with-ul').find('>ul');
$touchButton = $(this).parent('.item-with-ul').find('>span.touch-button');
if ($nav.hasClass('lg-screen') === true) {
$(this).parent('.item-with-ul').siblings().find('ul.flexnav-show').removeClass('flexnav-show').hide();
}
if ($sub.hasClass('flexnav-show') === true) {
$sub.removeClass('flexnav-show').slideUp(settings.animationSpeed);
return $touchButton.removeClass('active');
} else if ($sub.hasClass('flexnav-show') === false) {
$sub.addClass('flexnav-show').slideDown(settings.animationSpeed);
return $touchButton.addClass('active');
}
});
$nav.find('.item-with-ul *').focus(function() {
$(this).parent('.item-with-ul').parent().find(".open").not(this).removeClass("open").hide();
return $(this).parent('.item-with-ul').find('>ul').addClass("open").show();
});
resizer();
return $(window).on('resize', resizer);
};
The code adds the class 'flexnav-show' in line 34 to all child 'ul' nodes.
The code is in action when the function showMenu is called.
I have a slider in jQuery and i would like it to auto rotate every three seconds. I can get it to work for when it is clicked or point on the slides are clicke it rotates but i can't get it to auto rotate.
I tried adding
setInterval(function(){
$('.nextSlide').click()
},3000)
Here is my jQqery code that controls the change of slide:
nextSlide : function(){
if (dcs.currentSlideIndex>=dcs.slideCount-1 || inAnimation){
return false
}
var self=this,
cHeight=dcs.carouselHeight;
inAnimation=true;
dcs.currentSlideIndex++;
if (dcs.currentSlideIndex+1==dcs.slideCount)
dcs.nextButton.fadeOut();
dcs.prevButton.fadeIn();
self.changeSlide(dcs.currentSlideIndex);
},
prevSlide : function(){
if (dcs.currentSlideIndex<=0 || inAnimation){
return false
}
var self=this,
cHeight=dcs.carouselHeight;
inAnimation=true;
dcs.currentSlideIndex--;
if (dcs.currentSlideIndex==0){
//hide the nexr arrow
dcs.prevButton.fadeOut();
}
dcs.nextButton.fadeIn();
self.changeSlide(dcs.currentSlideIndex);
},
gotoSlide:function(sIndex){
var self=this,
cHeight=dcs.carouselHeight;
inAnimation=true;
self.changeSlide(sIndex);
},
changeSlide:function(sIndex){
var self=this,
cHeight=dcs.carouselHeight;
self.$elem.trigger('start-change');
self.updateCounter(dcs.currentSlideIndex);
(new TimelineLite({onComplete:function(){
inAnimation=false;
self.$elem.trigger('end-change');
}
}))
.to(dcs.rightWrapper,dcs.rightSideDuration,{y:-dcs.rightDirectionSign*sIndex*cHeight,ease:Power4.easeOut})
.to(dcs.leftWrapper,dcs.leftSideDuration,{y:-dcs.leftDirectionSign*sIndex*cHeight,ease:Power4.easeOut},'-='+dcs.rightSideDuration);
},
updateCounter : function(currentSlideIndex){
dcs.counterCurrent.html(currentSlideIndex+1);
},
bindUIActions: function(){
var self = this;
dcs.nextButton.on('click',function(){
self.nextSlide();
})
dcs.prevButton.on('click',function(){
self.prevSlide();
})
$(window).on('resize',function(){
self.update();
});
if (dcs.mouse){
self.scrollControll();
}
if (dcs.keyboard){
self.keyboardControll();
}
if (dcs.touchSwipe){
self.touchControll();
}
if (dcs.bulletControll){
self.bulletControll();
}
},
scrollControll:function(){
var self=this;
self.$elem.on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
self.nextSlide();
} else {
self.prevSlide();
}
});
},
keyboardControll:function(){
var self=this;
$(document).keydown(function(e) {
switch(e.which) {
case 38: // up
self.prevSlide();
break;
case 40: // down
self.nextSlide();
break;
default: return;
}
e.preventDefault();
});
},
touchControll:function(){
var self=this;
self.$elem.swipe({
swipe:function(event, direction, distance) {
if (direction=='down'){
self.nextSlide();
}else if (direction=='up'){
self.prevSlide();
}
}
});
},
I have a searchbar and the results should be shown on google maps. I want to expand and collapse this map so more results will be visible. But I dont want a normal toggle function.
I want a multiple click action:
First click: Div/Map gets 100px higher
Second click: Div/Map gets another 100px higher
Third click: Div/Map gets 100px smaller,
Fourth click: Div/Map gets another 100px smaller and returns to its original height.
Fifth click: All the previous action should be repeated.
This is what I've got up till now, but After my fourth click nothing happens anymore:
$(function(){
var hits = [0];
$('.kaart-uitklappen').click(function(){...
Fiddle Demo
You don't need as many animate calls, as you basically just change the height modifier. As there are four states essentially (two for going up, two for going down), you need to reset the counter accordingly (i.e., when it reaches 4) - that's done easily with modulo operator.
$(function(){
var hits = -1;
$('.kaart-uitklappen').click(function(){
hits = (hits+1) % 4;
var modifier = hits > 1 ? '-' : '+';
$('#header').animate({height: modifier + '=100px' }, 300);
return false;
});
});
JSFiddle.
You need to make sure your value does not exceed 3, or nothing will happen on subsequent clicks. Also, you should start with your value equal to 0, not [0].
Here is some simplified code with these ideas incorperated: http://jsfiddle.net/XZ7mW/16/
var hits = 0;
$('.kaart-uitklappen').click(function(){
if (hits < 2)
$("#header").animate({'height':'+=100px' }, 300);
else
$("#header").animate({'height':'-=100px' }, 300);
hits = (hits + 1) % 4;
return false;
});
change from hits == number to hits%4 == number
$(function () {
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits%4 == 0) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
}
if (hits%4 == 1) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
}
if (hits%4 == 2) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
}
if (hits%4 == 3) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
}
hits++;
return false;
});
});
You need to reset your var to 0 once you get to 3 -
if (hits == 3)
{
$("#header").animate({'height':'-=100px' }, 300, function() {});
hits = -1;
}
You also shouldn't be using an array to store hits.
hits = [0]
should be
hits = 0;
http://jsfiddle.net/XZ7mW/10/
On the last if type in this
$("#header").animate({'height': '-=100px'}, 300, function () {});
hits = 0;//make hits 0
return;//return so it doesnt add to hits
}
DEMO
JAVASCRIPT :
$(function () {
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits == 0) {
$("#header").animate({
'height': '+=100px'
}, 300);
}
else if (hits == 1) {
$("#header").animate({
'height': '+=100px'
}, 300);
}
else if (hits == 2) {
$("#header").animate({
'height': '-=100px'
}, 300);
}
else {
$("#header").animate({
'height': '-=100px'
}, 300);
hits = 0;
return false;
}
hits++;
return false;
});
});
Fiddle : http://jsfiddle.net/XZ7mW/12/
Here you go :
JSFiddle
$(function () {
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits == 0) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
hits++;
}
else if (hits == 1) {
$("#header").animate({
'height': '+=100px'
}, 300, function () {});
hits++;
}
else if (hits == 2) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
hits++;
}
else if (hits == 3) {
$("#header").animate({
'height': '-=100px'
}, 300, function () {});
hits = 0;
}
return false;
});
});
You need to reset hits when it reaches 3
Assuming you want this to expand, contract and then re-expand:
var hits = [0]; should be var hits = 0; and you will need to test for hits > 3 and set it back to 0;
or use modulus arithmetic in your conditions:
http://jsfiddle.net/XZ7mW/19/
$(function(){
var hits = 0;
$('.kaart-uitklappen').click(function(){
if (hits % 4 == 0) {
$("#header").animate({'height':'+=100px' }, 300, function() {});
}
if (hits % 4 == 1) {
$("#header").animate({'height':'+=100px' }, 300, function() {});
}
if (hits % 4 == 2) {
$("#header").animate({'height':'-=100px' }, 300, function() {});
}
if (hits % 4 == 3) {
$("#header").animate({'height':'-=100px' }, 300, function() {});
}
hits++;
return false;
});
});
Here's how I would do it:
var hits = 0;
$('.kaart-uitklappen').click(function () {
if (hits < 2)
$("#header").animate({'height': '+=100px'}, 300);
else
$("#header").animate({'height': '-=100px'}, 300);
if (++hits == 4)
hits = 0;
return false;
});
http://jsfiddle.net/KX7aq/
Add this at the end to reset the counter:
if(hits==4) {
hits=0;
}
http://jsfiddle.net/XZ7mW/7/
Can be something like this?
var direction = "open";
$('.kaart-uitklappen-button').click(function(){
if (direction == "open"){
$('.kaart-uitklappen').height($('.kaart-uitklappen').height()+100)
if ($('.kaart-uitklappen').height() >= 200){
direction = "close";
}
}else{
$('.kaart-uitklappen').height($('.kaart-uitklappen').height()-100)
if ($('.kaart-uitklappen').height() <= 0){
direction = "open";
}
}
I use kaart-uitklappen-button because you can't click the container if it is closed...