SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Melbourne, Australia
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript pan image/background left-right

    I am wanting to write a script to controll the background-position on an element. I don't think I have a problem selecting the element.
    Code:
      document.getElementById('navigation').style.backgroundPosition = "0px 40px";
    Just for example, obviously in the final i would like it to more the image at like 1px/.25sec or something.

    Anyway my problem is that I can't get the background to move. Will I just have to make it into an image in a div with overflow hiddent and make controlls to scroll the div? I have never really done this before as I usually hate those little controlls

    Its really just a little thing for users to play around with as the navigation block features a really long background to accomodate large rez so it would be nice to be ale to scroll around and see it all. Don't worry its only 55Kb.

    so being able to dynamically alter the background position would be awsome. This probally wont work well in ie will it, heh.
    sigy

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Melbourne, Australia
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made a div with id=navigationbox. It sits inside the navigation, using position:absolute. so the javascript
    Code:
      	div = document.getElementById('navigationback');
      	div.style.pixelLeft = div.style.pixelLeft - 10;
    Will move the layer in IE, but I cant yet work out what to do in mozilla.

    ...

    hmm actually i think pixelLeft/posLeft is some ie thing, new approach maybe
    sigy

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jixor,

    Instead of:

    div.style.pixelLeft = div.style.pixelLeft - 10;

    Try this:

    div.style.left = (parseInt(div.style.left) - 10) + 'px';

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Melbourne, Australia
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its just not happening for mozilla, or even ie now.
    Code:
       <script type="text/javascript">
       
       function left() {
       	div = document.getElementById('navigationback');
       	div.style.left = (parseInt(div.style.left) - 10) + 'px';
       }
       
       </script>
    parseInt(div.style.left) = "NaN"
    sigy

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, sorry about that
    Code:
    function left() {
      var div = document.getElementById('navigationback');
      var x = parseInt(div.style.left) - 10;
      if (isNaN(x)) x = 0;
      div.style.left = x + 'px';
    }
    The 'style' object properties correspond to an element's inline style attributes - not the styles in the STYLE element. So, initially those properties have no value (or an empty string).

    I'm not implying that you should use inline styles

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Melbourne, Australia
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I'm loving it, thanks much. Now to make it scroll on mouse over and stop scrolling on mouse out. I have this strange feeling that I may have problems here too But you never know, it shouldn't be too hard. I am not really concerned with platform compatibility, as its certainly not a critical element, so long as it works with IE6 and FF.8 for the moment.

    I have left and right working, and right will stop the image from scrolling further than it should that is fine, but not sure how to stop left, seeing as the layout doesn't have a fixed width.

    Code:
        function left() {
          var div = document.getElementById('navigationback');
          var x = parseInt(div.style.left);
          if (isNaN(x)) x = 0;
          x = x - 10;
          div.style.left = x + 'px';
        }
        
        function right() {
          var div = document.getElementById('navigationback');
          var x = parseInt(div.style.left);
          if (isNaN(x)) x = 0;
          if (x != 0) {
        	x = x + 10;
        	div.style.left = x + 'px';
          }
        }

    for the scrolling i was thinking using a do-while with setTimeout so like
    Code:
       do
       {
          setTimeout('moveleft()',60);
       }
       while(mouse is over the button?);
    general concept (obviously i cant use this )
    while(pageX > div.x && pageX < div.x+20 && pageY > div.y && pageY < div.y+200)

    Well thats not going to work, i guess I'll have to use an onmouse over event to start scrolling and an onmouseout to stop it.
    Last edited by Jixor; Mar 25, 2004 at 06:46.
    sigy

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Melbourne, Australia
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is working, but not well. Sometimes it doesnt stop, and mostly it seems to get faster and faster each imte mouseover. Help please

    Code:
    function scroller(direct) {
     
       if ($doloop = true) {
     	direction = direct;
     	scrolltimer = null;
     	var div = document.getElementById('navigationback');
     	var x = parseInt(div.style.left);
     	if (isNaN(x)) x = 0;
       
     	if (direction == "left") {
     	  // If x not greater than -(view area - 1800)
     		x = x - 5;
     		div.style.left = x + 'px';
     	  // End hypothetical if
     	} else {
     	  if (x < 0) {
     		x = x + 5;
     		div.style.left = x + 'px';
     	  }
     	}
     
     	scrolltimer = setTimeout("scroller(direction)", 1);
       }
     
     }
     
     function stopScroll() {
       doloop = false;
       clearTimeout(scrolltimer);
     }
    sigy


Bookmarks

Posting Permissions

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