DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 11-30-2015, 11:54 AM   #1
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default CSS/jQuery for locked navigation/scrolling text

Page example: http://www.fhwa.dot.gov/hep/whats_new/



If it's possible, we would like our left-side navigation locked and visible when scrolling long pages. Whether the 2nd header (Highway Traffic Noise with blue background) stays visible or not isn't a concern. We'd prefer a CSS-only solution, but if we have to use jQuery that's OK.

All of our pages are in the same ColdFusion template. (That's all we have available.) The basic structure is the same on all pages, other than a handful of pages that use a different ID for the content area.

The very top FHWA header is totally separate. The bar under that is also separate. From the "Highway Traffic Noise" banner to just above the page footer is wrapped in <div id="wrapper"> <div id="subnavigation"> is nested in that, followed by <div id="contents">

Some pages use id="pagecontents" in the same nesting. Example: http://www.fhwa.dot.gov/environment/noise/ (this is to allow the right-side box to have its own column.

Because of the structure, we're not even sure if this can work. It's all built with CF includes and the contents/pagecontents area.

Anyone have any ideas? Are there still any CSS gurus here? We're even open to positoin: sticky; if that's an option.

thanks,

Dennis

ps; this isn't my first post, but I couldn't get my password reset so had to create a new ID to post this.
dacoyle is offline   Reply With Quote
Old 11-30-2015, 07:03 PM   #2
terrie
Staff
 
Join Date: Oct 2004
Posts: 8,916
Default

Don't have a clue about the CSS other than to say that it drive me nuts when the left-side navigation floats...'-}}

When did you have a problem with your password? We had some behind the scenes server/software updates and we were offline a couple of times while that was being done and I wonder if you perhaps got stuck in the midst of that.

I've touched base with Ann as I know she can fiddle with userids so we'll check it out...


Hope you had a good turkey day weekend...'-}}


Terrie
terrie is offline   Reply With Quote
Old 11-30-2015, 08:30 PM   #3
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by terrie View Post
Don't have a clue about the CSS other than to say that it drive me nuts when the left-side navigation floats..
A recent Jakob Nielson newsletter talked about the left nav staying visible is better for long pages. All of our left-nav already floats left; I just want it to stay visible when visitors scroll down long pages.

Ann is helping with my account.

Dennis

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 12-01-2015, 12:05 AM   #4
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

Add position:fixed; to the left-nav div.

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 12-01-2015, 09:08 AM   #5
Hugh Wyn Griffith
Member
 
Join Date: Jan 2005
Posts: 2,428
Default

Quote:
If you are planning a visit to Keswick then try Keswick Tourist Information website
I wish -- we have such fond memories of our visits and of the wonderful places they found for us just by walking in .....

Alas too many years ago, maybe 15, and little hope of returning.

   
__________________


Hugh
Hugh Wyn Griffith is offline   Reply With Quote
Old 12-01-2015, 10:37 AM   #6
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by Kelvyn View Post
Add position:fixed; to the left-nav div.
We've tried that. But because of the structure, we have to include

top: 175px;

to clear the headers. So the navigation scrolls, but always with 175px space above it. It also changes the width of the subnavigation div since setting the position take sit out of the normal flow.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 12-01-2015, 11:49 AM   #7
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Kelvyn,

This is how we'd like it to work:

http://spoiledmilk.com/demos/sticky-sidebar/

I may play around with that tomorrow, though I know just about nothing about javascript

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 12-02-2015, 02:06 AM   #8
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

You really have to plan for a fixed element when setting up a page template. After that, as you are finding, it is more difficult. The example you give uses js apparently to ensure the sidebar remains static with older browsers.

Any approach is likely to fail when on smaller viewports - or is the site non-responsive. I get service unavailable for the links you gave.

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 12-09-2015, 11:35 AM   #9
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by Kelvyn View Post
You really have to plan for a fixed element when setting up a page template. After that, as you are finding, it is more difficult. The example you give uses js apparently to ensure the sidebar remains static with older browsers.

Any approach is likely to fail when on smaller viewports - or is the site non-responsive. I get service unavailable for the links you gave.
Our server sucks. The site tends to crash once a day.

We have a lot of flexibility with our template because of the nested includes, but we're putting this on hold for now. Posting a new thread that I hope has an easier solution.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Navigation & CSS Bo Aakerstrom Web Site Building & Maintenance 9 03-19-2006 05:53 AM
Site Navigation How To? BobRoosth Web Site Building & Maintenance 14 02-28-2006 10:36 AM
Navigation Suggestion donmcc How to Use the Forum 5 08-30-2005 12:49 PM


All times are GMT -8. The time now is 08:56 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.