Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    how
    how is offline
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help making code compliant. style.posLeft to style.left, +px, getElementById, etc.

    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
    If you have Safari, take a look, it's pretty cool when it works.

    This code goes between the head tags
    Code:
    <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:
    Code:
    <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 .

    And the code used in that example:
    Code:
    <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.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    how
    how is offline
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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?
    Last edited by Kor; 03-09-2005 at 05:14 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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