Show/hide a box

JavaScript
1

I want to have a box (a <div>) to display shortly after the page is loaded, for it to fade in and for a user to be able to close/hide the box if they wish. I have got most of the way there but after I close the box it reappears. I can’t help but think I shouldn’t have

style="display:block"

on the <div> but if I don’t it doesn’t fade in. My code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
img {
    border: none;
}
#infobox {
    text-align: center;
    position: absolute;
    width: 400px;
    bottom: 50px;
    left: 20px;
    padding: .5em;
    opacity: .0;
    display: none;
    color: #222;
    border: solid 1px #222;
}
#infobox.visible {
    opacity: 1.0;
    transition: opacity .7s linear;
}
#infoboxclose {
    position: absolute;
    top: -6px;
    right: -6px;
}
</style>
<script>
window.onload = function() {
  setTimeout("showbox()", 500);
}
function showbox() {
  document.getElementById("infobox").setAttribute("class", "visible");
//  document.getElementById("infobox").setAttribute("style", "display:block");
}
function hidebox() {
  document.getElementById("infobox").setAttribute("class", "");
//  document.getElementById("infobox").setAttribute("style", "display:none");
}
</script>
</head>
<body>
<div id="infobox" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Vivamus tempus, leo sit amet luctus laoreet, nunc lorem lobortis elit, sit amet egestas urna dolor  quis diam. Quisque tincidunt eros eu erat varius scelerisque gravida turpis egestas. 
<a href="" onClick="hidebox();"><img src="close.png" height="20" width="20" alt="close" id="infoboxclose" /></a>
</div>
</body>
</html>

Thanks guys

2

I’ve found the answer! The a href should be a href=“#”…

3

You are on the right track.
I would recommend not using any inline styling (as you mentioned).
But, more importantly, I think you should reverse your logic.
In other words, create a class that HIDES the box (display: none;)
Apply that class to the box initially. In your onLoad/Timeout JS call the ‘showBox’ function which removes the class.
Then, you can use the ‘hideBox’ to apply that original class (which hides the box).

This all can be done [more] easily with JQuery. And you can animate it in addition!!

4

What is happening is that your click is resulting in the page loading up again.

You can prevent that from happening by disabling the default behaviour of that link. You can achieve that by returning false from the function, and in turn, returning the hidebox function in the onclick attribute.

You can also remove the display:none from your CSS and you won’t need the display:block in your HTML code.

===

There are better ways to achieve what you’re wanting to do here, that result in more flexible and easily maintainable code.

[list][]Keep your HTML and scripting code separate from each other
[]Load your scripts from the end of the body
[]Pass a function to setTimeout instead
[]Target the link instead of the image - and use cascading to reach the img tag
[]Attach events from the scripting code instead of using inline event attributes
[]Use class names for CSS selectors instead of ID tags
[/list]

We could spend all day going over details about the above tips, and you’re welcome to please ask for more info about any of them.

After the above improvements, you end up with the following:


<a id="infoboxclose" href="#"><img src="close.png" height="20" width="20" alt="close" /></a>
...
<script>
    ...
</script>
</body>



function showbox() {
  document.getElementById("infobox").setAttribute("class", "visible");
}
function hidebox() {
  document.getElementById("infobox").setAttribute("class", "");
  return false;
}

document.getElementById('infoboxclose').onclick = hidebox;
setTimeout(showbox, 500);
5

Many thanks guys! I have added

document.getElementById('infobox').setAttribute('style', 'display:none');

to my hidebox() function to avoid the cursor changing when it goes over the hidden box and anchor. I’m not sure if it’s the best way to do it…

6

It’s much better to use cursor:default to achieve what you’re wanting with the cursor.


#infobox {
    ...
    cursor: default;
}

It’s not a good idea for scripting to replace the entire classname of an element either. Here are some functions that let you add and/or remove a certain name from the class instead.

For example:


addClass(document.getElementById('infobox'), 'visible');
7

Thanks again, Paul. The cursor:default works fine and I can clearly see it’s a better way to do the job.

However, replacing

document.getElementById('infobox').setAttribute('class', 'visible');

with

addClass(document.getElementById('infobox'), 'visible');

in my showbox() function doesn’t seem to work - even if I add class=“” to the <div>

8

Actually, the cursor:default doesn’t work. The problem occurs if there is something behind the box. I have uploaded my page to http://gandalf458.co.uk/infobox3.html so you can see. Thanks G :slight_smile:

9

Ah - I think addClass is a jquery command? I have found

document.getElementById('infobox').classList.add('visible');

which seems to do the job…

10

You will be wanting the hasClass/addClass/removeClass functions from http://snipplr.com/view/67176/ for that to work.

11

Ah - thanks