1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

elegant code for show of

         

aaparis

8:30 am on May 3, 2010 (gmt 0)

10+ Year Member




hello,

more at ease with html & css, i have been reading posts and topics without finding solution for my simple webpage.

i am trying to show a hidden DIV (text content/news) with onmousedown (a href styled link), for 10 seconds, then hide it (go back to initial state).

when another mousedown event happens, the div should also dissappear (imeadiat effect).

to show the hidden DIV, i have used the following code; 

function shownews()
{
if (document.getElementById) 
{ // DOM3 = IE5, NS6
document.getElementById('newsbox').style.visibility = 'visible';
}
else
{
if (document.layers) 
{ // Netscape 4
document.newsbox.visibility = 'visible';
}
else 
{ // IE 4
document.all.newsbox.style.visibility = 'visible';
}
}
}


I would like to implement the timeout function but have not been successful.
I also have tried to hide the DIV with onmousedown events on the other links, but unsuccessfully,,,

i use an external .js file for scripts and in my html body i have used the following code; 
<a href="javascript:; onmousedown=shownews('newsbox')" class="main">news</a>


Hope someone has a really simple elegant solution !

andreas

caribguy

11:19 am on May 3, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How about this?

<html>
<body>
<head>
<script type="text/javascript">
var div_element_id = 'alert';
function createListener(link_element_id) {
var myLinkEl = document.getElementById(link_element_id);
myLinkEl.addEventListener('click', function(e) {
toggleVisibility(div_element_id);
e.preventDefault();
},true);
}
function toggleVisibility(div_element_id) {
var myDivEl = document.getElementById(div_element_id);
(myDivEl.style.visibility=='') ? myDivEl.style.visibility='hidden' : myDivEl.style.visibility='';
if (myDivEl.style.visibility=='') {
doHide=setTimeout('toggleVisibility(div_element_id)',2000)
}
}
</script>
</head>
<body onload="createListener('alert_link');">
<div id="alert" style="visibility:hidden;">
<p>This is an alert</p>
</div>

<a id="alert_link" href="http://www.example.com">Click to show the alert for two seconds</a>
</body>
</html>

caribguy

11:37 am on May 3, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Oops... Now working for IE6 too, and cleaning up the timeout :)

<html>
<body>
<head>
<script type="text/javascript">
var div_element_id = 'alert';
function createListener(link_element_id) {
var el = document.getElementById(link_element_id);
if (el.addEventListener) {
el.addEventListener('click', function(e) {
toggleVisibility(div_element_id);
e.preventDefault();
},true);
}
else if (el.attachEvent) {
el.attachEvent('on' + 'click', function(e) {
toggleVisibility(div_element_id);
return false;
});
}
}
function toggleVisibility(div_element_id) {
var myDivEl = document.getElementById(div_element_id);
(myDivEl.style.visibility=='') ? myDivEl.style.visibility='hidden' : myDivEl.style.visibility='';
if (myDivEl.style.visibility=='') {
doHide=setTimeout('toggleVisibility(div_element_id)',2000)
}
else {
clearTimeout(doHide)
}
}
</script>
</head>
<body onload="createListener('alert_link');">
<div id="alert" style="visibility:hidden;">
<p>This is an alert</p>
</div>

<a id="alert_link" href="http://www.example.com">Click to show the alert for two seconds</a>
</body>
</html>

aaparis

12:33 pm on May 3, 2010 (gmt 0)

10+ Year Member



GREAT

i just tested it within my web-page, and got it working too !

adapted the script to my css ; 

var div_element_id = 'newsbox';
function createListener(link_element_id) {
var el = document.getElementById(link_element_id);
if (el.addEventListener) {
el.addEventListener('click', function(e) {
toggleVisibility(div_element_id);
e.preventDefault();
},true);
}
else if (el.attachEvent) {
el.attachEvent('on' + 'click', function(e) {
toggleVisibility(div_element_id);
return false;
});
}
}
function toggleVisibility(div_element_id) {
var myDivEl = document.getElementById(div_element_id);
(myDivEl.style.visibility=='') ? myDivEl.style.visibility='hidden' : myDivEl.style.visibility='';
if (myDivEl.style.visibility=='') {
doHide=setTimeout('toggleVisibility(div_element_id)',5000)
}
else {
clearTimeout(doHide)
}
}


and my html test-page looks like this; 

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen, print" href="style.css" charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="createListener('newsbox_link');">
<a id="newsbox_link" href="javascript:; onclick=('newsbox')" class="main">news</a>
<div id="newsbox" style="visibility:hidden;">
<p>this is the text</p>
</div>
</body
</html>


So, a very elegant solution !

i just might use this as above !

Thank U for a nice and handy script

>what can i say on the js page ? just say "author script ; Caribguy" ?

andreas

caribguy

7:40 pm on May 3, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<a id="newsbox_link" href="javascript:; onclick=('newsbox')" class="main">news</a>

You should not need the js code in your link.

<a id="newsbox_link" href="#" class="main">news</a>

should be sufficient.

Wouldn't consider myself the "author" - the script was inspired by the work of many others, I just happened to come out of a night of JS related work and it was easy to patch this together :)

aaparis

8:16 pm on May 3, 2010 (gmt 0)

10+ Year Member



Hello,

already posted my really simple webpage,,,

put
// Scripted by Caribguy @ [webmasterworld.com...]
,,,,

for the html link i actually put; 

<a id="newsbox_link" href="javascript:newsbox()" class="main">news</a>


just don't like how the "#" shows in the menubar for inline links,,,,

is there another solution for not having the "#" show?

thank you so much for that lovely script !,

andreas

>and the .js page is here;
<snip>

[edited by: jdMorgan at 12:45 am (utc) on May 4, 2010]
[edit reason] No URLs, please. See TOS. [/edit]

caribguy

12:31 am on May 4, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You could replace the link tag with a div and style it to look like a link. The event listener object still works.

<div id="alert_link" style="cursor:pointer; text-decoration:underline; color:blue;">

Now, as an excersise you can try to figure out how to make listeners for hover/mouseover states :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026