/    Sign up×
Community /Pin to ProfileBookmark

Simplify an "onClick" command that calls a javascript function.

Hi all

I need to simplify an [B]onClick[/B] command that calls a javascript function.

this is the javascript Function:

[code=php]
var isReady = false;

function MM_showHideLayers() { //v6.0
if (isReady==true){
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v==’show’)?’visible’:(v==’hide’)?’hidden’:v; }
obj.visibility=v; }
}
}
[/code]

and here is the code that calls the script:

[code=php]
onClick=”MM_showHideLayers(‘Home’,”,’show’,’Contact’,”,’hide’,’Images’,”,’hide’,’News’,”,’hide’,’Gigs’,”,’hide’,’Music’,”,’hide’,’History1′,”,’hide’,’History2′,”,’hide’,’Review’,”,’hide’);return false”
[/code]

but instead of using this long winded [B]onClick[/B] i’m hoping to do something like this:

[code=php]
onClick=”MM_showHideLayers(gigs);return false
[/code]

And then it hides all other layers and shows the [B]gigs[/B] layer.

Any ideas on how to adapt the [b]function MM_showHideLayers()[/b]

Cheers
Chris

to post a comment
JavaScript

15 Comments(s)

Copy linkTweet thisAlerts:
@David_HarrisonJul 05.2004 — Put all of the ID's in an array, then just pass the ID of the one you want to show to the function. Loop through the array hiding the layers, but show the layer with the ID passed to the function.

In other words a complete re-write. What's this code for anyway, I have a feeling there may be a non-JavaScript way to do it.
Copy linkTweet thisAlerts:
@cybercampbellauthorJul 05.2004 — OK!

I wouldn't be able to do that myself.

It's a site that has content in layers and there are image links that hide and show the content by hiding and showing the relivant layer.

What do you think?

Chris
Copy linkTweet thisAlerts:
@David_HarrisonJul 05.2004 — Can I see the site? I could easily make it in JavaScript, but I'd much rather do it wiht CSS.
Copy linkTweet thisAlerts:
@cybercampbellauthorJul 05.2004 — the site is not up yet.

can this be done in css? wow....there must be alot mor to css than I thought.

I think it would be best for me to have it in javascript as I need to call it from all different places.

Chris
Copy linkTweet thisAlerts:
@David_HarrisonJul 05.2004 — There are certain things you can and can't do, for example in this code it would be possible to show/hide the span tag onhover of the link:&lt;a href="#"&gt;
Some text.
&lt;span&gt;Some more text.&lt;/span&gt;
&lt;/a&gt;
But if would not be possible to show/hide the span tag onhover of this link with CSS (in IE at least, I think it is possible in real browsers, but I've never tried):&lt;a href="#"&gt;
Some text.
&lt;/a&gt;
&lt;span&gt;Some more text.&lt;/span&gt;
But with CSS you could position the span tag pretty much anywhere on the page, so you can achieve some interesting effects with it. [url=http://www.meyerweb.com/eric/css/edge/popups/demo.html]Here[/url] is a CSS hover effect, I'll work on a JavaScript one and upload it later.
Copy linkTweet thisAlerts:
@cybercampbellauthorJul 06.2004 — That's all great but it's not really helping me.

Back to original question:

I need to simplify an [B]onClick[/B] command that calls a javascript function.

this is the javascript Function:

[code=php]
var isReady = false;

function MM_showHideLayers() { //v6.0
if (isReady==true){
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
}
[/code]


and here is the code that calls the script:

[code=php]
onClick="MM_showHideLayers('Home','','show','Contact','','hide','Images','','hide','News','','hide','Gigs','','hide','Music','','hide','History1','','hide','History2','','hide','Review','','hide');return false"
[/code]


but instead of using this long winded [B]onClick[/B] i'm hoping to do something like this:

[code=php]
onClick="MM_showHideLayers(gigs);return false
[/code]


And then it hides all other layers and shows the [B]gigs[/B] layer.

Any ideas on how to adapt the [b]function MM_showHideLayers()[/b]

Cheers

Chris
Copy linkTweet thisAlerts:
@David_HarrisonJul 06.2004 — Well here's some JavaScript code that dispenses with the MM_findObj function. I assumed that the layers were referenced with their ID so I used getElementById.var layers=new Array("Home","Contact","Images","News","Gigs","Music","History1","History2","Review");

function MM_showHideLayers(el)

for(var i=0;i&lt;layers.length;i++){
document.getElementById(layers[i]).style.visibility=(layers[i]==el)?"visible":"hidden;
}

}

onclick="MM_showHideLayers('gigs');"
Copy linkTweet thisAlerts:
@cybercampbellauthorJul 06.2004 — Thanks for that.

But I could not get it to work. I even tried changing this:
[code=php]"visible":"hidden;[/code]
to this:
[code=php]"visible":"hidden";[/code]

putting a [B]"[/B] after hidden.

I'm assuming it should be there...either way, I didn't work.

Any idea why.

Thanks for having a go

Chris
Copy linkTweet thisAlerts:
@David_HarrisonJul 06.2004 — Yeah, I missed a " off, can you post your MM_findObj function and your HTML between some [code] tags? That way I can see how the layers are referenced.
Copy linkTweet thisAlerts:
@cybercampbellauthorJul 06.2004 — <i>
</i>function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))&gt;0&amp;&amp;parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&amp;&amp;d.all) x=d.all[n]; for (i=0;!x&amp;&amp;i&lt;d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&amp;&amp;d.layers&amp;&amp;i&lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x &amp;&amp; d.getElementById) x=d.getElementById(n); return x;
}


Cheers

Chris
Copy linkTweet thisAlerts:
@David_HarrisonJul 06.2004 — Can you post your entire HTML? I think it would just be easier to re-write the JavaScript completely and possibly slightly alter the HTML.
Copy linkTweet thisAlerts:
@cybercampbellauthorJul 06.2004 — File Attached

Cheers

Chris

[upl-file uuid=999e6a6f-c63a-4d69-9be4-49e6b43765a9 size=2kB]swaplayers.zip[/upl-file]
Copy linkTweet thisAlerts:
@David_HarrisonJul 07.2004 — Sorry for not replying but events conspired against me and alcohol was involed.

Anyway, as promised one revised/completely re-written script.

[upl-file uuid=593f03ed-1d71-4995-a6fc-79d6f9c7c022 size=4kB]swaplayers.txt[/upl-file]
Copy linkTweet thisAlerts:
@cybercampbellauthorJul 07.2004 — That is fantastic!!

Thank you so much ?

I may have to go and recode all my websites now.

Cheers

Chris
Copy linkTweet thisAlerts:
@David_HarrisonJul 07.2004 — Happy to help. ?

You'll have to keep this...&lt;script type="text/javascript"&gt;&lt;!--
formatCode();
//--&gt;&lt;/script&gt;
...just after the layer code, that's the function that formats the layers.

If you disable JavaScript you should be able to see that the information is still accessible to everyone.

Edit: Typo.
×

Success!

Help @cybercampbell spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...