Scrolling DIV with links 1

[claudermilk]

I have a fairly complex page that is working except for one annoying issue. The section of code in question is shown below. I am dynamically filling the "Place holder" space with a table of values, some of which are links. This list sometimes is longer than the browser window, so I am calculating the available space and restricting the holding DIV to the available height. That all works fine. The issue is when the generated table of values in DIV pararesults is scrolled down; when that is done, the browser doesn't receive a click event & jumps the DIV back to the top. I need to find a way to stop that behavior and instead get the browser to recognize the clicked-on link.

The basic page structure for this section is:

<div id="ParametricSearch" runat=server visible="false">
    <div id="pstoprow">
        <asp:Button ID="btnParaClose" runat="server" Text=" X " />            
    </div>
    <div id="pssearchrow">
    	Component Type: 
	<asp:DropDownList ID="ddlParaComponentSearch" runat="server" AutoPostBack="True">
	    --list items---	
        </asp:DropDownList>&nbsp;
        <div id="ParaParameters" runat=server visible="false">
            <fieldset >
                <legend>Parameters</legend>            
                <asp:PlaceHolder ID="ParaPlaceHolder" runat="server"></asp:PlaceHolder>
                <asp:Button ID="btnRunParaSearch" runat="server" Text="Search" />
            </fieldset>
        </div>            
    </div>
    <div id="resultsrow">            
        <div id="pararesults" runat=server onfocus="setResultHeight('ParametricSearch','pstoprow','pssearchrow','pararesults')" style="overflow: auto; height: auto; width: 470px;">
            Place holder
        </div>
    </div>
</div> <!--ParametricSearch-->

 

[vacunita]

CSS? how are you setting the scroll? Try posting the final HTML instead of the ASP code, so we can better see whats going on.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[claudermilk]

OK, following is the generated HTML. The scroll is set via javascript; basically once the user hits the "Search" button, after rendering the page I have the focus get set on the appropriate DIV to trigger the javascript. All it does is look at the heights of the DIVs and the browser and sets the 'pararesults' DIV to the remaining height; that part seems to be working fine--at least it is setting the height correctly.

I can set the height of the 'pararesults' DIV statically and when it goes to scroll, it works fine. So it's somehow getting confused by getting set dynamically.

 <div id="ParametricSearch" onfocus="">
 	<div id="pstoprow" style="margin:5px; padding:5px; background-color:#dddddd; text-align:right; height: auto; width:auto;">
		<input type="submit" name="btnParaClose" value=" X " onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;btnParaClose&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="btnParaClose" style="color:White;background-color:LightCoral;border-color:Black;border-width:1px;border-style:Solid;font-size:X-Small;font-weight:bold;" />            
   </div>
	<div id="pssearchrow" style="margin:5px; padding:5px; background-color:#dddddd; text-align:left; height: auto; width:auto;">
		Component Type: 
		<select name="ddlParaComponentSearch" onchange="javascript:setTimeout('__doPostBack(\'ddlParaComponentSearch\',\'\')', 0)" id="ddlParaComponentSearch">
			<option value="Select One">Select One</option>
				...
		</select>&nbsp;
		<br />
		<br />
		<div id="ParaParameters">
    		<fieldset >
				<legend>Parameters</legend>            
				<table>
					<tr><td><input type="hidden" name="Title" id="Title" value="nvarchar1" /></td><td></td></tr>
					<tr><td><input type="hidden" name="Desc" id="Desc" value="nvarchar2" /></td><td></td></tr>
					<tr><td><span>Value</span></td><td><select name="nvarchar3" id="nvarchar3">
						<option selected="selected" value="All">All</option>
							...
						</select></td></tr>
					<tr><td><span>Tol.</span></td><td><select name="nvarchar4" id="nvarchar4">
						<option selected="selected" value="All">All</option>
							...
						</select></td></tr>
					<tr><td><span>VoltRate</span></td><td><select name="nvarchar5" id="nvarchar5">
						<option selected="selected" value="All">All</option>
							...
						</select></td></tr>
					<tr><td><span>TempCoef</span></td><td><select name="nvarchar6" id="nvarchar6">
						<option selected="selected" value="All">All</option>
							...
						</select></td></tr>
					<tr><td><span>MaterialType</span></td><td><select name="nvarchar8" id="nvarchar8">
						<option selected="selected" value="All">All</option>
							...
						</select></td></tr>
					<tr><td><span>Package</span></td><td><select name="nvarchar10" id="nvarchar10">
						<option selected="selected" value="All">All</option>
							...
						</select></td></tr>
				</table>
				<br />
        <input type="submit" name="btnRunParaSearch" value="Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;btnRunParaSearch&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="btnRunParaSearch" />
       </fieldset>
		</div>            
	</div>
  <div id="resultsrow" style="margin:5px; padding:5px; background-color:#dddddd; text-align:left; height: auto; width:auto;">                            
		<div id="pararesults" onfocus="setResultHeight('ParametricSearch','pstoprow','pssearchrow','pararesults')" style="overflow: auto; height: auto; width: 470px;">
			<table width="96%">
				<tr style="line-height: normal;" class="roweven">
					<td class="detailrow" nowrap="on" style="font-size:1em;"><a href="invQuery.aspx?button=query&amp;stockcode=05-0010-000">05-0010-000</a></td>
					<td class="detailrow" nowrap="on" style="font-size:1em;">CAP, CHIP, 20% 50V Z5U, 1206, GEN SPEC</td>
				</tr>
				<tr style="line-height: normal;" class="rowodd">
					<td class="detailrow" nowrap="on" style="font-size:1em;"><a href="invQuery.aspx?button=query&amp;stockcode=05-0010-103">05-0010-103</a></td>
					<td class="detailrow" nowrap="on" style="font-size:1em;">CAP, CHIP, 0.01uF 20% 50V Z5U, 1206</td>
				</tr>
				...
			</table>
		</div>
	</div>
</div> <!--ParametricSearch-->

The javascript:

function setResultHeight(parent,top,search,result) {
    try {
        avlHeight = pageHeight() - document.getElementById(parent).offsetTop - getDim(top) - getDim(search) - 50
        if (getDim(result) > avlHeight) {
            document.getElementById(result).style.height = avlHeight + 'px'
        }
    } catch(err) {
        txt="There was an error on this page.\n\n"
        txt+="Error name: " + err.name + "\n\n"
        txt+="Error message: " + err.message + "\n\n"
        txt+="Click OK to continue.\n\n"
        alert(txt)
    }                
}

 

[vacunita]

If the scrolling works when its hard coded, then its not an html or css issue. It might be a Javascript problem,or a combination of both. Probably the inability of the DIV to actually change it size and scrolling dimensions dynamically. Although I'm not sure how to fix it. Maybe someone else here has some idea of why the dynamically set height causes scrolling problems.

In the meantime, I'll try to run some tests, see if i can duplicate the problem.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[claudermilk]

The thing is, the DIV does change size just like I want it to. The only thing that's failing is trying to click through a link when scrolled--no mouse click event is triggered & the DIV jumps back to the top of it's content. Thanks for looking; I've tried a few things, but this one is just beyond my skills at this point.

 

[theEclipse]

your problem appears to be here:

<div id="pararesults" onfocus="setResultHeight('ParametricSearch','pstoprow','pssearchrow','pararesults')" style="overflow: auto; height: auto; width: 470px;">

Why is this triggered onfocus? When somebody clicks on a link it is triggering this code instead of a link. I would propose this alternate solution:

        <div id="pararesults" style="overflow: auto; height: auto; width: 470px;">
            Place holder
        </div>
<script type="text/javascript">
setResultHeight('ParametricSearch','pstoprow','pssearchrow','pararesults')
</script>

Without seeing the rest of your page I cannot tell you that this will for sure work, but the fix to your problem of clicking is that I removed the onfocus event from the div. I would surmise that, with the code you posted above, the browser would only jump back to the top of the div on the first time you attempted to click on a link. If, after clicking once inside the div, you did not click elsewhere but scrolled down and clicked again inside that div the re-render would probably not be triggered and thus not reset the div to the top.


With the code I posted above, the result set will be given its height while the page is loading instead of when the user clicks on the div.

You also had runat=server in there. I am not an ASP guru but if this does what I think it might then it is misleading and should be avoided for javascript routines that dynamically resise the elements.

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[claudermilk]

Aha, thanks for that. Now I understand why it's behaving the way it is--I should have seen that. Next to unpaint myself from this corner.

Upon loading, the ParametricSearch DIV is hidden (thus hiding all the contained ones). The pararesults DIV is actually empty. When the user presses an ASP button, it changes the DIV to be visible; I'm basically simulating a winforms popup dialog with this.

When the user presses the btnRunParaSearch Input button, it runs a query in ASP and stuffs the pararesults DIV with the table of returned data. This is why I use the runat=server attribute--so the ASP code can access the DIV. The last thing the ASP code does is set the focus to the pararesults DIV to trigger the sizing Javascript.

So, it appears I need to figure out how to do one of two things: find another way to trigger the current Javascript to resize the DIV after the Input button has run the ASP routine, or somehow set the DIV height from my ASP code using the client's view pane size. Right now I don't know that I can do either. Time for more research.

 

[theEclipse]

claudermilk -

Okay, so I don't know anything but the smallest bit of ASP programming. Even still, here is the solution I propose:

- You have the javascript routine that resizes the div running. Lets use that to set the size because it will involve less passing of user environment variables to the server.

- When a user clicks on your parasearch button ASP is going to generate a new html page and send it to the user. This will have the result set in it (which goes in the div pararesults). Have your ASP augment the result set with the call to the javascript function that sets the height of the div. Just make sure it is at the bottom of the result set. Better yet, have the ASP set the onload= function call in the <body> tag to make it call the function when the page is done loading.

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[claudermilk]

I'm kind of going in that direction. I've found I can reset the style attribute of the DIV, so can specify the height via ASP that way--halfway there. Now I'm experimenting with calculating the height using my current Javascript & sticking that value into a hidden input field that my ASP code can then see.

The current stumbling block is at the time the body onLoad event fires, there are no properties in the DIVs yet. I need to find a way to trigger an event once the DIVs have gotten their properties. Back to Googling...

 

[claudermilk]

AHA! Got it working!

I remembered that part of what I'm doing is generating the returned data in XML, then running an XSL filter on it which generates the final HTML. I took your suggestion of placing a <script> block in-line in the HTML code and stuck the call to my Javascript function at the end of the DIV the XSL generates. Thus, the Javascript gets run once at the end of the dynamic DIV getting rendered--after all the properties are filled. Works like a charm!

Thanks for the hints on the timing and behavior on things.

 

[theEclipse]

Your welcome.

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net