in case others have the same issue, i guessed the problem in the last
post... adding a setTimeout(function() { before the call to modal, set
for more than the time of closing the previous modal, makes it work.
interestingly enough, setting a timeout value less than total closing
time but greater than 0 works intermittently, and seems to work more
often the closer it is to total closing time (ie, if closing time is
700 total, setting 710 works always, 610 works 9 out of 10 times, 410
works 5 out of 10 times, according to my quick testing) so it looks
like a sort of 'race condition' is involved
thanks again to brian for the working example (i wouldn't have thought
of using next and prev selectors via jquery)! :)
On Jan 2, 3:26 pm, nevgenevich <nevgenev...@gmail.com> wrote:
> I had time to play around with it more and narrowed it down to the
> onClose function...
>
> this works:
>
> onClose: function (dialog) {
> jQuery.modal.close();
>
> }
>
> this doesn't:
>
> onClose: function (dialog) {
> dialog.data.fadeOut(300);
> dialog.container.fadeOut(100);
> dialog.overlay.fadeOut(300, function () {
> jQuery.modal.close();
> });
>
> }
>
> but why does this happen and how can i get around it? can i set a
> timeout on the automated modal open (when clicking previous or next)
> equal or greater to the time it takes to close the modal? or is there
> a better way? any help is appreciated!
>
> On Dec 31 2009, 9:53 pm, nevgenevich <nevgenev...@gmail.com> wrote:
>
>
>
> > I played around with it, taking it step by step closer to my code
> > until i hit an issue, and narrowed it down to modal effects... below
> > is my change to full effects that i'm using for my project, ignore the
> > jQuery vs $, its my way of avoiding certain conflicts
>
> > when i remove all these effects from my code the previous/next work,
> > but i need the effects to remain.... any ideas on why they could be
> > causing an issue (timing?) or how to make it work?
>
> > jQuery('a.Foo').each(function()
> > {
> > jQuery(this).click(function()
> > {
> > jQuery('#modal_' + this.id).modal({
> > overlayClose:true,
> > onOpen: function (dialog) {
> > dialog.overlay.fadeIn(300);
> > dialog.container.fadeIn(100);
> > dialog.data.fadeIn(300);
> > },
> > onClose: function (dialog) {
> > dialog.data.fadeOut(300);
> > dialog.container.fadeOut(100);
> > dialog.overlay.fadeOut(300,
> > function () {
> > jQuery.modal.close();
> > });
> > },
> > closeHTML:'<a href="#">Back</a>',
> > minHeight:540,
> > minWidth:940,
> > maxHeight:540,
> > maxWidth:940,
> > opacity:60
> > });
> > });
> > });
>
> > On Dec 31, 12:37 pm, brian <zijn.digi...@gmail.com> wrote:
>
> > > On Thu, Dec 31, 2009 at 2:13 AM, nevgenevich <nevgenev...@gmail.com>
> > > wrote:
>
> > > > it generates the link properly, when clicking on it: it closes the
> > > > modal but does nothing else. i can verify with a console.log that it
> > > > gets to after the call to open the previous modal, but it doesnt open
> > > > anything..... checked to make sure it was generating the modal link
> > > > correctly too (ie calling the correct id)
>
> > > It works fine for me. Here's the full page I used to test:
>
> > > <!DOCTYPE html>
> > > <html>
> > > <head>
> > > <title></title>
> > > <link rel="Stylesheet"
> > > href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"; />
> > > <style>
> > > body { padding: 100px; }
> > > div.Bar { display: none; }
> > > </style>
> > > <script
> > > src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";></script>
> > > <script src="jquery.simplemodal-1.3.3.min.js"></script>
> > > <script>
> > > $(function()
> > > {
> > > $('a.Foo').each(function()
> > > {
> > > $(this).click(function()
> > > {
> > > $('#modal_' + this.id).modal({overlayClose:true});
> > > });
> > > });
>
> > > var num_divs = $('div.Bar').length;
>
> > > $('div.Bar').each(function(i)
> > > {
> > > /* if there is a previous div add a link to it
> > > */
> > > if (i > 0)
> > > {
> > > /* get the ID for previous div
> > > */
> > > var prev_id = $(this).prev('.Bar').attr('id');
>
> > > /* add the link with click event
> > > */
> > > $('<a href="#" class="Prev">previous</a>')
> > > .click(function()
> > > {
> > > $.modal.close();
> > > $('#' +
> > > prev_id).modal({overlayClose:true});
> > > })
> > > .appendTo($(this));
> > > }
>
> > > /* if there is a next div add a link to it
> > > */
> > > if (i < num_divs - 1)
> > > {
> > > /* get the ID for next div
> > > */
> > > var next_id = $(this).next('.Bar').attr('id');
>
> > > /* add the link with click event
> > > */
> > > $('<a href="#" class="Next">next</a>')
> > > .click(function()
> > > {
> > > $.modal.close();
> > > $('#' +
> > > next_id).modal({overlayClose:true});
> > > })
> > > .appendTo($(this));
> > > }
> > > });
>
> > > });
>
> > > </script>
> > > </head>
> > > <body>
>
> > > <ul>
> > > <li><a href="#" class="Foo" id="one">one</a></li>
> > > <li><a href="#" class="Foo" id="two">two</a></li>
> > > <li><a href="#" class="Foo" id="three">three</a></li>
> > > <li><a href="#" class="Foo" id="four">four</a></li>
> > > <li><a href="#" class="Foo" id="five">five</a></li>
> > > </ul>
>
> > > <div class="Bar" id="modal_one">Modal one</div>
> > > <div class="Bar" id="modal_two">Modal two</div>
> > > <div class="Bar" id="modal_three">Modal three</div>
> > > <div class="Bar" id="modal_four">Modal four</div>
> > > <div class="Bar" id="modal_five">Modal five</div>
>
> > > </body>
> > > </html>- Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -
