www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Doctype problem with javascript.

  1. #1
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12

    Exclamation Doctype problem with javascript.

    Hello guys ...
    I'm trying to implement some javascript I found .. worked great on the original page that did NOT have any doctype .
    And I think the code may bee wrong somewhere ..

    The javascript ::

    Code:
     //__________________________________________________
      //                                        Nav
    		
    		
    		var T_Nav = "";
      if (T_nav.search("MSIE") != -1) {T_Nav = "IE"}
      if (T_nav.search("Netscape") != -1) {T_Nav = "FF"}
      if (T_nav.search("Firefox") != -1) {T_Nav = "FF"}
      if (T_nav.search("Opera") != -1) {T_Nav = "OP"}
      if (T_nav.search("Safari") != -1) {T_Nav = "SA"}
    
    
      //__________________________________________________
      //                                            Slider
     
      PosxPubdep = -298;
      PosxPubEnCours = -298;
      SlideTimer = 0;
    
      function ScrollPub(arg)
      {
       if (SlideTimer != 0){clearTimeout(SlideTimer); SlideTimer = 0;}
     
       if (arg == "+")
       {
        PosxPubEnCours += 15;
      
        if (PosxPubEnCours < 0)
        {
         document.getElementById("Pub_Slide").style.left = PosxPubEnCours;
         SlideTimer = setTimeout("ScrollPub('+')",10);
        }
        else
        {
         PosxPubEnCours = 0
         document.getElementById("Exclam").style.left = 297 + 'px';
         document.getElementById("Pub_Slide").style.left = 0 + 'px';
        }
       }
       else
       {
        PosxPubEnCours -= 20;
      
        if (PosxPubEnCours > PosxPubdep)
        {
         document.getElementById("Pub_Slide").style.left = PosxPubEnCours;
         SlideTimer = setTimeout("ScrollPub('-')",10);
        }
        else
        {
         PosxPubEnCours = PosxPubdep
         document.getElementById("Exclam").style.left = 301 + 'px';
         document.getElementById("Pub_Slide").style.left = PosxPubdep;
        }
       }
      }
    
      Pos_Y_Slide=0;
      temps_Slide=30;
      max=30;
      
      function Init_Slide()
      {
       Pos_Y_Slide=document.body.clientHeight/2 + (196/2);
       setTimeout("Start_Slide()",temps_Slide);
      }
    
      function Start_Slide()
      {
       Deplacer_Slide("Pub_Slide",Postionimage("Pub_Slide"));
       setTimeout("Start_Slide()",temps_Slide);
      }
    
      function Deplacer_Slide(nom,top)
      {
       document.getElementById(nom).style.top = top;
      }
    
      function Postionimage(nom)
      {
       var pos=parseInt(document.getElementById(nom).style.top);
       var wintop=parseInt(document.body.scrollTop);
       var dispo=document.body.clientHeight;
       var diff=Math.ceil((pos-(wintop+dispo-Pos_Y_Slide)));
       if (diff>max) {diff=max;}
       if (diff<-1*max) {diff=-1*max;}
       var top=pos-diff;
       return top;
      }
    
      //__________________________________________________
      //  
    
    
      if (T_Nav == "IE" || T_Nav == "SA")
      {
    	  function blink_show()
    	  {
    		  blink_tags  = document.all.tags('blink');
    		  blink_count = blink_tags.length;
    	  	for ( i = 0; i < blink_count; i++ ) {blink_tags[i].style.visibility = 'visible';}
    		  window.setTimeout( 'blink_hide()', 700 );
      	}
    	
    	  function blink_hide()
      	{
    	  	blink_tags  = document.all.tags('blink');
    	  	blink_count = blink_tags.length;
    		  for ( i = 0; i < blink_count; i++ ) {blink_tags[i].style.visibility = 'hidden';}
    		 	window.setTimeout( 'blink_show()', 250 );
      	}
      }
    the HTML :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>scroller</title>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    T_nav = "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7"
    /*]]>*/
    </script>
    <script src="js/scroller.js" type="text/javascript"></script>
    </head>
    
    <body onLoad="Init_Slide()">
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    	var text=new Array()
    	text_En_Cours = 2 
    	DivActif = 1
    /*]]>*/
    </script>
    
    <div style="height:800px;"></div>
    
    <div id="Pub_Slide" style="position:absolute; overflow:hidden; width:325; height:196; left:-298; top:-200">
        <a href="index.php" target="_blank" title="">
      <img src="images/panel.png" alt="" border="0" onmouseOver="ScrollPub('+')" onmouseOut="ScrollPub('-')" />  </a>
      <div id="Exclam" style="background-color:#999933; position:absolute; overflow:hidden; left:301; top:89; width:8; height:22"><img src="images/exclmark.gif" alt="" border="0" />&nbsp;</div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    if (T_Nav == "IE" || T_Nav == "SA") {blink_show()}
    /*]]>*/
    </script>
    </body>
    
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
      function Deplacer_Slide(nom,top)
      {
       document.getElementById(nom).style.top = top + 'px';
      }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    yeah, thanks for that .. mist it, but still it does not solve the problem .
    the only way around it is to delete the doctype, and that is not a good ideea ...

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add px to lengths:
    Code:
    <div id="Pub_Slide" style="position:absolute; overflow:hidden; width:325px; height:196px; left:-298px; top:-200px">
        <a href="index.php" target="_blank" title="">
      <img src="../../Images/apple.gif" alt="" border="0" onmouseOver="ScrollPub('+')" onmouseOut="ScrollPub('-')" />  </a>
      <div id="Exclam" style="background-color:#999933; position:absolute; overflow:hidden; left:301px; top:89px; width:8px; height:22px"><img src="../../Images/arrowUp.gif" alt="" border="0" />&nbsp;</div>
    </div>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    Man, you are good ... that is a fresh mind on the subject ...

    But still ! it's not done yet ... I'm so sorry i don't have a place to upload the original exemple and this one ...

    This script should make a div scroll out and back in ... now with this code upgrades, it only scrolles out, never back in, like it should.

  6. #6
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    also changed the onmouseover and onmouseout to lowercase, but that was not it...

  7. #7
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    repaired another javascript bug ... more + 'px'

    //__________________________________________________
    // Slider

    PosxPubdep = -298 + 'px';
    PosxPubEnCours = -298 + 'px';

  8. #8
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    still .... on mozilla it does not want to scroll up and down anymore ... errrrr

  9. #9
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    new javascript, wokrs with doctype,
    problem : does Not scroll up and down in mozilla, works in ie and safari ...

    Code:
      //__________________________________________________
      //                                        Nav
    		
    		
    		var T_Nav = "";
      if (T_nav.search("MSIE") != -1) {T_Nav = "IE"}
      if (T_nav.search("Netscape") != -1) {T_Nav = "FF"}
      if (T_nav.search("Firefox") != -1) {T_Nav = "FF"}
      if (T_nav.search("Opera") != -1) {T_Nav = "OP"}
      if (T_nav.search("Safari") != -1) {T_Nav = "SA"}
    
    
      //__________________________________________________
      //                                            Slider
     
      PosxPubdep = -298;
      PosxPubEnCours = -298;
      SlideTimer = 0;
    
      function ScrollPub(arg)
      {
       if (SlideTimer != 0){clearTimeout(SlideTimer); SlideTimer = 0;}
     
       if (arg == "+")
       {
        PosxPubEnCours += 15;
      
        if (PosxPubEnCours < 0)
        {
         document.getElementById("Pub_Slide").style.left = PosxPubEnCours + 'px';
         SlideTimer = setTimeout("ScrollPub('+')",10);
        }
        else
        {
         PosxPubEnCours = 0
         document.getElementById("Exclam").style.left = 297 + 'px';
         document.getElementById("Pub_Slide").style.left = 0 + 'px';
        }
       }
       else
       {
        PosxPubEnCours -= 20;
      
        if (PosxPubEnCours > PosxPubdep)
        {
         document.getElementById("Pub_Slide").style.left = PosxPubEnCours + 'px';
         SlideTimer = setTimeout("ScrollPub('-')",10);
        }
        else
        {
         PosxPubEnCours = PosxPubdep;
         document.getElementById("Exclam").style.left = 301 + 'px';
         document.getElementById("Pub_Slide").style.left = PosxPubdep + 'px';
        }
       }
      }
    
      Pos_Y_Slide=0;
      temps_Slide=30;
      max=30;
      
      function Init_Slide()
      {
       Pos_Y_Slide=document.body.clientHeight/2 + (196/2);
       setTimeout("Start_Slide()",temps_Slide);
      }
    
      function Start_Slide()
      {
       Deplacer_Slide("Pub_Slide",Postionimage("Pub_Slide"));
       setTimeout("Start_Slide()",temps_Slide);
      }
    
      function Deplacer_Slide(nom,top)
      {
       document.getElementById(nom).style.top = top + 'px';
      }
    
      function Postionimage(nom)
      {
       var pos=parseInt(document.getElementById(nom).style.top);
       var wintop=parseInt(document.body.scrollTop);
       var dispo=document.body.clientHeight;
       var diff=Math.ceil((pos-(wintop+dispo-Pos_Y_Slide)));
       if (diff>max) {diff=max;}
       if (diff<-1*max) {diff=-1*max;}
       var top=pos-diff;
       return top;
      }
    
      //__________________________________________________
      //     
    
    
      if (T_Nav == "IE" || T_Nav == "SA")
      {
    	  function blink_show()
    	  {
    		  blink_tags  = document.all.tags('blink');
    		  blink_count = blink_tags.length;
    	  	for ( i = 0; i < blink_count; i++ ) {blink_tags[i].style.visibility = 'visible';}
    		  window.setTimeout( 'blink_hide()', 700 );
      	}
    	
    	  function blink_hide()
      	{
    	  	blink_tags  = document.all.tags('blink');
    	  	blink_count = blink_tags.length;
    		  for ( i = 0; i < blink_count; i++ ) {blink_tags[i].style.visibility = 'hidden';}
    		 	window.setTimeout( 'blink_show()', 250 );
      	}
    
      }

  10. #10
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    i seem to be resolving one problem, and getting a fresh onez after that ....
    in the javascript, if the height is bigger the the var max it should stop going down, but it does to the center of the screen...
    max=30;

    if (diff>max) {diff=max}

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Just using position:fixed will probably achieve the required result.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  12. #12
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    no .. that is not right ..
    i have uploaded some sample to show around as exemples (content is not important, just the slidebox.)

    With Doctype : http://x3mdesign.ro/slider/sample_doc.html
    with NO doctype : http://x3mdesign.ro/slider/sample_nondoc.html

  13. #13
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    so the main problem now is that with doctype def. it does not work ..

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
      function Init_Slide()
      {
       viewport = window.innerHeight || document.body.clientHeight;
       Pos_Y_Slide=viewport/2 + (196/2);
       setTimeout("Start_Slide()",temps_Slide);
      }
    
      function Start_Slide()
      {
       Deplacer_Slide("Pub_Slide",Postionimage("Pub_Slide"));
       setTimeout("Start_Slide()",temps_Slide);
      }
    
      function Deplacer_Slide(nom,top)
      {
       document.getElementById(nom).style.top = top + 'px';
      }
    
      function Postionimage(nom)
      {
       var pos=parseInt(document.getElementById(nom).style.top);
       var wintop=window.pageYOffset || document.body.scrollTop;
       var dispo=window.innerHeight || document.body.clientHeight;
       var diff=Math.ceil((pos-(wintop+dispo-Pos_Y_Slide)));
       
       if (diff > max) {diff = max;}
       else if (diff < -1*max) {diff = -1*max;}
       
       var top=pos-diff;
       return top;
      }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  15. #15
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    I have updated the script, see exemple links .

    works great, but internet explorer still does not like it .... anyway, thanks a lot man .
    Last edited by zenjan; 01-27-2010 at 02:50 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles