Javascript Slide Effect

Trigger

Trigger

Trigger

Soldato
Joined
15 Dec 2004
Posts
3,819
Hi,

I'm currently writing the intranet at work and on the main page, I have three toolboxes which I want users to be able to show and hide, in that you click a button and it hides the tools but still shows the toolbox title- rather like when you click the search button at the top of the page and it slides down and I want the toolbox to slide up and down like the search box on the forum does. Does anybody have any idea how I can do this? I had a quick search on google but it didn't return much.

Thanks :)

Ben
 
Trigger said:
Hi,

I'm currently writing the intranet at work and on the main page, I have three toolboxes which I want users to be able to show and hide, in that you click a button and it hides the tools but still shows the toolbox title- rather like when you click the search button at the top of the page and it slides down and I want the toolbox to slide up and down like the search box on the forum does. Does anybody have any idea how I can do this? I had a quick search on google but it didn't return much.

Thanks :)

Ben
Click to expand...

i do if what i think your saying is what im thinking of. the only problem, though not a problem just an annoynace for me, is that when you click the header to hide or show the content of it, the page goes to the top, which can be annoying when viewing at the bottom of a page and it goes up. I know this is possible to make it stop this so hoping someone will post a fix.

give me a mintue to find the stuff and i will post what your after.It uses javascript aswell, dont know if thats a problem
 
put this in your head tag or on anohter page and link to it in your head tag.

Code: 
<script language="Javascript">
function revealInfo(theid) {
	if(document.getElementById(theid).style.display == "block") {
		document.getElementById(theid).style.display = "none";
	} else {
		document.getElementById(theid).style.display = "block";
	}
}

</script>

then put the following on the header you have

Code: 
<a href="#" onclick="revealInfo('friends);">Name of Header</a>


the 'friends' part can be whatever name you want, as long as you change the name in css to whatever you put there.

the css
Code: 
div#friends {
display:none;
}
if you don't know css that well this code will hide the part everytime the user goes onto the page.

this can be previewed here

that should be it. if you haven't noticed im a bad tutorial writter. Hope this is what your after. what im hoping is for someone to post a way to stop the page refreshing to the top. i know why its doing it (because if the '#' in the <a> but i don't know how i'd stop this. anyone?
 
Last edited:
I actually made a sliding div just a week ago :O, pretty simple really have a look at: www.phever.org/slide.html feel free to use the source code, if you want it to go back up again, then ypu can just copy/edit the first 2 functions abit. :)
 
Thanks for all the replies :) I've been trying to use hmmmm's code but am getting stuck somewhere :o

Code: 
<div class="systemMenu">
    <div class="menutitle">Management Options</div>
        <div id="managementOptions">
            <div id="menuNewUser">New User</div>
            <div id="menuEditUser">Change User</div>
            <div id="menuEditModules">Edit Modules</div>
            <div id="menuSettings">Settings</div>
            <div id="menuDatabase">Database Manager</div>
        </div>
</div>

How would I scroll the #managementOptions div up and then back down again? I know how to make it appear and reappear but I want it to slide like hmmmm's example if possible. I know the menu options should be done with an unordered list btw but it wouldn't work so I've done it messily with divs :o

Thanks

Ben
 
You must log in or register to reply here.
Back
Top Bottom