How to create a toggle window using DIV and Javascript?

2009-07-13T22:16:00.000-07:00

Creating a toggle window on top of an HTML page is fairly easy. All you need is familiarization with basic html tag, basic javascript code and basic cascading style sheet (CSS).

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.

How to create a pop-up div in asp.net using Javascript

2009-07-10T03:14:00.000-07:00

During the times that I had no knowledge at all in Javascript, I always wonder how can I come up with a message box that allows me to display an error or nofication to the user. I even attemped to forcefully display a message box the same way that I do in Windows applications but it only worked in VB.net and not in C#. Furthermore the result of invoking a message box in ASP.net through VB.net didn't work as expected because the message box doesn't show on top of the page but as separate item on the taskbar (minimized) in which you have to click first to see it fully.

After playing around with a simple Javascript code I am now presenting you a simple ASP.net application that allows you to display a DIV on the top of your page that you can use in whichever way you want it. You can add controls to it as you usually do wether client side controls or server side controls and let them function in the way you want them.
So what are things that you need in order to make this happen?
First, you have to have a Javascript functions that control the visibility and properties of your DIV. One function for showing the DIV and another one for hiding it.

Copy and paste this code inside the tag of your page: view the code here

Create a CSS for you DIV:

#popup_content
{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
}

Link you CSS to your page by dragging and dropping the css file from your solution explorer to the code in between the opening and closing "head" tags.

Call the function on your Onclick or Onmouseover event of you HTML control and see the result of you work.

Thank you very much! Have fun!

Ted Endolos Borlongan Jr

2009-06-26T00:42:00.001-07:00

Ted Endolos Borlongan Jr.

Contact Information
Email Address: jhun_thed@yahoo.com
Contact No(s): +63 9228370185
Summary
I am a Microsoft Certified Technology Specialist – DA professional. I am a Senior Development Engineer in my current company. Dedicated in developing software applications in C# and Visual Basic.NET. I can work independently and I am also a good and joyful team player that extremely capable to discipline myself to meet my deadlines, I have a positive mental attitude towards everything and I believe that commitment means taking everything as a challenge to make things happen. I keep an encouraging attitude towards my responsibilities and liabilities and I can work even under an all-embracing pressure.
see details...

.NET Developer

How to create a toggle window using DIV and Javascript?

How to create a pop-up div in asp.net using Javascript

Ted Endolos Borlongan Jr