Solved

Permanent footer (no-scroll) in web pages - possible in CSS?

Posted on 2012-04-10
6
373 Views
Last Modified: 2012-04-18
Hi

I read a lot about sticky footers and how these can be fixed to the bottom of the page, but I am really interested in having a permanent footer, as with the EE footer here that provides links to social networking, save etc.

Is this something that can be achieved in CSS? If so, how?

Many thx
capt.
0
Comment
Question by:captain
  • 3
  • 3
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37828985
It appears that they are using this script:
 <script type="text/javascript">
          jqBind('#pageShareAndManage .twitter','click',function(e){postAsyncOmnitureCustom('eexchangeprod','s2.prop44=\'VQP - Twitter\';s2.events = \'event65\';');});jqBind('#pageShareAndManage .twitter','click',function(e){var shareWindow = window.open('', 'Twitter', 'width=650px,height=480px,status=0,location=0,resizable=1,scrollbars=1,left=100,top=50', 0);jqGet('/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=shorten_url&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html',null,function(e){shareWindow.location = 'https://twitter.com/intent/tweet?via=ExpertsExchange&text=Check+out+this+question%3A+Permanent+footer+%28no-scroll%29+in+web+pages+-+possible+in+CSS%3F&url=' + e.replace(/^\s*/, '');});return false;});
          jqBind('#pageShareAndManage .facebook','click',function(e){postAsyncOmnitureCustom('eexchangeprod','s2.prop44=\'VQP - Facebook\';s2.events = \'event65\';');});jqBind('#pageShareAndManage .facebook','click',function(e){var shareWindow = window.open('', 'Facebook', 'width=660px,height=480px,status=0,location=0,resizable=1,scrollbars=1,left=100,top=50', 0);jqGet('/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=shorten_url&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html',null,function(e){shareWindow.location = 'http://www.facebook.com/sharer.php?t=Permanent+footer+%28no-scroll%29+in+web+pages+-+possible+in+CSS%3F&u=' + e.replace(/^\s*/, '');});return false;});
          jqBind('#pageShareAndManage .linkedin','click',function(e){postAsyncOmnitureCustom('eexchangeprod','s2.prop44=\'VQP - LinkedIn\';s2.events = \'event65\';');});jqBind('#pageShareAndManage .linkedin','click',function(e){var shareWindow = window.open('', 'LinkedIn', 'width=650px,height=480px,status=0,location=0,resizable=1,scrollbars=1,left=100,top=50', 0);jqGet('/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=shorten_url&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html',null,function(e){shareWindow.location = 'http://www.linkedin.com/shareArticle?mini=true&title=Permanent+footer+%28no-scroll%29+in+web+pages+-+possible+in+CSS%3F&url=' + e.replace(/^\s*/, '');});return false;});
          googlePlusOne();
          jqBind('#pageShareAndManage .link .the-widget','click',function(e){jqRemove('#pageShareAndManage .popup'); jqAsyncAppend('#pageShareAndManage .body','/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=popup_link&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html');return false;});
          jqBind('#pageShareAndManage .email .the-widget','click',function(e){jqRemove('#pageShareAndManage .popup'); jqAsyncAppend('#pageShareAndManage .body','/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=popup_email&rtid=10&refID=27669165&slURL=http%3A//www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27669165.html');return false;});
          jqBind('#pageShareAndManage .monitorWrapper','click',function(e){jqAsyncLoad('#pageShareAndManage .monitorWrapper','/async/pageShareAndManage.async?asid=psamAsync&iasid=psamIAsync&componentHtmlId=pageShareAndManage&asyncAction=toggle_monitoring&rtid=10&refID=27669165');return false;});
          
        </script>

Open in new window


I don't have a clue what it is actually doing, because it it calling functions defined in the jquery files at the beginning of the page.

If I want something to stick to the bottomI just use:

#footer  {position:fixed; bottom:0px; left:0px;}

I think they have to use the scripting to support older browser (specifically IE) because the position:fixed won't work in older browsers.  Plus there appears to be a lot of tracking crap included in the script, so just using the script will probably not work even if you have the jquery files with the functions.

Cd&
0
 
LVL 30

Author Comment

by:captain
ID: 37830144
cheers Cd&

That CSS sticks the footer at the bottom of the site but not the browser window, correct?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37838746
Sorry about the delay ... technical issues on my end (still recovering from an explosion and fire in the server room and an admin who had not done software backups for a year).

It is relative to the browser window (viewport).  

Cd&
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Author Comment

by:captain
ID: 37843113
Sorry for being dense, I don't seem to be able to replicate the effect as it is here on EE, ie the browser will have a permanent footer irrespective of zoom or scrolling...
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 37852007
Scrolling should not break it but zoom is a system level control so that can break it and a lot of other things.

If you are not using either an HTML5 or XHTML DOCTYPE, that will also cause some problems.  position fixed is one of those things where the standard has gone back and forth a couple of times.

Cd&
0
 
LVL 30

Author Closing Comment

by:captain
ID: 37862612
OK will play and ask another question if needed. Thanks much.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

685 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