Monday, May 05, 2008

floating window working with resize event

Add to Delicious Digg this links to this post -

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: , , ,

0 Comments:

Post a Comment

Links to this post:

Create a Link

<< Home