dcsimg

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>