0

Hey,

Im stuck because i am using multiple versions of Javascript, so only the coverflow is working. Please can someone help?


Heres my code

<!DOCTYPE html>
<html>
<head>
	<title>Sir Harry Smith's School Report</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/scripts/jquery-1.2.62.min.js"></script>   
    <script type="text/javascript" src="includes/scripts/jquery-ui-personalized-1.5.22.packed.js"></script>  
   


    <script type="text/javascript" src="includes/scripts/sprinkle.js"></script> 
    	
	<style type="text/css">
	#tabvanilla p2 p {
	text-align: left;
	font-weight: bold;
}
    </style>
</head>

<body>
	<div id="container">
    <img src="includes/images/logo.png" alt="Insert Logo Here" name="logo" width="1100" height="280" id="logo" style="background: #8090AB; display:block;" />
    <div id="tabvanilla" class="widget">

    <ul class="tabnav">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#about">About Us</a></li>
    </ul>

    <div id="home" class="tabdiv">
    <p><a href="index.html"> Home </a></p>
    </div>
    <div id="news" class="tabdiv">
       <p>
      
      <a href="reports/video.html">Main Headlines</a></p><!--/recent-->
     <p><a href="reports/report1.html">Belgian Bus Crash Catastrophe</a></p>
    <p><a href="reports/report2.html">100 years  over &ndash; Coincidence or Fate?</a>      </p>
    <p><a href="reports/report3.html">Can  you tap yourself thin?</a></p>
    <p><a href="reports/report4.html">What defines our generation?</a></p>
     <p><a href="reports/report5.html">Barack O-Cameron</a></p>
    </div>
     
    <div id="about" class="tabdiv">
      <p><a href="#">The Reporters</a></p>
</div>
    <p2><!--featured-->
      
      <!--/widget-->
      
      
      
      
  <div id="container2">
    <script src="mootools - Copy.js" type="text/javascript"></script>
<script src="animate - Copy.js" type="text/javascript"></script>
<div id="wrapper">
	<div id="back">
		<div id="upperPartBack">
			<img src="images/spacer.png" />
          <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
          <img id="dateUpLeftBack" src="images/Double/Up/Left/0.png" /><img id="dateUpRightBack" src="images/Double/Up/Right/0.png" />
            <img id="monthUpBack" src="images/months/single/up/0.png" />
            <img id="yearBack1" src="images/months/single/20up.png" />
            <img id="yearBack2" src="images/months/single/12up.png" />
            <img id="hoursUpBack" src="images/Single/Up/AM/0.png" />
			<img id="minutesUpLeftBack" src="images/Double/Up/Left/0.png" /><img id="minutesUpRightBack" src="images/Double/Up/Right/0.png" />
			<img id="secondsUpLeftBack" src="images/Double/Up/Left/0.png" /><img id="secondsUpRightBack" src="images/Double/Up/Right/0.png" />
		</div>
		<div id="lowerPartBack">
			<img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            
        <img id="dateDownLeftBack" src="images/Double/Down/Left/0.png" /><img id="dateDownRightBack" src="images/Double/Down/Right/0.png" />
            <img id="monthDownBack" src="images/months/single/down/0.png" />
            <img id="yearBackdown1" src="images/months/single/20down.png" />
            <img id="yearBackdown2" src="images/months/single/12down.png" />
            <img id="hoursDownBack" src="images/Single/Down/AM/0.png" />
			<img id="minutesDownLeftBack" src="images/Double/Down/Left/0.png" /><img id="minutesDownRightBack" src="images/Double/Down/Right/0.png" />
			<img id="secondsDownLeftBack" src="images/Double/Down/Left/0.png" /><img id="secondsDownRightBack" src="images/Double/Down/Right/0.png" />
		</div>
	</div>

	<div id="front">
		<div id="upperPart">
			<img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            
        <img id="dateUpLeft" src="images/Double/Up/Left/0.png" /><img id="dateUpRight" src="images/Double/Up/Right/0.png"/>
            <img id="monthUp" src="images/months/single/up/0.png" />
             <img id="yearUp1" src="images/months/single/20up.png" />
            <img id="yearUp2" src="images/months/single/12up.png" />
            <img id="hoursUp" src="images/Single/Up/AM/0.png" />
			<img id="minutesUpLeft" src="images/Double/Up/Left/0.png" /><img id="minutesUpRight" src="images/Double/Up/Right/0.png"/>
			<img id="secondsUpLeft" src="images/Double/Up/Left/0.png" /><img id="secondsUpRight" src="images/Double/Up/Right/0.png"/>
    </div>
		<div id="lowerPart">
			<img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            <img src="images/spacer.png" />
            
            <img id="dateDownLeft" src="images/Double/Down/Left/0.png"/><img id="dateDownRight" src="images/Double/Down/Right/0.png" />
        <img id="monthDown" src="images/months/single/down/0.png" />
         <img id="yearUpleft1" src="images/months/single/20down.png" />
            <img id="yearUpleft2" src="images/months/single/12down.png" />
            <img id="hoursDown" src="images/Single/Down/AM/0.png"/>
			<img id="minutesDownLeft" src="images/Double/Down/Left/0.png"/><img id="minutesDownRight" src="images/Double/Down/Right/0.png" />
			<img id="secondsDownLeft" src="images/Double/Down/Left/0.png"  /><img id="secondsDownRight" src="images/Double/Down/Right/0.png"  />
		</div>
	</div>
</div>


<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

		
	<!-- Include jQuery CoverFlow widget -->
	<script type="text/javascript" src="js/ui.coverflow.js"></script>

	<link type="text/css" href="css/demos.css" rel="stylesheet" />
	
	<!-- Transformie is a plugin that makes webkit's CSS transforms work in Internet Explorer -->
	<script src="js/sylvester.js" type="text/javascript"></script>
	<script src="js/transformie.js" type="text/javascript"></script>
	
	<!-- Include mousewheel dependancies and app files -->
	<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
	<script src="js/app.js" type="text/javascript"></script>
    	<link type="text/css" href="css/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />



 <script type="text/javascript">
	$(function(){	

		
		var demo = {

			yScroll: function(wrapper, scrollable) {

				var wrapper = $(wrapper), scrollable = $(scrollable),
					loading = $('<div class="loading">Loading...</div>').appendTo(wrapper),
					internal = null,
					images	= null;
					scrollable.hide();
					images = scrollable.find('img');
					completed = 0;
					
					images.each(function(){
						if (this.complete) completed++;	
					});
					
					if (completed == images.length){
						setTimeout(function(){							
							loading.hide();
							wrapper.css({overflow: 'hidden'});						
							scrollable.slideDown('slow', function(){
								enable();	
							});					
						}, 0);	
					}
			
				
				function enable(){
					var inactiveMargin = 99,
						wrapperWidth = wrapper.width(),
						wrapperHeight = wrapper.height(),
						scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin,
						wrapperOffset = 0,
						top = 0,
						lastTarget = null;

					
					wrapper.mousemove(function(e){
						lastTarget = e.target;
						wrapperOffset = wrapper.offset();		
						top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
						if (top < 0){
							top = 0;
						}			
						wrapper.scrollTop(top);
					});	
				}			
			}
		}

		
		demo.yScroll('#scroll-pane', 'ul#sortable');

			
	});
	</script>
    <div class="pageWrapper">
<div class="demo">

		<div class="wrapper">
			<div id="coverflow"> <a href="aaa"><img src="img/gorillaz-plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach" /></a>
				<img src="img/kingsofleon-comearoundsunshine.jpg" data-artist="Kings Of Leon" data-album="Come Around Sunshine"/>
				<img src="img/kidrock-bornfree.jpg" data-artist="Kid Rock" data-album="Born Free"/>		
				<img src="img/recovery-recovery.jpg" data-artist="Eminem" data-album="Recovery"/>
				<img src="img/lilwayne-iamnotahumanbeing.jpg" data-artist="Lil Wayne" data-album="I Am Not A Human Being"/>
				<img src="img/taylorswift-speaknow.jpg" data-artist="Taylor Swift" data-album="Speak Now"/>
				<img src="img/thebandperry-thebandperry.jpg" data-artist="The Band Perry" data-album="The Band Perry"/>
				<img src="img/maroon5-handsallover.jpg" data-artist="Maroon 5" data-album="Hands All Over"/>
				<img src="img/mychemicalromance-dangerdays.jpg" data-artist="My Chemical Romance" data-album="Danger Days"/>
				<img src="img/ironmaiden-thefinalfrontier.jpg" data-artist="Iron Maiden" data-album="The Final Frontier"/>
				<img src="img/order of the black - black label society.jpg" data-artist="Order Of The Black" data-album="Black Label Society"/>	
				<img src="img/usher-raymondvraymond.jpg" data-artist="Usher" data-album="Raymond V Raymond"/>
			</div>
		</div>

		


</body>
</html>
2
Contributors
2
Replies
4
Views
5 Years
Discussion Span
Last Post by Caveman280
0

Basically there is no need for two versions. all scripts and ui css make a valid attempt to stay up to date in compatibility with latest jquery.

First, make sure all your css is in the head block in the same order it currently is - before javascript references;
Get rid of jquery-1.2.62.min.js, src="js/jquery-1.6.2.min.js" and replace it with the latest - 1.7.x ;
rename "mootools - Copy.js" and "animate - Copy.js" so they have no spaces;

0

Thanks for that, i have done all of the above, but it still won't work, the only bit that works is the clock, any ideas?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.