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

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
Tra71Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
s8webConnect With a Mentor Commented:
It appears as though I had a chunk of code laying around with your name on it :)
tra71.htm
0
 
Gurvinder Pal SinghCommented:
why don't you add the following in header and try?

#header {position: fixed; z-index:100; padding:20px; width:100%;overflow:hidden;}
0
 
Gurvinder Pal SinghCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Tra71Author Commented:
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
 
Gurvinder Pal SinghCommented:
why is browser having a scrollbar? you need to give this table (content below header) the specific width and overflow property as auto
0
 
Tra71Author Commented:
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
 
Tra71Author Commented:
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
 
s8webCommented:
Thanks, but did you get this resolved?
0
 
Tra71Author Commented:
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
 
Tra71Author Commented:
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
All Courses

From novice to tech pro — start learning today.