...

View Full Version : jQuery URGENT help needed! Browser resizing issue with ScrollTo plugin



Moonriver1985
08-03-2010, 02: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>

Fumigator
08-03-2010, 04:50 PM
Have you tried just reloading the page (via Javascript) when the browser gets resized? It's hacky, but this particular problem hardly seems worth spending much time on. Or is resizing the browser an integral part of your site's experience?

Moonriver1985
08-03-2010, 06:05 PM
I can't stomach the refresh issue because:

A. I'm a perfectionist
B. It's a final project for a degree being marked by tutors who don't know what they're looking at. If it appears as though it isn't functioning properly.. on the off chance - i'm getting marked down for it.
C. In my experience, there's no point sticking with 'that will do' when it wouldn't wash with a RL paying client.

Believe me in, I've considered with hoping that they will open it up in a full browser window and not resize it and pray its ok.. but i'd rather fix it.

tanziltc
08-05-2010, 05:36 PM
i have tray make a menu dropdown "jQuery Multi Level CSS Menu #1"...but the sub item doesn't work on my website, look here http://test.idiaprenduan.com/....can someone help me..., i hope u can help me...

Fumigator
08-05-2010, 05:47 PM
i have tray make a menu dropdown "jQuery Multi Level CSS Menu #1"...but the sub item doesn't work on my website, look here http://test.idiaprenduan.com/....can someone help me..., i hope u can help me...

Start your own thread.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum