need a non-hack CSS fix
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a 3-page website. The way to change from one page to the next is by clicking the center button inside the < nav >. Every page has its own < nav >. Pages slide from one page to the next using css and jquery animation.

Right now, the < nav > scrolls with the rest of the content. I need the < nav > in every page to stay fixed at the bottom of the window all the time (some people call this a sticky footer. its usually seen in websites made for mobile devices).

Note: the sliding pages animation must still work with given solution.

You can download source here: www.sunfishlabs.com/bountify.zip

The solution must be 100% css. no hacks, and preferably no or very little javascript.

awarded to Ibenor
Tags
css3

Crowdsource coding tasks.

3 Solutions


I think this should work fine:

nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 300; /* needed to be visible */
    /* add your own height: Xpx; here */
}

Edit: Also, you have to move the nav outside of <div id="ccsl" class="wrapper pt-page pt-page-1 pt-page-current"> to work.

did you try it? did you download the source code package?
quelquecosa over 5 years ago
i cant move the nav outside, it has to be inside that div
quelquecosa over 5 years ago
I've tested it right now
alv-c over 5 years ago
i tried adding your code and it doesnt work. send me zip package to isaacm[at]sunfishlabs[dot]com with your solution working and i will award you the answer.
quelquecosa over 5 years ago
In that case you should remove position: absolute; from div.pt-page, but you have to add a <br> or <hr> element before nav so the contents before it won't be hidden
alv-c over 5 years ago
doing that breaks the slider effect between pages. i need the slider to work.
quelquecosa over 5 years ago
I'll continue trying, right now the unique way it works is using my first solution
alv-c over 5 years ago
ok. perhaps looking into the animations.js file might be a good attempt.
quelquecosa over 5 years ago

Remove the position: absolute; property from the .pt-page class and it should work.

As it is, you're basically instructing the nav element to be positioned fixed at the bottom of the .pt-page div.


If you really need to have the div.pt-page absolutely positioned (I don't see any need) you will need to move the nav elements outside of the div.pt-page elements, but since you have three of these, you would also need to change other stuff to make sure you're just showing one navigation footer at a time.

div.pt-page must be absolutely position, otherwise the animation from page to page breaks (try it, you'll see). if you can fix the source to work, i will award you answer.
quelquecosa over 5 years ago
Winning solution

Hi quelquecosa, i will add my own solution to the ones already mentioned, but i have to say some words in advance. First the package from your zip folder works neither in ie10 nor in chrome on windows. It just works in firefox, so you should maybe consider doing what you try to do in a very diffrent manner. Having said that, the only solution where you can leave the < nav > inside div.pt-page and still have it at the bottom is to increase the size of div.pt-page to the whole screen. Their cant be any other option, because as long as < nav > remains inside div.pt-page, it can only be inside div.pt-page ;) So switch:
.pt-page-current,
.no-js .pt-page {
/*visibility: visible;*/
display: inline;
opacity: 1;
z-index: 1;
}

to:

.pt-page-current,
.no-js .pt-page {
/*visibility: visible;*/
display: block;
height:100%;
opacity: 1;
z-index: 1;
}

and you should be home and dry. Still this project needs a major rework imho if you want to get it working cross browser compatible. Greetz

Hi Ibenor, Thanks for your answer. The website works in chrome and Safari, I have been working on it for a while on these 2 browsers. It might look like its broken because I had to remove confidential info from it. Now, about your solution: once I apply display:block, the content inside the page does not scroll anymore. So not quite there yet...any suggestions?
quelquecosa over 5 years ago
I now got your pages working by copying your stuff on my webserver, and i now saw for the first time their is content and that you can scroll. I am sorry man but i guess their is no solution for your problem. I can just make a suggestion here. I would like, mentioned in the above solutions, position the nav container outside the div.pt-page. I see your problem there, but it mainly originates by you having 3 "navs" which is not necessesary. You should therefor just do one nav element in your page stack your content "divs" behind it and scroll wenn someone pushes next just to the next one by incrementing an counter in javascript and choosing the next page to be scrolled in through that. i can post something like it if you want. Just tell me
Ibenor over 5 years ago
I just saw your animation javascript code is nearly already there, and just needed a little adjustment. So if you want try this: http://87.106.19.74/bountify.zip Of course it might a little additional work to enable/disable the buttons so you nav looks a but diffrent on every page like it was before, bit that should be pretty easy as well
Ibenor over 5 years ago
Okay i updated http://87.106.19.74/bountify.zip to show you what i mean the only files changed are still index.html and animation.js there is a new function called updateNav in animation.js which does what you did before by having diffrent navs. Updating them according to current page so it results in exactly the same as before. even though there are like 10 lines more javascript its still a lot neater then having couple of navs on the same page. Anyway you should definitly rework and clear some stuff because its for example forbidden to have multiple elements with the same ID like you do with your buttons, just a hint.
Ibenor over 5 years ago
very nice jQuery solution. thanks for ID hint, I noticed. I downloaded the animations.js framework, it came like that...still have to massage it a bit. Amazing that people who can make such great work forget these little things. in the files you shared, nav is still scrolling with the rest of the content. i need it to stay fixed, and i need the content inside the divs to be able to scroll, so that you can see the full page. finish it up, send it over, if it looks good, the bounty is yours. i realize you're in germany. im in miami, we need freelance front end sometimes. available?
quelquecosa over 5 years ago
hmm i am not sure if i understand what you exactly want. On my computer the nav stays fixed at the bottom while the rest of the content scrolls through/under it. I thought thats what you wanted. maybe you got skype and we can talk about what you. as you already figured out i am not a native speaker and therefor might not understand or make myself understood perfectly. my skype name is ibenor23 add me maybe a few words make it more clear to me.
Ibenor over 5 years ago
Ibenor, you're right, it works beautifully. Thanks. Question on your updateNav( ) function: If I want to go from pt-page-2 to pt-page-4, how would i accomplish this? I tried, but it only goes from one page to the next (page 2, to page 3, to page 4). maybe you can explain? Give me your e-mail and skype contact info so we can ask you for more work when we need it.
quelquecosa over 5 years ago
hi quelquecosa that is because we deactivate it intenionally if you have a look at the updateNav function every case does 2 things atm:
1. set the text of the next button: btnconfirm.html('Next');
2. set the onclick method or in case of page 2 remove it via btnconfirm.removeAttr('onclick');
so if you wanted to add a 4rth page you need to change updateNav something like this:
case 2: btnconfirm.html('Next'); btnconfirm.attr('onclick',"gotoPage2(3)"); And then add another case for the 3rd page where you maybe remove onclick again to deactivate button on last page. my email ist mr.reiling@gmail.com
Ibenor over 5 years ago
View Timeline