A couple of issues with the ScrollTo Plugin

The code can be found at the end of the post, the link to the site is here:

http://www.victorialove.co.uk/fmp/jquery/test2/layout7Gtest.html

Hey everyone,

Can I say this is my first experience with jQuery and in fact any code beyond CSS and HTML, so be nice to me!

I'm trying to use the jQuery ScrollTo plugin on a website which is to scroll horizontally, vertically and diagonally in a pattern which is yet to be determined. I've got it installed, working and scrolling successfully for the most part.

I've set each of the div's to be 1920 x 1200 wide. At the moment, the content of each div is just a jpeg of the same dimensoin, plus another div called 'content' with a pink background which is just a temporary link to scroll.

Firstly, there are 6 divs, in two rows of three, stacked on top of one another: 1, 2, 3 / 4, 5, 6. The scroll sequence as it is navigates 1 > 2 > 3 > 4 > 5 > 6.

The problem lies here - no matter what size browser window you open the site in, it will work fine, UNTIL you manually adjust the browser window. Larger to smaller or vice versa makes no difference. As soon as you adjust the browser window, the divs start stacking and scrolling vertically. The sequence stays the same. This is NOT what I want happening and I cannot work out why it is doing this. I want the divs to stay where they're put!

This is a University final project and I cannot risk the people marking it, opening it up in a non-full size browser window which they then maximise and it go wrong..

Secondly, the pink 'content' div is set with these positioning controls. Yet for some reason, left: 0px; is halfway across the screen. Why?

     #content {
       width:50px;
       height:50px;
       margin:0 auto;
       position:relative;
       left:0px;
       top:90px;
       background-color:#FF00CC;
   }

This is the full 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>Sixty Seconds</title>

<script type="text/javascript" src="../scroll/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="../scroll/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'), 5000);

       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;
   background-image:url(../../testbgs/notebook1.jpg);
}

#wrapper {
   width:5760px;
   height:1200px;
   position:absolute;
   top:0;left:0;
   overflow:hidden;
}

   #mask {
       width:500%;
       height:100%;
   }

   .screen {
       width:1920px;
       height:1200px;
       float:left;
   }


   #content {
       width:50px;
       height:50px;
       margin:0 auto;
       position:relative;
       left:0px;
       top:90px;
       background-color:#FF00CC;
   }

   .selected {
       background:#fff;
       font-weight:700;
   }

   .clear {
       clear:both;
   }

   #screen1 {
       background-image:url(layout-idea7G.jpg);
       background-repeat:no-repeat;
   }
   #screen2 {
       background-image:url(layout-idea7G.jpg);
       background-repeat:no-repeat;
   }
   #screen3 {
       background-image:url(layout-idea7G.jpg);
       background-repeat:no-repeat;
   }
   #screen4 {
       background-image:url(layout-idea7G.jpg);
       background-repeat:no-repeat;
   }
   #screen5 {
       background-image:url(layout-idea7G.jpg);
       background-repeat:no-repeat;
   }
   #screen6 {
       background-image:url(layout-idea7G.jpg);
       background-repeat:no-repeat;
   }
</style>
</head>
<body>

<div id="wrapper">
   <div id="mask">

       

       <div id="screen1" class="screen">
           <a name="screen"></a>
           <div id="content">
               <a href="#screen2" class="panel">></a>
               </div>
       </div>

       <div id="screen2" class="screen">
           <a name="screen2"></a>
           <div id="content">
               <a href="#screen3" class="panel">></a>
           </div>
       </div>

       <div id="screen3" class="screen">
           <a name="screen3"></a>
           <div id="content">
               <a href="#screen4" class="panel">></a>
           </div>
       </div>
       <div class="clear"></div>

               

       <div id="screen4" class="screen">
           <a name="screen4"></a>
           <div id="content">
               <a href="#screen5" class="panel">></a>
               </div>
       </div>

       <div id="screen5" class="screen">
           <a name="screen5"></a>
           <div id="content">
               <a href="#screen6" class="panel">></a>
           </div>
       </div>

       <div id="screen6" class="screen">
           <a name="screen6"></a>
           <div id="content">
               <a href="#screen1" class="panel">></a>
           </div>
       </div>
       <div class="clear"></div>
   </div>
</div>

</body>
</html>

Topic Participants
moonriver_eldamri

A couple of issues with the ScrollTo Plugin

A couple of issues with the ScrollTo Plugin

Topic Participants

moonriver_eldamri