Databases
StackOverflow2013
Postsdbo
POI can't get two jQuery slides to work simultaneously
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POI can't get two jQuery slides to work simultaneously
    primarykey
    data
    text
    <p>I am trying to get two jQuery slides to work in a HTML page. I can't seem to get both of the slides to work simultaneously, however I can make one work at a time. Individually both slides work well, it's only when I include them on one HTML page when I get an issue. </p> <p>Please help me understand why the two jQuery slides cant work simultaneously on one page. </p> <p><strong>Find the source code for the HTML page below:</strong></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Testing two Sliders&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- ##### First Slide #### --&gt; &lt;?php include("homeSliderOrg.html");?&gt; &lt;br&gt; &lt;br&gt; &lt;!-- ##### Second Slide #### --&gt; &lt;?php include("easyAccordian.html");?&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>Find below the Source Code to the first slide</strong></p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Lof JSliderNews 1.0 - Jquery 1.3&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="css/layout.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="css/style0.css" /&gt; &lt;script language="javascript" type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="js/jquery.easing.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="js/script.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $( function(){ $('#lofslidecontent45').lofJSidernews( { interval:4000, easing:'easeOutBounce', duration:1200, auto:true } ); }); &lt;/script&gt; &lt;style&gt; .lof-snleft .lof-main-outer{ float:right; } /* move the main wapper to the right side */ .lof-snleft .lof-main-wapper{ margin-left:auto; margin-right:inherit; clear:both; height:300px; } /* move the navigator to the left side */ .lof-snleft .lof-navigator-outer{ left:0; top:0; right:inherit; } ul.lof-main-wapper li { position:relative; } .lof-snleft .lof-navigator .active{ background:url(images/arrow-bg2.gif) center right no-repeat; } .lof-snleft .lof-navigator li div{ margin-left:inherit; margin-right:18px; } .lof-snleft .lof-navigator li.active div{ margin-left:inherit; margin-right:18px; background:url(images/grad-bg2.gif) } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;!-- &lt;h1&gt;&lt;strong&gt;Lof JSliderNews 1.0&lt;/strong&gt; - Jquery 1.3 &amp; Easing plugin&lt;/h1&gt; --&gt; &lt;!------------------------------------- THE CONTENT -------------------------------------------------&gt; &lt;div id="lofslidecontent45" class="lof-slidecontent lof-snleft"&gt; &lt;div class="preload"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; &lt;!-- MAIN CONTENT --&gt; &lt;div class="lof-main-outer"&gt; &lt;ul class="lof-main-wapper"&gt; &lt;li&gt; &lt;img src="images/791902news3.jpg" title="Newsflash 2" height="300" width="900"&gt; &lt;div class="lof-main-item-desc"&gt; &lt;h3&gt;&lt;a target="_parent" title="Newsflash 2" href="#"&gt;Newsflash 2&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...&lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="images/435576news10.jpg" title="Newsflash 1" height="300" width="900"&gt; &lt;div class="lof-main-item-desc"&gt; &lt;h3&gt;&lt;a target="_parent" title="Newsflash 1" href="#"&gt;Newsflash 1&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...&lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="images/641906img1.jpg" title="Newsflash 3" height="300" width="900"&gt; &lt;div class="lof-main-item-desc"&gt; &lt;h3&gt;&lt;a target="_parent" title="Newsflash 3" href="#"&gt;Newsflash 3&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...&lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"&gt; &lt;div class="lof-main-item-desc"&gt; &lt;h3&gt;&lt;a target="_parent" title="Newsflash 5" href="#"&gt;Newsflash 5&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...&lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"&gt; &lt;div class="lof-main-item-desc"&gt; &lt;h3&gt;&lt;a target="_parent" title="Newsflash 5" href="#"&gt;Newsflash 5&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...&lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"&gt; &lt;div class="lof-main-item-desc"&gt; &lt;h3&gt;&lt;a target="_parent" title="Newsflash 5" href="#"&gt;Newsflash 5&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...&lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- END MAIN CONTENT --&gt; &lt;!-- NAVIGATOR --&gt; &lt;div class="lof-navigator-outer"&gt; &lt;ul class="lof-navigator"&gt; &lt;li&gt; &lt;div&gt; &lt;img src="images/lofthumbs/791902news3.jpg" /&gt; &lt;h3&gt; NewsFlash 1 &lt;/h3&gt; &lt;span&gt;20.01.2010&lt;/span&gt; - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu... &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div&gt; &lt;img src="images/lofthumbs/435576news10.jpg" /&gt; &lt;h3&gt; NewsFlash 2 &lt;/h3&gt; &lt;span&gt;20.01.2010&lt;/span&gt; -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div&gt; &lt;img src="images/lofthumbs/641906img1.jpg" /&gt; &lt;h3&gt; NewsFlash 3 &lt;/h3&gt; &lt;span&gt;20.01.2010&lt;/span&gt; - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div&gt; &lt;img src="images/lofthumbs/416719news7.jpg" /&gt; &lt;h3&gt; NewsFlash 4&lt;/h3&gt; &lt;span&gt;20.01.2010&lt;/span&gt; - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div&gt; &lt;img src="images/lofthumbs/641906img1.jpg" /&gt; &lt;h3&gt; NewsFlash 5&lt;/h3&gt; &lt;span&gt;20.01.2010&lt;/span&gt; -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div&gt; &lt;img src="images/lofthumbs/416719news7.jpg" /&gt; &lt;h3&gt; NewsFlash 6&lt;/h3&gt; &lt;span&gt;20.01.2010&lt;/span&gt; - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. .. &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; &lt;/script&gt; &lt;!------------------------------------- END OF THE CONTENT -------------------------------------------------&gt; &lt;!-- &lt;p&gt; &lt;a href="index.html"&gt;Demo 1&lt;/a&gt; | &lt;a href="index2.html"&gt;Demo 2&lt;/a&gt; | &lt;a href="index3.html"&gt;Demo 3&lt;/a&gt; | &lt;a href="index4.html"&gt;Demo 4&lt;/a&gt; | &lt;a href="index5.html"&gt;Demo 5&lt;/a&gt; | &lt;a href="index6.html"&gt;Demo 6&lt;/a&gt; &lt;/p&gt; --&gt; &lt;!-- &lt;div id="footer"&gt; &lt;a href="http://landofcoder.com"&gt;LandOfCoder.Com&lt;/a&gt; &lt;/div&gt; --&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>Find below the Source Code to the second slide</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt; &lt;head&gt; &lt;title&gt;jQuery Easy Accordion Plugin&lt;/title&gt; &lt;!-- Meta --&gt; &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt; &lt;meta name="author" content="Andrea Cima Serniotti - Madeincima.eu" /&gt; &lt;meta name="description" content="jQuery Easy Accordion Plugin - A highly flexible timed horizontal slider able to show any kind of content" /&gt; &lt;meta name="keywords" content="jQuery, plugin, accordion, slider, slideshow, horizontal, timed, interval" /&gt; &lt;!-- Scripts --&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.easyAccordion.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/utility.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; html{font-size:62.5%} body{font-size:1.2em;color:#294f88} .sample{margin:0px;border:1px solid #92cdec;background:#white;padding:0px} h1{margin:0 0 20px 0;padding:0;font-size:2em;} h2{margin:40px 0 20px 0;padding:0;font-size:1.6em;} .easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;} p{font-size:1.2em;line-height:170%;margin-bottom:20px} /* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */ .easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0} .easy-accordion dt,.easy-accordion dd{margin:0;padding:0} .easy-accordion dt,.easy-accordion dd{position:absolute} .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;} .easy-accordion dd{z-index:1;opacity:0;overflow:hidden} .easy-accordion dd.active{opacity:1;} .easy-accordion dd.no-more-active{z-index:2;opacity:1} .easy-accordion dd.active{z-index:3} .easy-accordion dd.plus{z-index:4} .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);} /* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */ dd p{line-height:120%} #accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8} #accordion-1 dl{width:800px;height:245px} #accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c} #accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat} #accordion-1 dt.hover{color:#68889b;} #accordion-1 dt.active.hover{color:#fff} #accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} #accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold} #accordion-1 .active .slide-number{color:#fff;} #accordion-1 a{color:#68889b} #accordion-1 dd img{float:right;margin:0 0 0 30px;} #accordion-1 h2{font-size:2.5em;margin-top:10px} #accordion-1 .more{padding-top:10px;display:block} #accordion-2{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8} #accordion-2 h2{font-size:2.5em;margin-top:10px} #accordion-2 dl{width:700px;height:195px} #accordion-2 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c} #accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat} #accordion-2 dt.hover{color:#68889b;} #accordion-2 dt.active.hover{color:#fff} #accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} #accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold} #accordion-2 .active .slide-number{color:#fff} #accordion-2 a{color:#68889b} #accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px} #accordion-3{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8} #accordion-3 h2{font-size:2.5em;margin-top:10px} #accordion-3 dl{width:700px;height:195px} #accordion-3 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c} #accordion-3 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat} #accordion-3 dt.hover{color:#68889b;} #accordion-3 dt.active.hover{color:#fff} #accordion-3 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} #accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold} #accordion-3 .active .slide-number{color:#fff} #accordion-3 a{color:#68889b} #accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="sample"&gt; &lt;!-- &lt;h1&gt;Career Guidance Pro&lt;/h1&gt; &lt;h2&gt;Welcomes you&lt;/h2&gt; --&gt; &lt;div id="accordion-1"&gt; &lt;dl&gt; &lt;dt&gt;First slide&lt;/dt&gt; &lt;dd&gt;&lt;h2&gt;Your journey to success starts here!&lt;/h2&gt;&lt;p&gt;&lt;img src="images/monsters/img1.png" alt="Alt text to go here" /&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.&lt;br /&gt;&lt;a href="#" class="more"&gt;Read more&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt; &lt;dt&gt;Second slide&lt;/dt&gt; &lt;dd&gt;&lt;h2&gt;Our success rate is based on:&lt;/h2&gt;&lt;p&gt;&lt;img src="images/monsters/img2.png" alt="Alt text to go here" /&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.&lt;br /&gt;&lt;a href="#" class="more"&gt;Read more&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt; &lt;dt&gt;One more slide&lt;/dt&gt; &lt;dd&gt;&lt;h2&gt;Scientifically validated career guidance tools&lt;/h2&gt;&lt;p&gt;&lt;img src="images/monsters/img3.png" alt="Alt text to go here" /&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.&lt;br /&gt;&lt;a href="#" class="more"&gt;Read more&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt; &lt;dt&gt;Another slide&lt;/dt&gt; &lt;dd&gt;&lt;h2&gt;Another slide to go here&lt;/h2&gt;&lt;p&gt;&lt;img src="images/monsters/img4.png" alt="Alt text to go here" /&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.&lt;br /&gt;&lt;a href="#" class="more"&gt;Read more&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt; &lt;dt&gt;Wow one more&lt;/dt&gt; &lt;dd&gt;&lt;h2&gt;Unbilievable one more slide here&lt;/h2&gt;&lt;p&gt;&lt;img src="images/monsters/img5.png" alt="Alt text to go here" /&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.&lt;br /&gt;&lt;a href="#" class="more"&gt;Read more&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt; &lt;dt&gt;Last one&lt;/dt&gt; &lt;dd&gt;&lt;h2&gt;This is definitely the last one&lt;/h2&gt;&lt;p&gt;&lt;img src="images/monsters/img6.png" alt="Alt text to go here" /&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.&lt;br /&gt;&lt;a href="#" class="more"&gt;Read more&lt;/a&gt;&lt;/p&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; &lt;/div&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. USSirBT
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POI can't get two jQuery slides to work simultaneously
      1. This table or related slice is empty.
      1. VTUpMod
    1. COtoo much code, you can't read it properly, could you make a jsfiddle for that ?
      singulars
      1. POI can't get two jQuery slides to work simultaneously
      1. USmas-designs
 

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