Solved

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

Posted on 2012-04-10
6
369 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
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

 
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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Suggested Solutions

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…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

920 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now