Hello all,
I'm quite new to programming and I'm having some trouble using two Jquery plugin on one html page. Both work fine if i hide the other and it is only when I try to you both that one stops working.
The first is called 'Nivo Slider' and I'm using this as a navigation tool, and the other is called 'Tweetable' (which most are probably familiar with).
Anyway, here is the HTML code and any help/advice would be much appriciated!
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Plugged In</title>
<link href="maincss.css" rel="stylesheet" type="text/css" />
<!-- Tweetable Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tweetable.js"></script>
<!-- Nivo Slider Plugin -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script></head>
<body>
<div id="wrapper">
<!-- SECTION 1 -->
<!-- Headerlogo and Tagline -->
<img src="images/header.jpg" width="468" height="60" />
<!-- SECTION 2 -->
<!-- Navigation -->
<div id="navigation">
<p>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Musicians</a></li>
<li><a href="#">Buisnesses</a></li>
<li><a href="#">Live Music</a></li>
<li><a href="#">Our Role</a></li>
<li><a href="#">Blog</a></li>
</p>
</div>
<!-- SECTION 3 -->
<div id="apiwrapper">
<!-- Twitter Feed Plugin Script -->
<div id="tweets">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tweetable.js"></script>
<script type="text/javascript">
$(function(){
$('#tweets').tweetable({username: 'pluggedinnorth', time: true, limit: 10, replies: true, position: 'append'});
});
</script>
<!--[if IE 6]>
<script type='text/javascript' src='dd_belated_png.js'></script>
<script>DD_belatedPNG.fix('.png');</script>
<![endif]-->
</div>
<div id="slider">
<img src="images/rollover/1-musicians.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/rollover/2-buisness.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/rollover/3-buissnes.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
<!-- Nivo Slider Plugin Script -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>
<!-- SECTION 4 -->
<!-- News -->
<p>
24 April 2011
</p>
<p>
Plugged In Is Live!
</p>
<p>
Welcome to the newly opened Plugged In website. Have a look around and get to know the site, we have lots of interesting
and informative content not only for fledling muscians but buisnesses, live music and connections to other buisnesses and musicians.
Keep coming back to check out new content and don't forget to bookmark us!
</p>
<!-- SECTION 5 -->
<!-- Footer -->
<iframe src="http://www.facebook.com/plugins/like.php?href=file:///E:/Web/Site/index.html"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</div>
</body>
</html>
In this current state, only the twitter plugin works, and not the slider.
I have tried moving them around out of the same DIV's and this hasnt worked.
I know they are both tied into the same 'Wrapper' DIV but I'm hoping thats not the issue...
Help please!
Thanks,
spitfire182
Before you post, read our: 
JavaScript/HTML help!
