Solved

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

Posted on 2011-02-11
10
527 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change visitor's REMOTE_ADDR to server's REMOTE_ADDR 2 20
Message not shown 5 34
Alignment is not working correctly. 8 33
Recordset containing single quotes 8 24
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... …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now