Tra71
asked on
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
</div>
</div>
Many thanks
Tra
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
</div>
</div>
Many thanks
Tra
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
ASKER
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... 
why is browser having a scrollbar? you need to give this table (content below header) the specific width and overflow property as auto
ASKER
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).
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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
Thanks, but did you get this resolved?
ASKER
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"
$(window).scroll(function () {
var offset = menuYloc+$(document).scrol
$(name).animate({top:offse
});
}
});
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"
$(window).scroll(function () {
var offset = menuYloc+$(document).scrol
$(name).animate({top:offse
});
}
});
ASKER
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"
}
$(window).scroll(function () {
for(n = 1; n < 5; n++) {
var name = "#floatMenu_" + n;
var offset = menuYloc[n] + $(document).scrollTop() + "px";
$(name).animate({top:offse
}
});
});
$(document).ready(function
var menuYloc = new Array();
for(n = 1; n < 5; n++) {
var name = "#floatMenu_" + n;
menuYloc[n] = parseInt($(name).css("top"
}
$(window).scroll(function () {
for(n = 1; n < 5; n++) {
var name = "#floatMenu_" + n;
var offset = menuYloc[n] + $(document).scrollTop() + "px";
$(name).animate({top:offse
}
});
});
#header {position: fixed; z-index:100; padding:20px; width:100%;overflow:hidden