We Keep Coding

How to stop old click event and start a new one

Please check out this code: http://jsfiddle.net/XNnHC/4270/
$(document).ready(function() {
$("#close-btn").hide();
var slider_width = $('.pollSlider').width(); //get width automaticly
$('#pollSlider-button').click(function() {
if ($(this).css("margin-right") == slider_width + "px" && !$(this).is(':animated')) {
$('.pollSlider,#pollSlider-button').animate({
"margin-right": '-=' + slider_width
});
$("#close-btn").hide();
} else {
if (!$(this).is(':animated')) //perevent double click to double margin
{
$('.pollSlider,#pollSlider-button').animate({
"margin-right": '+=' + slider_width
});
$("#close-btn").show(500);
$("#pollSlider-button").css({
'cursor': "default"
});
// pointer over the close button
$("#close-btn").css({
'cursor': "pointer"
});
}
}
});
});
I am having trouble to figure out how to switch to "close button" in order to be able to animate slider from right to left, after first animation has been completed. Currently close button doesnt have its function, and slider only works if it has been clicked on pollSlider-button, in both ways. I have been digging over the internet, trying methods such as off.unbind('click'),preventDefault and stopPropagation, however I have not accomplished much, I assume I havent put code on the right place. Since I am JS and JQuery beginner, and since I have found this code and have been working on it to adapt it to my own needs, I have realized I dont really know what does this part of the code refer to: "$(this)". I can see that alert($(this).css("margin-right")) returns 0px before and 200px after animation, but I dont understand to what element is connected to. Any explanation would really be appriciated and deeper understanding could lead to soloving issue above.

If I'm understanding correctly, you want to have the "X" close it when its clicked. One option would be to put your close functionality in its own function and call it when that X is clicked. So you could do something like:
JS Fiddle
$(document).ready(function() {
// Cache the close button so only have to lookup once
var closeBtn = $("#close-btn");
closeBtn.hide();
var slider_width = $('.pollSlider').width(); //get width automaticly
$('#pollSlider-button').click(function() {
if ($(this).css("margin-right") != slider_width + "px" && !$(this).is(':animated')) //perevent double click to double margin
{
$('.pollSlider,#pollSlider-button').animate({
"margin-right": '+=' + slider_width
});
closeBtn.show(500).css({
'cursor': "pointer"
});;
$("#pollSlider-button").css({
'cursor': "default"
});
}
});
// Close function
closeBtn.on('click', function() {
$('.pollSlider,#pollSlider-button').animate({
"margin-right": '-=' + slider_width
});
closeBtn.hide();
});
});

just add close-button on the listener and replace $(this) :
$(document).ready(function() {
$("#close-btn").hide();
var slider_width = $('.pollSlider').width(); //get width automaticly
$('#pollSlider-button').on('click',open);
function open(){
if (!$('#pollSlider-button').is(':animated')) //perevent double click to double margin
{
$('.pollSlider,#pollSlider-button').animate({
"margin-right": '+=' + slider_width
});
$("#close-btn").show(500);
$("#pollSlider-button").css({
'cursor': "default"
});
// pointer over the close button
$("#close-btn").css({
'cursor': "pointer"
});
}
$('#pollSlider-button').off();
$('#close-btn').on('click',close);
};
function close(){
$('.pollSlider,#pollSlider-button').animate({
"margin-right": '-=' + slider_width
});
$("#close-btn").hide();
$('#pollSlider-button').on('click',open);
};
});
.pollSlider{
position:fixed;
height:100%;
background:red;
width:200px;
right:0px;
margin-right: -200px;
}
#pollSlider-button{
position:fixed;
width:100px;
height:50px;
right:0px;
background:green;
top:300px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="pollSlider"></div>
<div id="pollSlider-button"></div>
<i class="fa fa-times fa-5x" id="close-btn" aria-hidden="true"></i>

Change (toggle) css when clicked on another div

When I click on a div with the classname 'show', i'm adding css to the div 'mobile-menu', this works perfect, but I would like to change the css to another height when I click on the the classname "show" again
$(".show").click(function() {
$('#mobile-menu').css({ 'height': '100%' });
// when i click on .show again: .css({ 'height': '51px' });
});

Try this code.
$(".show").click(function() {
if ($('#mobile-menu').css('height') === '100%')
$('#mobile-menu').css({ 'height': '51px' });
else
$('#mobile-menu').css({ 'height': '100%' });
});

<style>
.highlight{
height: 100%;
}
</style>
$('.show').click(function() {
$('#mobile-menu').toggleClass( "highlight" );
});

You need to set a boolean indicating the state of the #mobile-menu
var isFullHeight;
$(".show").click(function() {
if (isFullHeight)
{
$('#mobile-menu').css({ 'height': '51px' });
isFullHeight = false;
}
else
{
$('#mobile-menu').css({ 'height': '100%' });
isFullHeight = true;
}
});

Try something like this:
$(".show").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$('#mobile-menu').css({ 'height': '100%' });
} else {
// even clicks
// when i click on .show again: .css({ 'height': '51px' });
}
});

What I do in these cases is
$('.someClass').toggleClass('someClass'); //removes someClass from all elements using someClass
$(this).toggleClass('someClass');
this adds and removes a class on all selectors

Try this code:
$(".show").toggle(function(){
$(#mobile-menu).css({height:40});
},
function(){
$(#mobile-menu).css({height:10});
});

change body color on slide change

I want to change background-color on body to mix color on slide change but facing problem can anybody help me . this is my function on slide change but do't know what mistake i am doing. my site url is http://krakenworldwide.com/destinations/`
function imgbackground() {
if (jQuery('.slide a').hasClass('a1')) {
jQuery('body').css({
'background-color': '#63bcf8',
'background-image': 'none'
});
} else if (jQuery('.slide a').hasClass('a2')) {
jQuery('body').css({
'background-color': '#d7e5f2',
'background-image': 'none'
});
} else if (jQuery('.slide a').hasClass('a3')) {
jQuery('body').css({
'background-color': '#a3cff4',
'background-image': 'none'
});
} else if (jQuery('.slide a').hasClass('a4')) {
jQuery('body').css({
'background-color': '#fefefe',
'background-image': 'none'
});
} else {
jQuery('body').css({
'background-color': '#fff',
'background-image': 'none'
});
}
}
window.setInterval(function () {
imgbackground()
}, 1000);

Unfortunately I didn't have much time to sift through your code (it is all over the place) but I did notice a few things that might help you:
You are linking to 2 different versions of JQuery you have one link to version "...1.10.2" in your "wp-includes" folder and below that you are linking to version "...1.7.1.min.js" in your "wp-content" folder. The lower one in the order will override the higher one.
You need to load your main JQuery library before all the other plug-ins so move whichever version you want above all other script links.
It looks like your slide function is changing the display, z-index, and left properties of each anchor tag within <div class="slides-control"...> but the classes for each individual anchor tag remain the same so the function you wrote above won't work because '.slide a' always has a class of a1 and it always has a class of a2 and so on.
There are many ways to accomplish what you are looking for but you might try assigning an id to each anchor tag within <div class="slides-control"...>. Then assigning a color to your background based on which anchor tag has display:block;.
So you code would look something like this:
function imgbackground() {
if ($('#anchor1').css('display') == 'block') {
$('body').css({
'background-color': '#63bcf8',
'background-image': 'none'
});
} else if ($('#anchor2').css('display') == 'block') {
$('body').css({
'background-color': '#d7e5f2',
'background-image': 'none'
});
} else if ($('#anchor3').css('display') == 'block') {
$('body').css({
'background-color': '#a3cff4',
'background-image': 'none'
});
} else if ($('#anchor4').css('display') == 'block') {
$('body').css({
'background-color': '#fefefe',
'background-image': 'none'
});
} else {
$('body').css({
'background-color': '#fff',
'background-image': 'none'
});
}
}
I also didn't see anywhere where you are calling your function.
You need to either do it the body: <body onload="imgbackground()">...</body>
Or use the JQuery .ready() method:
$(document).ready(function() {
// your "imgbackground" function here
}
Hope that helps.

How to prevent jquery function from executing before executing the other one

So I have these JQuery functions:
1st
$(function(){
// Accordion Panels
$(".staffDiv div").hide();
$(".staffDiv img").hover(function(){
// $(".staffDetails").slideUp("fast");
$(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast");
$(this).toggleClass("current");
$(this).siblings("div").removeClass("current");
});
});
2nd
$(function(){
$(".branchDiv").click(function(){
var toggleWidth = $(this).width() == 450 ? "175px" : "450px";
$(this).animate({ width: toggleWidth });
});
});
How can I prevent the first one from executing if the second one is not executed yet?
EDIT
This is my new code now:
$(function(){
$(".staffDiv div").hide();
$(".branchDiv").click(function(){
var toggleWidth = $(this).width() == 450 ? "175px" : "450px";
$(this).animate({ width: toggleWidth });
$(".staffDiv div").hide();
$(".staffDiv img").hover(function(){
$(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast");
});
});
});
EDIT This is the HTML Code. Should I continue what I'm doing or drop the fancy effects and make a classic organizational chart?
<div class='branchDiv'>
<div class='staffDiv'>
<img class='staffPic' src='images/upload/1378622_10202067392155670_1672420239_n.jpg'/>
<div class='staffDetails'>
Name:n m n<br/>
Position:m<br/>
Specialization:m34<br/>
</div>
</div>
</div>

The easiest way would be to nest the first within the second (sync you aren't doing any asynchronous actions):
$(function(){
// this will dictate whether the hover event does anything
var open = false;
$(".branchDiv").click(function(){
var toggleWidth = $(this).width() == 450 ? "175px" : "450px";
$(this).animate({ width: toggleWidth });
open = ($(this).width() > 175);
});
$(".staffDiv div").hide();
$(".staffDiv img").hover(function(){
if(open){
$(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast");
$(this).toggleClass("current");
$(this).siblings("div").removeClass("current");
}
});
});
If the 1st was supposed to happen within the onclick, move the code under your $(this).animate call

Trying to make a click animation repeatable

I'm trying to make a bar that slides horizontally. If it's positioned left, it will slide right. If it's positioned right, it will slide left. Eventually this will contain multiple bars side by side that will slide out of the way to reveal different images.
right now it would work fine except i can't seem to figure out how to get it to fire more than once. I'm not a javascript guy by any stretch of the imagination, so just a little push in the right direction would be appreciated.
Thanks
Luke
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var x=1;
$(document).ready(function(){
if( x==1 )
{
x=2;
$("#block").click(function()
{
$("#block").animate({right:'20px'});
});
return;
}
if( x==2 )
{
x=1;
$("#block").click(function()
{
$("#block").animate({left:'20px'});
});
return;
}
});
</script>
</head>
<body>
<p> This block should slide right if it's positioned left, and slide left if it's positioned right. It should repeat this behavior indefinitely. Right now it's being very naughty indeed!</p>
<div id=block style="background:#98bf21;height:100px;width:16px;position:absolute;">
</div>
</body>
</html>

Bind the event out the if statment and put the condition in side event.
Live Demo
$(document).ready(function(){
var x=1;
$("#block").click(function()
{
if( x==1 )
{
x=2;
$("#block").animate({right:'20px'});
}
else
{
x=1;
$("#block").animate({left:'20px'});
}
});
});
To keep the rule cycle you may need to change the code like given below
Live Demo
$(document).ready(function() {
var x = 1;
$("#block").click(function() {
if (x == 1) {
x = 2;
$("#block").animate({
right: '20px',
left: '0px'
});
}
else {
x = 1;
$("#block").animate({
left: '20px',
right: '0px'
});
}
});
});​

You cannot easily animate left and right, because jQuery doesn't know the exact end position when you change left: 0 to right: 0. What you can do is calculating this yourself and using left only. Some other things are:
Use a boolean to flip instead of a number
Don't decide what event handler to bind, but decide what should happen when the handler is called
Use $(this) for the current element
http://jsfiddle.net/HZRWJ/
$(document).ready(function(){
var isLeft = true;
$("#block").click(function() {
var fullWidth = $(document).width();
var elemWidth = $(this).width();
if(isLeft) {
$(this).animate({ left: fullWidth - elemWidth });
} else {
$(this).animate({ left: 0 });
}
isLeft = !isLeft;
});
});

Does this do something similar to what you wanted?
Fiddle Demo
$("#block").data('position', 'left');
$("#block").click(function() {
var elem = $(this);
resetElementPosition(elem);
switch (elem.data('position')) {
case 'left': elem.animate({ right: '20px' }); elem.data('position', 'right'); break;
case 'right': elem.animate({ left: '20px' }); elem.data('position', 'left'); break;
}
});
function resetElementPosition(element)
{
element.css({ 'left' : 'auto', 'right' : 'auto' });
}

If you are going to have multiple bars it might be easier to store values in a jQuery object.
$(document).ready(function(){
$("#block").each( function( ) {
// associate data with each element. At the moment there should
// only be one but if this is implemented as a class there may
// be more
$(this).data("x", 0);
});
$("#block").click( function( ) {
// 0 will push it to the right as 0 => false
if( $(this).data("x") ) {
$(this).data("x", 0 );
// removing the css property allows you to use left & right
$(this).css("right","").animate({left:'20px'});
} else {
$(this).data("x", 1 );
$(this).css("left","").animate({right:'20px'});
}
});
});
Demo here