floating window working with resize event
I spent a little while trying to figure out today how to get a little window sticking in the right hand-side corner of my browser, while resizing the screen.
Many examples are available out there, but found difficult to pick up a simple way to achieve this.
the best way I have found was this (suing JQUery code for DOM selection):
<script>
function findwidth(){
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
winW = (ns4)? window.innerWidth-16 : document.body.offsetWidth-20
return winW;
}
function positionmydiv(){
var myposition = findwidth()-$("div.mydiv").width();
$("div.mydiv").css({position: "absolute", left:myposition});
}
$(document).ready(function() {
$(window).resize(function() {
positionmydiv();
});
});
positionmydiv();
</script>
You then can use
</div class="mydiv" id="mydiv">My text here..... </div>
Anywhere in your code, the div will float nicely and adjust with resize.
Labels: css, javascript, tips, web design




1 Comments:
this code has several mistakes, like unclosed {}
Post a Comment
Links to this post:
Create a Link
<< Home