1 Replies - 1692 Views - Last Post: 17 May 2009 - 04:39 PM

#1 markhazlett9  Icon User is offline

  • Coding is a lifestyle
  • member icon

Reputation: 60
  • View blog
  • Posts: 1,666
  • Joined: 12-July 08

Attaching Javascript file to HTML how to

Posted 17 May 2009 - 04:05 PM

Hey everyone,

I'm building my first website with JQuery/Javascript and I cannot for the life of me figure out how to get the javascript file to link together with the html file. Right now all I'm doing is stuff from a book so all the code in there is from a book, but for some reason, even if I do the simplest of javascript stuff it does not transfer over to my HTML file. Any thoughts? here is my html code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link rel="stylesheet" href="new_file.css" type="text/css" media="screen" />
		<script src="javascript.js" type="text/javascript"></script> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
	</head>
	<body>
	<div id="featured-books">
		<div class="covers">
			<a href="covers/large/1847190871.jpg" title="Community Server Quickly"><img src="covers/medium/1847190871.jpg" width="120" height="148" alt="Community Server Quickly" /><span class="price">$35.99</span></a>
			<a href="covers/large/1847190901.jpg" title="Deep Inside osCommerce: The Cookbook"><img src="covers/medium/1847190901.jpg" width="120" height="148" alt="Deep Inside osCommerce: The Cookbook" /><span class="price">$44.99</span></a>
			<a href="covers/large/1847190979.jpg" title="Learn OpenOffice.org  
	 Spreadsheet Macro Programming: OOoBasic and Calc automation"> 
				<img src="covers/medium/1847190979.jpg" width="120" height="148" alt="Learn OpenOffice.org Spreadsheet Macro Programming: 
	 OOoBasic and Calc automation" /> 
				<span class="price">$35.99</span></a>
			<a href="covers/large/1847190987.jpg" title="Microsoft AJAX C#  
	 Essentials: Building Responsive ASP.NET 2.0  Applications"> 
				<img src="covers/medium/1847190987.jpg" width="120" height="148" alt="Microsoft AJAX C# Essentials: Building Responsive 
	 ASP.NET 2.0  Applications" /> 
				<span class="price">$31.99</span></a>
			<a href="covers/large/1847191002.jpg" title="Google Web Toolkit GWT Java AJAX Programming"><img src="covers/medium/1847191002.jpg" width="120" height="148" alt="Google Web Toolkit GWT Java AJAX Programming" /><span class="price">$40.49</span></a>
			<a href="covers/large/1847192386.jpg" title="Building Websites with Joomla! 1.5 Beta 1"><img src="covers/medium/1847192386.jpg" width="120" height="148" alt="Building Websites with Joomla! 1.5 Beta 1" /><span class="price">$40.49</span></a>
		</div>
	</div>
	</body>
</html>



And javascript file...

/*************************************** 
   =IMAGE CAROUSEL 
-------------------------------------- */ 
$(document).ready(function() { 
  var spacing = 140; 
  
  function createControl(src) { 
	return $('<img/>') 
	  .attr('src', src) 
	  .addClass('control') 
	  .css('opacity', 0.6) 
	  .css('display', 'none'); 
  }
  var $leftRollover = createControl('images/left.gif'); 
  var $rightRollover = createControl('images/right.gif'); 
  var $enlargeRollover = createControl('images/enlarge.gif'); 
  var $enlargedCover = $('<img/>') 
	.addClass('enlarged') 
	.hide() 
	.appendTo('body'); 
  var $closeButton = createControl('images/close.gif') 
	.addClass('enlarged-control') 
	.appendTo('body'); 
  var $priceBadge = $('<div/>') 
	.addClass('enlarged-price') 
	.css('opacity', 0.6) 
	.css('display', 'none') 
	.appendTo('body'); 
  var $waitThrobber = $('<img/>') 
	.attr('src', 'images/wait.gif') 
	.addClass('control') 
	.css('z-index', 4) 
	.hide(); 
  $('#featured-books').css({ 
	'width': spacing * 3, 
	'height': '166px', 
	'overflow': 'hidden' 
  }).find('.covers a').css({ 
	'float': 'none', 
	'position': 'absolute', 
	'left': 1000 
  });
  var setUpCovers = function() { 
	var $covers = $('#featured-books .covers a'); 
	$covers.unbind('click').unbind('mouseover').unbind('mouseout'); 
	// Left image; scroll right (to view images on left) when clicked. 
	$covers.eq(0).css('left', 0).click(function(event) { 
	  $covers.eq(0).animate({'left': spacing}, 'fast'); 
	  $covers.eq(1).animate({'left': spacing * 2}, 'fast'); 
	  $covers.eq(2).animate({'left': spacing * 3}, 'fast'); 
	  $covers.eq($covers.length - 1).css('left', -spacing) 
							.animate({'left': 0}, 'fast', function() { 
		$(this).prependTo('#featured-books .covers'); 
		setUpCovers(); 
	  });
		event.preventDefault(); 
	}).hover(function() { 
	  $leftRollover.appendTo(this).show(); 
	}, function() { 
	  $leftRollover.hide(); 
	}); 
	// Right image; scroll left (to view images on right) when clicked. 
	$covers.eq(2).css('left', spacing * 2).click(function(event) 
	{ 
	  $covers.eq(0).animate({'left': -spacing}, 'fast', function() 
	  { 
		$(this).appendTo('#featured-books .covers'); 
		setUpCovers(); 
	  }); 
	  $covers.eq(1).animate({'left': 0}, 'fast'); 
	  $covers.eq(2).animate({'left': spacing}, 'fast'); 
	  $covers.eq(3).css('left', spacing * 3).animate({ 
									   'left': spacing * 2}, 'fast'); 
	  event.preventDefault(); 
	}).hover(function() { 
	  $rightRollover.appendTo(this).show(); 
	}, function() { 
	  $rightRollover.hide(); 
	}); 
 // Center image; enlarge cover when clicked. 
	$covers.eq(1).css('left', spacing).click(function(event) { 
	  $waitThrobber.appendTo(this).show(); 
	  var price = $(this).find('.price').text(); 
	  var element = $(this).find('img').get(0); 
	  var coverLeft = 0; 
	  var coverTop = 0; 
	  var coverWidth = element.width; 
	  var coverHeight = element.height; 
	  while (element.offsetParent) { 
		coverLeft += element.offsetLeft; 
		coverTop += element.offsetTop; 
		element = element.offsetParent; 
	  } 
	  $enlargedCover.attr('src', $(this).attr('href')).css({ 
		'left': coverLeft, 
		'top' : coverTop, 
		'width': coverWidth, 
		'height': coverHeight
		  }); 
	  var animateEnlarge = function() { 
		$waitThrobber.hide(); 
		$enlargedCover.animate({ 
		  'left': ($('body').width() - coverWidth * 3) / 2, 
		  'top' : 100, 
		  'width': coverWidth * 3, 
		  'height': coverHeight * 3 
		}, 'normal', function() { 
		  $enlargedCover.one('click', function() { 
			$closeButton.unbind('click').hide(); 
			$priceBadge.hide(); 
			$enlargedCover.fadeOut(); 
		  }); 
		  $closeButton.css({ 
			'left': ($('body').width() - coverWidth * 3) / 2, 
			'top' : 100 
		  }).click(function() { 
			$enlargedCover.click(); 
		  }).show(); 
		  $priceBadge.css({ 
			'right': ($('body').width() - coverWidth * 3) / 2, 
			'top' : 100 
		  }).text(price).show(); 
		}); 
	  }; 
	  if ($enlargedCover[0].complete) { 
		animateEnlarge(); 
	  } 
	  else { 
		$enlargedCover.bind('load', animateEnlarge); 
	  } 
		event.preventDefault(); 
	}).hover(function() { 
	  $enlargeRollover.appendTo(this).show(); 
	}, function() { 
	  $enlargeRollover.hide(); 
	}); 
  };
  setUpCovers(); 
});



and css file...
body {
	
}

#featured-books { 
  position: relative; 
  background: #ddd; 
  width: 440px; 
  height: 186px;
 overflow: scroll; 
  margin: 1em auto; 
  padding: 0; 
  text-align: center; 
  z-index: 2; 
} 
#featured-books .covers { 
  position: relative; 
  width: 840px; 
  z-index: 1; 
} 
#featured-books a { 
  float: left; 
  margin: 10px; 
  height: 146px; 
} 
#featured-books .price { 
  display: none; 
} 




Cheers Everyone

Is This A Good Question/Topic? 0
  • +

Replies To: Attaching Javascript file to HTML how to

#2 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 119
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Re: Attaching Javascript file to HTML how to

Posted 17 May 2009 - 04:39 PM

You need to make sure you have the right location for the src of the <script>, which the book won't help you with as its specific to where you put stuff. :D

<script src="javascript.js" type="text/javascript"></script>

this will work if there is a file named javascript.js IN THE SAME DIRECTORY as the html file. You're using a relative URL, which is relative to where the html file is. To back out a directory, use ..

/../js/jquery.js

This post has been edited by crazyjugglerdrummer: 17 May 2009 - 04:40 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1