Databases
StackOverflow2013
Postsdbo
POMultiple jQuery plugins not working on the same page
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple jQuery plugins not working on the same page
    primarykey
    data
    text
    <p>I need to use few plugins on each page. One on the left div,middle and right div.But one of them not working whenever another plug in added in. Mostly in my case the 'Mac' style bouncing menu not working. I've tried using jquery noConflict() yet the same.I'm wondering if I'm placing it correctly or any other issue. Any help would be much appreciated as I wasted 2 days wondering on this! </p> <p>Below is the full page code that I'm facing this issue with. </p> <p> </p> <pre><code> &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"&gt; &lt;link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css"&gt; &lt;link rel="stylesheet" href="css/bootstrap-image-gallery.min.css"&gt; &lt;script src="menuv2.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/interface.js"&gt;&lt;/script&gt; &lt;style&gt; .left { height: 100%; //opacity: 0.5; background:rgba(0,0,0,0.3); //border-top: 3px solid #ccc; //border-bottom: 3px solid #ccc; //border-right:3px solid #ccc; position: relative; float: left; width: 16%; color: #fff; } .right { height: 100%; background:rgba(0,0,0,0.3); border-top: 3px solid #ccc; border-bottom: 3px solid #ccc; border-left:3px solid #ccc; position: relative; float:right; width: 16%; } .middle{ height: 100%; background:rgba(0,0,0,0.3); border-top: 3px solid #ccc; border-bottom: 3px solid #ccc; border-right:3px solid #ccc; border-left:3px solid #ccc; position: relative; float:left; margin-left: 3em; //margin-right: 1em; // left:20%; width: 60%; } .ontop { position: relative; top: 2.7em; right: 1.6em; } .onmiddle { position: relative; top: 12.7em; right: 1.6em; } &lt;/style&gt; &lt;/head&gt; &lt;body style="background-image: url(bg/6.jpg);background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;" width="100%" height="100%"&gt; &lt;div class="left"&gt; &lt;aside&gt; &lt;img src="hooha_images/logo_small.png" class="expand"&gt; &lt;/aside&gt; &lt;aside style="padding-top: 20%;" class="ontop"&gt; &lt;?php include ('sidebar.php'); ?&gt; &lt;/aside&gt; &lt;aside&gt; &lt;?php include('bottom_left.php');?&gt; &lt;/aside&gt; &lt;/div&gt; &lt;div class="middle"&gt; &lt;!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body --&gt; &lt;div id="blueimp-gallery" class="blueimp-gallery"&gt; &lt;!-- The container for the modal slides --&gt; &lt;div class="slides"&gt;&lt;/div&gt; &lt;!-- Controls for the borderless lightbox --&gt; &lt;h3 class="title"&gt;&lt;/h3&gt; &lt;a class="prev"&gt;‹&lt;/a&gt; &lt;a class="next"&gt;›&lt;/a&gt; &lt;a class="close"&gt;×&lt;/a&gt; &lt;a class="play-pause"&gt;&lt;/a&gt; &lt;ol class="indicator"&gt;&lt;/ol&gt; &lt;!-- The modal dialog, which will be used to wrap the lightbox content --&gt; &lt;div class="modal fade"&gt; &lt;div class="modal-dialog"&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" aria-hidden="true"&gt;&amp;times;&lt;/button&gt; &lt;h4 class="modal-title"&gt;&lt;/h4&gt; &lt;/div&gt; &lt;div class="modal-body next"&gt;&lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button type="button" class="btn btn-default pull-left prev"&gt; &lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt; Previous &lt;/button&gt; &lt;button type="button" class="btn btn-primary next"&gt; Next &lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt; &lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap-image-gallery.min.js"&gt;&lt;/script&gt; &lt;script&gt; jQuery.noConflict(); &lt;/script&gt; &lt;div id="links"&gt; &lt;a href="roses/1.jpg" title="Banana" data-gallery&gt; &lt;img src="roses/1.jpg" width='200' height="200" alt="Banana"&gt; &lt;/a&gt; &lt;a href="roses/2.jpg" title="Apple" data-gallery&gt; &lt;img src="roses/2.jpg" width='200' height="200" alt="Apple"&gt; &lt;/a&gt; &lt;a href="roses/3.jpg" title="Orange" data-gallery&gt; &lt;img src="roses/3.jpg" width='200' height="200" alt="Orange"&gt; &lt;/a&gt; &lt;a href="roses/4.jpg" title="Banana" data-gallery&gt; &lt;img src="roses/1.jpg" width='200' height="200" alt="Banana"&gt; &lt;/a&gt; &lt;a href="roses/5.jpg" title="Apple" data-gallery&gt; &lt;img src="roses/2.jpg" width='200' height="200" alt="Apple"&gt; &lt;/a&gt; &lt;a href="roses/6.jpg" title="Orange" data-gallery&gt; &lt;img src="roses/3.jpg" width='200' height="200" alt="Orange"&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; //var $a=jQuery.noConflict(); $(document).ready( function() { $('#dock2').Fisheye( { maxWidth: 60, items: 'a', itemsText: 'span', container: '.dock-container2', itemWidth: 40, proximity: 80, alignment : 'left', valign: 'bottom', halign : 'center' } ); } ); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USKalaivani Nair
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMultiple jQuery plugins not working on the same page
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POMultiple jQuery plugins not working on the same page
      1. This table or related slice is empty.
      1. VTUpMod
    1. COyou don't need a copy of jquery for each plugin.
      singulars
      1. POMultiple jQuery plugins not working on the same page
      1. USKevin B
    2. COin other words...only load jQuery once, and before all plugins
      singulars
      1. POMultiple jQuery plugins not working on the same page
      1. UScharlietfl
    3. COSorry I don't get it. U mean I'm loading jquery many times? Im very new to Jquery,could you pls explain which exactly?
      singulars
      1. POMultiple jQuery plugins not working on the same page
      1. USKalaivani Nair
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload