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