Hide Footer Until Button Is Clicked?
-
-
- bryantoth
- Jr. Rocketeer
- Posts: 49
- Thanks: 0
-
I'm not sure if this is possible, or if it is how to achieve the effect.
Maybe someone can help?
I'm using the iridium template (but I'm sure this would apply to all templates) and I would like to only show the "Footer" of my page once you click a button. So let's say the "Advertisement 2" position (at the very bottom of the page) is hidden, and then when you click a button it will display that position to the visitor. However, until you click that button the browser scroll will simply stop at the top of the "Advertisement 2" position. Then when you click that button the page scroll will slide down to reveal the position and contents.
Any ideas on how/if I could achieve this effect?
Thanks for any ideas!
-
-
-
- Ben Harold
- Sr. Rocketeer
- Posts: 231
- Thanks: 1
- Freelance Developer
- How comfortable are you with JavaScript? Because there's no reasonable way to achieve this without programming a bit of JavaScript. Fortunately, MooTools is built in to every installation of Joomla, and makes this type of task a bit less of a burden. You would probably want to use JavaScript to change the CSS style of the element to display:none when the page loads, then use the button click event to change the style back to display:block. Or you could get fancy with it and use one of the MooTools effects, like scrolling into view.
-
-
-
- bryantoth
- Jr. Rocketeer
- Posts: 49
- Thanks: 0
-
Dang.
I'm not very good with Javascript.
Any chance you can point me in the right direction or to a webpage that I can use to attempt to get this effect? I've tried searching on Google but all my search "queries" lead to nothing. I can't seem to phrase it right, or use the correct words, to land at a page that can help me out.
Thanks for the response!
-
-
-
- Ben Harold
- Sr. Rocketeer
- Posts: 231
- Thanks: 1
- Freelance Developer
-
-
-
- bryantoth
- Jr. Rocketeer
- Posts: 49
- Thanks: 0
-
Thanks for the link!
I actually got it to work...when I click Hide | Show the <div> layer hides and shows.
I've managed to hide the <div> on page load with "visibility: hidden;" in the css.
There are only two otter things I'd like to get it to do.
1) is do the fancy fade in when I click show (right now it just appears, I guess moving from the css visibility: hidden)
2) right now the height of the div is still there. Is there a way I can hide the height of the <div> until I click show and then hide the height when I click hide?
Any thoughts/guidance?
Thanks!
-
Time to create page: 0.047 seconds