1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

JQuery Plugins clashing

Discussion in 'jQuery' started by Jordan McGehee, Nov 6, 2013.

0
  1. #1
    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:
     
    Jordan McGehee, Nov 6, 2013 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    What's the error message? And why do you have two script tags and document.ready? Put both in one.
     
    PoPSiCLe, Nov 6, 2013 IP
  3. Jordan McGehee

    Jordan McGehee Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    How do I see what the error message is, sorry I am new to such tools.
     
    Jordan McGehee, Nov 6, 2013 IP
  4. Jordan McGehee

    Jordan McGehee Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    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:
     
    Jordan McGehee, Nov 6, 2013 IP
  5. shek

    shek Well-Known Member

    Messages:
    266
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    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 :)
     
    shek, Nov 6, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    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.
     
    deathshadow, Nov 12, 2013 IP