How to get the width in my Div

**jemz** · Oct 22, 2012 02:19

Hi, how can i get the value of my div width with an id "zoomout'

i tried offsetwidth but nothing happened.

Code:

<!DOCTYPE html>

<html>
  
  <head>
    <meta charset="utf-8"/>
	
	<style type="text/css">
	  .rembull ul{
	    list-style: none;
	  }
	 
	  ul img{
	    width: 80px;
	  }
	  
	  #bodycontainer{
	    background: #555555;
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid blue;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0.7;
	    display: none;
	  }
	 
	  
	  #zoomout{
	  
	    background: yellow;
	    position: relative;
		left:  300px;
		bottom: 300px;
		width: 10em;
		height: 250px;
		display: none;
		z-index: 100;
		-webkit-box-shadow: -1px 10px 5px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    -1px 10px 5px rgba(50, 50, 50, 0.75);
		box-shadow:         -1px 10px 5px rgba(50, 50, 50, 0.75); 
		
	  }
	  
		
	
	  #pic{
	    
	     
	  }
	
	</style>
	
  </head>
  
   <body>
   
	    <div class="rembull">
		   <ul id="pic">
			   <li><img src="image/pic-1.jpg"/></li>
			   <li><img src="image/pic-2.jpg"/></li>
			   <li><img src="image/pic-3.jpg"/></li>
			   <li><img src="image/pic-4.jpg"/></li>
		   </ul>
		<div>
    
		<div id="bodycontainer"> 
			
			
	    </div>
		
			<div id="zoomout">
				
			</div>
	
	 
	 <script>
	 
		 var pic, items,zoom;
	     var bodycont;
		 pic = document.getElementById("pic");
		 items = pic.getElementsByTagName("li");
		 console.log(items);
	     console.log(document.getElementById("pic"));
		
	     var i=0;
		 var itemslen,you;
		 
			
		
		pic.addEventListener("click",function(e){
			 
			 if(e.target.tagName === "IMG")
			    {
				  bodycont =  document.getElementById("bodycontainer"); 
				  zoom  =  document.getElementById("zoomout"); 
				  
				  bodycont.style.display="block";
				  zoom.style.display="block";
				
				  var wid = zoom.offsetwidth;
				  alert(wid);
				  
				  var img = document.createElement("img");
				  img.src = e.target.src;
			      zoom.appendChild(img);
				  
				}
		});
	
			
	   

	 </script>
	 
   </body>
</html>

**Pullo** · Oct 22, 2012 02:49

Hi,

If you don't mind using jQuery, you can use its width method, which gets the current computed width for the first element in the set of matched elements.
For example: $("#zoomout").width();

**vwphillips** · Oct 22, 2012 03:00

you cannot measure the offsetWidth of an element with a display of 'none'(effectively removed from the page)

**Pullo** · Oct 22, 2012 03:01

Oops, missed that entirely

**jemz** · Oct 22, 2012 03:14

But i want to try to code in javascript,can you help me on this how to do this in javascript?is this possible to do?

**jemz** · Oct 22, 2012 03:15

Originally Posted by vwphillips

you cannot measure the offsetWidth of an element with a display of 'none'(effectively removed from the page)

But how can do this in javascript,how can i get the width value of my div?Thank you in advance.

**Pullo** · Oct 22, 2012 03:35

As vwphillips says, it is rather tricky to measure the width of an element with a display of 'none'.
However, tricky is not impossible.
Here's a discussion of how to do this: http://stackoverflow.com/questions/1...e-display-none

I know that you don't want to use jQuery, but maybe the ideas put forward here (adding a couple of CSS properties to make the browser think the element is visible, when it isn't) can be translated into plain JavaScript.

**vwphillips** · Oct 22, 2012 05:28

Code:

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8"/>

	<style type="text/css">
	  .rembull ul{
	    list-style: none;
	  }

	  ul img{
	    width: 80px;
	  }

	  #bodycontainer{
	    background: #555555;
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid blue;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0.7;
	    display: none;
	  }


	  #zoomout{

	    background: yellow;
	    position: relative;
		left:  300px;
		bottom: 300px;
		width: 10em;
		height: 250px;
        display:none;
		z-index: 100;
		-webkit-box-shadow: -1px 10px 5px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    -1px 10px 5px rgba(50, 50, 50, 0.75);
		box-shadow:         -1px 10px 5px rgba(50, 50, 50, 0.75);

	  }



	  #pic{


	  }

	</style>

  </head>

   <body>

	    <div class="rembull">
		   <ul id="pic">
			   <li><img src="image/pic-1.jpg"/></li>
			   <li><img src="image/pic-2.jpg"/></li>
			   <li><img src="image/pic-3.jpg"/></li>
			   <li><img src="image/pic-4.jpg"/></li>
		   </ul>
		<div>

		<div id="bodycontainer">


	    </div>

			<div id="zoomout">

			</div>


	 <script>

function style(o,p){
  if (o.currentStyle){
   return o.currentStyle[p.replace(/-/g,'')];
  }
  return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
 }

 var obj=document.getElementById('zoomout');
 var d=style(obj,'display');
 obj.style.display='block';
 var w=obj.offsetWidth;
 obj.style.display=d;
 alert(w);


	 </script>

   </body>
</html>

**jemz** · Oct 22, 2012 06:10

Originally Posted by vwphillips

Code:

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8"/>

	<style type="text/css">
	  .rembull ul{
	    list-style: none;
	  }

	  ul img{
	    width: 80px;
	  }

	  #bodycontainer{
	    background: #555555;
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid blue;
		top: 0;
		left: 0;
		z-index: 10;
		opacity: 0.7;
	    display: none;
	  }


	  #zoomout{

	    background: yellow;
	    position: relative;
		left:  300px;
		bottom: 300px;
		width: 10em;
		height: 250px;
        display:none;
		z-index: 100;
		-webkit-box-shadow: -1px 10px 5px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    -1px 10px 5px rgba(50, 50, 50, 0.75);
		box-shadow:         -1px 10px 5px rgba(50, 50, 50, 0.75);

	  }



	  #pic{


	  }

	</style>

  </head>

   <body>

	    <div class="rembull">
		   <ul id="pic">
			   <li><img src="image/pic-1.jpg"/></li>
			   <li><img src="image/pic-2.jpg"/></li>
			   <li><img src="image/pic-3.jpg"/></li>
			   <li><img src="image/pic-4.jpg"/></li>
		   </ul>
		<div>

		<div id="bodycontainer">


	    </div>

			<div id="zoomout">

			</div>


	 <script>

function style(o,p){
  if (o.currentStyle){
   return o.currentStyle[p.replace(/-/g,'')];
  }
  return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
 }

 var obj=document.getElementById('zoomout');
 var d=style(obj,'display');
 obj.style.display='block';
 var w=obj.offsetWidth;
 obj.style.display=d;
 alert(w);


	 </script>

   </body>
</html>

Hi, vwphillips

Can i ask some favor?can you please put some comments in the code so that it can help me easily to understand.and also for the other readers this will help them also.Thank you in advance.more power to you always.

**Pullo** · Oct 23, 2012 03:51

Originally Posted by jemz

can you please put some comments in the code so that it can help me easily to understand.and also for the other readers this will help them also.Thank you in advance.more power to you always.

Hi there,
As Vic didn't reply yet, I'll have a go at this.
I always find commenting my code well tricky, so if anyone has any suggestions for improvements, or if anything I wrote is plain wrong, please chime in.
Other than that, I hope this helps you:

Code JavaScript:

// This function accepts two arguments: 'o' an HTML element object and 'p' a string which represents a css property.
// It returns the value of the css property 'p' for element 'o'
// E.g. if 'o' is 'div#zoomout' and 'p' is 'display', it will return the current value of the display property for div#zoomout
//
function style(o,p){
  if (o.currentStyle){
    return o.currentStyle[p.replace(/-/g,'')];
  }
  return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
}
 
// Get a reference to the element whose width we want to know
var obj=document.getElementById('zoomout');
 
// Call the function 'style' to get a value for the current display property of div#zoomout.
var d=style(obj,'display');
 
// Set div#zoomout's display to block
obj.style.display='block';
 
// Now we can get its width
var w=obj.offsetWidth;
 
// Set div#zoomout's display back to whatever it was originally
obj.style.display=d;
alert(w);

**paul_wilkins** · Oct 23, 2012 18:26

Originally Posted by Pullo

I always find commenting my code well tricky, so if anyone has any suggestions for improvements, or if anything I wrote is plain wrong, please chime in.

I'll try to.

Code:

// This function accepts two arguments: 'o' an HTML element object and 'p' a string which represents a css property.

Using a variable of 'o' for an element can be confusing, and likewise 'p' for the css property. You don't need that comment when you use appropriately standard function variables that inform the person reading the code from the name of the variables themself.

For example:

Code javascript:

function style(el, prop) {

Code:

// It returns the value of the css property 'p' for element 'o'

Giving the function a more expressive name helps to remove the need for the above comment, such as getComputedStyle, or getCssValue

Code javascript:

function getCssValue(el, prop) {

Code:

// E.g. if 'o' is 'div#zoomout' and 'p' is 'display', it will return the current value of the display property for div#zoomout

Using a named variable to contain the value removed the need for the above comment

Code javascript:

var cssValue;
 
if (...) {
    cssValue = ...;
} else {
    cssValue = ...;
}
 
return cssValue;

Code:

// Get a reference to the element whose width we want to know

The above comment repeats in English what the code is already saying.

Do not write these sorts of comments. They are a waste and don't help to serve any explanatory purpose.

Code:

// add 1 to i
i++;

How could the code be improved so that the code is easily understandable, and comments don't end up serving a useless purpose?

Code javascript:

// The following code is an example of how to get the width of an element when the element may be potentially hidden.
 
function getCssValue(el, prop) {
    var value = '';
 
    if (el.currentStyle) {
        value = el.currentStyle[prop.replace(/-/g, '')];
    } else {
        value = document.defaultView.getComputedStyle(el, null).getPropertyValue(prop.toLowerCase());
    }
 
    return value;
}
 
function getElementWidth(el) {
    // The width of an element cannot be obtained from a potentially hidden element.
    // We can get the width though by setting its display to block, after which we return its display back to what it initially had.
 
    var originalDisplay = getCssValue(el, 'display'),
        width;
 
    el.style.display = 'block';
    width = el.offsetWidth;
    el.style.display = originalDisplay;
 
    return width;
}
 
var el = document.getElementById('zoomout'),
    width = getElementWidth(el);
 
alert(width);

Try to use comments to explain why things are happening. The use of good variable names go a long way to preventing the need for other wasteful comments. Commonly comments are used to explain about bad code. In such cases, fixing the code to remove the need for such comments and the programmers attention is no longer wasted by such comments, so that he can focus on the code instead.

**jemz** · Oct 23, 2012 23:14

Originally Posted by Pullo

Hi there,
As Vic didn't reply yet, I'll have a go at this.
I always find commenting my code well tricky, so if anyone has any suggestions for improvements, or if anything I wrote is plain wrong, please chime in.
Other than that, I hope this helps you:

Code JavaScript:

// This function accepts two arguments: 'o' an HTML element object and 'p' a string which represents a css property.
// It returns the value of the css property 'p' for element 'o'
// E.g. if 'o' is 'div#zoomout' and 'p' is 'display', it will return the current value of the display property for div#zoomout
//
function style(o,p){
  if (o.currentStyle){
    return o.currentStyle[p.replace(/-/g,'')];
  }
  return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
}
 
// Get a reference to the element whose width we want to know
var obj=document.getElementById('zoomout');
 
// Call the function 'style' to get a value for the current display property of div#zoomout.
var d=style(obj,'display');
 
// Set div#zoomout's display to block
obj.style.display='block';
 
// Now we can get its width
var w=obj.offsetWidth;
 
// Set div#zoomout's display back to whatever it was originally
obj.style.display=d;
alert(w);

Hi Pullo, Thank you for commenting the codes...it helps me more power to you.

**jemz** · Oct 23, 2012 23:19

Originally Posted by paul_wilkins

I'll try to.

Code:

// This function accepts two arguments: 'o' an HTML element object and 'p' a string which represents a css property.

Using a variable of 'o' for an element can be confusing, and likewise 'p' for the css property. You don't need that comment when you use appropriately standard function variables that inform the person reading the code from the name of the variables themself.

For example:

Code javascript:

function style(el, prop) {

Code:

// It returns the value of the css property 'p' for element 'o'

Giving the function a more expressive name helps to remove the need for the above comment, such as getComputedStyle, or getCssValue

Code javascript:

function getCssValue(el, prop) {

Code:

// E.g. if 'o' is 'div#zoomout' and 'p' is 'display', it will return the current value of the display property for div#zoomout

Using a named variable to contain the value removed the need for the above comment

Code javascript:

var cssValue;
 
if (...) {
    cssValue = ...;
} else {
    cssValue = ...;
}
 
return cssValue;

Code:

// Get a reference to the element whose width we want to know

The above comment repeats in English what the code is already saying.

Do not write these sorts of comments. They are a waste and don't help to serve any explanatory purpose.

Code:

// add 1 to i
i++;

How could the code be improved so that the code is easily understandable, and comments don't end up serving a useless purpose?

Code javascript:

// The following code is an example of how to get the width of an element when the element may be potentially hidden.
 
function getCssValue(el, prop) {
    var value = '';
 
    if (el.currentStyle) {
        value = el.currentStyle[prop.replace(/-/g, '')];
    } else {
        value = document.defaultView.getComputedStyle(el, null).getPropertyValue(prop.toLowerCase());
    }
 
    return value;
}
 
function getElementWidth(el) {
    // The width of an element cannot be obtained from a potentially hidden element.
    // We can get the width though by setting its display to block, after which we return its display back to what it initially had.
 
    var originalDisplay = getCssValue(el, 'display'),
        width;
 
    el.style.display = 'block';
    width = el.offsetWidth;
    el.style.display = originalDisplay;
 
    return width;
}
 
var el = document.getElementById('zoomout'),
    width = getElementWidth(el);
 
alert(width);

Try to use comments to explain why things are happening. The use of good variable names go a long way to preventing the need for other wasteful comments. Commonly comments are used to explain about bad code. In such cases, fixing the code to remove the need for such comments and the programmers attention is no longer wasted by such comments, so that he can focus on the code instead.

Hi paul_wilkins, thank you also for this explanation...it helps me too..

**jemz** · Oct 23, 2012 23:28

Hi paul_wilkins, I forgot to ask on this

value = el.currentStyle[prop.replace(/-/g, '')];

what does the prop.replace(/-/g, '') do?

Thank you in advance.

**paul_wilkins** · Oct 23, 2012 23:31

Originally Posted by jemz

Hi paul_wilkins, I forgot to ask on this

what does the prop.replace(/-/g, '') do?

Thank you in advance.

It replaces hyphens with nothing, which results in removing the hyphens.

**Pullo** · Oct 23, 2012 23:34

Thank you Paul.
As ever, I learned a lot!

**jemz** · Oct 23, 2012 23:34

Originally Posted by paul_wilkins

It replaces hyphens with nothing, which results in removing the hyphens.

Okay,..is this a kind of regex?

**paul_wilkins** · Oct 24, 2012 00:04

Originally Posted by jemz

Okay,..is this a kind of regex?

A regular expression is used to get a text from a strin of text, based on different matching criteria.
The replace method let's you indicate what you want to be replaced using text or a regex.

So it could have instead been done as:

Code javascript:

... = prop.replace('-' , '', 'g');

It seems though that it's easier to understand what the regular expression version is intending to do, than when not using it.

User Tag List

Thread: How to get the width in my Div

Thread Tools

Display

How to get the width in my Div

Bookmarks

Bookmarks

Posting Permissions