Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to resize div, javascript out of borders

    Hi
    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/Women...PPY+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:

    Code:
    <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");
            alert(rHeight);
            // 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);
            alert(maxHeight);
            // Show the footer
            xShow("footer");
        }
    
        window.onload = function() {
            xAddEventListener(window, "resize",
        adjustLayout, false); 
            adjustLayout();
        }
    </script>
    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
    regards

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    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.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi
    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.
    Last edited by klon; 06-02-2009 at 04:41 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •