SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post How to get the width in my Div

    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>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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();

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you cannot measure the offsetWidth of an element with a display of 'none'(effectively removed from the page)

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Oops, missed that entirely

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vwphillips View Post
    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.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vwphillips View Post
    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.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    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);

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

  13. #13
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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..

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Thank you Paul.
    As ever, I learned a lot!

  17. #17
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    It replaces hyphens with nothing, which results in removing the hyphens.
    Okay,..is this a kind of regex?

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •