[jQuery] Panorama Viewer

[Mikeytown2]

First made one using canvas, but ExplorerCanvas didn't like the it.
https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations
http://excanvas.sourceforge.net/

Source Image
http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg

So next I did it using jQuery, here is my result. Tested in FF3,
IE6/7. Would have been easy to do except for the ugly IE css hacks.

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
html xmlns=http://www.w3.org/1999/xhtml;

html
head
  script src=jquery-1.2.6.js/script

  script
  $(document).ready(function(){
var speed = 3;
$(#left).click(function () {
runA();
runB();
});

function runA() {
$(#blockA).animate({left: -=1024px}, speed, linear);
$(#blockA).animate({left: +=2044px}, 1, linear);
$(#blockA).animate({left: -=1024px}, speed, linear,runA);
}

function runB() {
$(#blockB).animate({left: -=1024px}, speed, linear);
$(#blockB).animate({left: -=1024px}, speed, linear);
$(#blockB).animate({left: +=2044px}, 1, linear,runB);
}

  });
  /script
  style
  img {
padding: 0;
margin: 0;
}
  div#t {
overflow:hidden;
width:800px;
height:198px;
word-wrap: break-word;
  }

  #blockA, #blockB {
  position:absolute;
  }
   #blockB {
  left:1023px;
  }
#wrapper {
height: 100%;
width: 800px;
overflow: hidden;
border: 3px solid; /* this is just for debugging, to see if the
browser actually does something sane */
position: relative;
}
  /style
/head

body
  button id=left«/button

div id=wrapper
div id=t
img id=blockA src=Capitan_Meadows,_Yosemite_National_Park.jpg /
img id=blockB src=Capitan_Meadows,_Yosemite_National_Park.jpg /
/div
/div


br /
br /
img src=Capitan_Meadows,_Yosemite_National_Park.jpg /

/body
/html

[jQuery] Re: Panorama Viewer

[Mikeytown2]

by overlapping 4px I never get any white space after 10 min of
looping. The IE hack is 2 fold. I need a wrapper div, and I also have
to use position:absolute;. In FF you can use position: relative; and
no wrapper, much cleaner. This is my first Jquery Script, so if there
is any advice/tips for improvement, I'm all ears. I should probably
make it all JS so I can auto detect the image size, ect...

On Jan 11, 6:53 am, donb falconwatc...@comcast.net wrote:
 I simply saved the html to my hard drive and opened it.

 What I don't get is the 2044.  2x1024 = 2048.  What's significant
 about the number used?  And where is the 'ugly IE hack?'

 On Jan 11, 9:03 am, Mike Alsup mal...@gmail.com wrote:

   First made one using canvas, but ExplorerCanvas didn't like the 
   it.https://developer.mozilla.org/en/Canvas_tutorial/Basic_animationshttp...

   Source 
   Imagehttp://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_Nati...

   So next I did it using jQuery, here is my result. Tested in FF3,
   IE6/7. Would have been easy to do except for the ugly IE css hacks.

   !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN 
   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
   html xmlns=http://www.w3.org/1999/xhtml;

   html
   head
     script src=jquery-1.2.6.js/script

     script
     $(document).ready(function(){
       var speed = 3;
       $(#left).click(function () {
       runA();
       runB();
       });

           function runA() {
           $(#blockA).animate({left: -=1024px}, speed, linear);
           $(#blockA).animate({left: +=2044px}, 1, linear);
           $(#blockA).animate({left: -=1024px}, speed, linear,runA);
           }

           function runB() {
           $(#blockB).animate({left: -=1024px}, speed, linear);
           $(#blockB).animate({left: -=1024px}, speed, linear);
           $(#blockB).animate({left: +=2044px}, 1, linear,runB);
           }

     });
     /script
     style
     img {
       padding: 0;
           margin: 0;
           }
     div#t {
           overflow:hidden;
           width:800px;
           height:198px;
           word-wrap: break-word;
     }

     #blockA, #blockB {
     position:absolute;
     }
      #blockB {
     left:1023px;
     }
       #wrapper {
   height: 100%;
   width: 800px;
   overflow: hidden;
   border: 3px solid; /* this is just for debugging, to see if the
   browser actually does something sane */
   position: relative;}

     /style
   /head

   body
     button id=left«/button

   div id=wrapper
   div id=t
   img id=blockA src=Capitan_Meadows,_Yosemite_National_Park.jpg /
   img id=blockB src=Capitan_Meadows,_Yosemite_National_Park.jpg /
   /div
   /div

   br /
   br /
   img src=Capitan_Meadows,_Yosemite_National_Park.jpg /

   /body
   /html

  Can you post a live link to this?  How are we supposed to see it?