...

View Full Version : special onclick event.



arne2
02-13-2007, 12:03 PM
Hi, i'm making a website and everything is working well but I came up with a problem that i can't solve myself. Here it is:
My website has a few buttons (images with links). They are like this:
HOME PROGERIA LINKS GUESTBOOK..

progeria should have a submenu, so that when you click on it, you get something like this:

HOME PROGERIA LINKS GUESTBOOK..
|| SUB1 SUB2 SUB3 SUB4
|| SUB5 and so on...

I have designed it (see : http://www.webmasterhelp.biz/gipvincent) BUT the problem i have is that at the moment it's always possible.
SO BASICALLY: I need a script that puts a layer on top of the sub1,2,3,.. buttons until a visitor clicks on 'progeria' (onclick event). I don't know how to do this as they are images that have to show up at once AND when users haven't clicked on progeria, it should show the normal background color where the sub1,2,3... appears on click. Can anybody help me?

So briefly i want this submenu to be invisible until a visitor clicks on progeria. THANK YOU VERY MUCH FOR YOUR HELP!

MikeFoster
02-13-2007, 11:27 PM
Hi arne2,

Here's one way of doing it.

First, assign an ID to the progeria link:


<td colspan="4"><a id='progeriamain' href="progeriamain.php" target="progeriamframe"><img name="Progeria_r2_c6" src="Progeria_r2_c6.jpg" width="84" height="26" border="0" id="Progeria_r2_c6" alt="" /></td>


Now stick this in the head element:


<script type='text/javascript'>
if (typeof window.onload == 'function') {progeria_OL = window.onload;}
window.onload = function()
{
if (window.progeria_OL) progeria_OL();
var a = document.getElementById('progeriamain');
if (a) a.onclick = progeriamain_click;
a.onclick(); // if those rows are initially hidden with css then you won't need this line
}
function progeriamain_click()
{
// find parent TR
var tr = this.parentNode;
while (tr && tr.nodeName.toLowerCase() != 'tr') {
tr = tr.parentNode;
}
if (tr) {
// show/hide some of the following TRs
var i, rowsToHide = 7;
tr = tr.nextSibling;
for (i = 0; tr && i < rowsToHide; ++i) {
if (tr.style.visibility != 'hidden') tr.style.visibility = 'hidden';
else tr.style.visibility = 'visible';
}
}
}
</script>


Btw, I haven't tested this idea, let me know if it works :)

arne2
02-14-2007, 08:59 PM
cool ! I don't know how you figured that thing out but it's almost working. The only problem is that it coveres the wrong part. It covers the left (a part of the flower) and not the part with the submenu. Can you change it from site as i don't know how to do it. You can see the online example on the website (http://www.webmasterhelp.biz/gipvincent/).

THank you very much already!
Arne

MikeFoster
02-15-2007, 05:56 AM
Ah, it is all one row. That shows that I never work with table layouts ;)

So let's do it this way. You'll need to give "class='menuTd'" to every <td> that you want to show/hide when progeria is clicked. For example, this is the first row of TDs to add the class to:


<td class='menuTd' colspan="5"><a href="wat.php" target="progeriamframe"><img name="Progeria_r4_c4" src="Progeria_r4_c4.jpg" width="133" height="16" border="0" id="Progeria_r4_c4" alt="" /></a></td>
<td class='menuTd' colspan="5"><a href="syns.php" target="progeriamframe"><img name="Progeria_r4_c9" src="Progeria_r4_c9.jpg" width="109" height="16" border="0" id="Progeria_r4_c9" alt="" /></a></td>
<td class='menuTd'><img name="Progeria_r4_c14" src="Progeria_r4_c14.jpg" width="1" height="16" border="0" id="Progeria_r4_c14" alt="" /></td>
<td class='menuTd' colspan="8"><a href="ontstaan.php" target="progeriamframe"><img name="Progeria_r4_c15" src="Progeria_r4_c15.jpg" width="162" height="16" border="0" id="Progeria_r4_c15" alt="" /></a></td>
<td class='menuTd' colspan="3"><img name="Progeria_r4_c23" src="Progeria_r4_c23.jpg" width="56" height="16" border="0" id="Progeria_r4_c23" alt="" /></td>
<td class='menuTd' rowspan="4"><img name="Progeria_r4_c26" src="Progeria_r4_c26.jpg" width="1" height="49" border="0" id="Progeria_r4_c26" alt="" /></td>
<td class='menuTd' rowspan="7"><img name="Progeria_r4_c27" src="Progeria_r4_c27.jpg" width="7" height="82" border="0" id="Progeria_r4_c27" alt="" /></td>
<td class='menuTd' rowspan="7"><img name="Progeria_r4_c28" src="Progeria_r4_c28.jpg" width="1" height="82" border="0" id="Progeria_r4_c28" alt="" /></td>
<td class='menuTd'><img src="spacer.gif" width="1" height="16" border="0" alt="" /></td>

Then continue adding the class to each TD in the next 5 rows or so.

Replace all the Js I gave you before with this:


<script type='text/javascript'>
if (typeof window.onload == 'function') {progeria_OL = window.onload;}
window.onload = function()
{
if (window.progeria_OL) progeria_OL();
var a = document.getElementById('progeriamain');
if (a) {
a.onclick = progeriamain_click;
a.onclick();
}
};
function progeriamain_click()
{
var i = 1, td = document.getElementById('td1');
xGetElementsByClassName('menuTd', document, 'td',
function(td) {
td.style.visibility = (td.style.visibility != 'hidden') ? 'hidden' : 'visible';
}
);
}
// http://cross-browser.com/x/lib/view.php?sym=xGetElementsByClassName
function xGetElementsByClassName(c,p,t,f)
{
var r = new Array();
var re = new RegExp("(^|\\s)"+c+"(\\s|$)");
var e = p.getElementsByTagName(t);
// var e = xGetElementsByTagName(t,p); // See xml comments.
for (var i = 0; i < e.length; ++i) {
if (re.test(e[i].className)) {
r[r.length] = e[i];
if (f) f(e[i]);
}
}
return r;
}
</script>

arne2
02-16-2007, 09:35 PM
Wooooow! You did it! You actually made it work!

THANK YOU EXTREMELY MUCH! I can't tell you how much i appreciate it!
Greate job Mikefoster!(y)

Greetz and many thanks,
Arne

MikeFoster
02-16-2007, 09:37 PM
:thumbsup:

arne2
02-23-2007, 03:59 PM
Oops! Noticed something. It works perfectly in FireFox, but i get a javascript error when viewing the page in IE (7), and the javascript also doesn't do anything then.
Can you make a version that's compatible for both browsers? Or something...?

THANK YOU!
Arne

MikeFoster
02-23-2007, 04:12 PM
That's odd - I've never seen this error message:

"Can't execute code from a freed script."

And it only happened once - now I can't get it to happen again.

IE was complaining about the red line...


if (typeof window.onload == 'function') {progeria_OL = window.onload;}
window.onload = function()
{
if (window.progeria_OL) progeria_OL();

So I commented-out both the blue and red lines. The error went away. Then I un-commented them. The error did not re-occur!

Curiouser and curiouser...

MikeFoster
02-23-2007, 04:14 PM
Oh well, you don't need that anyhow. Just delete the blue and red lines.

MikeFoster
02-23-2007, 04:22 PM
I still haven't been able to get the error to re-occur.

I had thought that the technique I was using above to save any previously assigned onload function had to be the most simple and cross-browser way of doing it (other than using addEventListener or attachEvent).

Does IE7 occasionally have a problem with that simple technique? :eek:

MikeFoster
02-23-2007, 04:47 PM
Another line that can be deleted:


function progeriamain_click()
{
var i = 1, td = document.getElementById('td1');
...

arne2
02-24-2007, 03:29 PM
Ok! Thank you ! I'll try it when i get home



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum