Expand

Javascript coding ..

Moderators: macek, egami, gesf

Post Reply
Alienz
New php-forum User
New php-forum User
Posts: 13
Joined: Wed Jan 29, 2003 8:24 am

Expand

Post by Alienz » Thu Jul 17, 2003 8:09 pm

I had a script on the Expand and Contract.

Code: Select all

<div style="height: 10px; width: 160px; overflow: hidden;" onmouseover="this.style.height='auto'; return false;" onmouseout="this.style.height='10px'; return false;" align="left">
<span class="gensmall"><a href="#">Expand/Contract stats...</a></span><br /><br />PUT WHAT EVER EXPAND HERE</span></div>


This is for mouseover but how can I change it to onmouseclick? So that when I click, it expand, when I click again it contract.

Anyone could help me out?

pootergeist
New php-forum User
New php-forum User
Posts: 191
Joined: Wed Jan 29, 2003 7:11 am
Location: UK
Contact:

Post by pootergeist » Fri Jul 18, 2003 2:51 am

set a var before the div, then something like

div_var = 1;
....
<div style="........." onclick="div_var*=-1; this.style.height = (div_var < 0) ? 'auto' : '10px'; return false;" align="..."><span></ </

should work - basically just multiplies div_var by minus one on each click and then tests whether div_var is below zero (every other click) and sets the height to the relative setting

you *might* even get away with

"this.style.height = ((div_var*=-1) < 0) ? 'auto' : '10px';"

Alienz
New php-forum User
New php-forum User
Posts: 13
Joined: Wed Jan 29, 2003 8:24 am

Post by Alienz » Fri Jul 18, 2003 4:45 am

I not sure where should I put the var at but can I put the var this way?

Code: Select all

<div style="........." onclick="div_var = 1; this.style.height = ((div_var*=-1) < 0) ? 'auto' : '10px'; return false;" align="left">


If so, when I click, it did expand but when I click again, it did not contract. Do you have any idea about it?

BTW I adding this code in my forum at viewtopic_body.tpl.

pootergeist
New php-forum User
New php-forum User
Posts: 191
Joined: Wed Jan 29, 2003 7:11 am
Location: UK
Contact:

Post by pootergeist » Fri Jul 18, 2003 8:26 am

no - you need to define the var before the div

<script type="text/javascript">/*<![CDATA[*/div_var = 1;/*]]!>*/</script>
<div style="height: 10px; width: 160px; overflow: hidden;" onclick="this.style.height = ((div_var*=-1) < 0) ? 'auto' : '10px';" align="left">
<span class="gensmall"><a href="#">Expand/Contract stats...</a></span><br /><br />PUT WHAT EVER EXPAND HERE</span></div>

if you have an earlier script on the page, you can sling the div_var = 1; in that, else just add it like above.

Alienz
New php-forum User
New php-forum User
Posts: 13
Joined: Wed Jan 29, 2003 8:24 am

Post by Alienz » Fri Jul 18, 2003 8:51 am

Thanks pootergeist. Its working now.

User avatar
swirlee
Moderator
Moderator
Posts: 2272
Joined: Sat Jul 05, 2003 1:18 pm
Location: A bunk in the back
Contact:

Post by swirlee » Mon Mar 01, 2004 10:49 pm

Well, you'd have to make it so that when the user clicks on the link, it reloads the page but with GET values (e.g. page.php?collapsed=6) that tell it which parts are collapsed and which are expanded.

Enquea
New php-forum User
New php-forum User
Posts: 34
Joined: Fri Feb 27, 2004 5:57 am
Contact:

Post by Enquea » Tue Mar 02, 2004 5:27 am

Velvet wrote:I found a simpler way to do it. thx :)



And your way is? :-o

Post it here maybe, thnx! :)

User avatar
swirlee
Moderator
Moderator
Posts: 2272
Joined: Sat Jul 05, 2003 1:18 pm
Location: A bunk in the back
Contact:

Post by swirlee » Tue Mar 02, 2004 12:20 pm

Looks like a good solution, Velvet.

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest