CODEWITHSUNDEEP
htmlcss
Max
Max

Reputation: 629

One page Website page specified footer. position: change

i am building a one page layout website. now i would like the class="footer-bar" to be position:absolute on each site, but on the #Home Page it should be position:relative.

does anyone know how to make page specific changes to each page? The Footer should not be written into each page. Only once. Only a css change if i am on page #Home.

thanks for ideas. 

<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Other">Home</a></li>
</ul>

<ul class="tabs-content">
<li id="Home"> Content Page Home </li>       ---->Footer position:relative
<li id="Other"> Content Other Page </li>     ---->Footer position:absolute
</ul>

<div class="footer">Footer Content</div>

Upvotes: 0

Views: 369

Answers (3)

Max
Max

Reputation: 629

here is how i did it: 

$("#navpoint1, #navpoint2, #navpoint3, #navpoint4").bind("click", function () {
         $(".footerbar").css({

         position: 'absolute',
         bottom: '0'

         });
     });

Upvotes: 0

Shawn Wernig
Shawn Wernig

Reputation: 1742

You're going to have to use something like Jquery to do this I'd imagine.

You'll need a way to identify which tab is active at any given time, so build a click event into your navigation links which will toggle an .active class to your tabs.

You can then query which tab is active, test if it's your 'home' tab, and adjust your css as necessary.

If this is a little muddy I'll whip up a fiddle for you. =)

Upvotes: 1

Connor
Connor

Reputation: 1034

I'm not sure if I get your question, but from what I understand, wouldn't this work:

.footer-bar {
position: absolute;
/* the rest of your styles */
}

.footer-bar#Home {
position: relative;
/* anymore additional styles */
}

EDIT:

Make the #Home in the above css a .Home, and put the below jQuery into the necessary function.

$(".footer-bar").addClass("Home");

Or

$(".footer-bar").css("position","relative");

Upvotes: 1

Related Questions