homepage Welcome to WebmasterWorld Guest from 54.167.144.4
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Merge two Expand collasp Scripts
Need to define two classes with ID to create toggle function...
JAB Creations




msg:3066441
 8:48 pm on Aug 30, 2006 (gmt 0)

I have two perfectly working scripts that I need the functionality of both from in a single merged script. However I'm just not that handy with JavaScript to figure it out on my own.

The first script will change the class of any element you assign it to. I need to be able to use the ability to decide which ID and what class I want to change inside the html,body (not in the script like script two).

The second script allows me to toggle between styles (the first script does not allow me to toggle, it's a one time deal).

My goal posted after the scripts...

Script One
<script type="text/javascript">
//<![CDATA[
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
//]]>
</script>

<div class="expand" id="row01">
<a href="#" onclick="change('row01', 'expanded');">++</a>.....<a href="#" onclick="change('row01', 'expand');">---</a>
<br />
line 2
<br />
line 3
</div>

Script Two
<script type="text/javascript">
//<![CDATA[
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
//]]>
</script>

<a href="#" onclick="return toggleMe('para1')">clicky clicky</a>
<div id="para1" ><p>Stuff stuff stuff stuff stuff.</div>

So I need to define two classes in the link along with the ID on the merged script idea. Maybe it would look something like this...

<element onclick="toggle('row01', 'expanded','expanded');">

That would be exactly how I want the JavaScript event to look like. What is also great about the first script is that you can apply the function more then once which becomes excessively handy in certain situations. Example...

<element onclick="toggle('row01', 'expanded','expanded'); toggle('row02', 'expanded','expanded');">

- John

 

Fotiman




msg:3066584
 10:37 pm on Aug 30, 2006 (gmt 0)

I'm finding it hard to understand exactly what you're asking for, but couldn't you just create a wrapper function that calls both of the other two function? Like:


function changeAndToggle( id, newclass )
{
change(id, newclass);
toggle(id);
}

? Or am I misunderstanding what you're asking?

garann




msg:3066658
 12:09 am on Aug 31, 2006 (gmt 0)

Like this?


function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name.equals(classOne)) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}

JAB Creations




msg:3066702
 12:46 am on Aug 31, 2006 (gmt 0)

garann! The script looks and feels like it should work! However I get an error in Firefox...

Error: class_name.equals is not a function
Line: 13

Here is my test case...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Expander</title>
<script type="text/javascript">
//<![CDATA[

function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name.equals(classOne)) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}

//]]>
</script>
<style type="text/css">
div.expand {
border: #000 solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded {
border: #000 solid 1px;
height: 100px;
overflow: auto;
width: 100%;
}
</style>
</head>

<body>

<a href="#" onclick="toggle('row01', 'expand','expanded');">clicky clicky</a>

<div class="expand" id="row01">
test test test test test test test
<br />
test test test test test test test
<br />
test test test test test test test
<br />
test test test test test test test
</div>

</body>
</html>

Thanks for trying Fotiman, I'm not sure where you were going with that one, changing the id?

Thanks to both of you for your help!

- John

Fotiman




msg:3066777
 2:18 am on Aug 31, 2006 (gmt 0)


Thanks for trying Fotiman, I'm not sure where you were going with that one, changing the id?

I'm not sure either... I copied it from your code! :-)

garann




msg:3067635
 5:06 pm on Aug 31, 2006 (gmt 0)

I may be losing my grip on things - long week. In hindsight, I'm not sure Javascript even uses equals()...

I'm guessing it should work if you substitute this test:

if (class_name == classOne) {
...

JAB Creations




msg:3068380
 3:04 am on Sep 1, 2006 (gmt 0)

WOOHOO garann! Check out the two examples!

Before I continue though, the code in it's basic working form...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Expander</title>
<script type="text/javascript">
//<![CDATA[

function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name == classOne) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}

//]]>
</script>
<style type="text/css">
div.expand {
border: #000 solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded {
border: #000 solid 1px;
height: 100px;
overflow: auto;
width: 100%;
}
</style>
</head>

<body>

<a href="#" onclick="toggle('row01', 'expand','expanded');">clicky clicky</a>

<div class="expand" id="row01">
test test test test test test test
<br />
test test test test test test test
<br />
test test test test test test test
<br />
test test test test test test test
</div>

</body>
</html>

More advanced...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Expander</title>
<script type="text/javascript">
//<![CDATA[
function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name == classOne) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}
//]]>
</script>
<style type="text/css">
div.expand1 {
border: #f00 solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded1 {
border: #f00 solid 1px;
height: 60px;
overflow: auto;
width: 100%;
}
div.expand2 {
border: #0f0 solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded2 {
border: #0f0 solid 1px;
height: 60px;
overflow: auto;
width: 100%;
}
div.expand3 {
border: #00f solid 1px;
height: 20px;
overflow: hidden;
width: 100%;
}
div.expanded3 {
border: #00f solid 1px;
height: 60px;
overflow: auto;
width: 100%;
}
</style>
</head>

<body>

<a href="#" onclick="toggle('row01', 'expand1','expanded1'); toggle('row02', 'expand2','expanded2'); toggle('row03', 'expand3','expanded3');" >Expand 1,2,3</a>
<br />
<br />
<a href="#" onclick="toggle('row01', 'expand1','expanded1'); toggle('row03', 'expand3','expanded3');">Expand 1,3</a>
<br />
<br />
<a href="#" onclick="toggle('row01', 'expand1','expanded1');">clicky clicky 1</a>

<div class="expand1" id="row01">
test test test test test test test 1
<br />
test test test test test test test 1
<br />
test test test test test test test 1
<br />
test test test test test test test 1
</div>

<a href="#" onclick="toggle('row02', 'expand2','expanded2');">clicky clicky 2</a>

<div class="expand2" id="row02">
test test test test test test test 2
<br />
test test test test test test test 2
<br />
test test test test test test test 2
<br />
test test test test test test test 2
</div>

<a href="#" onclick="toggle('row03', 'expand3','expanded3');">clicky clicky 3</a>

<div class="expand3" id="row03">
test test test test test test test 3
<br />
test test test test test test test 3
<br />
test test test test test test test 3
<br />
test test test test test test test 3
</div>

</body>
</html>

- John

[edited by: JAB_Creations at 3:16 am (utc) on Sep. 1, 2006]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved