Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation URGENT help needed! Browser resizing issue with ScrollTo plugin

    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/jq...ewdesign2.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!

    Code:
    <!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>

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Location
    asia
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #5
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Quote Originally Posted by tanziltc View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •