Expand a div element multiple times - javascript

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...

Related

Adding additional case to script for onClick event

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.

Making text blink a certain number of times?

I'm trying to make this blinking text stop after 3 seconds (or 3-5 blinks). I've set the blink rate to about the right speed, but cannot figure out how to make it stop.
Here's the code:
$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 200);
});
Any suggestions?
I've compiled a jQuery fiddle here: http://jsfiddle.net/M4Fcd/173/
setInterval goes on indefinitely - or until stopped.
What you need to do is capture the intervalID when you create the interval and then clear the interval after you are done with it
var intervalID = setInterval(function....);
// when done
clearInterval(intervalID);
In your particular case:
$('.blink').each(function() {
var elem = $(this);
// count the blinks
var count = 1;
var intervalId = setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
// increment counter when showing to count # of blinks and stop when visible
if (count++ === 3) {
clearInterval(intervalId);
}
} else {
elem.css('visibility', 'hidden');
}
}, 200);
});
Updated fiddle http://jsfiddle.net/M4Fcd/186/
You could also use fadeIn/fadeOut like this
$('.blink').each(function() {
var elem = $(this);
elem.fadeOut(100)
.fadeIn(100)
.fadeOut(100)
.fadeIn(100)
.fadeOut(100)
.fadeIn(100);
});
jsFiddle
$('.blink').each(function() {
var elem = $(this);
refreshIntervalId = setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
} else {
elem.css('visibility', 'hidden');
}
}, 200);
});
setTimeout(function(){
clearInterval(refreshIntervalId);
}, 3000)
fiddle: http://jsfiddle.net/M4Fcd/176/
try this:
var i = 0;
var blink;
$('.blink').each(function() {
var elem = $(this);
blink = setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
i++;
if(i >= 3){
clearInterval(blink);
}
} else {
elem.css('visibility', 'hidden');
}
}, 200);
});
Fiddle
Ok, there is better way. You can just toggle css class with visibility: hidden, the code gets simpler and than if you want to stop when visible/not visible just need to check with hasClass.
$('.blink').each(function() {
var elem = $(this),
timer = 0,
interval = 200,
stopAfter = 3000,
intervalId = setInterval(function() {
elem.toggleClass('blink');
if(timer > stopAfter && !elem.hasClass('blink')) {
clearInterval(intervalId);
}
timer += interval;
}, interval);
});
fiddle: http://jsfiddle.net/M4Fcd/183/
Now you can stop it when it's visible or not, but the idea is pretty the same.
$('.blink').each(function() {
var elem = $(this),
timer = 0,
interval = 200,
stopAfter = 3000;
refreshIntervalId = setInterval(function() {
if (elem.css('visibility') == 'hidden') {
elem.css('visibility', 'visible');
if(timer > stopAfter) {
clearInterval(refreshIntervalId);
}
} else {
elem.css('visibility', 'hidden');
}
timer += interval;
}, interval);
});
fiddle: http://jsfiddle.net/M4Fcd/180/
I think I have the shortest answer.
function blinkElement(elm, interval, duration) {
elm.style.visibility = (elm.style.visibility === "hidden" ? "visible" : "hidden");
if (duration > 0) {
setTimeout(blinkElement, interval, elm, interval, duration - interval);
} else {
elm.style.visibility = "visible";
}
}
To blink for 3 seconds in the rate of 200 milliseconds.
blinkElement(element, 200, 3000);

My slider doesn't work as it should after viewing 3 "screens"

I'm trying to build slider and in the first 3 "screens" it work and in the last one is doesn't. Also, is there a way to make the slider to slide and not just to show up?
the js code:
var oldnum = 0
var screen = 1;
$("#right_arrow").click(function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
} else {
gotoright(screen);
}
});
$("#left_arrow").click(function () {
screen--;
if (screen <= 1) {
$("#left_arrow").hide();
screen = 1;
} else {
gotoleft(screen);
}
});
jwerty.key('arrow-right', function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
} else {
gotoright(screen);
}
});
jwerty.key('arrow-left', function () {
screen--;
if (screen <= 1) {
$("#left_arrow").hide();
screen = 1;
} else {
gotoleft(screen);
}
});
function gotoright(num) {
if (num <= 0 && num >= 4) {
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {});
} else {
oldnum = num - 1;
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {
$("#b_" + oldnum).hide().css({
"opacity": 0
});
});
}
}
function gotoleft(num) {
if (num <= 0 && num >= 4) {
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {});
} else {
oldnum = num + 1;
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {
$("#b_" + oldnum).hide().css({
"opacity": 0
});
});
}
}
here is the full code with the html and css:
http://jsfiddle.net/k6xdq/1/
I want that it will work like http://tobiasahlin.com/spinkit/
I think you should check if screen is == 4 before you ++ it.
Right now you go from 3 to 4 then go to an if statement that only hides the arrow.
$("#right_arrow").click(function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
} else {
gotoright(screen);
}
});
What you want is to gotoright() and if screen is >= 4, hide() it.
$("#right_arrow").click(function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
gotoright(screen);
} else {
gotoright(screen);
}
});

stop image from moving when reaching the border of a container

i have this fiddle : http://jsfiddle.net/ps4t9/4/
$(window).keydown(function (e) {
if (e.which == 38) { player.animate({ top: '-=20px' }); shuriken.animate({ top: '-=20px' }); } // up
if (e.which == 40) { player.animate({ top: '+=20px' }); shuriken.animate({ top: '+=20px' }); } // down
if (e.which == 32) { shuriken.animate({ left: '+=280px' });} // space bar hit
});
how can i prevent the player from moving outside the border of the container ?
You can use an if statement
if (e.which == 32){
if(shuriken.css('left') != '249px'){
shuriken.animate({ 'left' : '+=280px' });
}
}
Fiddle: http://jsfiddle.net/Hive7/ps4t9/5/
Try this: http://jsfiddle.net/ps4t9/11/
$(document).ready(function () {
var player = $("#Player"),
shuriken = $("#Shuriken"),
container = $("#Container"),
w = container.width() - shuriken.width();
$(window).keydown(function (e) {
if (e.which == 38) {
if (parseInt(player.css('top')) > 10) {
player.animate({ top: '-=20px' });
shuriken.animate({ top: '-=20px' });
}
} // up
if (e.which == 40) {
if (parseInt(player.css('top')) < 270) {
player.animate({ top: '+=20px' });
shuriken.animate({ top: '+=20px' });
}
} // down
if (e.which == 32) {
if (shuriken.css('left') != '249px') {
shuriken.animate({ 'left' : '+=280px' });
}
}
});
});
It breaks when holding down the key and moving too fast though. You may also have to adjust the values a bit.
Demo http://jsfiddle.net/u6vXK/1/
the condition what you want is
var wallT = 0,//top
wallB =269,//bottpm
wallL = 0,//left
wallR =269;//right
function checkBoundUpDw(pos) {
if(pos > wallT && pos < wallB){
return true;
}
return false;
}
function checkBoundleftRight(pos) {
if(pos > wallL && pos <wallR){
return true;
}
return false;
}
If you press hold it wont work , pres key one by one , means press and wait for animation finish and press again , you have to add isanimating condition and other predominance tips.
here is the link for your answer
http://jsfiddle.net/bDMnX/7/
var pane = $('#pane'),
box = $('#box'),
w = pane.width() - box.width(),
d = {},
x = 3;
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
thank you all for your help but after a deep Meditation and searching hehe i managed to make it work here is the final jsfiddle : http://jsfiddle.net/ps4t9/15/ thank you
function newv(v, a, b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function (e) {
d[e.which] = true;
if (e.which == 32) {
if (!shurikenHitBorder) {
shuriken.animate({ left: '+=280px' }, 'fast');
shuriken.fadeIn(100);
}
shurikenHitBorder = true;
}
});
$(window).keyup(function (e) { d[e.which] = false; });
setInterval(function () {
box.css({top: function (i, v) { return newv(v, 38, 40); }});
}, 20);
I have edited your JSFiddle
with the necessary modifications. Does this help you? Ask me if you need more explanations...
I haved added these to help you calculate optimum bounds...
posDelta = 20, // amount of change in position
playerOffset = player.height() * 0.5,
playerPos = player.position().top,
maxTop = posDelta,
maxBottom = container.height() - (posDelta + playerOffset);

jquery/javascript errors

does anyone know why the following script is not working.
I'm trying to see if the cookie is set and when it it's i wan't to see if the value is 1 or 0 if the value is 1 i wan't to move my div#content with an offset, but when it's is 0 i want to move it with the same offset, but in the opposit direction
$(function() {
var loc = window.location.pathname.split( '/' );
if("index.php" == loc[3] && (document.cookie('subMenu') === null || document.cookie('subMenu') == 0)) {
document.cookie("subMenu", 1);
animatethis("#content", 1500, "+=50px");
}
else
{
if(!"index.php" == loc[3] && (document.cookie('subMenu') == 1)
{
document.cookie("subMenu", 0);
animatethis("#content", 1500, "-=50px");
}
}
});
function animatethis(targetElement, speed, offset) {
var x = $('#menuwrapper').height();
$(targetElement).animate({ marginTop: "+=50"},
{
duration: speed,
});
};
You just don't use your offset variable here :
$(targetElement).animate({ marginTop: "+=50"},
{
duration: speed,
});
Try this :
$(targetElement).animate({ marginTop: offset},
{
duration: speed,
});
You have a syntax error. Missed end of first bracket in following line:
//It would be
if(!"index.php" == loc[3] && (document.cookie('subMenu') == 1))
//In place of
if(!"index.php" == loc[3] && (document.cookie('subMenu') == 1)

Categories