SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Hiding from the world
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    NyroModal - trying to open modal on page load

    Hi,

    I'm not so good with Javascript so need some help with opening a nyroModal window on pageload

    So starting simple i checked:
    Code:
    $(window).load(function() {
    
    alert("hello");
    
    });
    This works on my page, so i try
    Code:
    $(window).load(function() {
        $.nyroModalManual({ url: '#blah'});
    
    });
    Which does not


    If i set a link with class="nyroModal" the modal window opens when i click the link. If i create a function
    Code:
    function lemons(){
    $.nyroModalManual({
        url: '#blah'
    });
    };
    and call that from an onClick="lemons();" the modal window opens.

    Why can't i get it to work on page load? am i missing something dead easy? any help will be most appreciated

    thanks
    If i am a product of your imagination you should try harder!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    One way to do it would be like this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>nyroModal demo</title>
        <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
        <style>.hidden{ display: none; }</style>
      </head>
      
      <body>
        <a href="http://geekfriendly.org/blog/wp-content/uploads/2007/06/schrodinger_s-lolcat.jpg" class="nyroModal hidden" title="Lolcat">Image</a>
        
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
        <!--[if IE 6]>
          <script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
        <![endif]-->
        <script type="text/javascript">
          $(function(){
            $('.nyroModal').nyroModal();
            $(".hidden").click();
          });
        </script>
      </body>
    </html>
    Here's a demo.

    Hope that helps.
    If you have any questions, let me know.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Hiding from the world
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. Much neater than mine

    got it working as above but when i add it into my website it doesn't work so i think i have an issue with conflicting scripts so going to have to try and work out which one is causing the issues.

    Thanks for you help as i at least know that works and can try and find whats stopping it.
    If i am a product of your imagination you should try harder!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    No problem.
    Can you post a link to the page where it is not working. Maybe it's something simple.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Hiding from the world
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So i've done a bit of checking and making sure it wasn't due to a different version of jquery or something. I've got it working using the bare min on a plain page without the rest of my template code
    So this is working using jquery 1.4.2 (http://mcsuk.org/working/nyromodal/index_v2.php)



    But when i put it into my template it doesn't work! http://mcsuk.org/working/nyromodal/index_v1.php
    the console is reporting 'TypeError: $(...).nyroModal is not a function' but i don't know what that means? is it conflicting with something else? any ideas what i need to amend?

    any help most appreciated

    thanks
    If i am a product of your imagination you should try harder!

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi again,

    It is conflicting with this file:

    Code:
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    The reason is that the above file also contains a version of jQuery and including it after nyroModal is overwriting any event-listeners etc. that nyroModal might have registered.

    One solution would be to do this:

    Code:
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <script type="text/javascript" src="http://www.mcsuk.org/js/nyroModal-1.6.2/js/jquery.nyroModal-1.6.2.pack.js"></script>
    And remove this:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    I don't know if that will affect things elsewhere, however.

  7. #7
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Hiding from the world
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome thanks so much. It wasn't playing ball for a while and then i swapped the order to what you have above and its fine. I need to check one other thing works as it isn't on the example page but everything else seems to be working fine (side bar accordian, dropdown menu, slider at the bottom)

    For the future is there something i should look for to find which bit is causing the problem when i get issues like this? I'm pretty new to actually coding javascript i normally hope it works when i put it all together


    Ich bin Ihnen sehr dankbar
    If i am a product of your imagination you should try harder!

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Noppy View Post
    For the future is there something i should look for to find which bit is causing the problem when i get issues like this? I'm pretty new to actually coding javascript i normally hope it works when i put it all together
    Well, when I'm trouble shooting something like this, I make sure I can reproduce the problem, then strip away little bits of the code, checking periodically to see if the problem persists. 99 times out of 100, you can find the error doing it this way.
    I had got as far as stripping out all of the content and styles on your page, then I removed the file I mentioned and things suddenly worked.

    You might also want to have a look at this: http://www.sitepoint.com/forums/show...=1#post5406309
    Lot's of people just dump a load of code on you and say "It don't work!" and aren't really interested in helping others help themselves.
    If you can recreate your problem in the smallest amount of code possible, your chances of getting an answer go up dramatically

    Quote Originally Posted by Noppy View Post
    Ich bin Ihnen sehr dankbar
    Kein Problem. Immer wieder gerne!
    Ich muss aber gestehen, dass obwohl ich in Deutschland wohne, komme ich aus England. Ein "Expat" sozusagen


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •