• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 327
  • Last Modified:

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
0
thebradnetwork
Asked:
thebradnetwork
  • 3
  • 3
1 Solution
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
thebradnetworkAuthor Commented:
Thats a lot!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now