How do I create a branding logo that stays in a corner of the browser as the user scrolls down the page?

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>
0 Comments  (click to add your comment)
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

About | Sitemap | Contact