...

View Full Version : JavaScript/HTML help!



spitfire182
04-24-2011, 04:19 PM
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



<!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

AndrewGSW
04-24-2011, 08:18 PM
src="jquery.nivo.slider.pack.js"
So is this .js file saved in the same location as the current page?

The following code

<!-- Nivo Slider Plugin Script -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

Occurs within the 'body', within a 'div'. It might still work (?) but you should move it into the 'head' area, just before the opening 'body' tag.

_Aerospace_Eng_
04-24-2011, 10:25 PM
You can't add the script to jquery twice. They start conflicting. Change this

<!-- 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>
to this

<!-- Nivo Slider Plugin -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum