Solved

Can A Div Be "Fixed" Vertically But Not Horizontally ?

Posted on 2011-02-11
10
530 Views
Last Modified: 2012-06-21
Hi,

People on here have helped to have create a fixed header div where I put an absolute div inside which makes it work great vertically.  However, I actually need it to just be absolute when scrolling horizontally and not sure if this is possible?

#header {position: fixed; z-index:100; padding:20px; width:100%}

<div id="header">
      <div class="Output" style="position:absolute; top:<%=nTop%>px; left:<%=nLeft%>px; width:160px; height:50px; background:#aaaaaa; font-size:12px;">
                <strong><%=UCase(strOpName)%><br><%=strTrade%></strong>
       </div>
</div>

Many thanks

Tra
0
Comment
Question by:Tra71
  • 5
  • 3
  • 2
10 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34870574
why don't you add the following in header and try?

#header {position: fixed; z-index:100; padding:20px; width:100%;overflow:hidden;}
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34870588
or you can make sure that header doesn't have to scroll horizontally, by having a specific height and overflow property for content below the header
0
 

Author Comment

by:Tra71
ID: 34870646
Thanks, but it's the brower scroll I'm referring to.  See attached, I want the header to be fixed vertically but when the scroll horizontally, I want the  header to be absolute.  Not sure if this is possible... Image
0
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 34870679
why is browser having a scrollbar? you need to give this table (content below header) the specific width and overflow property as auto
0
 

Author Comment

by:Tra71
ID: 34870750
it's a popup window and because of the number of records, it has a scroll bar.  I want the header to stay fixed when they scroll down and absolute when they scroll horizontally (so the header moves with horrizontal scroll).
0
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 34871115
It appears as though I had a chunk of code laying around with your name on it :)
tra71.htm
0
 

Author Comment

by:Tra71
ID: 34871495
Thanks, that's great.  Although I'm using divs not a table.  See attached the code after the header (table data).  Because of the above of records, they are using the windows browsers and want the header to stay fixed when scrolling vertically and absolute when scrolling horizontally.

Not sure if I'm making sense :)

Thanks for your help so far!  

<%
						strSQL = "SELECT * FROM [Scheduler_Blocks_Overview] WHERE [Start Time] > "
						strSQL = strSQL & "(CONVERT(DATETIME, '" & DatePart("yyyy", strStartDate) & "-"
						strSQL = strSQL & DatePart("m", strStartDate) & "-" & DatePart("d", strStartDate) & " 00:00:01', 102))"
						dteDate = CDate(strStartDate)
						dteDate = dteDate + 6
						strEndDate = CStr(dteDate)
						strSQL = strSQL & "AND [End Time] < (CONVERT(DATETIME, '" & DatePart("yyyy", strEndDate) & "-"
						strSQL = strSQL & DatePart("m", strEndDate) & "-" & DatePart("d", strEndDate) & " 00:00:01', 102))"
						strSQL = strSQL & " AND [OpID] = " & arrOpsToShow(n) & "ORDER BY [Start Time];"
						objRS2.Open strSQL, objConn
						
						nTop = 0
						strThisDate = Left(objRS2("Start Time"),10)
						
						Do Until objRS2.EOF
						
							' This logic puts a separator between dates...
							
								If strThisDate = Left(objRS2("Start Time"),10) Then
									If nTop = 0 Then
										nTop = 91
									Else
										nTop = nTop + 59
									End If
								Else
									nTop = nTop + 74
									strThisDate = Left(objRS2("Start Time"),10)
								End If
						
							nWeekday = Weekday(objRS2("Start Time"))
							Select Case nWeekday
								Case 1
									strWeekday = "Sun"
								Case 2
									strWeekday = "Mon"
								Case 3
									strWeekday = "Tue"
								Case 4
									strWeekday = "Wed"
								Case 5
									strWeekday = "Thu"
								Case 6
									strWeekday = "Fri"
								Case 7
									strWeekday = "Sat"
							End Select
						%>
							
                            <div class="Output" 
								<%Select Case Left(objRS2("Details"),8)%>
                                	<%Case "FREE"%>
                                        style="position:absolute; top:<%=nTop%>px; left:<%=nLeft%>px; width:160px; height:60px; text-align:left; cursor:pointer;"
                                        <%
                                            strBlock = strWeekday & " " & Left(objRS2("Start Time"),5) & ": " & Mid(objRS2("Start Time"),12,5)
                                            strBlock = strBlock & " - " & Mid(objRS2("End Time"),12,5) & "<br>"
                                            strBlock = strBlock & objRS2("Details")
											
                                        %>
										alt = "Click here to edit Scheduler for <%=strOpName%>..."
                               			title = "Click here to edit Scheduler for <%=strOpName%>..."
                               			onClick="location.href='Scheduler_Op.asp?Source=Overview&BlockID=<%=objRS2("ID")%>&OpID=<%=objRS2("OpID")%>&DaysFrom=<%=strStartDate%>';">
									<%Case "RESERVED"%>
                                        style="position:absolute; background:#d2d2d2; top:<%=nTop%>px; left:<%=nLeft%>px; width:160px; height:60px; text-align:left; cursor:pointer;"
                                        <%
                                            strBlock = strWeekday & " " & Left(objRS2("Start Time"),5) & ": " & Mid(objRS2("Start Time"),12,5)
                                            strBlock = strBlock & " - " & Mid(objRS2("End Time"),12,5) & "<br>"
                                            strBlock = strBlock & objRS2("Details")
                                        %>
										alt = "Click here to edit Scheduler for <%=strOpName%>..."
                               			title = "Click here to edit Scheduler for <%=strOpName%>..."
                                		onClick="location.href='Scheduler_Op.asp?Source=Overview&BlockID=<%=objRS2("ID")%>&OpID=<%=objRS2("OpID")%>&DaysFrom=<%=strStartDate%>';">
									<%Case Else%>
                                        <%
                                            strBlock = strWeekday & " " & Left(objRS2("Start Time"),5) & ": " & Mid(objRS2("Start Time"),12,5)
                                            strBlock = strBlock & " - " & Mid(objRS2("End Time"),12,5) & "<br>"
                                            strBlock = strBlock & "<b>" & objRS2("TaskID")
                                            
                                            strPostCode = ""
                                        
                                            If Len(objRS2("TaskID")) > 0 Then%>
											
											style="position:absolute; background:#d2d2d2; top:<%=nTop%>px; left:<%=nLeft%>px; width:160px; height:60px; text-align:left; cursor:pointer;"
                                           <% 
                                                strSQL = "SELECT dbo.Tasks.Postcode FROM dbo.Scheduler_Blocks INNER JOIN "
                                                strSQL = strSQL & "dbo.Tasks ON dbo.Scheduler_Blocks.TaskID = dbo.Tasks.ID "
                                                strSQL = strSQL & "WHERE dbo.Scheduler_Blocks.TaskID = " & objRS2("TaskID")
                                                objRS.Open strSQL, objConn
                                                    If Not objRS.EOF Then
                                                        If Len(objRS(0)) > 0 Then
                                                            If InStr(objRS(0), " ") > 0 Then
                                                                strPostCode = Left(objRS(0), Instr(objRS(0), " ") - 1)
                                                            Else
                                                                strPostCode = objRS(0)
                                                            End If
                                                            strBlock = strBlock & " - " & strPostCode & "</b> - " & Left(objRS2("Details"),55)
                                                        End If
                                                    Else
                                                        strBlock = strBlock & "</b> - " & Left(objRS2("Details"),55)
                                                    End If
                                                objRS.Close%>
												
												alt = "Click here to edit Scheduler for <%=strOpName%>..."
                                				title = "Click here to edit Scheduler for <%=strOpName%>..."
                                				onClick="location.href='Scheduler_Op.asp?Source=Overview&BlockID=<%=objRS2("ID")%>&OpID=<%=objRS2("OpID")%>&DaysFrom=<%=strStartDate%>';">
												<%If objRS2("RT") = 1 Then%>
													<div style="position:absolute; bottom:0px; right:0px; height:5px; width:10px; background:#FF0000; border:none;">
												
									
												<%ElseIf objRS2("RT") = 2 Then%>
													<div style="position:absolute; bottom:0px; right:0px; height:5px; width:10px; background:#0000FF; border:none;">
                                	
												<%ElseIf objRS2("RT") = 3 Then%>
													<div style="position:absolute; bottom:0px; right:0px; height:5px; width:10px; background:#009900; border:none;">
                                	
												<%ElseIf objRS2("RT") = 4 Then%>
													<div style="position:absolute; bottom:0px; right:0px; height:5px; width:10px; background:#FF9933; border:none;">
                                	
												<%End If%>
								
								</div>
							
                                              <%Else
											  strBlock = strBlock & objRS2("Details")%>							  	
												style="position:absolute; background:#d2d2d2; top:<%=nTop%>px; left:<%=nLeft%>px; width:160px; height:60px; text-align:left;"											
													alt = "This block has been booked out through Absences..."
                               						title = "This block has been booked out through Absences...";">  
                                            <%End If
                                        %>
								<%End Select%>
                                
                                <%=strBlock%>
                            </div>
							
							<%objRS2.MoveNext
						Loop
						strThisDate = ""
						objRS2.Close
					End If
					nTop = 45
					nLeft = nLeft + 159
				Next

Open in new window

0
 
LVL 16

Expert Comment

by:s8web
ID: 34888241
Thanks, but did you get this resolved?
0
 

Author Comment

by:Tra71
ID: 34888297
I went about it a different way, although stuck again as the loop is only doing the last one :)

Thanks for your help...

$(document).ready(function(){
 
for(n = 1; n < 10; n++)
                             
{

var name = "#floatMenu_"+n;  
var menuYloc = null;  
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  
    $(window).scroll(function () {  
        var offset = menuYloc+$(document).scrollTop()+"px";  
        $(name).animate({top:offset},{duration:500,queue:false});  
    });  
}

});  
0
 

Author Comment

by:Tra71
ID: 34895916
Final code used...

$(document).ready(function() {
                  var menuYloc = new Array();
                  for(n = 1; n < 5; n++) {
                        var name = "#floatMenu_" + n;
                        menuYloc[n] = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
                  }
                  $(window).scroll(function () {                       
                        for(n = 1; n < 5; n++) {
                            var name = "#floatMenu_" + n;  
                            var offset = menuYloc[n] + $(document).scrollTop() + "px";  
                            $(name).animate({top:offset},{duration:500,queue:false});  
                        }
                  });  
            });
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question