So lets begin with familiarizing your self with a DIV tag. A DIV(division) tag inside an html is a generic container for blocks of content, such as images and paragraphs of text and can be uniquely identified by an 'id' to hook into a CSS style sheet.
For example:
As I stated in the definition of the DIV, it is a generic container for blocks of content therefore you can add objects inside a DIV to have a mechanism for grouping your objects into one and controlling their behavior altogether, not at all times but in certain cases such as when setting the visibility property of a DIV as "hidden" the controls contained inside that DIV will also be hidden but when you change the "width" of the DIV the controls that are contained to it will retain their own width settings. The following example shows how to add a button inside a DIV:
So what is point of giving an Id to a div? In my example I declared "foodDiv" as the Id. The essence of an Id is to uniquely identify a DIV from other DIVs. So it gives you the benefit of calling or manipulating the behavior of a specific DIV such as when you want to create a CSS or you want to change the property of that DIV using Javascript. The following example defines a CSS for a particular DIV:
#foodDiv
{
width: 361px;;
height: 39px;
text-align: left;
background-color: #9999ff;
}
Here you are assigning the properties of your "foodDiv" DIV through a CSS. Notice that without a DIV's identity you can never declare properties specific to that DIV. With that, you might want to ask "Is it possible to declare a CSS without the Id of the DIV?" The answer YES but every change in a property will reflect in every DIV that uses it.
A Cascading Style Sheet can be embedded within an HTML page or as a separate file.
The following code shows you the entire code for declaration of a DIV with a CSS.
Click here to view the code. Click here to view the output.
Just by observing the code you will easily understand how DIV Id and CSS works side by side. Note that the same concept applies to other controls as well.
What about placing another DIV within a DIV? Yes that is possible. In fact that is what this blog is designed for.
To create an object that looks like a message box, you can create a DIV and place another DIV inside it. The following example shows that another DIV is place to wrap our "foodDiv".
It is worth knowing that in a nested DIV the most inner DIV is the topmost DIV to be displayed on the page. In this case since the "foodDiv" is the innermost DIV tag it will be displayed as the topmost DIV on the page. If you try to reverse the sequence what you will see is just a blank white box because the "foodDiv" (with violet shade ) will be under the "MainDiv".
Click here to view the code and here to view the output.
Finally, after creating a message box in a form of nested DIVs you have to define a Javascript for hiding and showing the script on the page. Javascript can be defined within the head opening and closing tag
or anywhere else in the code as along as the codes are placed inside the script opening and closing tags.
Hiding the MainDiv
If you have been following this tutorial from the top you now have a Nested div with a button on the top right portion of the div. Now in order to inject a functionality to this button. You have to create a javascript function that will be executed when the button was clicked by the user. Inside the head opening and closing tag
insert the code snippet as shown here .
Code Explanation:
1) Created a script tag and defined the language equals to Javascript to instruct the browser which language to use when reading the script and the type of the script "text/javascript" that is written.
2)Defined a function name to make it callable by any HTML control that supports Events such as onclick,ondblclick,onmouseover,onmousemove,onkeypress,onkeydown,onkeyup,onload etc.
onclick - is triggered when the user click the control
ondblclick - when the user double click a control
onmouseover - when the mouse pointer hover on the object/control.
onkeypress - when a key was pressed
onkeydown - while a key is press down.
onkeyup - when the keyboard key is released (after keydown event)
onload - when the controls or the page is being loaded.
3) Invoke the function "hideMainDiv()" when the button was clicked.
Displaying the MainDiv
1) Add additional button on the page that will be hooked up with the Javascript function for displaying the MainDiv.
2) Add additional Javascript function for unhiding the DIV
3) Bind the newly added button to the newly added Javascript function on the onclick event
View Code here.
Note: The new button is placed outside of the DIVs so that when you click the "Click Me" button the button that will display the MainDiv back will not be hidden together with the MainDiv.
Hiding the MainDiv during the Page Load event
Sometimes you need to hide a div during the page load. In order to do that you just have to call the function you created for hiding the DIV in the body onload event.
View code here.
