www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. 01-27-2010, 04:14 AM #1
    zenjan
    zenjan is offline Registered User
    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>
    Reply With Quote Reply With Quote
  2. 01-27-2010, 04:23 AM #2
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
  3. 01-27-2010, 04:28 AM #3
    zenjan
    zenjan is offline Registered User
    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 ...
    Reply With Quote Reply With Quote
  4. 01-27-2010, 04:37 AM #4
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
  5. 01-27-2010, 04:44 AM #5
    zenjan
    zenjan is offline Registered User
    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.
    Reply With Quote Reply With Quote
  6. 01-27-2010, 04:46 AM #6
    zenjan
    zenjan is offline Registered User
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    also changed the onmouseover and onmouseout to lowercase, but that was not it...
    Reply With Quote Reply With Quote
  7. 01-27-2010, 05:36 AM #7
    zenjan
    zenjan is offline Registered User
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    repaired another javascript bug ... more + 'px'

    //__________________________________________________
    // Slider

    PosxPubdep = -298 + 'px';
    PosxPubEnCours = -298 + 'px';
    Reply With Quote Reply With Quote
  8. 01-27-2010, 05:37 AM #8
    zenjan
    zenjan is offline Registered User
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    still .... on mozilla it does not want to scroll up and down anymore ... errrrr
    Reply With Quote Reply With Quote
  9. 01-27-2010, 05:50 AM #9
    zenjan
    zenjan is offline Registered User
    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 );
  	}

  }
    Reply With Quote Reply With Quote
  10. 01-27-2010, 06:08 AM #10
    zenjan
    zenjan is offline Registered User
    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}
    Reply With Quote Reply With Quote
  11. 01-27-2010, 07:18 AM #11
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
  12. 01-27-2010, 12:50 PM #12
    zenjan
    zenjan is offline Registered User
    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
    Reply With Quote Reply With Quote
  13. 01-27-2010, 12:51 PM #13
    zenjan
    zenjan is offline Registered User
    Join Date
    Jan 2010
    Location
    Romania
    Posts
    12
    so the main problem now is that with doctype def. it does not work ..
    Reply With Quote Reply With Quote
  14. 01-27-2010, 02:30 PM #14
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
  15. 01-27-2010, 02:43 PM #15
    zenjan
    zenjan is offline Registered User
    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.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

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
  •  

Forum Rules

 HTML5 Development Center



Recent Articles