Solved

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

Posted on 2011-02-11
10
536 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 
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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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).

820 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