collapsible panel

kela · #1 (**permalink**) Jan 24th, 2008, 14:50

I apologize if I have posted this in the wrong section wasn’t sure what it is. Anyway I was wondering if someone could help me out. I love the drop down panel at the top of this website http://www.toggle.uk.com/home/ could any one tell me how to achieve something like this. I know the spry assets are similar but the tab is on the top of them and I want the tab underneath so the content appears above the tab instead of below. Any way any ideas would be appreciated. Thanks in advanced.

Ed · #2 (**permalink**) Jan 24th, 2008, 18:58

Hi Kela!

First of all, thanks for making your first "official" post on WebForumz!

I have used this effect many times. It's very easy to use and is a snap to set up.
You would want to read the documentation + study the demo before trying it.

With the tab being underneath - in this case you make your tab with normal CSS and wherever you place your link on the page, once it's clicked it will appear. So if you have the link in your sidebar, clicking it would make the box come out of the top if that's where you placed it in your code.

Have a look here.

If you have any problems, feel free to post again.

Thanks,
Ed

kela · #3 (**permalink**) Jan 24th, 2008, 19:44

hi Ed,

Cheers for the welcome and response. This is perfect just a lil problem as i dont have much of a clue when it comes to java script. Im fine with the HTML and css part but what do i do with the java script how do i link it to the code do i put it my html code or do i link it it as a seprate document if so how?

Jack Franklin · #4 (**permalink**) Jan 24th, 2008, 19:46

Kela, you can add the javascript in the <head> of your document:

Code: Select all

<head>
<script type="text/javascript">
your javascript here...
</script>
</head>

----------

Vivara, is this the code which produces the sliding effect on this page towards the top?
http://mootools.net/

Ed · #5 (**permalink**) Jan 24th, 2008, 19:55

Sorry Jack, I don't understand what you want to know?

-------------------

Actually Kela, it is better to link to it externally. Your best bet is to name it something like slide.js, and link to it like this:

Code: Select all

<script type="text/javascript" src="slide.js"></script>

Hope this helps.

Ed.

Jack Franklin · #6 (**permalink**) Jan 24th, 2008, 19:58

Yes sorry V I did not explain at all!

On the mootools home page, there is the panel with the sections 'Download' 'The Docs' 'The Blog' 'Keep Trac' and when you hover over one of them the rest slide away. How would I achieve a similar effect?

kela · #7 (**permalink**) Jan 24th, 2008, 19:58

tried both ways and it still doesnt want to work all looks the same just doesnt work

Jack Franklin · #8 (**permalink**) Jan 24th, 2008, 20:02

You need to download the MooTools framework. However, I have never used this, so someone else can be of greater help here than me. Sorry.

Ed · #9 (**permalink**) Jan 24th, 2008, 20:03

EDIT: You must download the Framework - sorry, I thought that would be obvious. http://mootools.net/download

Download everything - then link to it the same way as above. You must still use the script for fx.slide.

-------

Are you using Domready? If not, you didn't take my advice and read the documentation!
http://demos.mootools.net/ <- Read the main page.

-------

Jack, that's a spiced up version of Fx.Elements.

Ed.

kela · #10 (**permalink**) Jan 24th, 2008, 20:38

no i read it all i have wrapped my js code with the dom ready but still not working. have i missed something else. sorry i suck at java dont use it very often.

window.addEvent('domready', function() {
// HERE IS WHAT YOU READ IN JS CODE
});

Ed · #11 (**permalink**) Jan 24th, 2008, 21:07

So - you've downloaded the framework. Named it mootool.js (or whatever) and linked to it like above.

You've downloaded the script, named it slide.js (or whatever) and linked to it like above.

You've added the domready to the top of your file and installed all CSS + used Correct HTML.

Have you?

We need a link, this can't be a "guessing" game.

Thanks,
Ed

p.s: It's javascript, not java - two completely different things.

Aso · #12 (**permalink**) Jan 24th, 2008, 21:34

I've worked with Mootools before (I say worked, I've used it

) and it's always bugged me a little how the framework download is a bit of trial and error as to which parts you need for a particular function.

When I was trying to use their tooltips, it wasn't just a case of ticking tooltips on the download page. It also required a few extras to work (DomReady, Fx.Elements and a few others too).

Now I've just tried what kela is trying to do and I can confirm this:

If I link to the framework Mootools uses for it's demos (http://demos.mootools.net/demos/mootools.svn.js), everything works peachy.

Now if I download my own copy of the framework and link to that, nothing. Not even if I ticked every box.

Ed · #13 (**permalink**) Jan 24th, 2008, 22:09

It works for me! Maybe you could just copy + paste what's there and upload it?
That would work.

Ed.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
New Server New Control Panel :)	Ducky	Hosting & Domains	2	Apr 17th, 2008 00:55
Logo in address panel	thriftyspider	Web Page Design	4	Aug 30th, 2007 15:19
Shopping cart with with control panel	Lchad	E-Commerce and Business	4	Jun 5th, 2007 21:13
Atlanta (May 17th): Need PHP Advocate for Panel Discussion	MikeSchinkel	PHP Forum	9	May 10th, 2007 23:19
Flash MX (Actionscript panel differences) Need help	autumn_whispers2me	Flash & Multimedia Forum	3	Jun 11th, 2005 07:15

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
collapsible panel