[jQuery] Re: Panorama Viewer
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 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 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.
>
> > > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> > > http://www.w3.org/1999/xhtml";>
>
> > >
> > >
> > >
>
> > >
> > > $(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);
> > > }
>
> > > });
> > >
> > >
> > > 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;}
>
> > >
> > >
>
> > >
> > > «
>
> > >
> > >
> > >
> > >
> > >
> > >
>
> > >
> > >
> > >
>
> > >
> > >
>
> > Can you post a live link to this? How are we supposed to see it?
[jQuery] Re: Panorama Viewer
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 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.
>
> > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> > http://www.w3.org/1999/xhtml";>
>
> >
> >
> >
>
> >
> > $(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);
> > }
>
> > });
> >
> >
> > 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;}
>
> >
> >
>
> >
> > «
>
> >
> >
> >
> >
> >
> >
>
> >
> >
> >
>
> >
> >
>
> Can you post a live link to this? How are we supposed to see it?
[jQuery] Re: Panorama Viewer
> First made one using canvas, but ExplorerCanvas didn't like the
> it.https://developer.mozilla.org/en/Canvas_tutorial/Basic_animationshttp://excanvas.sourceforge.net/
>
> 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.
>
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> http://www.w3.org/1999/xhtml";>
>
>
>
>
>
>
> $(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);
> }
>
> });
>
>
> 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;}
>
>
>
>
>
> «
>
>
>
>
>
>
>
>
>
>
>
>
>
>
Can you post a live link to this? How are we supposed to see it?
