Moonriver1985
08-03-2010, 01:09 PM
Hey everyone,
I hope to God someone can help me because I have a deadline in about 2 weeks and I either need to get this working today, or I have to give up and start over.
I am having an issue with the ScrollTo plugin - it is my first attempt at using jQuery and I have 0 experience coding with Javascript so I'm one of those 'download and hope' people. I thought I had it working but apparently not.
The code is below. The link is here:
http://www.victorialove.co.uk/fmp/jquery/newdesign/newdesign2.html
I'm not entirely sure what is happening - basically i'm wanting the site to be a series of divs that are navigated horizontally across the top and then vertically. At the moment, I'm just trying to get it to scroll horizontally with 2 divs.
The white illustrations are absolute positioned within each 'item' div. The 'content' divs are the semi-transparent white squares which are the link button to the next 'item'
What is happening at the moment - is if you open up the site in full size (or indeed any size) browser, it will navigate successfully back and forth.
If you resize the browser, the content div - with the link - moves to wherever the right hand edge of the browser was. This means you cannot navigate successfully to the next item div.
If you then try to maximise the browser back to full, the link stays where it was. The only thing that resets it is if you refresh the page.
I've tried fiddling with the .mask and .item classes, I've swapped between % width and px widths. These seem to solve one problem and create another.
And in IE7 - the whole site starts stacking the divs vertically. This is another problem but I'm guessing if you rectify the first you probably solve the second or so i'm hoping.
ANY help - and i'm at the point of begging - would be very much appreciated. I'm SO SO short on time to get this working otherwise I have no choice but to start over. It's a final project for my degree and it's due in on the 20th.
HELP!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll Horizontally</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 2000);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
<style>
body {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
overflow:hidden;
background-image:url(images/notebook-blue.jpg);
background-repeat:repeat;
}
#mask {
width:3840px;
height:100%;
}
.item {
width:50%;
height:100%;
float:left;
}
#content {
width:40px;
height:40px;
position:relative;
top:20px;
left:100px;
background-image:url(images/nav-bg.png);
z-index:100;
}
#content2 {
width:40px;
height:40px;
position:relative;
top:80px;
left:80px;
background-image:url(images/nav-bg.png);
z-index:100;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}
#face {
width:231px;
height:530px;
background-image:url(images/images/layout-idea7G_02.png);
background-repeat:no-repeat;
position:absolute;
top:0px;
left:0px;
}
#seeds {
width:1012px;
height:548px;
background-image:url(images/images/layout-idea7G_05.png);
background-repeat:no-repeat;
position:absolute;
top:40px;
left:732px;
}
#sstext {
width:304px;
height:304px;
background-image:url(images/images/layout-idea7G_07.png);
background-repeat:no-repeat;
position:absolute;
top:84px;
left:407px;
}
#singleseed {
width:54px;
height:64px;
background-image:url(images/images/layout-idea7G_11.png);
background-repeat:no-repeat;
position:absolute;
top:465px;
left:569px;
}
#dandelion {
width:254px;
height:336px;
background-image:url(images/images/layout-idea7G_14.png);
background-repeat:no-repeat;
position:absolute;
top:495px;
left:251px;
}
#face2 {
width:231px;
height:530px;
background-image:url(images/images/layout-idea7G_02.png);
background-repeat:no-repeat;
position:absolute;
top:0px;
left:1920px;
}
#seeds2 {
width:1012px;
height:548px;
background-image:url(images/images/layout-idea7G_05.png);
background-repeat:no-repeat;
position:absolute;
top:40px;
left:2652px;
}
#sstext2 {
width:304px;
height:304px;
background-image:url(images/images/layout-idea7G_07.png);
background-repeat:no-repeat;
position:absolute;
top:84px;
left:2327px;
}
#singleseed2 {
width:54px;
height:64px;
background-image:url(images/images/layout-idea7G_11.png);
background-repeat:no-repeat;
position:absolute;
top:465px;
left:2489px;
}
#dandelion2 {
width:254px;
height:336px;
background-image:url(images/images/layout-idea7G_14.png);
background-repeat:no-repeat;
position:absolute;
top:495px;
left:2171px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div id="face"></div>
<div id="dandelion"></div>
<div id="singleseed"></div>
<div id="seeds"></div>
<div id="sstext"></div>
<div id="content"><a href="#item2" class="panel">Go to 2</a></div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div id="face2"></div>
<div id="dandelion2"></div>
<div id="singleseed2"></div>
<div id="seeds2"></div>
<div id="sstext2"></div>
<div id="content2"><a href="#item1" class="panel">Go to 1</a></div>
</div>
</div>
</div>
</body>
</html>
I hope to God someone can help me because I have a deadline in about 2 weeks and I either need to get this working today, or I have to give up and start over.
I am having an issue with the ScrollTo plugin - it is my first attempt at using jQuery and I have 0 experience coding with Javascript so I'm one of those 'download and hope' people. I thought I had it working but apparently not.
The code is below. The link is here:
http://www.victorialove.co.uk/fmp/jquery/newdesign/newdesign2.html
I'm not entirely sure what is happening - basically i'm wanting the site to be a series of divs that are navigated horizontally across the top and then vertically. At the moment, I'm just trying to get it to scroll horizontally with 2 divs.
The white illustrations are absolute positioned within each 'item' div. The 'content' divs are the semi-transparent white squares which are the link button to the next 'item'
What is happening at the moment - is if you open up the site in full size (or indeed any size) browser, it will navigate successfully back and forth.
If you resize the browser, the content div - with the link - moves to wherever the right hand edge of the browser was. This means you cannot navigate successfully to the next item div.
If you then try to maximise the browser back to full, the link stays where it was. The only thing that resets it is if you refresh the page.
I've tried fiddling with the .mask and .item classes, I've swapped between % width and px widths. These seem to solve one problem and create another.
And in IE7 - the whole site starts stacking the divs vertically. This is another problem but I'm guessing if you rectify the first you probably solve the second or so i'm hoping.
ANY help - and i'm at the point of begging - would be very much appreciated. I'm SO SO short on time to get this working otherwise I have no choice but to start over. It's a final project for my degree and it's due in on the 20th.
HELP!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll Horizontally</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 2000);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
<style>
body {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
overflow:hidden;
background-image:url(images/notebook-blue.jpg);
background-repeat:repeat;
}
#mask {
width:3840px;
height:100%;
}
.item {
width:50%;
height:100%;
float:left;
}
#content {
width:40px;
height:40px;
position:relative;
top:20px;
left:100px;
background-image:url(images/nav-bg.png);
z-index:100;
}
#content2 {
width:40px;
height:40px;
position:relative;
top:80px;
left:80px;
background-image:url(images/nav-bg.png);
z-index:100;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}
#face {
width:231px;
height:530px;
background-image:url(images/images/layout-idea7G_02.png);
background-repeat:no-repeat;
position:absolute;
top:0px;
left:0px;
}
#seeds {
width:1012px;
height:548px;
background-image:url(images/images/layout-idea7G_05.png);
background-repeat:no-repeat;
position:absolute;
top:40px;
left:732px;
}
#sstext {
width:304px;
height:304px;
background-image:url(images/images/layout-idea7G_07.png);
background-repeat:no-repeat;
position:absolute;
top:84px;
left:407px;
}
#singleseed {
width:54px;
height:64px;
background-image:url(images/images/layout-idea7G_11.png);
background-repeat:no-repeat;
position:absolute;
top:465px;
left:569px;
}
#dandelion {
width:254px;
height:336px;
background-image:url(images/images/layout-idea7G_14.png);
background-repeat:no-repeat;
position:absolute;
top:495px;
left:251px;
}
#face2 {
width:231px;
height:530px;
background-image:url(images/images/layout-idea7G_02.png);
background-repeat:no-repeat;
position:absolute;
top:0px;
left:1920px;
}
#seeds2 {
width:1012px;
height:548px;
background-image:url(images/images/layout-idea7G_05.png);
background-repeat:no-repeat;
position:absolute;
top:40px;
left:2652px;
}
#sstext2 {
width:304px;
height:304px;
background-image:url(images/images/layout-idea7G_07.png);
background-repeat:no-repeat;
position:absolute;
top:84px;
left:2327px;
}
#singleseed2 {
width:54px;
height:64px;
background-image:url(images/images/layout-idea7G_11.png);
background-repeat:no-repeat;
position:absolute;
top:465px;
left:2489px;
}
#dandelion2 {
width:254px;
height:336px;
background-image:url(images/images/layout-idea7G_14.png);
background-repeat:no-repeat;
position:absolute;
top:495px;
left:2171px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div id="face"></div>
<div id="dandelion"></div>
<div id="singleseed"></div>
<div id="seeds"></div>
<div id="sstext"></div>
<div id="content"><a href="#item2" class="panel">Go to 2</a></div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div id="face2"></div>
<div id="dandelion2"></div>
<div id="singleseed2"></div>
<div id="seeds2"></div>
<div id="sstext2"></div>
<div id="content2"><a href="#item1" class="panel">Go to 1</a></div>
</div>
</div>
</div>
</body>
</html>