NyroModal - trying to open modal on page load

JavaScript
1

Hi,

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

So starting simple i checked:


$(window).load(function() {

alert("hello");

});

This works on my page, so i try


$(window).load(function() {
    $.nyroModalManual({ url: '#blah'});

});

Which does not :frowning:

If i set a link with class=“nyroModal” the modal window opens when i click the link. If i create a function


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

2

Hi there,

One way to do it would be like this:

<!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

Thanks for that. Much neater than mine :slight_smile:

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 :frowning: 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.

4

Hi,

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

5

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

6

Hi again,

It is conflicting with this file:

<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:

<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:

<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

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 :slight_smile:

Ich bin Ihnen sehr dankbar :slight_smile:

8

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/showthread.php?1041498-Forum-Posting-Basics&p=5406309&viewfull=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 :slight_smile:

Kein Problem. Immer wieder gerne!
Ich muss aber gestehen, dass obwohl ich in Deutschland wohne, komme ich aus England. Ein “Expat” sozusagen :slight_smile: