Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

Expand

Javascript coding ..

Moderators: macek, egami, gesf

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?
Alienz
New php-forum User
New php-forum User
 
Posts: 13
Joined: Wed Jan 29, 2003 8:24 am

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';"
pootergeist
New php-forum User
New php-forum User
 
Posts: 191
Joined: Wed Jan 29, 2003 7:11 am
Location: UK

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.
Alienz
New php-forum User
New php-forum User
 
Posts: 13
Joined: Wed Jan 29, 2003 8:24 am

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.
pootergeist
New php-forum User
New php-forum User
 
Posts: 191
Joined: Wed Jan 29, 2003 7:11 am
Location: UK

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

Thanks pootergeist. Its working now.
Alienz
New php-forum User
New php-forum User
 
Posts: 13
Joined: Wed Jan 29, 2003 8:24 am

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?
Velvet
New php-forum User
New php-forum User
 
Posts: 4
Joined: Mon Mar 01, 2004 9:52 pm
Location: Michigan

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.
User avatar
swirlee
Moderator
Moderator
 
Posts: 2272
Joined: Sat Jul 05, 2003 1:18 pm
Location: A bunk in the back

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

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

I found a simpler way to do it. thx :)
Velvet
New php-forum User
New php-forum User
 
Posts: 4
Joined: Mon Mar 01, 2004 9:52 pm
Location: Michigan

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! :)
Enquea
New php-forum User
New php-forum User
 
Posts: 34
Joined: Fri Feb 27, 2004 5:57 am

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.
Velvet
New php-forum User
New php-forum User
 
Posts: 4
Joined: Mon Mar 01, 2004 9:52 pm
Location: Michigan

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

Looks like a good solution, Velvet.
User avatar
swirlee
Moderator
Moderator
 
Posts: 2272
Joined: Sat Jul 05, 2003 1:18 pm
Location: A bunk in the back


Return to JavaScript

Who is online

Users browsing this forum: No registered users and 2 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.