A DIV is a very powerful HTML object that can be used for many purposes. Think of a DIV as a rectangle that can appear on a web page, be positioned where you wish, and hover over other content on the page. A DIV can be referred to by it's name or ID. It can have a particular location, size, border, and color. It can be made to appear and disappear, change size, and move to a new location on the fly. You can create a single DIV on a page and use this same DIV as a popup box appearing where needed and changing its contents each time it appears. Using a DIV as a popup window to provide feedback within the same web page can be more elegant than putting that feedback in a separate popup window or in a textbox. There are two steps to using a DIV as a popup box. First, you must create the DIV on your page (it can be invisible to start). Second, you need a script function to make the DIV appear & disappear and change it's contents and location. Click on the button to answer the questions. Question 1: Who is buried in Grant's tomb? Abraham Lincoln. Ulysses S. Grant. Britney Spears. Question 2: What is the color of Henri V's white horse? Black. White. Blue
A DIV is a very powerful HTML object that can be used for many purposes. Think of a DIV as a rectangle that can appear on a web page, be positioned where you wish, and hover over other content on the page. A DIV can be referred to by it's name or ID. It can have a particular location, size, border, and color. It can be made to appear and disappear, change size, and move to a new location on the fly. You can create a single DIV on a page and use this same DIV as a popup box appearing where needed and changing its contents each time it appears. Using a DIV as a popup window to provide feedback within the same web page can be more elegant than putting that feedback in a separate popup window or in a textbox.
There are two steps to using a DIV as a popup box. First, you must create the DIV on your page (it can be invisible to start). Second, you need a script function to make the DIV appear & disappear and change it's contents and location.
Click on the button to answer the questions.
Question 1: Who is buried in Grant's tomb? Abraham Lincoln. Ulysses S. Grant. Britney Spears.
Question 2: What is the color of Henri V's white horse? Black. White. Blue
This is the code for a DIV named PopUp that is a box which can appear and disappear. It includes a SPAN called PopUpText that will receive the contents that will be shown in the PopUp box. This DIV is designed to automatically disappear when the user mouses over it (preventing a student from copying and pasting an answer from the popup box). You can copy and paste this DIV into the BODY (not the HEAD) of your web page in CODE view. <DIV id='PopUp' style='display: none; position: absolute; left: 100px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(200,100,100); text-align: justify; font-size: 12px; width: 135px;' onmouseover="document.getElementById('PopUp').style.display = 'none' "> <SPAN id='PopUpText'>TEXT</SPAN> </DIV> How does it work? The characteristics or properties of the DIV are controlled by its STYLE. These include display, left, top, border, background-color, font-size, width, and others. STYLE='display:block;' or STYLE='display:none;' can make the DIV appear and disappear. Note that the various properties in the DIV style are all between quotation marks, single or double. In our example, the width of the DIV is 135 pixels (135px), but the height will automatically adjust to whatever it contains. We can later make changes to the DIV properties by referring to the DIV by name or ID; this DIV is called 'PopUp'. In order to change the contents of the DIV for appropriate feedback for each answer, we need a named element that our JavaScript code can refer to. We are using a SPAN tag: <SPAN id='PopUpText'>TEXT</SPAN> The SPAN doesn't do anything. It just allows us to easily apply and change properties of whatever is within the SPAN. We refer to the SPAN by name or ID; this SPAN is called 'PopUpText'. When we created the DIV, the SPAN contained the word "TEXT". Later, we will be able to change the contents of the SPAN using a line of JavaScript, just as we can change the contents of a textbox or other object. document.getElementById('PopUpText').innerHTML = "Here is the new text that will appear in place of the word TEXT in our SPAN"; Don't forget that in any text, you may need to use an escape character to include quotes within quotes: \' or \" (e.g. 'I can\'t have quotes within quotes.'). Finally, we used a bit of JavaScript in the DIV definition to make it disappear automatically whenever the mouse touches it. In this case we identify the DIV element by its ID 'PopUp' and change its style display property to 'none' so that it becomes invisible. onmouseover="document.getElementById('PopUp').style.display = 'none' "
This is the code for a DIV named PopUp that is a box which can appear and disappear. It includes a SPAN called PopUpText that will receive the contents that will be shown in the PopUp box. This DIV is designed to automatically disappear when the user mouses over it (preventing a student from copying and pasting an answer from the popup box). You can copy and paste this DIV into the BODY (not the HEAD) of your web page in CODE view.
<DIV id='PopUp' style='display: none; position: absolute; left: 100px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(200,100,100); text-align: justify; font-size: 12px; width: 135px;' onmouseover="document.getElementById('PopUp').style.display = 'none' "> <SPAN id='PopUpText'>TEXT</SPAN> </DIV>
How does it work?
The characteristics or properties of the DIV are controlled by its STYLE. These include display, left, top, border, background-color, font-size, width, and others. STYLE='display:block;' or STYLE='display:none;' can make the DIV appear and disappear. Note that the various properties in the DIV style are all between quotation marks, single or double. In our example, the width of the DIV is 135 pixels (135px), but the height will automatically adjust to whatever it contains. We can later make changes to the DIV properties by referring to the DIV by name or ID; this DIV is called 'PopUp'. In order to change the contents of the DIV for appropriate feedback for each answer, we need a named element that our JavaScript code can refer to. We are using a SPAN tag: <SPAN id='PopUpText'>TEXT</SPAN> The SPAN doesn't do anything. It just allows us to easily apply and change properties of whatever is within the SPAN. We refer to the SPAN by name or ID; this SPAN is called 'PopUpText'. When we created the DIV, the SPAN contained the word "TEXT". Later, we will be able to change the contents of the SPAN using a line of JavaScript, just as we can change the contents of a textbox or other object. document.getElementById('PopUpText').innerHTML = "Here is the new text that will appear in place of the word TEXT in our SPAN"; Don't forget that in any text, you may need to use an escape character to include quotes within quotes: \' or \" (e.g. 'I can\'t have quotes within quotes.'). Finally, we used a bit of JavaScript in the DIV definition to make it disappear automatically whenever the mouse touches it. In this case we identify the DIV element by its ID 'PopUp' and change its style display property to 'none' so that it becomes invisible. onmouseover="document.getElementById('PopUp').style.display = 'none' "
The characteristics or properties of the DIV are controlled by its STYLE. These include display, left, top, border, background-color, font-size, width, and others.
STYLE='display:block;' or STYLE='display:none;' can make the DIV appear and disappear. Note that the various properties in the DIV style are all between quotation marks, single or double. In our example, the width of the DIV is 135 pixels (135px), but the height will automatically adjust to whatever it contains. We can later make changes to the DIV properties by referring to the DIV by name or ID; this DIV is called 'PopUp'.
In order to change the contents of the DIV for appropriate feedback for each answer, we need a named element that our JavaScript code can refer to. We are using a SPAN tag:
<SPAN id='PopUpText'>TEXT</SPAN>
The SPAN doesn't do anything. It just allows us to easily apply and change properties of whatever is within the SPAN. We refer to the SPAN by name or ID; this SPAN is called 'PopUpText'. When we created the DIV, the SPAN contained the word "TEXT". Later, we will be able to change the contents of the SPAN using a line of JavaScript, just as we can change the contents of a textbox or other object.
document.getElementById('PopUpText').innerHTML = "Here is the new text that will appear in place of the word TEXT in our SPAN";
Don't forget that in any text, you may need to use an escape character to include quotes within quotes: \' or \" (e.g. 'I can\'t have quotes within quotes.').
Finally, we used a bit of JavaScript in the DIV definition to make it disappear automatically whenever the mouse touches it. In this case we identify the DIV element by its ID 'PopUp' and change its style display property to 'none' so that it becomes invisible.
onmouseover="document.getElementById('PopUp').style.display = 'none' "
As we saw above, we can use JavaScript to change the properties of a DIV or SPAN element. When we need more than a single line of script to do something more complex than simply changing one property, such as showing or hiding a DIV, altering its location or color, or changing its contents, we can put several lines of code into a function placed in a SCRIPT in the page header. This function can then be used to make the JavaScript run and also to pass information to the code, such as the new text to put in the SPAN. This is a SCRIPT called showPos which will make the PopUp DIV appear near the current cursor location. This is useful if you want the popup to be located where you just clicked. You can copy and paste this SCRIPT into the HEAD (not the BODY) of your web page in CODE view. <script> function showPos(event, text) { var el, x, y; el = document.getElementById('PopUp'); if (window.event) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + + document.body.scrollTop; } else { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } x -= 2; y -= 2; y = y+15 el.style.left = x + "px"; el.style.top = y + "px"; el.style.display = "block"; document.getElementById('PopUpText').innerHTML = text; } </script> The showPos function needs two parameters (pieces of information). First, the event carries information about where something happened, such as the location of the mouse click or mouseover that was used to run the function. The text is whatever new content will be displayed in the SPAN and appear when the DIV popup becomes visible. Note that the DIV name 'PopUp' and the SPAN name 'PopUpText' in the function have to match the ID used when you created the DIV in your page. We won't explain the details of the function this isn't a programming course), but most of the code is just used to determine where to place the DIV. Calculating cursor positions and page locations in a web page can be a bit complicated. If you are using the same script in a number of pages, you could alternately put the script in a showPos.js file instead of in the page header.
As we saw above, we can use JavaScript to change the properties of a DIV or SPAN element. When we need more than a single line of script to do something more complex than simply changing one property, such as showing or hiding a DIV, altering its location or color, or changing its contents, we can put several lines of code into a function placed in a SCRIPT in the page header. This function can then be used to make the JavaScript run and also to pass information to the code, such as the new text to put in the SPAN.
This is a SCRIPT called showPos which will make the PopUp DIV appear near the current cursor location. This is useful if you want the popup to be located where you just clicked.
You can copy and paste this SCRIPT into the HEAD (not the BODY) of your web page in CODE view.
<script> function showPos(event, text) { var el, x, y; el = document.getElementById('PopUp'); if (window.event) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + + document.body.scrollTop; } else { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } x -= 2; y -= 2; y = y+15 el.style.left = x + "px"; el.style.top = y + "px"; el.style.display = "block"; document.getElementById('PopUpText').innerHTML = text; } </script>
<script> function showPos(event, text) { var el, x, y;
el = document.getElementById('PopUp'); if (window.event) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + + document.body.scrollTop; } else { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } x -= 2; y -= 2; y = y+15 el.style.left = x + "px"; el.style.top = y + "px"; el.style.display = "block"; document.getElementById('PopUpText').innerHTML = text; } </script>
The showPos function needs two parameters (pieces of information). First, the event carries information about where something happened, such as the location of the mouse click or mouseover that was used to run the function. The text is whatever new content will be displayed in the SPAN and appear when the DIV popup becomes visible. Note that the DIV name 'PopUp' and the SPAN name 'PopUpText' in the function have to match the ID used when you created the DIV in your page. We won't explain the details of the function this isn't a programming course), but most of the code is just used to determine where to place the DIV. Calculating cursor positions and page locations in a web page can be a bit complicated. If you are using the same script in a number of pages, you could alternately put the script in a showPos.js file instead of in the page header.
Activating DIV with Buttons
To make the PopUp appear, use this JavaScript in a button, link or other clickable element to run the showPos function: onclick="showPos(event, 'Here is the answer.')" or onmouseover="showPos(event, 'This is what the user will see in the DIV.')" For example, one of the buttons in our sample questions above was: <input name="ans1b" type="button" value="b" onclick="showPos(event,'That\'s right!')" /> Note that you need to be careful to follow the usage of double and single quotes.
To make the PopUp appear, use this JavaScript in a button, link or other clickable element to run the showPos function: onclick="showPos(event, 'Here is the answer.')" or onmouseover="showPos(event, 'This is what the user will see in the DIV.')" For example, one of the buttons in our sample questions above was:
<input name="ans1b" type="button" value="b" onclick="showPos(event,'That\'s right!')" />
Note that you need to be careful to follow the usage of double and single quotes.
Activating DIV with links
You could also make the popup appear when you mouseover a link. In the example below, Grant is a normal link and Lincoln is a link whose appearance has been changed. Is the answer Grant or Lincoln ? <a href="javascript:void(null)" onmouseover="showPos(event, 'Grant is the answer.');">Grant</a> <a href="javascript:void(null)" style="color: black; text-decoration: none;" onmouseover="showPos(event, 'Lincoln is the wrong president.');">Lincoln</a>
You could also make the popup appear when you mouseover a link. In the example below, Grant is a normal link and Lincoln is a link whose appearance has been changed.
Is the answer Grant or Lincoln ?
<a href="javascript:void(null)" onmouseover="showPos(event, 'Grant is the answer.');">Grant</a>
<a href="javascript:void(null)" style="color: black; text-decoration: none;" onmouseover="showPos(event, 'Lincoln is the wrong president.');">Lincoln</a>
Images in a DIV
It is possible to use your popup DIV to display an image by passing and entire HTML image tag such as <IMG src="photo.jpg">. Note that we are not including the size of the image in the code so that the image will automatically adjust depending on the actual image size. Annie ate a millefeuille. The text in a DIV or that gets passed to a DIV can be anything you might put in a web page, including html code, so we could use the same DIV to make images popup. <a href="javascript:void(null)" onmouseover='showPos(event, "<img src=\"glossing-popup-mille-small.jpg\">")' >millefeuille</a> Multiple levels of quotes can make the syntax of an image tag passed in a function difficult to figure out. Be sure to follow the model carefully.
It is possible to use your popup DIV to display an image by passing and entire HTML image tag such as <IMG src="photo.jpg">. Note that we are not including the size of the image in the code so that the image will automatically adjust depending on the actual image size.
Annie ate a millefeuille.
The text in a DIV or that gets passed to a DIV can be anything you might put in a web page, including html code, so we could use the same DIV to make images popup.
<a href="javascript:void(null)" onmouseover='showPos(event, "<img src=\"glossing-popup-mille-small.jpg\">")' >millefeuille</a>
Multiple levels of quotes can make the syntax of an image tag passed in a function difficult to figure out. Be sure to follow the model carefully.
A better way to show images
A simpler approach to changing the image in a DIV is to use a DIV that is designed specifically for images. Instead of using a text string to change the html code for the image, we can directly change the image src property to switch to a different image file. We have given the <IMG> tag an ID so that we can refer to it by name and use a JavaScript command to change the image src (where "text" is the name of the image): document.getElementById('PopUpImageName').src = text; <div id='PopUpImage' style='display: none; position: absolute; left: 100px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(100,100,100); text-align: justify; font-size: 12px; width: 150px;' onmouseover="document.getElementById('PopUpImage').style.display = 'none' "> <IMG id='PopUpImageName' SRC="" /> Annie ate a millefeuille. A new function is needed to show this DIV. Or one could write a more general function that would also have the DIV name as an argument in addition to the contents to be shown.
A simpler approach to changing the image in a DIV is to use a DIV that is designed specifically for images. Instead of using a text string to change the html code for the image, we can directly change the image src property to switch to a different image file. We have given the <IMG> tag an ID so that we can refer to it by name and use a JavaScript command to change the image src (where "text" is the name of the image):
document.getElementById('PopUpImageName').src = text;
A new function is needed to show this DIV. Or one could write a more general function that would also have the DIV name as an argument in addition to the contents to be shown.
DIV and SPAN elements with JavaScript can be very powerful tools for making web pages interactive. This lesson only scratches the surface.
Return to Syllabus