jquery - Background image covering browser window minus header and footer below the fold -

-

title might bit confusing, i'll try best explain need achieve. have following elements particular webpage:

  1. header - visible above content
  2. content - background image covers entire content area - this key part
  3. sub-footer - information content visible below it
  4. footer - standard company footer, visible if window height size, otherwise need scroll down see it

as mention above, content portion of page maybe trickiest part. need big image in background covers entire area. css-tricks has excellent guide in ways full page background images. i'm hoping can achieved easily. issue how make sub-footer stay @ bottom if window <720px footer underneath below fold (needing scroll it). window >720px should show both sub-footer , footer no scrollbars.

i won't worry @ point minimum height content needs (possibly necessitating scrollbars on content <div> or making both sub-footer and footer go below fold).

here image mockups of i'm trying achieve:

first - window <720px tall footer needs scrolled to: <720px tall window footer needs scrolled to

second - window <720px tall has been scrolled down see footer: enter image description here

finally - tall window >720px has no scrollbars because visible: enter image description here

i'm using jquery , don't care ie6. can achieve in css? have use jquery dynamically adjust things? full page backgrounds done css3, i'm happy use css3 or html5 need.

you can not use css position: fixed because relative viewport, not parent element.

what need have "subfooter" fixed positioned child element of "content". in order that, you're going have use javascript.

something should need. try changing height variable in css #content can see how behaves various content heights:

<html> <head> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <style>     #header {         height: 50px;         background-color: #ccc;         width: 100%;         margin-bottom: 10px;     }      #content {         position: relative;         height: 1500px;         width: 100%;         background-color: #ccc;     }      #subfooter {         height: 50px;         width: 100%;         background-color: #666;         position: fixed;     }      #footer {         height: 50px;         width: 100%;         margin-top: 10px;         background-color: #ccc;     } </style> <script>     $(document).ready(function(){          $(document).scroll(function() {             position_subfooter();         });          var position_subfooter = function() {             $("#subfooter").css("bottom", "20px");             if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrolltop() + $("#content").height())) {                 $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrolltop() + $("#content").height()) + 20));             }         }         position_subfooter();     }); </script> </head> <body>     <div id="header">         <h1>header</h1>     </div>     <div id="content">      </div>     <div id="subfooter">         <h2>sub footer</h1>     </div>     <div id="footer">         <h1>footer</h1>     </div> </body> </html>

Comments

Post a Comment

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

-
i trying use snmp4j snmp bulkget. when ever use snmp4j make call returned responseevent error says "general variable binding error" , data returned equal null. to debug: print out, console, exact oid , version number using in snmp4j. use printed out data snmpwalk on command line. valid results. know sending snmp4j correct pdu correct oid, version number, max repititions, etc. i have used snmp4j , code wrote succesffuly monitor other devices years. don't know different time. leaving me stumped. why "general variable binding error?" causes error? ideas debug? can reproduced? if so, first action should using wireshark or microsoft network monitor capture network packets. my guess agent gives generr response, not surprising, http://www.ietf.org/rfc/rfc1157.txt
Read more

windows - Python Service Installation - "Could not find PythonClass entry" -

-
i working on building python service. inducing error, not sure inducing it. ps c:\...> python .\file.py debug debugging service myservice - press ctrl+c stop. error 0xc00000f4 - not find service's pythonclass entry in registry error 1814 - specified resource name cannot found in image file. error 0xc0000080 - not locate module name in python class string (ie, no '.') this error coming pythonservicemessages.mc in pythonwin32. it turns out error result caused exception being thrown , python script dying off.
Read more

Determine if a XmlNode is empty or null in C#? -

-
the following code takes xmlnode data type , populates dataset object xmlnode content. write dataset's content file. public void populatedataset(xmlnode node) { xmlnodereader reader = new xmlnodereader(node); dataset ds = new dataset(); ds.readxml(reader); system.guid guid = system.guid.newguid(); string name = string.format("{0}{1}_{2}.xml", utility.xmloutputpath, utility.xmloutputfilename, guid.tostring()); //need write "node empty" file if xmlnode object empty of null ds.writexml(name, xmlwritemode.ignoreschema); } the problem encountered 1 scenario not write content file. how determine if xmlnode object null or empty? you can check if node parameter null or has innertext or innerxml properties null or empty, when enter method before creating xmlnodereader .
Read more