ansaurus

Question

JQuery Accordion: Resizing My Header Control

Answer 1

+2 A:

Do you have a scrollbar in your browser before and after you expand the menu?

What might be happening is that before you expand the menu, everything fits on the screen, so the browser doesn't give you a scrollbar; but when you expand the menu it needs more space, so the browser adds a scrollbar, causing the webpage to "scale" down.

I'm not sure how to fix that issue without setting a large min-height in your css file so that the scrollbar always shows up.

Hope that helps.

UPDATE: I just found a website which talks about how to fix the scrollbar issue. Just wanted to let anyone else who comes across this a much cleaner fix.

thebrokencube 2009-07-06 17:57:09

I think you are right.. I will experiment with this some more but this sounds very likely.

Nick 2009-07-06 19:18:26

Answer 2

A:

Weird.. There has to be a work around for this in IE. If I empty my function out and just run:

window.scroll(0,900);

I still loose my sever control at top?! Anyone have a suggestion?

Nick 2009-07-06 21:31:25

Answer 3

A:

Perhaps this is the problem.. The page is actually made up of two divs. The top div is for displaying the header control (before the days of MasterPages) and the bottom section is the section I am attempting to scroll within. The "content" div is the one I require the ability to scroll. The "header" div is the one that disappears when I scroll. Can anyone save me yet? :)

<body>
<form id="Form1" method="post" runat="server">
 <div id="header">
  <uc1:Header ID="headerControl" runat="server"></uc1:Header>
 </div>
 <div id="content" style="overflow:auto">
  <asp:PlaceHolder ID="contentPlaceholder" runat="server"></asp:PlaceHolder>
 </div>
</form>

Nick 2009-07-06 22:46:03

Oh, so you want to make the header control always stay at the top? If that is the case, you may be able to get the functionality you want from using a frame or an iframe (not sure about the iframe though).

thebrokencube 2009-07-07 12:29:54

Answer 4

A:

What I want is the .accordion('activate',indexval); to not change my header formatting.

Nick 2009-07-07 17:24:32

Do you think you could post some pictures of what's going on? That might help clarify what the deal is.

thebrokencube 2009-07-07 20:20:07

Answer 5

A:

So I got it figured out. I am working on legacy code that I inherited. I was barking up the wrong tree. I found the following code in the header of the page giving me grief:

function resizeContentWindowScrollBar() {
         var contentDiv = document.getElementById("content");
         var header = document.getElementById("header");

         if (header != null) {
             var desiredHeight = document.body.clientHeight - header.clientHeight;

             if (desiredHeight > 0) {
                 contentDiv.style.height = (document.body.clientHeight - header.clientHeight) + "px";

             }
         }


     }

Notice the header.clientHeight calls? This snippet obviously just gets the header height and with this equates the content div height. The problem was (and only in IE mind you) the clientHeight function was always returning "0". I replaced these with header.offsetHeight and all is well.

So it would appear that in IE my clientHeight functions where not working correctly.

Nick 2009-07-08 15:21:44

Nice, glad you figured out the problem. You should select this "answer" as the correct one so people know it is solved.

thebrokencube 2009-07-09 19:43:42

ansaurus

tags:

views:

answers:

JQuery Accordion: Resizing My Header Control

related questions