www.webdeveloper.com
Results 1 to 12 of 12

Thread: Getting Paragraph Height

  1. #1
    Join Date
    Mar 2011
    Posts
    81

    Getting Paragraph Height

    Ok. I don't need the character height. I need the height of a paragraph that is wrapped once or more inside a div.

    I need to know this because I need to make a fixed width div, that will adust it's height based upon the wrapped text that will be append to it.

    Could someone help me with this. I have been able to get close with this, but it's imperfect. I'm not sure what's wrong.

    Code:
    String.prototype.visualHeight = function()
    {
        var ruler = document.getElementById("ruler");
        ruler.innerHTML = this;
        return ruler.offsetHeight;
    }
    where my css #ruller is this:

    Code:
    #ruler
    {
    	visibility:hidden;
    	font-family:monospace;
    	font-size:12px;
    }
    Last edited by misfitplanet; 04-19-2011 at 03:18 PM.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Question More information required ...

    How, exactly, is this code used in the HTML?
    Do you have a sample?

  3. #3
    Join Date
    Mar 2011
    Posts
    81
    Quote Originally Posted by JMRKER View Post
    How, exactly, is this code used in the HTML?
    Do you have a sample?
    Sorry, by being simple, I was trying not to confuse. Here, I'll shed a bit more context:

    (If I knew how to put give my javascript to one of these free server sites, I'd be able to let you see it in action, but I'm stuck on that one too.)

    I'll give it to you in english first. Imagine a page that produces an array of divs vertically. Each div contains a paragraph. Each div is actually a link to some website. The paragraph describes that website so you know what you are clicking on. That's what this function does in a nutshell.

    It returns a div that has several divs (the links with description) so it can be added to the body.

    I've custom commented specifically for this thread, so these comments won't be typical.

    Code:
    function createLinksControl()
    {// a links Control is just a control that has a vertical array of div that are links to web sites
        
        // finder0 is a control that contains a links control
        finder0.linksControl.content = linkDescriptions()  //content is an array containg text describing each link
        finder0.linksControl.thetaRange[1] = finder0.linksControl.content.length    
        finder0.linksControl.setThetaData();
        
        // this stuff is arbtrary to the thread, they simpley dynamically change the control size when the window is resized
        var adjCellWidth;
        if(window.innerWidth < 1000)
            adjCellWidth = window.innerWidth - 40
        else
            adjCellWidth = finder0.linksControl.cellWidth
        
        // gettign the variables ready here
        var contentLength = finder0.linksControl.content.length;  // the count of links
        var i;
        var cellHeight = null; // variable to be used to assign individual cell heights that will change depending on how many times text wraps inside the div
        var cellHeights = [];  // an array that will store these heights for preparation of creating the divs
        var visHeight = finder0.linksControl.content[0].visualHeight()  // this is an example of geting the visual height of a wrapped paragraph, (if it indeed is long enough to cause a wrap)
        
        for(i=0;i<contentLength;i++)  // cycle through each link description contained inside the content array
        {
            cellHeight = finder0.linksControl.content[i].visualHeight() // get pixel hieght of paragraph, (I gave this protype at thread opening)
            cellHeights = cellHeights.concat(cellHeight) // concat the heights in array for further use
        }
        
        var cellCoordinates = createDynamicVertCellCoordinates(finder0.linksControl.thetaData.length, 0, 0, 0, cellHeights, 0, 3)  // This returns an array of arrays, each array element is just [x,y]  These are the origins for each link div as they cascade down the page.
        var cellStyles = createLinksCellsStyle() // adds color, text style, etc to div
        var cellParagraphs = linkCellParagraphs() // get the actuall paragraphs <p>'s
        var cellEvents = createLinkEvents() // create and array of eventListeners that will be soon attached to the divs
        
        calculateLinksX() // arbitrary
        var navDiv = controlDiv(finder0.linksControl.x, finder0.linksControl.y, finder0.linksControl.width, finder0.linksControl.height, "", "", "") // this is the div that will contain all the link divs that that cascade down the page 
    
        var cellCount = finder0.linksControl.thetaData.length;
        var i;
        var cellDiv = null;
        
        for(i=0;i<cellCount;i++)
        {
            cellDiv = navCellDiv(cellCoordinates[i][0], cellCoordinates[i][1], adjCellWidth, cellHeights[i], cellStyles[i]) //create the link div will all caculated info from above
            cellDiv.appendChild(cellParagraphs[i]) // append the text, the description of the link
            setCellWithEvents(cellDiv, cellEvents[i]) // append a "onclick" go to url event
            navDiv.appendChild(cellDiv) // finally add it to the main div
        }
        return navDiv  // return the main div to it can be added to a parent div
    }
    It may also be usefull to know, that I"m useing font 12 monospace. In the #ruller above, if I set the font to 12px, the div is not tall enough. But if I set the font in #ruler to 16px, it makes it a bit too high, but does fit all the text. I'm trying to pinpoint things exactly. I'm not sure of all the variables I need to address. That's the real question here.
    Last edited by misfitplanet; 04-19-2011 at 04:32 PM.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Question Still confused.

    Since I'm still having a problem visualizing your concept,
    let's start with an outline of the HTML display and fill in the JS as we go.
    Code:
    <html>
    <head>
    <title> Paragraph Links </title>
    <style type="text/css">
    .para { height:100px; width:200px; border:1px solid blue; }
    </style>
    
    </head>
    <body>
    
    <h1> Paragraph Links </h1>
    
    <div id="p0" class='para'><a href="javascript:alert('Link to:')">Paragraph 1</a>
     <p>Description</p></div>
    <div id="p1" class='para'><a href="javascript:alert('Link to:')">Paragraph 2</a>
     <p>Description</p></div>
    <div id="p2" class='para'><a href="javascript:alert('Link to:')">Paragraph 3</a>
     <p>Description</p></div>
    <div id="p3" class='para'><a href="javascript:alert('Link to:')">Paragraph 4</a>
     <p>Description</p></div>
    <div id="p4" class='para'><a href="javascript:alert('Link to:')">Paragraph 5</a>
     <p>Description</p></div>
    <div id="p5" class='para'><a href="javascript:alert('Link to:')">Paragraph 6</a>
     <p>Description</p></div>
    <div id="p6" class='para'><a href="javascript:alert('Link to:')">Paragraph 7</a>
     <p>Description</p></div>
    <div id="p7" class='para'><a href="javascript:alert('Link to:')">Paragraph 8</a>
     <p>Description</p></div>
    <div id="p8" class='para'><a href="javascript:alert('Link to:')">Paragraph 9</a>
     <p>Description</p></div>
    <div id="p9" class='para'><a href="javascript:alert('Link to:')">Paragraph 10</a>
     <p>Description</p></div>
    
    </body>
    </html>
    1. The <a ...> tags will be filled in with your link URLs.
    2. The "Description" can be added as required for the link.
    3. The <div> sections can start out hidden if needed.

    If this is close to your english description, what needs to be different from here?

  5. #5
    Join Date
    Mar 2011
    Posts
    81
    I'm frightened of html, so I put it in Javascript, but atleas we have workign example of the error now. Could you give it a try and see how I can get the div to dynamically fit the wrapped text? Little lorems are fine, but not the big lorem.

    Code:
    <html>
    <head>
    <title> Paragraph Links </title>
    <style type="text/css">
        .para { height:100px; width:200px; border:1px solid blue; }
        #ruler
        {
            visibility:hidden;
            font-family:monospace;
            font-size:12px;
        }
    
    </style>
    <script type="text/javascript">
        String.prototype.visualHeight = function()
        {
            var ruler = document.getElementById("ruler");
            ruler.innerHTML = this;
            return ruler.offsetHeight;
        }
        
        function div(x, y, width, height, border)
        {
            var listControlDiv = document.createElement("div");
            var leftStyle = "left:" + x + "px;"
            var topStyle = "top:" + y + "px;"
            var widthStyle = "width:" + width.toString() + "px;"
            var heightStyle = "height:" + height.toString() + "px;"
            var borderStyle = "border:solid "+ border + "px;"
            var borderColorStyle = "border-color:rgb(0,255,0);"
            
            var positionStyle = "position:absolute;"
            
            listControlDiv.setAttribute("style", widthStyle + heightStyle + leftStyle + topStyle + positionStyle + borderStyle + borderColorStyle)
            
            return listControlDiv;
        }
    </script>
    
    </head>
    <body>
        <span id="ruler"></span>
    
        <script type="text/javascript">
            littleLorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            bigLorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. Quisque aliquet, felis eget rutrum vulputate, nisi lectus tincidunt nibh, eget imperdiet tellus dui sed sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mollis commodo risus at aliquam. Nulla scelerisque orci odio, in aliquet erat. Aenean posuere ligula vitae urna malesuada adipiscing. Maecenas est eros, iaculis in vulputate quis, pulvinar ut metus. Aliquam ultrices aliquet elementum. Ut vitae semper mauris."
            var linkDesriptions = [littleLorem, littleLorem, bigLorem, littleLorem, littleLorem, littleLorem, littleLorem, littleLorem ,littleLorem, littleLorem]
            var divCount = linkDesriptions.length;
            var x = 0;
            var y = 0;
            var controlDiv = document.createElement("div")
            while(divCount--)
            {
                // alert(linkDesriptions[divCount].visualHeight() + " : " + linkDesriptions[divCount])
                var height = linkDesriptions[divCount].visualHeight()
                var divLink = div(x, y, 300, height, 1)
                var paragraph = document.createElement("p")
                paragraph.setAttribute("style", "font-size:12px;top:-12px;position:relative;")
                var textNode = document.createTextNode(linkDesriptions[divCount])
                paragraph.appendChild(textNode)
                divLink.appendChild(paragraph)
                controlDiv.appendChild(divLink)
                y += height
            }
            document.body.appendChild(controlDiv)
        </script>
    </body>
    </html>

    I'm also really confused about this line:
    Code:
    paragraph.setAttribute("style", "font-size:12px;top:-12px;position:relative;")
    If I don't -12px and relative it, the text node falls under the div instead of inside it. I'm wondering if there is a more reliable way to get the text inside the div the correct and more reliable way. But, I really would like to know how to get the exact paragraph height of a line of text when it wraps. This is really, really important.
    Last edited by misfitplanet; 04-19-2011 at 05:46 PM. Reason: changed paragraph.setAttribute

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Question Still more questions...

    Quote Originally Posted by misfitplanet View Post
    I'm frightened of html, so I put it in Javascript, but atleas we have workign example of the error now. Could you give it a try and see how I can get the div to dynamically fit the wrapped text? Little lorems are fine, but not the big lorem.

    ...

    If I don't -12px and relative it, the text node falls under the div instead of inside it. I'm wondering if there is a more reliable way to get the text inside the div the correct and more reliable way. But, I really would like to know how to get the exact paragraph height of a line of text when it wraps. This is really, really important.
    I'm not sure why you are frightened of HTML when you need it to make the JS code function!

    But, aside from that, I still more questions:

    1. What is the purpose of the <span id="ruler"></span> and its associated CSS definition when it has nothing between the tags and then you set the visibility to hidden and never change it?

    2. Are you trying to make the description fit into a particular size <div> section regardless of how many words/characters there are?
    or a) Have the overflow text become hidden?
    or b) Have the overflow text become scrollable?
    or c) Have a <div> be the length of the paragraph unless there is overflow, ie a maximum size of the <div> section but no minimum?
    or d) How many lines do you want to fall exactly into the <div> sections?

    3. Are you opposed to using hard-coded descriptions in the paragraphs? Is the information coming from an external file, ala ajax or external JS file, or somewhere else?

    4. If 12px is too short and 16px is too tall for the font size, have you tried 14px?
    Is the problem that you are getting portions of a sentence cut off because of the paragraph height setting?

    As you can see, I'm still trying to grasp the problem before I try to come up a better solution.

  7. #7
    Join Date
    Mar 2011
    Posts
    81
    Answers to your questions:
    1. The intention of the ruler, is to measure any text string's height, not just the character height, but the accumulative height of the text, due to wrapping.

    2. The description must not be truncated. All the description's text must fit in the div. The div will have fixed width, but variable height. If there is one line of text the div must be one size. If there are two lines of text due to wrapping, then the div must be exactly twice the height, three lines of text, exactly triple, etc. that's the goal here.

    3. The descriptions are not hard coded. The user of the JavaScript will be typing in the descriptions. (These are actually descriptions for user favorites/bookmarks.)

    4. I've tried playing with pixel size in the ruler and the actual text displayed, but I"ve found no hard fast rule, so I feel I've only hacked things. I'm not confident it woudl be a cross-browser way to handle this.

    If you change the #ruler to this,

    Code:
        #ruler
        {
            visibility:hidden;
            font-family:monospace;
            font-size:24px; // double the font size used
        }
    you will see that it doesn't squash things, but adds a bit too many pixels. I'm concerned about the detail I'm missing that will allow me to get things pixel precise. It's very close to doing the job, but something is off, and I'm not sure what it is that needs adjusted.
    Last edited by misfitplanet; 04-19-2011 at 09:49 PM.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Question

    I'm back to my original post (with modifications according to your last post).
    The use of the ruler is still confusing to me since it has no content and is hidden ??? ???

    In the following, what part of the display does not meet your requirements?
    Code:
    <html>
    <head>
    <title> Paragraph Links </title>
    
    <style type="text/css">
    .para {
            font-family:monospace;
            font-size:12px;
    
    	    width:320px; 
    		border:1px solid blue; 
    }
    </style>
    
    </head>
    <body>
    
    <h1> Paragraph Links </h1>
    
    <div id="p0" class='para'><a href="javascript:alert('Link to: Paragraph 1')">Paragraph 1</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </p></div>
    <div id="p1" class='para'><a href="javascript:alert('Link to: Paragraph 2')">Paragraph 2</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. 
    </p></div>
    <div id="p2" class='para'><a href="javascript:alert('Link to: Paragraph 3')">Paragraph 3</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. 
    </p></div>
    <div id="p3" class='para'><a href="javascript:alert('Link to: Paragraph 4')">Paragraph 4</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. 
     Quisque aliquet, felis eget rutrum vulputate, nisi lectus tincidunt nibh, eget imperdiet tellus dui sed sem. 
    </p></div>
    <div id="p4" class='para'><a href="javascript:alert('Link to: Paragraph 5')">Paragraph 5</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. 
     Quisque aliquet, felis eget rutrum vulputate, nisi lectus tincidunt nibh, eget imperdiet tellus dui sed sem. 
     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
    </p></div>
    <div id="p5" class='para'><a href="javascript:alert('Link to: Paragraph 6')">Paragraph 6</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. 
     Quisque aliquet, felis eget rutrum vulputate, nisi lectus tincidunt nibh, eget imperdiet tellus dui sed sem. 
     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Etiam mollis commodo risus at aliquam. Nulla scelerisque orci odio, in aliquet erat. 
    </p></div>
    <div id="p6" class='para'><a href="javascript:alert('Link to: Paragraph 7')">Paragraph 7</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. 
     Quisque aliquet, felis eget rutrum vulputate, nisi lectus tincidunt nibh, eget imperdiet tellus dui sed sem. 
     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Etiam mollis commodo risus at aliquam. Nulla scelerisque orci odio, in aliquet erat. 
    </p></div>
    <div id="p7" class='para'><a href="javascript:alert('Link to: Paragraph 8')">Paragraph 8</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. 
     Quisque aliquet, felis eget rutrum vulputate, nisi lectus tincidunt nibh, eget imperdiet tellus dui sed sem. 
     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Etiam mollis commodo risus at aliquam. Nulla scelerisque orci odio, in aliquet erat. 
     Aenean posuere ligula vitae urna malesuada adipiscing. Maecenas est eros, iaculis in vulputate quis, pulvinar ut metus. 
    </p></div>
    <div id="p8" class='para'><a href="javascript:alert('Link to: Paragraph 9')">Paragraph 9</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. 
     Quisque aliquet, felis eget rutrum vulputate, nisi lectus tincidunt nibh, eget imperdiet tellus dui sed sem. 
     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Etiam mollis commodo risus at aliquam. Nulla scelerisque orci odio, in aliquet erat. 
     Aenean posuere ligula vitae urna malesuada adipiscing. Maecenas est eros, iaculis in vulputate quis, pulvinar ut metus. 
     Aliquam ultrices aliquet elementum. Ut vitae semper mauris.
    </p></div>
    <div id="p9" class='para'><a href="javascript:alert('Link to: Paragraph 10')">Paragraph 10</a>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. 
     Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. 
    </p></div>
    
    </body>
    </html>

  9. #9
    Join Date
    Mar 2011
    Posts
    81
    I have to say, it's perfect. I have to transfer it into JavaScript. I finally got my site on a server, it's beta, but if you take a look you can see the div issue there in it's essence.

    bookybook.atspace.eu

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Thumbs up

    Quote Originally Posted by misfitplanet View Post
    I have to say, it's perfect. ...[/URL]
    Good!
    I'm happy to help (if/when I understand the problem )

  11. #11
    Join Date
    Mar 2011
    Posts
    81
    Ok, I cant hard code because my links will change in number so I have them created in a for loop. I was setting each div x,y, but now I've done it like you've done it and let the auto formatting of html stack them for me. It immediately reminding me of two months ago when I began learning JavaScript of the problem I ran into and why is start to use absolute position of xy afor divs, thant led me to the height problem too.

    You see, I've done it like you did, except just in a for loop and set the styles of the paragraphs with setAttriute(), If you notice when you run it, there is a line in between each div of tex. I want that down to a one pixel, not 20 or so they separate the divs with .

    Do you now how to control the style to achieve this precise positioning?<html>
    Code:
    <head>
    <title> Paragraph Links </title>
    <style type="text/css">
        .para { width:800px; border:1px solid blue; }
    
    
    </style>
    <script type="text/javascript">
    
        
        function div(x, y, width, height, border)
        {
            var listControlDiv = document.createElement("div");
            var leftStyle = "left:" + x + "px;"
            var widthStyle = "width:" + width.toString() + "px;"
           
            var borderStyle = "border:solid "+ border + "px;"
            var borderColorStyle = "border-color:rgb(0,255,0);"
            
            var positionStyle = "position:absolute;"
            
            listControlDiv.setAttribute("style", widthStyle  + leftStyle  + positionStyle + borderStyle + borderColorStyle)
            
            return listControlDiv;
        }
    </script>
    
    </head>
    <body>
        <span id="ruler"></span>
    
        <script type="text/javascript">
            littleLorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            bigLorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere ornare dui eu scelerisque. In scelerisque nisi a urna fermentum dapibus. Donec pellentesque, diam ac egestas pretium, diam ante pretium eros, ac ornare nisl mi tincidunt sem. Quisque aliquet, felis eget rutrum vulputate, nisi lectus tincidunt nibh, eget imperdiet tellus dui sed sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mollis commodo risus at aliquam. Nulla scelerisque orci odio, in aliquet erat. Aenean posuere ligula vitae urna malesuada adipiscing. Maecenas est eros, iaculis in vulputate quis, pulvinar ut metus. Aliquam ultrices aliquet elementum. Ut vitae semper mauris."
            var linkDesriptions = [littleLorem, littleLorem, bigLorem, littleLorem, littleLorem, littleLorem, littleLorem, littleLorem ,littleLorem, littleLorem]
            var divCount = linkDesriptions.length;
            var x = 0;
            var y = 0;
            var controlDiv = document.createElement("div")
            controlDiv.setAttribute("style", "left:100px;position:absolute;")
            while(divCount--)
            {
                var divLink = document.createElement("div");
                divLink.setAttribute("style", "font-family:monospace;background-color:rgb(0,255,0);opacity:0.4;width:800px;height:auto;padding:0px;")
                
                var paragraph = document.createElement("p")
                var textNode = document.createTextNode(linkDesriptions[divCount])
                paragraph.appendChild(textNode)
                divLink.appendChild(paragraph)
                controlDiv.appendChild(divLink)
            }
            document.body.appendChild(controlDiv)
        </script>
    </body>
    </html>

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Lightbulb

    You are getting closer to a CSS question than to a JS question.
    You might get better answers on that forum since you can now at least control the settings somewhat.

    I've also read that MSIE operates on CSS slightly different concerning margins, padding, etc. from the other browsers.
    You might want to see if the above attributes could be tweaked to make it more to your final design effort.

    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles