New Topic/Question
Reply
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
MultiQuote
| 