Web Analytics Made Easy -
StatCounter How to calculate the width of a p or pre element to set maxWidth of parent div elemen - CodingForum

Announcement

Collapse
No announcement yet.

How to calculate the width of a p or pre element to set maxWidth of parent div elemen

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to calculate the width of a p or pre element to set maxWidth of parent div elemen

    So I have this html:

    Code:
    <div id="mainMenu"><pre class="norm" id="choice">Choice</pre></div>
    I want to restrict the div with id 'mainMenu' to the effective width of the pre element.

    I do not get any value for pre element when looping through child nodes and testing
    pre element width.

    The issue is that the event sensitive area extends across the entire width of the parent element.

    So, how would I calculate the effective width of the pre element and its contents?
    Thanks for time and attention... and helpful suggestions.

    Code:
    var getElements = function()
                 {
                  var testDiv = document.getElementById('mainMenu')
                  if(typeof'testDiv' != 'undefined' && testDiv.childNodes.length)
                    {
                     testDiv.style.width = 'auto';
                     testDiv.style.height = 'auto';
                     for(var i = 0; i < testDiv.childNodes.length; i++)
                       {
                        if(testDiv.childNodes[i].id == 'choice')
                          {
                           testDiv.childNodes[i].addEventListener('mouseover', function(e){ eventHandler(e)}, false)
                           testDiv.childNodes[i].addEventListener('click', function(e){ eventHandler(e);}, false);
                           testDiv.childNodes[i].addEventListener('mouseout', function(e){  eventHandler(e);}, false)
                           testDiv.childNodes[i].style.cursor = 'pointer';
                           alert(testDiv.childNodes[i].style.width); // ->> blank 
                           testDiv.style.maxWidth = testDiv.childNodes[i].style.width;
                          }
                       }
                    }
                 }

  • #2
    I want to restrict the div with id 'mainMenu' to the effective width of the pre element.
    You might do this simply by adding display:inline-block to the CSS of both, the pre element and the surrounding div. This will adapt width and height to their content.

    Comment


    • #3
      I found an answer

      Code:
      htmlElement.getBoundingClientRect()
      So I get dimensions for each option element in the opened menu and choose the widest
      one and use that width for the maxWidth value of the parent div.

      I am not too familiar with newer css capabilities and I am concerned about backward compatibility.
      And I am developing standalone utility modules that can be used in any situation. Later I may create
      html 5/css 3 specific versions.

      Specifically, for this project, one of the applications is to create a select/option type feature that will
      be able to show/hide sub menus for the main menu items and sub menu items.
      Last edited by anotherJEK; Sep 11, 2016, 08:32 PM.

      Comment


      • #4
        Originally posted by anotherJEK View Post
        So I have this html:

        Code:
        <div id="mainMenu"><pre class="norm" id="choice">Choice</pre></div>
        I want to restrict the div with id 'mainMenu' to the effective width of the pre element.
        This can be done with CSS:

        Code:
        #mainMenu {
        	display: table;
        }
        Originally posted by anotherJEK View Post
        I do not get any value for pre element when looping through child nodes and testing
        pre element width.
        The DOM/CSSOM style.width property in your code refers to the value of the CSS width property as set in an element's HTML style attribute. To get the effective value, you need to use the getComputedStyle method:

        Code:
        testDiv.style.maxWidth = getComputedStyle(testDiv.children.item(i)).getPropertyValue("width");
        I used the children property in the code above because that restricts the node list to element nodes; childNodes picks up comment nodes, text nodes, and processing instruction nodes too.

        Also worth noting:
        • typeof "testDiv" != "undefined" should be testDiv !== null. Your code records the type of a string. With that error corrected, the condition will always be true because getElementById always returns either null or an object, hence the additional correction.
        • You should cache repeated look-ups in a node list using a variable. You've called childNodes[i] explicitly seven times, which requires seven look-ups.
        • The last argument of the addEventListener method has been optional for a long time now.

        Comment

        Working...
        X