Solved

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

Posted on 2012-04-10
6
374 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

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.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

739 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