...

View Full Version : help making code compliant. style.posLeft to style.left, +px, getElementById, etc.



how
03-07-2005, 04:59 AM
Hello,

I am able to get this script to work in Safari but it doesn't seem to work in Firefox.
The script is suppose to scroll a panoramic image.
I have posted a simple example of the code on-line:
Basic Scroll (http://naafront.com/TEMP/BasicScroll.html)
If you have Safari, take a look, it's pretty cool when it works.

This code goes between the head tags


<SCRIPT language="JavaScript">
<!--


w = 2 ;
t = 30 ;

dirc = 0*


function mov(){
if(dirc==0){
if (( pic1.style.posLeft -= w) < -pic1.width )
{ pic1.style.posLeft += pic1.width + pic2.width } ;
if (( pic2.style.posLeft -= w) < -( pic2.width + pic1.width ))
{ pic2.style.posLeft = pic1.style.posLeft } ;
timerID = setTimeout( "mov()", t ) ;
} else
{
if ((pic1.style.posLeft += w) > pic2.width )
{ pic1.style.posLeft -= ( pic1.width + pic2.width) } ;
if ((pic2.style.posLeft += w) > 0)
{ pic2.style.posLeft -= (pic1.width + pic2.width) } ;
timerID = setTimeout( "mov()", t ) ;
}
}

function Spd0(){if(w == 0){w = wo} else {wo = w;w = 0 }}
function Spdf(){ w=4 };
function Spdn(){ w=2 };
function Spds(){ w=1 };
function Dirn(){if(dirc==0){dirc=1} else {dirc=0}}
*// -->
</script>

this code goes in the body:


<div align="center">

<NOBR>
<img id="pic1" style="position:relative" src="http://www.com/image.jpg">
<img id="pic2" style="position:relative" src="http:/www.com/image.jpg">
</nobr>
</div>


I posted my question at the Mozilla forum and it was suggested that the Script was using proprietary IE extensions. And if I made changes, it should work in any modern browser.

I tried to get the script working by Using getElementById for timerID and changing style.posLeft to style.left.

But now the image shakes in Safari and sill does nothing in Firefox.
It seems like all the numbers are 0, am I suppose to add px someplace?

Here's the online Shake Example (http://naafront.com/TEMP/BasicScrollshake.html) .

And the code used in that example:


<SCRIPT language="JavaScript">
<!--


w = 2 ;
t = 30 ;

dirc = 0* *


function mov(){
if(dirc==0){
if (( pic1.style.left -= w) < -pic1.width )
{ pic1.style.left += pic1.width + pic2.width } ;
if (( pic2.style.left -= w) < -( pic2.width + pic1.width ))
{ pic2.style.left = pic1.style.left } ;
getElementById = setTimeout( "mov()", t ) ;
} else
{
if ((pic1.style.left += w) > pic2.width )
{ pic1.style.left -= ;
if ((pic2.style.left += w) > 0)
{ pic2.style.left -= (pic1.width + pic2.width) } ;
getElementById = setTimeout( "mov()", t ) ;
}
}

function Spd0(){if(w == 0){w = wo} else {wo = w;w = 0 }}
function Spdf(){ w=4 };
function Spdn(){ w=2 };
function Spds(){ w=1 };
function Dirn(){if(dirc==0){dirc=1} else {dirc=0}}
*// -->
</script>


It seems that I should be adding the px to the code somewhere but I'm confused, now. DOM and Java Script are new to me and it seems that some of this code was written to take care of variables in the width of the two images used in the rotation.
When I have tried to add " + 'px' " where I believe it could go, the js fails.

Then I have tried to change .width to style.width='25px' .

And in my last rather awkward looking effort I placed document.getElementById(' and )' around the pic1 and pic2 elements.

Any suggestions on how I can get this code to be compliant?

Thank you,
Robt.

Kor
03-07-2005, 09:50 AM
there are some multiple problems, I'll try to point them in theory

1. the reference by id should have a string as id

document.getElementById('foo');
or
var id='foo';
document.getElementById(id);

2. the so called "on-the-fly" CSS attributes are mainly to be returned as:

document.getElementById('foo').style.attribute;

3. the CSS attributes are strings, so that, before performing a math operation or bitwise comparation, some of them need to be parsed

case 1
<div id="foo" style="width:100px"

var objWidth = document.getElementById('foo').style.width;
if(objWidth==100){

}
it is not possible, as objWidth is a string with value '100px';

case 2
var objWidth = parseInt(document.getElementById('foo').style.width)

Now you may compare or perform a math operation with this variable, as it's value is now 100

4. the return on-the-fly of the css attributes using style middle attribute has sense only if the element has indded an attribute set in a style attribute in tag;

Thus
case 1
<div id="foo" style="width:100px">
...
var objWidth = parseInt(document.getElementById('foo').style.width)

is OK, but
<div id="foo"> or
<div class="foo">
...
var objWidth = parseInt(document.getElementById('foo').style.width)

will bring errors, event if the CSS width is set, but it is not set as a style, it is set as id or class, which is not the same thing.

In this case, to return the dimension/position of the element, maybe it is a better ideea to use offset attributes (take care that offsetTop and offsetLeft are relative to the parent!!)

You may either search for CSS attribute in CSS codes, but here IE and Mozilla have different ways to return a CSS value...

how
03-08-2005, 07:46 AM
KOR,

Thank you for your reply. You guys are all too smart for me. Perhaps there's a book someone can recommend. I think I have to learn to build this script up from the bottom.

Robt.

Kor
03-09-2005, 05:10 PM
neh... don't be scared... It is not so intricate after all. I guess that all of us here started the same as you. And I dare to say that all uf us here are still learning a lot one from each other, and from the new "entries" in coding recomandations. The more you learn, the most you see that you are to learn more. ;)

The best "book to learn" is probably seing other's codes and trying to understand how they were made... And asking precise questions, same you have done... And, of course, the best way is to learn from your own mistakes... Am i pedantic? :D ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum