SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why not working with NS?

    hi all,

    im trying to add some flying text to my page, and found some script at:
    http://www.javascriptkit.com/script/...tialtext.shtml

    the complete script is:
    HTML Code:
    <!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">
    <HEAD>
    <style type="text/css">	
    .glidetext{
    position: relative;
    /*Set initial position of your text. Make it just enough to hide the text from view:*/
    left: -200px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    //Sequential fly-in text script- by JavaScriptKit.com
    //For this script and 400+ more, visit http://www.javascriptkit.com
    //This notice must stay intact for use
    
    var pausebetweenmsg=10 //customize pause in miliseconds between each message showing up (3000=3 seconds)
    var glidespeed=50 //customize glide speed in pixels per frame.
    
    var curobjindex=0
    
    function actualstyle(el, cssproperty){
    if (el.currentStyle)
    return el.currentStyle[cssproperty]
    else if (window.getComputedStyle){
    var elstyle=window.getComputedStyle(el, "")
    return elstyle.getPropertyValue(cssproperty)
    }
    }
    
    function collectElementbyClass(){
    var classname="glidetext"
    glidearray=new Array()
    var inc=0
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    for (i=0; i<alltags.length; i++){
    if (alltags[i].className==classname)
    glidearray[inc++]=alltags[i]
    }
    if (glidearray.length>0)
    onebyoneglide()
    }
    
    function onebyoneglide(){
    if (curobjindex<glidearray.length)
    glidetimer=setInterval("glideroutine()",50)
    }
    
    function glideroutine(){
    if (parseInt(actualstyle(glidearray[curobjindex], "left"))<0)
    glidearray[curobjindex].style.left=parseInt(actualstyle(glidearray[curobjindex], "left"))+50
    else{
    glidearray[curobjindex].style.left=0
    curobjindex++
    clearInterval(glidetimer)
    setTimeout("onebyoneglide()", pausebetweenmsg)
    }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", collectElementbyClass, false)
    else if (window.attachEvent)
    window.attachEvent("onload", collectElementbyClass)
    else if (document.getElementById)
    window.onload=collectElementbyClass
    
    </script>
    </HEAD>
    <BODY>
    <div class="glidetext">This is text 1</div>
    <div class="glidetext">This is text 2</div>
    <div class="glidetext">This is text 3</div>
    </BODY>
    </HTML>
    it works in IE, but not in NS(8.1), and even worse, the texts not even show up, i just got a blank page!

    but when i view the above link in NS, the example works fine.

    can anyone please tell me why?

    thanks

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but when i view the above link in NS, the example works fine.
    Browsers use different rules for rendering pages depending on whether they are in standards mode or quirks mode. Your script has a DOCTYPE declaration, which will trigger standards mode. The page where you got your script from has no DOCTYPE declaration, so it triggers quirks mode rendering. That may be why your script doesn't work. Try getting rid of your DOCTYPE declaration and see if your script works.

    You can go to the page at the link and click View/Source and compare it to your page to see what the actual differences are.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Next try adding the lines in red:
    Code:
    if(!
    <style type="text/css">
    
    .glidetext{
    position: relative;
    /*Set initial position of your text. Make it just enough to hide the text from view:*/
    left: -500px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    //Sequential fly-in text script- by JavaScriptKit.com
    //For this script and 400+ more, visit http://www.javascriptkit.com
    //This notice must stay intact for use
    
    var pausebetweenmsg=10 //customize pause in miliseconds between each message showing up (3000=3 seconds)
    var glidespeed=50 //customize glide speed in pixels per frame.
    
    var curobjindex=0
    
    function actualstyle(el, cssproperty)
    {
    if (el.currentStyle)
    	return el.currentStyle[cssproperty]
    else if (window.getComputedStyle)
    {
    	var elstyle=window.getComputedStyle(el, "")
    	return elstyle.getPropertyValue(cssproperty)
    }
    else
    	alert("actualstyle function is broken.");
    }
    
    function collectElementbyClass()
    {
    var classname="glidetext"
    glidearray=new Array()
    var inc=0
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    if(!alltags) alert("getElementsByTagName is broken);
    for (i=0; i<alltags.length; i++
    {
    	if(!alltags[i].className) alert("className is broken");
    	if (alltags[i].className==classname)
    	glidearray[inc++]=alltags[i]
    }
    if (glidearray.length>0)
    onebyoneglide()
    }
    
    function onebyoneglide(){
    if (curobjindex<glidearray.length)
    {
    	if(!setInterval) alert("setInterval line is broken");
    	glidetimer=setInterval("glideroutine()",50)
    }
    
    }
    
    function glideroutine(){
    if (parseInt(actualstyle(glidearray[curobjindex], "left"))<0)
    glidearray[curobjindex].style.left=parseInt(actualstyle(glidearray[curobjindex], "left"))+50
    else{
    glidearray[curobjindex].style.left=0
    curobjindex++
    clearInterval(glidetimer)
    if(!setTimout) alert("setTimeout() is broken");
    setTimeout("onebyoneglide()", pausebetweenmsg)
    }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", collectElementbyClass, false)
    else if (window.attachEvent)
    window.attachEvent("onload", collectElementbyClass)
    else if (document.getElementById)
    window.onload=collectElementbyClass
    
    </script>

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's also possible that other scripts on your page are assigning to window.onload(or body.onload) which is overwriting the script. In IE, you would go down the path in red, but in NN you may be going down the path in blue:
    Code:
    function glideroutine(){
    ...
    if (window.addEventListener)
    window.addEventListener("load", collectElementbyClass, false)
    else if (window.attachEvent)
    window.attachEvent("onload", collectElementbyClass)
    else if (document.getElementById)
    window.onload=collectElementbyClass
    and if the blue line executes, and then another script on yoru page subsequently has a line like:

    window.onload = ....;

    or your body tag has:

    <body onload = ....>

    then your glide-in-text script won't work in NN.

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks 7stud for your replies,

    i'll have a check about what you suggested!

    thanks again

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi 7stud,

    it worked after i removed the DOCTYPE declaration!

    but now the CSS layout doesn't work without a DOCTYPE declaration?!


    thanks again!

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm....that's surprising. There isn't any advanced css in the code you posted. Maybe try position:absolute?

    Also, the css forum here has brilliant members, and they can tell you any problems NN would have with the css.

    Ah! This is a problem:
    Code:
    glidearray[curobjindex].style.left=
          parseInt(actualstyle(glidearray[curobjindex], "left"))+50
    parseInt() returns a number, so that statement is equivalent to:
    Code:
    glidearray[curobjindex].style.left=
          someNumber + 50
    When you assign a distance to style.left, you are telling the browser where to put the left edge of the html element. So if you tell the browser to put the left edge at 75, can the browser determine where that is? Is it 75cm? 75in? 75miles? You have to indicate the units of measurement. css has many units of measurement: pt, px, pica, em, mm, cm, etc, and you have to indicate which one you want to use. Then the browser can determine where to position the html element.

    In fact, you have to assign a string to style.left--not a number. The string should specify the number and the units, e.g. "75px". If you only assign a number to style.left, js will automatically convert it to a string, but the string will still be missing the units. Here is where the DOCTYPE comes into play. If there is no DOCTYPE declaration, some browsers, like FF1.0.7, will default to "px" units. That means the browser will assume you mean "px" when you don't specify the units. On the other hand, if there is a DOCTYPE declaration, the browser will require that the units be specified, and if the units aren't specified the assignment will fail silently(i.e. the assignment won't work yet the browser won't give you an error message).

    So, you can keep the DOCTYPE declaration and just add this:
    Code:
    glidearray[curobjindex].style.left=
         parseInt(actualstyle(glidearray[curobjindex], "left"))+50 + "px"


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
  •