469,271 Members | 1,563 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

Re: Adding CSS units to an old JS Script

SAM
rfr a écrit :
I am a cut-n-paste javascript user and trying to update this script.

I have tried adding +"px" to the barW and barH lines. But that didnt get it
to work.
This below works for me in Firefox,
you can put this script in the head of your page(s)

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript1.2" type="text/javascript">
  2.  
  3. // Based on watermark script by Paul Anderson, CNET Builder.com.
  4. // All rights reserved.
  5.  
  6. // and then ?
  7. // it was no more working ... so ... the rights ...
  8.  
  9. var markW = 90, // pixels wide
  10. markH = 40, // pixels high
  11. markX = 99, // percent right
  12. markY = 99, // percent down
  13. markRefresh = 50; // milliseconds
  14.  
  15. var posX, posY, wMark, navDOM, markID;
  16.  
  17. function setVals() {
  18. var barW = 0; // scrollbar compensation for PC Nav
  19. var barH = 0;
  20. if (navDOM)
  21. {
  22. if (document.height innerHeight) barW = 20;
  23. if (document.width innerWidth) barH = 20;
  24. }
  25. else
  26. {
  27. innerWidth = document.body.clientWidth;
  28. innerHeight = document.body.clientHeight;
  29. }
  30. posX = ((innerWidth - markW)-barW) * (markX/100);
  31. posY = ((innerHeight - markH)-barH) * (markY/100);
  32. }
  33.  
  34. function wRefresh() {
  35. wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft) +'px';
  36. wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop) + 'px';
  37. }
  38.  
  39. function markMe() {
  40. // set common object reference
  41. wMark = document.all ? document.all['waterMark'].style :
  42. document.getElementById?
  43. document.getElementById('waterMark').style :
  44. document.waterMark;
  45. navDOM = window.innerHeight; // Nav DOM flag
  46. wMark.width = markW;
  47. wMark.height = markH;
  48. setVals();
  49. window.onresize=setVals;
  50. markID = setInterval ("wRefresh()",markRefresh);
  51. }
  52.  
  53. window.onload=markMe; // safety for Mac IE4.5
  54.  
  55. </script>

This script works with an associated div somewhere (preferably at end)
in the body of the page :

Expand|Select|Wrap|Line Numbers
  1. <div id="waterMark" style="position:absolute">
  2. <a href="#" onClick="window.scrollTo(0,0)">
  3. top
  4. </a>
  5. </div>

--
sm
Jun 27 '08 #1
4 1183
rfr
Thank you.

That does work in FireFox, Opera and Netscape. But it does not work in MSIE
7.0.

I have no idea why it doesnt work in MSIE 7.0

And since MSIE is such a large part of the visitor audience, it has to work
there too.

"SAM" <st*********************@wanadoo.fr.invalidwrote in message
news:48*********************@news.orange.fr...
rfr a écrit :
>I am a cut-n-paste javascript user and trying to update this script.

I have tried adding +"px" to the barW and barH lines. But that didnt get
it to work.

This bellow works for me in Firefox,
you can put this script in the head of your page(s)

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript1.2" type="text/javascript">
  2. // Based on watermark script by Paul Anderson, CNET Builder.com.
  3. // All rights reserved.
  4. // and then ?
  5. // it was no more working ... so ... the rights ...
  6. var markW = 90, // pixels wide
  7.     markH = 40, // pixels high
  8.     markX = 99, // percent right
  9.     markY = 99, // percent down
  10.     markRefresh = 50; // milliseconds
  11. var posX, posY, wMark, navDOM, markID;
  12. function setVals() {
  13.  var barW = 0; // scrollbar compensation for PC Nav
  14.  var barH = 0;
  15. if (navDOM)
  16.    {
  17.    if (document.height innerHeight) barW = 20;
  18.    if (document.width innerWidth) barH = 20;
  19.    }
  20. else
  21.    {
  22.     innerWidth = document.body.clientWidth;
  23.     innerHeight = document.body.clientHeight;
  24.     }
  25. posX = ((innerWidth - markW)-barW) * (markX/100);
  26. posY = ((innerHeight - markH)-barH) * (markY/100);
  27. }
  28. function wRefresh() {
  29. wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft) +'px';
  30. wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop) + 'px';
  31. }
  32. function markMe() {
  33. // set common object reference
  34. wMark = document.all ? document.all['waterMark'].style :
  35.         document.getElementById?
  36.             document.getElementById('waterMark').style :
  37.         document.waterMark;
  38. navDOM = window.innerHeight; // Nav DOM flag
  39. wMark.width = markW;
  40. wMark.height = markH;
  41. setVals();
  42. window.onresize=setVals;
  43. markID = setInterval ("wRefresh()",markRefresh);
  44. }
  45. window.onload=markMe; // safety for Mac IE4.5
  46. </script>


This script works with an associated div somewhere (preferably at end) in
the body of the page :

Expand|Select|Wrap|Line Numbers
  1. <div id="waterMark" style="position:absolute">
  2. <a href="#" onClick="window.scrollTo(0,0)">
  3.   top
  4.   </a>
  5. </div>


--
sm
Jun 27 '08 #2
rfr
What changes to I need to make to this script to get it to also work in
MSIE?

"rfr" <rf******@iw.netwrote in message
news:3v******************************@prairiewave. com...
Thank you.

That does work in FireFox, Opera and Netscape. But it does not work in
MSIE 7.0.

I have no idea why it doesnt work in MSIE 7.0

And since MSIE is such a large part of the visitor audience, it has to
work there too.

"SAM" <st*********************@wanadoo.fr.invalidwrote in message
news:48*********************@news.orange.fr...
Jun 28 '08 #3
SAM
rfr a écrit :
What changes to I need to make to this script to get it to also work in
MSIE?
That would have to (IE4 ?)

Here you are (tested IE6, Fx2, Safari3)
Doesn't work with my IE Mac if the div marker has no border :



Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. <title>down marker</title>
  7. <script language="JavaScript1.2" type="text/javascript">
  8.  
  9. // Based on watermark script by Paul Anderson, CNET Builder.com.
  10. // All rights reserved.
  11.  
  12. // all the script is modified so ... the rights !!!
  13.  
  14. // variable for test :
  15. n= 0;
  16.  
  17. // fixing some values :
  18. var markW = 90, // pixels wide
  19. markH = 40, // pixels high
  20. markX = 99, // percent right
  21. markY = 99, // percent down
  22. markRefresh = 200; // milliseconds
  23.  
  24. // some needed variables :
  25. var posX, posY, wMark, navDOM, markID;
  26.  
  27. function setVals() {
  28. var barW = 0; // scrollbar compensation for PC Nav
  29. var barH = 0;
  30. if (navDOM)
  31. {
  32. if (document.height innerHeight) barW = 20;
  33. if (document.width innerWidth) barH = 20;
  34. }
  35. else
  36. {
  37. /*@cc_on var innerHeight, innerWidth; @*/
  38. innerWidth = !document.documentElement.clientWidth?
  39. document.body.clientWidth :
  40. document.documentElement.clientWidth;
  41. innerHeight = !document.documentElement.clientHeight?
  42. document.body.clientHeight :
  43. document.documentElement.clientHeight;
  44. }
  45. posX = ((innerWidth - markW)-barW) * (markX/100);
  46. posY = ((innerHeight - markH)-barH) * (markY/100);
  47. }
  48.  
  49. function wRefresh() {
  50. wMark.left = +posX + (navDOM? pageXOffset :
  51. !document.documentElement.scrollLeft?
  52. document.body.scrollLeft :
  53. document.documentElement.scrollLeft) + 'px';
  54. wMark.top = +posY + (navDOM? pageYOffset :
  55. !document.documentElement.scrollTop?
  56. document.body.scrollTop :
  57. document.documentElement.scrollTop) + 'px';
  58. // these 2 lines for test
  59. n++;
  60. window.status = 'refresh #'+n;
  61. }
  62.  
  63. function markMe() {
  64. // set common object reference
  65. wMark = (document.all && !document.getElementById)?
  66. document.all['waterMark'].style :
  67. document.getElementById?
  68. document.getElementById('waterMark').style :
  69. document.waterMark;
  70. navDOM = window.innerHeight; // Nav DOM flag
  71. wMark.width = markW + 'px';
  72. wMark.height = markH + 'px';
  73. setVals();
  74. window.onresize=setVals;
  75. markID = setInterval ("wRefresh()",markRefresh);
  76. }
  77.  
  78. window.onload=markMe; // safety for Mac IE4.5
  79.  
  80. </script>
  81. </head>
  82. <body>
  83. <DIV id="waterMark" style="position:absolute;border:1px solid">
  84. <a href="#" onClick="window.scrollTo(0,0);return false;">
  85. top signal
  86. </a>
  87. </DIV>
  88. <p style="border:1px solid;height:1500px;width:2000px">
  89. <a href="javascript:clearInterval(markID)">stop refreshing</a>
  90. </p>
  91. </body>
  92. </html>


--
sm
Jun 29 '08 #4
SAM
SAM a écrit :
>
Here you are (tested IE6, Fx2, Safari3)
Doesn't work with my IE Mac if the div marker has no border :
And now compatible NC 4.7 !



Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="fr">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. <title>down marker</title>
  7. <script language="JavaScript1.2" type="text/javascript">
  8.  
  9. // Based on watermark script by Paul Anderson, CNET Builder.com.
  10. // All rights reserved.
  11.  
  12. // all the script is modified so ... the rights ... p-) !!!
  13. // tested Mac OS X 10.4 : IE.5, Fx.2, Safari.3, Opera.9, iCab.3
  14. // tested Win XP SP2 : IE.6, NC.4.7
  15.  
  16. // variable for test and to remove after try :
  17. n= 0;
  18.  
  19. // fixing some values :
  20. var markW = 90, // pixels wide
  21. markH = 40, // pixels hight
  22. markX = 99, // percent right
  23. markY = 99, // percent down
  24. markRefresh = 200; // milliseconds
  25.  
  26. // some needed variables :
  27. var posX, posY, wMark, navDOM, markID;
  28.  
  29. function setVals() {
  30. var barW = 0; // scrollbar compensation
  31. var barH = 0; // scrollbar compensation
  32. if (navDOM)
  33. {
  34. if (document.height innerHeight) barW = 20;
  35. if (document.width innerWidth) barH = 20;
  36. }
  37. else  // for IE
  38. {
  39. /*@cc_on var innerHeight, innerWidth; @*/
  40. innerWidth = !document.documentElement.clientWidth?
  41. document.body.clientWidth :  // old IE and IE Mac
  42. document.documentElement.clientWidth;
  43. innerHeight = !document.documentElement.clientHeight?
  44. document.body.clientHeight :  // old IE and IE Mac
  45. document.documentElement.clientHeight;
  46. }
  47. posX = Math.floor(((innerWidth - markW)-barW) * (markX/100));
  48. posY = Math.floor(((innerHeight - markH)-barH) * (markY/100));
  49. }
  50.  
  51. function wRefresh() {
  52. wMark.left = +posX + (navDOM? pageXOffset :
  53. !document.documentElement.scrollLeft?
  54. document.body.scrollLeft :
  55. document.documentElement.scrollLeft) +
  56. (!document.getElementById? '' : 'px');
  57. wMark.top = +posY + (navDOM? pageYOffset :
  58. !document.documentElement.scrollTop?
  59. document.body.scrollTop :
  60. document.documentElement.scrollTop) +
  61. (!document.getElementById? '' : 'px');
  62. // those 2 lines for test (to remove after try)
  63. n++;
  64. window.status = 'refresh #'+n;
  65. }
  66.  
  67. function markMe() {
  68. // set common object reference
  69. wMark = (!document.getElementById && document.all)?
  70. document.all['waterMark'].style :
  71. document.getElementById?
  72. document.getElementById('waterMark').style :
  73. document.layers ?
  74. document.layers['waterMark'] :
  75. document.waterMark;
  76. navDOM = window.innerHeight; // Nav DOM flag
  77. // next line to remove after test
  78. alert(navDOM);
  79. wMark.width = markW + 'px';
  80. wMark.height = markH + 'px';
  81. setVals();
  82. window.onresize=setVals;
  83. markID = setInterval ("wRefresh()",markRefresh);
  84. }
  85.  
  86. window.onload=markMe; // safety for Mac IE4.5
  87.  
  88. </script>
  89. </head>
  90. <body>
  91. <div id="waterMark" style="position:absolute;border:1px solid">
  92. <a href="#" onClick="window.scrollTo(0,0);return false;">
  93. top signal
  94. </a>
  95. </div>
  96. <p style="height:1500px;width:1500px/* not used by NC*/">
  97. <a href="javascript:clearInterval(markID)">stop refreshing</a><br>
  98. <img src="#" width=1500 height=1500 alt="for NC to get scrollbars">
  99. </p>
  100. </body>
  101. </html>

--
sm
Jun 29 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Nick Goloborodko | last post: by
5 posts views Thread by Javaman59 | last post: by
10 posts views Thread by Trevor | last post: by
5 posts views Thread by yawnmoth | last post: by
2 posts views Thread by TheSeeker | last post: by
4 posts views Thread by Paul Rubin | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.