Multiple JQuery Instances

I am having a problem getting three JQuery instances working. I have a background resizer, a lightbox, and a tooltip all being called up via JQuery. I am not able to get the tooltip to work correctly. By itself it works just fine. When combining multiple instances what do I need to do to to sperate inside the document ready. Here is a copy of the link: http://www.cybernetiksolutions.com/adamromito.com/gear.html
LVL 6
thebradnetworkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SeonyxCommented:
You can use document.ready as many times as you like...

 $(document).ready(function(){
    Your code goes here
  });

  $(document).ready(function(){
    Your code goes here
  });

The only thing to watch out for is that your different blocks of code will execute on a first come first serve basis, so watch out for any inter-dependancies.
0
thebradnetworkAuthor Commented:
This is the code I am having problems with. Even if I separate everything with a document ready it wont work. Ideas?
$(document).ready(function() {

$.supersized({
slides	:  [ { image : 'http://www.cybernetiksolutions.com/adamromito.com/images/bg1.jpg' } ]					
});
				
$("a.iframe").fancybox({
'transitionIn'	:	'elastic',
'transitionOut'	:	'elastic',
'speedIn'		:	600, 
'speedOut'		:	200, 
'overlayShow'	:	false
});

  $('area[alt]').qtip({
    content: {
      attr: 'alt'
    },
    style: {
      classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
    },
    
    position: {
      target: 'mouse',
      adjust: {
         mouse: true  // Can be ommited (e.g. default behaviour)
      }
  });

Open in new window

0
SeonyxCommented:
It could be that there's a issue with the $ alias.

$ is really just a shorthand term for jquery but sometimes it gets hijacked.

You may find it will work if you explicity reference the jquery object using the full jquery name instead of the alias i.e rather than:

<script type="text/javascript">
    $(document).ready(function() {

    });
</script>

use:

<script type="text/javascript">
    jQuery(document).ready(function() {

    });
</script>

change any $ references to jQuery in the client code.

Another thing to do is check it in Firebug and see if there are any errors.

(If you don't have Firebug, get it at once - it's the business when it comes to investigating errors in javascript.)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

thebradnetworkAuthor Commented:
I have tried this and its not working. I also looked at it in firebug and I am not sure if Im looking at it correctly but I cant see that its giving me any errors.
0
SeonyxCommented:
Looking at it again there seems to be a syntax error in the qtip code. I tried it like this and it worked:

  $('area[alt]').qtip({      
         content: {      attr: 'alt'      },
          style: {      classes: 'ui-tooltip-tipsy ui-tooltip-shadow'      }
        });

So the whole script with all three working is:

<script type="text/javascript">
$(document).ready(function() {

  $('area[alt]').qtip({      
         content: {      attr: 'alt'      },
          style: {      classes: 'ui-tooltip-tipsy ui-tooltip-shadow'      }
        });
      
                  $.supersized({slides      :  [ { image : 'http://www.cybernetiksolutions.com/adamromito.com/images/bg1.jpg' } ]                              
                  });
<!-- Code goes here -->                        
$("a.iframe").fancybox({
'transitionIn'      :      'elastic',
'transitionOut'      :      'elastic',
'speedIn'            :      600,
'speedOut'            :      200,
'overlayShow'      :      false
});

$.supersized({slides      :  [ { image : 'http://www.cybernetiksolutions.com/adamromito.com/images/bg1.jpg' } ]                              
                  });
<!-- Code goes here -->                        
$("a.iframe").fancybox({
'transitionIn'      :      'elastic',
'transitionOut'      :      'elastic',
'speedIn'            :      600,
'speedOut'            :      200,
'overlayShow'      :      false
});      
});
      
</script>

Also I noticed an error looking for the loading.gif  file - I think that's because you are calling the css file after the script.:
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" />
So swap those around:
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" />
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
thebradnetworkAuthor Commented:
Thats a lot!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.