?
Solved

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

Posted on 2011-02-11
10
Medium Priority
?
553 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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 2000 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

585 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