Menu
Guys I want to fix a div width and height as 100%. But the problem is that div is inside a wrapper with a fixed width.
I have a button above the div which onclick="" makes the div to change its class with full width and height. i want to position that div to the top-left corner of the window.My code is
<html>
<head>
<title>Javascript Change CSS Class of Div tag</title>
<style type="text/css">
#wrapper
{
width:75%;
height:75%;
margin:0 auto;
}
.minimize {
color : red;
width:500px;
height:200px;
background:#474747;
float:left;
}
.maximize {
color : blue;
width:100%;
height:100%;
float:left;
background:#ccc;
}
</style>
<script language="javascript" type="text/javascript">
function changeCssClass(navlink)
{
if(document.getElementById(navlink).className=='minimize')
{
document.getElementById(navlink).className = 'maximize';
}
else
{
document.getElementById(navlink).className = 'minimize';
}
}
</script>
</head>
<body> <div id="wrapper">
<div id="navlink" class="minimize"><input type="button" value="click here" onclick="changeCssClass('navlink')" /> </div>
</div>
</body>
</html>
But i want to make it to look like this with wrapper
<html>
<head>
<title>Javascript Change CSS Class of Div tag</title>
<style type="text/css">
.minimize {
color : red;
width:500px;
height:200px;
background:#474747;
float:left;
}
.maximize {
color : blue;
width:100%;
height:100%;
float:left;
background:#ccc;
}
</style>
<script language="javascript" type="text/javascript">
function changeCssClass(navlink)
{
if(document.getElementById(navlink).className=='minimize')
{
document.getElementById(navlink).className = 'maximize';
}
else
{
document.getElementById(navlink).className = 'minimize';
}
}
</script>
</head>
<body>
<div id="navlink" class="minimize"><input type="button" value="click here" onclick="changeCssClass('navlink')" /> </div>
</body>
</html>
Will any one help here....
If anyone has any suggestion??
486
This is done by adding the position of the element relative to the viewport with the current scroll position.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
I think this is what you were after, but it was hard to tell because you didn't specify exactly what states should be held for .minimize and .maximize.
Notice that the javascript is substantially different than your original.
Since 'class' is an attribute on DOM elements, it should be accessed using getAttribute and setAttribute. There was a very, very old bug in IE6 that would only let javascript access an element's classes via className, but that is no longer the case.
Additionally, take notice of how I'm handling the class attribute. Since you can specify multiple classes on an element, this code takes that into account. You can safely add more classes without fidgeting with maximize and minimize.
The 2nd thing to look at is the css. Using position:fixed will lock the element into position no matter what the scroll value is. In this example, there are 2 ways to set the div to be full screen. The first is specifying width and height at 100%. However, this is brittle.
Its better to set top, right, bottom, and left to 0. This gives you more control. Also, suppose you wanted a thin margin around the edges. Instead of worrying about mixing top and left with width and height, you can just specify a pixel or percentage value for the 4 properties I've mentioned to get an easy, uniform look.
156
I checked Berker's fiddle and it will fix your problem. Sowmya uses this fiddle, but I have made a few changes, check this out:
Since class is an attribute on DOM elements, it should be accessed using getAttribute and setAttribute. There was a very, very old bug in IE6 that would only let javascript access an element's classes via className, but that is no longer the case.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
