How do I create a branding logo that stays in a corner of the browser as the user scrolls down the page?
Created May 4, 2012
Jayesh Nazre Here's the separate scripts for both Internet Explorer and Netscape browsers.
For Internet Explorer:
<html> <head> <script language="javascript1.2"> window.onscroll = test2; window.onresize = intializeresize; function intialize() { tp = document.all("id_div"); tp.style.top = document.body.clientHeight - 30; tp.style.left = document.body.clientWidth - 40; } function intializeresize() { tp = document.all("id_div"); tp.style.top = document.body.clientHeight - 30; tp.style.left = document.body.clientWidth - 40; } function test2(){ tp = document.all("id_div"); if (tp.style.top < document.body.clientHeight) { tp.style.top = document.body.clientHeight - 30; tp.style.left = document.body.clientWidth - 40; } else { tp.style.top = document.body.scrollTop + document.body.clientHeight - 30; tp.style.left = document.body.clientWidth - 40; } } </script> </head> <body onload=intialize()> <div name=id_div id=id_div STYLE="position: absolute; visibility : visible"> (+) </div> <table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> <tr> <td>11</td> </tr> <tr> <td>12</td> </tr> <tr> <td>13</td> </tr> <tr> <td>14</td> </tr> <tr> <td>15</td> </tr> <tr> <td>16</td> </tr> <tr> <td>17</td> </tr> <tr> <td>18</td> </tr> <tr> <td>19</td> </tr> <tr> <td>20</td> </tr> <tr> <td>21</td> </tr> <tr> <td>22</td> </tr> <tr> <td>23</td> </tr> <tr> <td>24</td> </tr> <tr> <td>25</td> </tr> <tr> <td>26</td> </tr> <tr> <td>27</td> </tr> <tr> <td>28</td> </tr> <tr> <td>29</td> </tr> <tr> <td>30</td> </tr> </table> <br> <br> <br> <br> <br> </body> </html>For Netscape:
<html> <head> <script language="javascript1.2"> window.onresize = intializeresize; setInterval("checkscroll()", 50); function intialize() { tp = document.layers["id_div"]; tp.top = window.innerHeight - 20; tp.left = window.innerWidth - 40; } function intializeresize() { tp = document.layers["id_div"]; tp.top = window.innerHeight - 20; tp.left = window.innerWidth - 40; } function checkscroll(){ tp = document.layers["id_div"]; if (tp.top < (window.innerHeight - 20)) { tp.top = window.innerHeight - 20; tp.left = window.innerWidth - 40; } else { tp.top = window.pageYOffset + window.innerHeight - 20; tp.left = window.innerWidth - 40; } } </script> </head> <body onload=intialize()> <div name=id_div id=id_div STYLE="position: absolute; visibility : visible"> (+) </div> <table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> <tr> <td>11</td> </tr> <tr> <td>12</td> </tr> <tr> <td>13</td> </tr> <tr> <td>14</td> </tr> <tr> <td>15</td> </tr> <tr> <td>16</td> </tr> <tr> <td>17</td> </tr> <tr> <td>18</td> </tr> <tr> <td>19</td> </tr> <tr> <td>20</td> </tr> <tr> <td>21</td> </tr> <tr> <td>22</td> </tr> <tr> <td>23</td> </tr> <tr> <td>24</td> </tr> <tr> <td>25</td> </tr> <tr> <td>26</td> </tr> <tr> <td>27</td> </tr> <tr> <td>28</td> </tr> <tr> <td>29</td> </tr> <tr> <td>30</td> </tr> </table> <br> <br> <br> <br> <br> </body> </html>