Perfect multiple resizing, but not OK in IE8
Hi all,
i am sweating for a few days now, just to create a nice resizable
playing bord with a nice border.
It works perfect now, see http://www.helena-schaken.nl/V34/testbord.php
(no game visible here, imagine yourself that the red square is the
game.)
Problem is, it works perfect in Firefox, but not in IE8
The background image in the first div is choosen by the width of this
wrapper div.
I use a grid of 50 for resizing
In Firefox i get values of 300, 350 400 etcetera
Not in IE!!
<script type="text/javascript">
$(function() {
$("#bordwrapper").resizable({
alsoResize:"#bordContainer,#buitenrand,#middenrand,#binnenrand,#bordframe",
maxHeight: 550,
maxWidth: 550,
minHeight: 300,
minWidth: 300,
aspectRatio: true,
grid: 50,
stop: function(event, ui) {
// because of grid, its always 300,350,400,450,500 or 550
(initially div starts with width= 400)
var newWidth = $(this).width();
$(this).css({'background-image' : 'url(images/bord/bg' + newWidth
+ '.png)'});
document.bordgrootteinstellen.bordgrootte.value = newWidth;
document.bordgrootteinstellen.submit();
}
});
});
</script>
I have a few background images with the width in their name.
With the value of newWidth i can create the right image filename.
I also create css values to be sure my board will always looking well.
This methode was my solution for my last problem:
http://groups.google.com/group/jquery-ui/browse_thread/thread/ed7277c5132af0b0/52df5f4d05e0482d?hl=nl#52df5f4d05e0482d
My question is: how is it possible i get other values for newWidth
with IE?
Thanks in advance for any help.