View Full Version : How to resize div, javascript out of borders

06-02-2009, 11:10 AM
I'm having a problem with Javascript tool. I'm quite new to JS and ASP.NET, and I was asked to improve a made-before website which uses these two languages. (and i miss php :( )
Ok, so that's the case. The best way for me would be to show you the problem itself, there is the link: http://www.ji-binc.com/Product/Womenswear/Pomodoro/Dresses/Pomodoro+empire+style+dress/POPPY+DRESS.aspx

As you may see, this page is hellish messy under different browsers. If it displays properly (chrome sets one of pics as a background, but i'll leave this for the moment), and the footer is below everything, try to click 'tell a friend' button, and then select the size (10 for instance). The forms will pop out and the footer will be covered by them. I'm quite desperate to get it to work, as i spend hours on resolving it.

I've tried to use x.js as I found a really usefull script somewhere on the net. But, it requires me to use javascript function in the master page of the asp.net.

So, about the code: I've three 'vertical' divs -> one for menu, one for content and one for the special offers. And, obviously, the footer.

The function code is as follows:

<script type="text/javascript" src="x.js"></script>
<script type="text/javascript">
var rHeight2 = xHeight("specialInternal");

function adjustLayout() {
alert(rHeight2 + "dsad"); // just tried to pop something out, but it doesnt read anything in functions.
// Get natural heights
var cHeight = xHeight("menuInternal");
var lHeight = xHeight("mainContentInternal");
var rHeight = xHeight("specialInternal");
// Find the maximum height
var maxHeight =
Math.max(cHeight, Math.max(lHeight, rHeight));

// Assign maximum height to all columns
xHeight("menu", maxHeight);
xHeight("mainContent", maxHeight);
xHeight("special", maxHeight);
// Show the footer

window.onload = function() {
xAddEventListener(window, "resize",
adjustLayout, false);

this function is very useful in different pages and works brilliantly. Simply compares the heights of divs and displays footer when it's supposed to be.

Or, maybe, there is another way, without using such functions to avoid stacking of divs? some smart move to force the js to enlarge the div after, for example, 'tell a friend' button is pressed? Is there anyone willing to help me?

I hope I stated my problem clearly

Thanks in advance

06-02-2009, 04:22 PM
I think you a making problems by having the 'popup' panels opening inline.

Suggest opening them centrally above all other content, leaving the existing layout uncorrupted.

06-02-2009, 05:35 PM
i didnt manage to solve the problem, I am going to use the way you proposed, just to pop up hidden dives somewhere else. I dealt with the function i quoted, works quite well. however, Im having another issue - comapatibility of the website with opera and IE differs - everything works suprisingly well in explorer, but gets messy under any other browser
link i posted before shows the situation - ie displays full middle div and places footer underneath, but other browsers seem to ignore the thumbs below the main pic.