Develop Reference

Javascript Jquery reset values onclick

I've been working on this website header with divs moving up and down on a click, so clicking on the search button brings up a searchbar and clicking on the account button brings up an accountbar. With some great help from Madalin I've achieved this (article "DIV moving up and down using javascript").
However... Is there a way to reset the javascript on clicking of either one of the buttons (so either "search" or "account"). I need this because now when you click once it works but when for example search has been clicked already and you click account you have to click twice again on search to see action... Please refer to the jsfiddle: [https://jsfiddle.net/27jaodcg][1]
So when you click account it closes the searchbar and when you click the search bar it closes the accountbar, this works perfect (once).
But when account has been clicked before the script "thinks" accountbar is still open so when clicking search it closes the accountbar but when clicking on account again nothing happens as the script closes accountbar first (but its closed already by the search button click).
I hope this makes sense :)
Below is the Javascript Jquery code so far:
jQuery(document).ready(function($){
$("#account").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '60px' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
}
});
$("#searchid").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '60px' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
}
});
});
Thanks in advance!

When opening either of the toolbars, just ensure the "open" class of the other toolbar is removed. See code below.
jQuery(document).ready(function($){
$("#account").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '60px' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
$("#searchid").removeClass('open');
}
});
$("#searchid").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false });
$("#searchbarid").animate({ height: '60px' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
$("#account").removeClass('open');
}
});
});

JQuery slides: fade effect

I am using the JQuery slides that you can find here http://www.slidesjs.com/examples/standard/
but the fade effect is not working on play, only on navigation !
<script>
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: {
fade: {
speed: 1000
}
}
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});
</script>
I also tried to remove the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});

I've made this work. Per the docs, you can set the effect property for play to a string.
Check out the jsfiddle: https://jsfiddle.net/cale_b/5ac1cebL/
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 500,
// within the play property, effect should be a string, i.e. "fade"
effect: "fade"
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});

Removing the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});

jqxWidget jqxwindow open script working only once

I have JS code for jqxWindow which works only one time:
$(document).ready(function () {
$("#jqxwindow1 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$("#jqxwindow2 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$("#jqxwindow3 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$("#jqxwindow4 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$("#jqxwindow5 ").jqxWindow({ height: 800, width: 1212, maxWidth: 1600, maxHeight: 900, animationType: 'none', theme: 'fresh', autoOpen: false });
$('div[id^="test"] p').click(function() {
var string = "#jqxwindow" + $(this).text().split('|')[0];
//alert("The window is opened : " + string);
var opened = $(string).jqxWindow('isOpen');
var action = 'close';
if (opened == false)
action = 'open';
$(string).jqxWindow(action);
$(string).jqxWindow('bringToFront');
});
});
I was searching but every solution didn't work for me.
LE:
Uncaught TypeError: $(...).jqxWindow is not a function
on line
var opened = $(string).jqxWindow('isOpen');

I resolved:
Just put before (document) jQuery and in function put argument $. ex. down:
jQuery(document).ready(function ($) {
//function code
}
And now it's work.

Setting a document ready timeout, how to set it up

Hopefully it will be a quick and easy question,
I am creating a simple function, but need to trigger it about 3-4 seconds after the page is loaded, just do not know how.
Here is my script
$(function () {
var slideout = $('#slideout');
slideout.animate({
right: '-200px'
}, 1000, function () {});
$(".out").toggle(function () {
$(this).addClass('in');
slideout.animate({
right: '0px'
}, {
queue: false,
duration: 500
});
}, function () {
$(this).removeClass('in');
slideout.animate({
right: '-200px'
}, {
queue: false,
duration: 500
});
});
$(".close").click(function () {
$(this).removeClass('out');
slideout.animate({
right: '-200px'
}, {
queue: false,
duration: 1000
});
slideout.fadeOut({
duration: 1000
});
});
});
Any help is highly appreciated.

$(document).ready(function(){
setTimeout(function(){
//YOUR CODE
},4000);
});

$(function () {
var doInteresting = function () {
var slideout = $('#slideout');
slideout.animate({
right: '-200px'
}, 1000, function () {});
$(".out").toggle(function () {
$(this).addClass('in');
slideout.animate({
right: '0px'
}, {
queue: false,
duration: 500
});
}, function () {
$(this).removeClass('in');
slideout.animate({
right: '-200px'
}, {
queue: false,
duration: 500
});
});
$(".close").click(function () {
$(this).removeClass('out');
slideout.animate({
right: '-200px'
}, {
queue: false,
duration: 1000
});
slideout.fadeOut({
duration: 1000
});
});
}
setTimeout(doInteresting, 3000);
});

jQuery delay or JavaScript SetTimeOut Simple solution

I need to set an alert nice message box via Jquery-UI
and then after the effects of the animation is done , and only then
to navigate to a different URL
This is the code I am using though no matter what I did try
the navigation occurs... only the UI effects does not get the chance to perform.
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).dialog("close").delay(2000).delay(800, function () {
window.location = "http://rcl.co.il";
});
}
}
});

Try bind redirect function on dialogclose event.
http://jsfiddle.net/tarabyte/tDFq3/
$("#dialog").dialog({
show: { effect: "puff", duration: 2000 },
hide: { effect: "explode", duration: 500 },
height: 340,
width: 400,
modal: true,
buttons: {
"אישור": function () {
$(this).on('dialogclose', function () {
window.location = "http://rcl.co.il";
}).dialog('close');
}
}
});