Code Simplified – Viral Sarvaiya

Code Simplified – Viral Sarvaiya, Web Developer Friends, dot net Developer, Sql Server Developer

Show Div tag in middle of the page with javascript

Posted by Viral Sarvaiya on October 27, 2009

take a element of Div

<div id="contentmsg" style="position: absolute; right:25%; width: 100px; height:100px;visibility: hidden;">
<img src="images/loading.gif" width="50px" height="50px" />

suppose we have a dropdown and according to onchange() event this div is visible or hide,

<asp:DropDownList ID="ddlparavalue" runat="server"></asp:DropDownList>

in the server side bind the dropdownlist dynamically and add the attribultes as below

ddlparavalue.Attributes.Add("onchange", "javascript:void HideOrVisibleDDL();")

in the head of the html section write the following code

<script language="javascript" type="text/javascript">
function HideOrVisibleDDL() {

var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
var windowWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
var IpopTop = ((windowHeight - document.getElementById("contentmsg").offsetHeight) / 2);

document.getElementById("contentmsg") = IpopTop + document.body.scrollTop;
document.getElementById("contentmsg").style.left = (document.body.clientWidth / 2) - 50;

document.getElementById("contentmsg").style.visibility = "visible";


in some case it is not working just becouse of the DOCType tag so please remove the DOCTYPE tag as like below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

so remove this tag.

enjoy coding….


3 Responses to “Show Div tag in middle of the page with javascript”

  1. TSwain said

    There is obviously a lot to learn. There are some good points here.

  2. vanessa said

    What if we cant remove the doctype?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: