Question

I have the following jQuery that does find the ASP.NET server control (tested by placing an alert() inside block), but it does not set the height on the next DIV in the DOM using .next(). However if I use straight JS to do the same thing, calling the DIV by ID directly it works fine.

What I am trying to do is not use the hardcoded ID of the DIV in case it changes, and rather walk the DOM to dynamically get to the element and set the height.

So 1st: the HTML source of what I am trying to manipulate:

<div id="WebViewer" style="height:100%;width:100%;margin-right: 0px">
   <input name="WebViewerReportReceipt" type="hidden"/>
   <input name="WebViewerViewerType" type="hidden"/>
   <DIV id="WebViewer_controlDiv">
    <iframe src="295769102_1619997395_16141400_2120403583/CacheItem" style="width:100%;height:100%;"></iframe>
   </DIV>
</div>

Next the non-working jQuery that I think should work:

//Using the 'DIV' that is created by the viewer (at runtime), resize it dynamically to fit the window
    var myHeight = $(window).height();
    if ($('#<%=WebViewer.ClientID %>') != null) {                
          $('#<%=WebViewer.ClientID %>').next('div').height(myHeight - 10);
    }

And lastly the JS that does work, but I would prefer not to access that DIV by a hardcoded ID and use jQuery instead:

var myHeight = $(window).height();
//Using the 'DIV' that is created by the viewer (at runtime), resize it dynamically to fit the window
if (document.getElementById('WebViewer_controlDiv') != null) {
    document.getElementById('WebViewer_controlDiv').style.height = myHeight - 10;
}

Any ideas on why walking the DOM in jQuery to get the ‘next’ div and set its height is not working?

Thanks!

Answer 1

I’m guessing that $('#<%=WebViewer.ClientID %>') in your if statement is referring to <div id="WebViewer" ?

If so, next() will not work as it looks for the next sibling, not next child

So try something like this:

var myHeight = $(window).height();
if ($('#<%=WebViewer.ClientID %> div:first').length) {                
      $('#<%=WebViewer.ClientID %> div:first').height(myHeight - 10);
}

Here is a jsfiddle with the running code (slightly modified to work in this context):
http://jsfiddle.net/xT7rx/

You should use .length to check if an element exists, rather than != null