Expand

Javascript coding ..

Moderators: macek, egami, gesf

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

Expand

Postby 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?

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

Postby 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

Postby 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.

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

Postby 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

Postby Alienz » Fri Jul 18, 2003 8:51 am

Thanks pootergeist. Its working now.

Velvet
New php-forum User
New php-forum User
Posts: 4
Joined: Mon Mar 01, 2004 9:52 pm
Location: Michigan
Contact:

Postby Velvet » Mon Mar 01, 2004 9:56 pm

So what about doing this sort of script in PHP?

I have a list of members with profiles and I'd like to use this sort of thing. When you click on their name, their profile drops down. I've heard you can't execute JavaScript from within PHP, so what would my solution be?

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

Postby 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.

Velvet
New php-forum User
New php-forum User
Posts: 4
Joined: Mon Mar 01, 2004 9:52 pm
Location: Michigan
Contact:

Postby Velvet » Mon Mar 01, 2004 10:56 pm

Yikes...

Velvet
New php-forum User
New php-forum User
Posts: 4
Joined: Mon Mar 01, 2004 9:52 pm
Location: Michigan
Contact:

Postby Velvet » Tue Mar 02, 2004 4:38 am

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

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

Postby 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! :)

Velvet
New php-forum User
New php-forum User
Posts: 4
Joined: Mon Mar 01, 2004 9:52 pm
Location: Michigan
Contact:

Postby Velvet » Tue Mar 02, 2004 11:37 am

I used a switch content javascript and just used my variables from the MySQL database -- i.e. the index key for the sc# from the javascript.

I got the script from here: http://www.dynamicdrive.com/dynamicinde ... ontent.htm

Hope you guys don't think it's ghetto or anything. :sad:

I'd found a couple different scripts that did remotely the same thing, but if I tried to put in a html table to align the drop-down content, the script didn't work. This one does. :)

I'm the webmaster for our online gaming clan, so don't laugh, but here it is on my site: http://www.riot-inc.com/roster/

If anyone actually does want to do something similar and they want the actual source code, let me know and I'll post it.

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

Postby swirlee » Tue Mar 02, 2004 12:20 pm

Looks like a good solution, Velvet.


Return to “JavaScript”

Who is online

Users browsing this forum: No registered users and 0 guests

cron