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);
});
Related
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');
}
});
});
I want to close my modal when people click the overlay, normally u would use
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#dialog').dialog('close');
})
but i am loading my modal after i create it, so it would seem that the above code interferes with mine somehow.
this is my code so far.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can bind the event inside the open method
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
open: function(event, ui) { //added here
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
});
},
position: {
my: "center top",
at: "center top+30",
of: "body"
},
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
Okay i found the problem.
i was trying to close the dialog before it was initialized.
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
position: { my: "center top", at: "center top+30", of: "body" },
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
open: function () {
jQuery('.ui-widget-overlay').on('click', function () {
dialog.dialog('close');
});
},
});
$(".currentDay").click(function () {
var id = event.target.id;
var url = '/Home/CalenderPartial/' + id;
dialog.load(url, function () {
dialog.dialog("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
this is the code i ended up with, and this works as intended.
so to summarize, put this code inside your dialog init.
open: function() {
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
})
I am using the following JavaScript:
$('#sidebar-wrapper').hover(function () {
$(this).animate({ width: '250px' }, { duration: 500, queue: false });
$('.container').animate({ paddingLeft: '260px' }, { duration: 200, queue: false });
}, function () {
$(this).animate({ width: '35px' }, { duration: 500, queue: false });
$('.container').animate({ paddingLeft: '40px' }, { duration: 200, queue: false });
}).trigger('mouseleave');
It works in Chrome, but doesn't work in IE. How can i fix this?
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');
}
}
});
This will animate the second image after the first animation is complete:
<script type="text/javascript">
$(document).ready(function () {
$('#image1').show("slide", { direction: 'left' }, 1000,
function() { $('#image2').show("slide", { direction: 'left' }, 1000)});
</script>
If I have four images I tried below - and only the first two images animate.
<script type="text/javascript">
$(document).ready(function () {
$('#image1').show("slide", { direction: 'left' }, 1000,
function() { $('#image2').show("slide", { direction: 'left' }, 1000)},
function () { $('#image3').show("slide", { direction: 'left' }, 1000)},
function () { $('#image4').show("slide", { direction: 'left' }, 1000)});
</script>
So what would be an effective way to animate all the images (4) in sequence?
$('#image1').show("slide", { direction: 'left' }, 1000, function() {
$('#image2').show("slide", { direction: 'left' }, 1000, function () {
$('#image3').show("slide", { direction: 'left' }, 1000, function () {
$('#image4').show("slide", { direction: 'left' }, 1000);
});
});
});
you could also do:
slide(1);
function slide(id){
if(id<5){
$('#image'+id).show("slide", { direction: 'left' }, 1000, function(){ slide(id+1));
}
}
I think the syntax/formatting is just off here. You have closing braces where you shouldn't on the second and third lines.
<script type="text/javascript">
$(document).ready(function () {
$('#image1').show("slide", { direction: 'left' }, 1000, function() {
$('#image2').show("slide", { direction: 'left' }, 1000, function () {
$('#image3').show("slide", { direction: 'left' }, 1000, function () {
$('#image4').show("slide", { direction: 'left' }, 1000);
});
});
});
});
</script>