SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    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 !

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    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>

  3. #3
    SitePoint Member
    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 !

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    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...

  5. #5
    SitePoint Member
    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 ?

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    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

  7. #7
    SitePoint Author silver trophybronze trophy

    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

  8. #8
    SitePoint Member
    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>
    Using your first solution, the browser scrollbar wasn't showing anymore but when using mousewheel the scrolling still occured.

    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

  9. #9
    SitePoint Member
    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 ?

  10. #10
    SitePoint Wizard Pepejeria's Avatar
    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.

  11. #11
    SitePoint Member
    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-->
    and here are the styles used for these nested layers

    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

  12. #12
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where do you see this ?


Bookmarks

Posting Permissions

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