small modification onclick 2

[tyutghf]

I am using a small piece of javascript to change the visibility of a layer when a link is clicked. At the moment you click the link to turn the layer visible and click to hide again.

I have now been told that once it is visible you should be able to click anywhere on the screen to hide it again. Is that possible?

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

<a href="#" onclick="toggle_visibility('hiddencontent');return false;">

Obviously the default css for #hiddencontent is display: none

Thanks for any help

 

[Diancecht]

Maybe you should redefine "anywhere in the screen"

Cheers,
Dian

 

[tyutghf]

ATM you have to actually click the same link you clicked to make it visible to make it hide again. My boss seems to think that people won`t realise to click the same link and wants poeple to be able to click anywhere on the screen opposed to just the link.

 

[feherke]

Hi

My boss seems to think that people won`t realise to click the same link

Then why not tell them explicitly :

function toggle_visibility(id[red],linkobj[/red])
{
  var e = document.getElementById(id);
  if (e.style.display == 'block') [red]{[/red]
    e.style.display = 'none';
    [red]linkobj.innerHTML='Show blah-blah';[/red]
  [red]}[/red] else [red]{[/red]
    e.style.display = 'block';
    [red]linkobj.innerHTML='Hide blah-blah';[/red]
  [red]}[/red]
}

<a href="#" onclick="toggle_visibility('hiddencontent'[red],this[/red]);return false;">Show blah-blah</a>

In my opinion this way is more intuitive then transforming the whole [tt]document[/tt] into clickable area.

Feherke.

http://rootshell.be/~feherke/

 

[tyutghf]

Now I thought that was a gerat idea thanks for that. The link is an image so I swapped out the image with another using innerHTML (bookmarked that amazing command!) to say click here to hide. My boss now thinks that the new image is too small and still wants people to be able to click anywhere to turn it off.

 

[feherke]

Hi

That is not so simple. Because the link itself is also on the [tt]document[/tt]. So when you will click on the image, it's event handler will show the content, then the [tt]document[/tt]'s event handle will hide it.

That can be solved by stopping the event's propagation. But to stop the event's propagation, we need access to the event object.

function toggle_visibility(ev,id,img)
{
  var e=document.getElementById(id);
  var i=document.getElementById(img);
  if (e.style.display=='block') {
    e.style.display='none';
    i.src='show.png';
    i.alt='Show blah-blah';
  } else {
    e.style.display = 'block';
    i.src='hide.png';
    i.alt='Hide blah-blah';
  }
  ev.stopPropagation()
}
window.onload=function() {
  document.body.addEventListener('click',function(ev) { toggle_visibility(ev,'hiddencontent','switch') },false)
  document.getElementById('switchlink').addEventListener('click',function(ev) { toggle_visibility(ev,'hiddencontent','switch') },false)
}

<a href="#" onclick="return false" id="switchlink"><img src="show.png" alt="Show blah-blah" id="switch"></a>

This works in standard compliant browsers, like Mozillas ( FireFox, SeaMonkey ), Opera, Konqueror and Midori. Making to work in Explorer too, will be your task.

Note, that with the above code both the link and the whole [tt]document[/tt] are switching the visibility in both ways, on and off. If you want to separate them, so link only turn on and the rest of the [tt]document[/tt] only turns off, the simplest would be to split the [tt]function[/tt] in two and bound each to its trigger.

Feherke.

http://rootshell.be/~feherke/

 

[Einstein47]

This isn't exactly the same thing, but it might be acceptable.

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

<a href="#" onclick="toggle_visibility('hiddencontent');return false;" [red]onblur="toggle_visibility('hiddencontent');[/red]">

What this does is when the user clicks the link, the <A> tag element gets the browser focus. When the user clicks anywhere else, the <A> tag loses the focus and fires the onBlur event.

The only problem will be if the user clicks the link again (turning off the image) and then clicks anywhere else which fires the onBlur event and displays the image again.

It would be good to follow Feherke's idea to divide the functionality into 2 separate show and hide functions. That way the onBlur could always do the hide function and you would be safe.

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“

 

[feherke]

Hi

Man, I used that trick countless times in desktop applications and not came in mind this time !

Einstein47, that is much simpler and portable solution.

Feherke.

http://rootshell.be/~feherke/

 

[BillyRayPreachersSon]

Good solution, Einstein47.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Einstein47]

WOW - coming from you two - that is HIGH PRAISE!

THANKS TONS!

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“