Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
Regular Coder
Join Date: Feb 2006
Posts: 168
Thanks: 32
Thanked 1 Time in 1 Post
stuck adding simple delay after document ready
Hello all,
Basically, I have a modal popup set to open on document ready however, i want to delay that for about 1 - 2 seconds. this is the call right now:
Code:
$(document).ready(function() {
$('#basic-modal-content').modal();
});
I tried using .delay but it wasn't working. what is the proper method? setTimeout? The current code has the modal open the moment the page loads. I just want to slow that down a bit so it happens after a second or 2 instead.
PM User | 2
Senior Coder
Join Date: Dec 2010
Posts: 2,245
Thanks: 10
Thanked 531 Times in 525 Posts
Yes, it is setTimeout
PM User | 3
Master Coder
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,465
Thanks: 0
Thanked 499 Times in 491 Posts
Code:
$(document).ready(function() {
setTimeout($('#basic-modal-content').modal,2000);
});
PM User | 4
Regular Coder
Join Date: Feb 2006
Posts: 168
Thanks: 32
Thanked 1 Time in 1 Post
Thanks for the replies but still not working?
I was using a pre-made modal pack and just wanted to add the auto function with the delay.
seems like a lot of script . I just want a simple centered modal to open (my content which ill replace later) after a few seconds.
this is the html:
Code:
<!DOCTYPE html>
<html>
<head>
<title> SimpleModal Basic Modal Dialog </title>
<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2010 - Eric Martin' />
<!-- Page styles -->
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Contact Form CSS files -->
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<!-- IE6 "fix" for the close png image -->
<!--[if lt IE 7]>
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<!-- JS files are loaded at the bottom of the page -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
<script>
$(document).ready(function() {
setTimeout($('#basic-modal-content').modal,2000);
});
</script>
</head>
<body>
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='basic-modal'>
<h3>Basic Modal Dialog</h3>
<p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
<p>Examples:</p>
<p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p>
<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
<p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p>
<p><code>$('<div></div>').load('page.html').modal(); // AJAX</code></p>
<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/basic/x.png' alt='' />
</div>
</div>
<div id='footer'>
© 2010 Eric Martin | <a href='http://www.ericmmartin.com/'>ericmmartin.com</a> | <a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a>
</div>
</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
</body>
</html>
This is the Jquery
Code:
/*
* SimpleModal 1.4.2 - jQuery Plugin
* http://simplemodal.com/
* Copyright (c) 2011 Eric Martin
* Licensed under MIT and GPL
* Date: Sat, Dec 17 2011 14:35:42 -0800
*/
(function(b){"function"===typeof define&&define.amd?define(["jquery"],b):b(jQuery)})(function(b){var j=[],k=b(document),l=b.browser.msie&&6===parseInt(b.browser.version)&&"object"!==typeof window.XMLHttpRequest,n=b.browser.msie&&7===parseInt(b.browser.version),m=null,h=b(window),i=[];b.modal=function(a,d){return b.modal.impl.init(a,d)};b.modal.close=function(){b.modal.impl.close()};b.modal.focus=function(a){b.modal.impl.focus(a)};b.modal.setContainerDimensions=function(){b.modal.impl.setContainerDimensions()};
b.modal.setPosition=function(){b.modal.impl.setPosition()};b.modal.update=function(a,d){b.modal.impl.update(a,d)};b.fn.modal=function(a){return b.modal.impl.init(this,a)};b.modal.defaults={appendTo:"body",focus:!0,opacity:50,overlayId:"simplemodal-overlay",overlayCss:{},containerId:"simplemodal-container",containerCss:{},dataId:"simplemodal-data",dataCss:{},minHeight:null,minWidth:null,maxHeight:null,maxWidth:null,autoResize:!1,autoPosition:!0,zIndex:1E3,close:!0,closeHTML:'<a class="modalCloseImg" title="Close"></a>',
closeClass:"simplemodal-close",escClose:!0,overlayClose:!1,fixed:!0,position:null,persist:!1,modal:!0,onOpen:null,onShow:null,onClose:null};b.modal.impl={d:{},init:function(a,d){if(this.d.data)return!1;m=b.browser.msie&&!b.boxModel;this.o=b.extend({},b.modal.defaults,d);this.zIndex=this.o.zIndex;this.occb=!1;if("object"===typeof a){if(a=a instanceof jQuery?a:b(a),this.d.placeholder=!1,0<a.parent().parent().size()&&(a.before(b("<span></span>").attr("id","simplemodal-placeholder").css({display:"none"})),
this.d.placeholder=!0,this.display=a.css("display"),!this.o.persist))this.d.orig=a.clone(!0)}else if("string"===typeof a||"number"===typeof a)a=b("<div></div>").html(a);else return alert("SimpleModal Error: Unsupported data type: "+typeof a),this;this.create(a);this.open();b.isFunction(this.o.onShow)&&this.o.onShow.apply(this,[this.d]);return this},create:function(a){this.getDimensions();if(this.o.modal&&l)this.d.iframe=b('<iframe src="javascript
This is more jquery
Code:
/*
* SimpleModal Basic Modal Dialog
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: basic.js 254 2010-07-23 05:14:44Z emartin24 $
*/
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
});
PM User | 5
Regular Coder
Join Date: Feb 2006
Posts: 168
Thanks: 32
Thanked 1 Time in 1 Post
Once again, I solved it myself. I really dont understand why these modal plugins use so much jscript to center things, etc. getheight, ete etc. It is always over complicated.
Less the close button, which I didn't add yet...this simple amount of scripts does everything I needed. a simple popup box, centered that comes on in 1.2 seconds from page load. no need for setTimeout, etc.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-</title>
<style type="text/css">
#popup {
background-color: #09F;
height: 400px;
width: 700px;
margin-top: -200px;
margin-left: -350px;
position: fixed;
left: 50%;
top: 50%;
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
$("#popup").delay(1000).fadeIn("800");
});
</script>
</head>
<body>
<div id="popup">content in this box</div>
</body>
</html>
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 08:30 AM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
