Member Avatar for Caveman280

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
  • 224 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by Caveman280

Recommended Answers

All 2 Replies

Member Avatar for vsmash

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;

Member Avatar for Caveman280

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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.