how to execute a series of animations one after another using jquery? - javascript

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>

Related

Close jQuery UI dialog on overlay click

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');
})

jQuery Animate Working in Chrome but not Internet Explorer

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?

How to set foucs on button in Pnotify

i am using pnotify alert jquery in my project. i am trying to set focus on ok button when dialog box popup. so that user can simply hit enter or space bar to close the dialog box. but unable to do that.
This is link of pnotify
My code -
function AlertAskOk(Heading, Message, type, okclick) {
var modal_overlay;
info_box = $.pnotify({
title: Heading,
text: Message,
type: type,
buttons: 'ok',
okclick: okclick,
icon: "picon picon-object-order-raise",
delay: 20000,
history: false,
stack: false,
// nonblock: true,
before_open: function (pnotify) {
// $("btn-inverse").focus();
// Position this notice in the center of the screen.
pnotify.css({
"top": ($(window).height() / 2) - (pnotify.height() / 2),
"left": ($(window).width() / 2) - (pnotify.width() / 2)
});
// Make a modal screen overlay.
modal_overlay = $("<div />", {
"class": "ui-widget-overlay",
"css": {
"display": "none",
"position": "fixed",
"top": "0",
"width": "5000px",
"bottom": "0",
"right": "0",
"left": "0",
"cursor": "pointer"
}
}).appendTo("body").fadeIn("fast");
},
//....
after_open: function (ui) {
$(".btn", ui.container).focus();
},
//....
before_close: function () {
modal_overlay.fadeOut("fast");
}
});
}
Use after_open callback. Check this demo.
new PNotify({
//....
after_open: function (notify) {
$(".btn-class", notify.container).focus();
}
//....
});
If need change this for all PNotify, I use next solution:
PNotify.prototype.options.confirm.buttons[0].addClass = 'btn-pnotify-ok';
PNotify.prototype.modules.confirm.afterOpen = function(notice, options){
if (options.prompt) {
this.prompt.focus();
} else {
notice.container
.keyup(({keyCode}) => {
if (keyCode === 27) {
notice.remove();
}
})
.find('.btn-pnotify-ok')
.focus();
}
};
new PNotify({...});
...
new PNotify({...});
Demo
PNotify.prototype.options.styling = 'bootstrap3';
PNotify.prototype.options.confirm.buttons[0].addClass = 'btn-pnotify-ok';
PNotify.prototype.modules.confirm.afterOpen = function(notice, options){
if (options.prompt) {
this.prompt.focus();
} else {
notice.container
.keyup(({keyCode}) => {
if (keyCode === 27) {
notice.remove();
}
})
.find('.btn-pnotify-ok')
.focus();
}
};
$("#btn1").click(function () {
new PNotify({
title: 'Focus on open #1',
text: 'Press [enter] or [esc]!',
hide: false,
stack: {
'modal': true,
'dir1': 'down',
'dir2': 'right',
},
confirm: {
confirm: true,
},
buttons: {
closer: false,
sticker: false
},
});
});
$("#btn2").click(function () {
new PNotify({
title: 'Focus on open #2',
text: 'Press [enter] or [esc]!',
hide: false,
stack: {
'modal': true,
'dir1': 'down',
'dir2': 'right',
},
confirm: {
confirm: true,
},
buttons: {
closer: false,
sticker: false
},
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.confirm.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.css">
<button id="btn1" class="btn btn-default">Confirm Dialog #1</button>
<button id="btn2" class="btn btn-default">Confirm Dialog #2</button>

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);
});

Animating Ext.Panel in Sencha touch 2

I have this view that I want to slide in:
Ext.define('GS.view.AddBidView', {
extend: 'Ext.Panel',
config: {
xtype: 'panel',
modal: true,
width: '100%',
height: '50%',
bottom: '0%',
hideOnMaskTap: true,
items: [{
xtype: 'textareafield',
name: 'bio',
clearIcon: false,
id: 'textarea',
placeHolder: 'Ange ditt bud här...'
},
{
xtype:'button',
text: 'Lägg bud',
docked:'bottom',
maxWidth: '95%',
minHeight: '45px',
cls: 'saveBidBtn'
}]
},
initialize: function() {
this.down('#textarea').on('keyup', this.grow, this);
this.textarea = this.element.down('textarea');
this.textarea.dom.style['overflow'] = 'hidden';
},
grow: function() {
this.textarea.setHeight(this.textarea.dom.scrollHeight); // scrollHeight is height of all the content
this.getScrollable().getScroller().scrollToEnd();
}
});
It is rendered by this controller:
Ext.define('GS.controller.ShowModal', {
extend : 'Ext.app.Controller',
config : {
control : {
'button[action="showBidModal"]' : {
tap : 'showModal'
},
}
},
showModal : function() {
var addBidPanel = Ext.create('GS.view.AddBidView');
Ext.Viewport.add(addBidPanel);
}
});
How can I animate this with a slide up/slide down or similar? Tried a bunch of stuff but nothing seems to work.
All help is appreciated!
One way is to hide the modal by default:
hidden: true
Then you can apply showAnimation and hideAnimation to show and hide your modal with specified animation, for example:
showAnimation: {
type: 'slideIn',
duration: 1000,
direction: 'down'
},
hideAnimation: {
type: 'slideOut',
duration: 1000,
direction: 'up'
},
Here is a working fiddle: http://www.senchafiddle.com/#6tN6b

Categories

Resources