SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
-
Aug 23, 2006, 08:38 #1
- Join Date
- Mar 2006
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yet another how to disable scrolling question
Sorry for asking this,
I know its not really neat to disable scrolling in a browser ( and not very useable neither).
But here is my problem :
I have designed an DHTML / AJAX app that gets some xml data and populates a table in a layer that has its overflow CSS property set to auto. So when you get lets say 30 entries in that table you automatically get a litle scroll bar on the side of that small layer which is what is expected !
However if I get a lot of data into that table the browser level scroll bar appears too ... probably because the table gets too big and goes out of the lower bounds of the browser.
Is this a normal situation ? is this avoidable ?
Thanks for helping out !
-
Aug 23, 2006, 11:20 #2
- Join Date
- Jan 2005
- Location
- Too far up north
- Posts
- 1,566
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
In what browser and what version are you seing this behavior?
The following does not add a scrollbar to the window
Code:<div style="width:200px; border:1px solid red; overflow:auto; height:100px;"> <div style="height:15000px;"></div> </div>
-
Aug 23, 2006, 23:38 #3
- Join Date
- Mar 2006
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks you are correct!
Setting the initial Div height to a high value works fine in Firefox 1.0.7 and in IE 6.0 .
Is this a known issue ?
Thanks !
-
Aug 24, 2006, 00:01 #4
- Join Date
- Jan 2005
- Location
- Too far up north
- Posts
- 1,566
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What is a known issue? I mean, you said it worked...
-
Aug 24, 2006, 00:39 #5
- Join Date
- Mar 2006
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What I meant to say was :
Is a <div style="overflow : auto;"> supposed to make the overall browser scroll when the information you put in it (table or text) is long enough ? Shouldn't the <div> alone become scrollable in such a case ?
-
Aug 24, 2006, 00:44 #6
- Join Date
- Jan 2005
- Location
- Too far up north
- Posts
- 1,566
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Depends if you have a height set to the that div
-
Aug 24, 2006, 00:47 #7
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Setting overflow:auto without an explicit height is pointless*, because the height then defaults to auto, i.e., the DIV will grow to accommodate its contents.
*) There is a use for this technique to clear floats, but that's another issue.Birnam wood is come to Dunsinane
-
Aug 24, 2006, 03:17 #8
- Join Date
- Mar 2006
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ok it works fine now
Here's what I did :
Code:<div id="OldAlertsHiddenDataContainer" style="position: absolute; top: 0px; left: 0px; visibility: visible; width: 1000px; height: 100px; overflow: auto;"> <div style="height: 150000px;"> <div id="OldAlertsHiddenDataContent"> dynamic data comes here </div> </div> </div>
Now no more useless scrolling.
I am still puzzled about the scrolling even after overflow had been set to auto but whatever ... I know how to do it now.
Thanks again for your help
-
Aug 24, 2006, 03:27 #9
- Join Date
- Mar 2006
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmm its not perfect yet ...
By doing
<div style="height: 150000px;">
all other stuff here
</div>
I loose the "auto" feature of the overflow...
The scrollbar of the container layer appears automatically and there is 150000px of blank space under my dynamically created table.
Is this avoidable using this technique ?
-
Aug 24, 2006, 04:00 #10
- Join Date
- Jan 2005
- Location
- Too far up north
- Posts
- 1,566
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I am not quite sure i follow you. If the main div has overflow set to auto and and a height defined, then you will get a scrollbar after the content is bigger than the height. Isn't this what you want?
Or are you refering to the scrollbar in the main window? Maybe a small code example showing your issue would help.
-
Aug 25, 2006, 03:05 #11
- Join Date
- Mar 2006
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Pepejeria,
Sorry for not coming back earlier I got busy elsewhere.
I am going to try to be more explicit. there are two problems
State 1 :
The page loads.
here is the exact HTML for the layer :
Code:<div id="OlderAlertsContainer">OLDER ALERTS <select name="oldAlertsRange" id="oldAlertsRange" onchange="if(this.value == 'ts'){$('oldAlertDateLayer').style.visibility = 'visible'}else if (this.value != 'ts'){$('oldAlertDateLayer').style.visibility = 'hidden'};"> <option value="day">Last 24 Hours</option> <option value="2days">Last 48 Hours</option> <option value="week">Last Week</option> <option value="month">Last Month</option> <option value="ts">Date</option> </select> <span id="oldAlertDateLayer" style="visibility: hidden"> DD<input name="oldAlertDateDay" id="oldAlertsDateDay" type="text" size="1" maxlength="2" /> MM<input name="oldAlertDateMonth" id="oldAlertsDateMonth" type="text" size="1" maxlength="2" /> YYYY<input name="oldAlertDateYear" id="oldAlertsDateYear" type="text" size="4" maxlength="4" /> </span> <input type="button" value="SEARCH" onclick="loadOldAlerts($F('oldAlertsRange'),$F('oldAlertsDateYear'),$F('oldAlertsDateMonth'),$F('oldAlertsDateDay'));"/> <div id="OlderAlertsContent"> <div style="height:15000px;" id="OlderAlertsTableContainer"> The table will come after an ajax call </div> </div> </div><!-- OlderAlertsContainer-->
Code:#OlderAlertsContainer { position:absolute; left:15px; top:350px; width:500px; height:300px; z-index:4; } #OlderAlertsContent { border: 1px solid #000000; overflow: auto; height: 300px; width: 500px; }
Now what happens with this HTML is :
OlderAlertsTableContainer already has the scrollbar displaying even though it is still completely empty and you can scroll within it for 15000px (which is not what I want since I have set overflow to auto on the parent layer).
The scrollbar of the Browser window doesn't display and it is impossible to scroll the main document (which is exactly what I want).
State 2 :
using DHTML , I insert a table that has lets say 150 rows into OlderAlertsTableContainer
Here is some of the DHTML that populates the table :
Code:var tmpOldAlertsData = ""; tmpOldAlertsData += "<table width='100%' border='0' class='sortable, alertTable' id='oldAlertsTable'> "; tmpOldAlertsData += "<tr>"; tmpOldAlertsData += "<td>ID</td>"; tmpOldAlertsData += "<td>TIMESTAMP</td>"; tmpOldAlertsData += "<td>DEVICE</td>"; tmpOldAlertsData += "<td>ALERT TYPES</td>"; tmpOldAlertsData += "</tr>"; var a = 0; for (a = 0; a <= alertsArray.length-1; a++) { tmpOldAlertsData += "<tr class='alertTableRow' id='OldAlert"+strAlertId+"' onmouseover=\"style.backgroundColor='#84C1DF';\" onmouseout=\"style.backgroundColor='#FFFFFF'\" onclick=\"showAlertDetails(this.id);\" >"; tmpOldAlertsData+= "<td>" + strAlertId +"</td>"; tmpOldAlertsData+= "<td>" + strAlertTimestamp + "</td>"; tmpOldAlertsData += "<td>" + strDeviceName +"</td>"; tmpOldAlertsData += "<td>" + strAlertType +"</td>"; tmpOldAlertsData += "</tr>"; }//for tmpOldAlertsData += "</table>"; $("OlderAlertsTableContainer").innerHTML = tmpOldAlertsData ;
The table displays fine inside OlderAlertsTableContainer and I can scroll the layer correctly BUT, there is a ton of useless blank space that you can scroll to under the table which is not very elegant.
The scrollbar of the Browser window doesn't display (which is what I want ) BUT now if you use your mousewheel you can scroll down the entire document which is what I would like to avoid also since there is nothing to show down there.
I don't really understand this behaviour.
Maybe you have an answer on how to avoid the problems I mentionned.
Thank you again for your help .
Mit freundlishe Grussen.
Alex
-
Aug 25, 2006, 03:29 #12
- Join Date
- Mar 2006
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Where do you see this ?
Bookmarks