I am using the bxSlider and Superfish menu plugin. I am getting a conflict b/c I am using them at the same time they don't work at the same time. Please help! Below is a link of the 2 scripts as well as my code. https://www.dropbox.com/sh/x9zra9gtq0wn6op/l6-qj4tslI <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Welcome to Cross of Christ Church!</title> <link rel="stylesheet" type="text/css" href="_css/main.css"> <link href="_css/superfish.css" rel="stylesheet" media="screen"> <link href="_css/jquery.bxslider.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="_js/superfish.js"></script> <script src="_js/jquery.bxslider.min.js"></script> <!--[if gte IE 9]> <style type="text/css"> .gradient { filter: none; } </style> <![endif]--> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoControls: true }); });</script> <script type="text/javascript"> $(document).ready(function(){ $('ul.sf-menu').superfish(); });</script> </head> <body> <div class="container"> <table border="0" class="tableheader"><tr> <td><img src="_images/coclogo.png" alt="Cross of Christ Church"></td><td>Follow us:</td><td><img src="_images/fb.png" width="60" height="50" alt="Facebook"><img src="_images/twitter.png" width="60" height="50" alt="Twitter"></td></tr></table> <div class="content"> <ul class="sf-menu" id="example"> <li class="current"> <a href="followed.html">Home</a></li> <li> <a href="followed.html">Who We Are</a> <ul> <li><a href="followed.html">About Us</a></li> <li><a href="followed.html">Statement of Faith</a></li> <li><a href="followed.html">FAQ</a></li> </ul> </li> <li> <a href="followed.html">Church Information</a> <ul> <li><a href="followed.html">Serivce Time</a></li> <li><a href="followed.html">Location and Directions</a></li> <li><a href="followed.html">Contact Us</a></li> <li><a href="followed.html">Prayer Request</a></li> <li><a href="followed.html">Blog</a></li> <li><a href="followed.html">Privacy Policy</a></li> </ul> </li> <li> <a href="followed.html">Scripture Readings</a> <ul> <li><a href="followed.html">Sunday Lectionary</a></li> <li><a href="followed.html">Daily Lectionary</a></li> </ul> </li> </ul> <div class="sliderwrapper"> <ul class="bxslider"> <li><img src="_images/placeholder.jpg" ></li> <li><img src="_images/ss2.jpg" ></li> <li><img src="_images/placeholder.jpg" ></li> <li><img src="_images/ss2.jpg" ></li> </ul></div> <h1>Welcome to Cross of Christ Church!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel enim cursus, blandit ligula ac, pharetra libero. Sed at porttitor elit. Sed consequat, diam eu elementum rutrum, nisi eros interdum dui, eget dictum turpis velit ac risus. Duis nec ultrices diam. Ut at tempus lacus. Fusce ut nisi in ligula luctus adipiscing. Vestibulum velit lacus, pharetra cursus tincidunt vitae, placerat ac arcu. Cras ut sagittis est.</p><br /> </div> </div> <div class="footer"><table border="0" class="tablefooter"><tr><td><img src="_images/ACNA.png" alt="ACNA"></td> <td><address>0000 FM 56 Glen Rose, TX 76043<br /><br />817-996-5703<br /><br />Webmaster: info@thecrossglenrose.org<br /><br />Copyright © 2013 All Rights Reserved</address></td> <td><img src="_images/epfw.png" alt="FWEP"></td> </tr> </table> </div> </body> </html> HTML:
I tried putting it in one. Still doesn't work <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Welcome to Cross of Christ Church!</title> <link rel="stylesheet" type="text/css" href="_css/main.css"> <link href="_css/superfish.css" rel="stylesheet" media="screen"> <link href="_css/jquery.bxslider.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="_js/superfish.js"></script> <script src="_js/jquery.bxslider.min.js"></script> <!--[if gte IE 9]> <style type="text/css"> .gradient { filter: none; } </style> <![endif]--> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoControls: true }); $('ul.sf-menu').superfish(); });</script> </head> <body> <div class="container"> <table border="0" class="tableheader"><tr> <td><img src="_images/coclogo.png" alt="Cross of Christ Church"></td><td>Follow us:</td><td><img src="_images/fb.png" width="60" height="50" alt="Facebook"><img src="_images/twitter.png" width="60" height="50" alt="Twitter"></td></tr></table> <div class="content"> <ul class="sf-menu" id="example"> <li class="current"> <a href="followed.html">Home</a></li> <li> <a href="followed.html">Who We Are</a> <ul> <li><a href="followed.html">About Us</a></li> <li><a href="followed.html">Statement of Faith</a></li> <li><a href="followed.html">FAQ</a></li> </ul> </li> <li> <a href="followed.html">Church Information</a> <ul> <li><a href="followed.html">Serivce Time</a></li> <li><a href="followed.html">Location and Directions</a></li> <li><a href="followed.html">Contact Us</a></li> <li><a href="followed.html">Prayer Request</a></li> <li><a href="followed.html">Blog</a></li> <li><a href="followed.html">Privacy Policy</a></li> </ul> </li> <li> <a href="followed.html">Scripture Readings</a> <ul> <li><a href="followed.html">Sunday Lectionary</a></li> <li><a href="followed.html">Daily Lectionary</a></li> </ul> </li> </ul> <div class="sliderwrapper"> <ul class="bxslider"> <li><img src="_images/placeholder.jpg" ></li> <li><img src="_images/ss2.jpg" ></li> <li><img src="_images/placeholder.jpg" ></li> <li><img src="_images/ss2.jpg" ></li> </ul></div> <h1>Welcome to Cross of Christ Church!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel enim cursus, blandit ligula ac, pharetra libero. Sed at porttitor elit. Sed consequat, diam eu elementum rutrum, nisi eros interdum dui, eget dictum turpis velit ac risus. Duis nec ultrices diam. Ut at tempus lacus. Fusce ut nisi in ligula luctus adipiscing. Vestibulum velit lacus, pharetra cursus tincidunt vitae, placerat ac arcu. Cras ut sagittis est.</p><br /> </div> </div> <div class="footer"><table border="0" class="tablefooter"><tr><td><img src="_images/ACNA.png" alt="ACNA"></td> <td><address>0000 FM 56 Glen Rose, TX 76043<br /><br />817-996-5703<br /><br />Webmaster: info@thecrossglenrose.org<br /><br />Copyright © 2013 All Rights Reserved</address></td> <td><img src="_images/epfw.png" alt="FWEP"></td> </tr> </table> </div> </body> </html> HTML:
Not very sure but the "auto" tag is creating issue. try to give gar coded values and see if it helps you. If it doesn't help then I would suggest you to visit codeclerks to get your query resolved. They have SMEs, who help in coding
Step 1, STOP trying to use scripting to do CSS' job on the menu. You lose that stupid malfing superfish asshattery and build a normal CSS menu, there's nothing left TO conflict. Step 2, STOP using tables for layout and get the presentational images out of the markup.... might also help to make the heading orders make sense and/or use more than just a h1 on the page -- This is 2013 not 1997, dragging the code kicking and screaming into at LEAST the previous century would go a long ways... Step 3, STOP using the fat bloated steaming pile of asshattery known as jquery for some bandwidth and content-space wasting box-slider nonsense that is likely shoe-horning you into a fixed width layout and/or broken/useless attempt at responsive design that's slowing your page load by 3x or more... This step is optional, but goes a long way towards avoiding these types of garbage headaches in the first place... Of course if you REALLY want something like that, find one that attaches itself automatically inside a singleton, instead of some stupid jQuery bloat.