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 03:32 PM.
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?
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>
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 04:46 PM.
Reason: changed paragraph.setAttribute
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.
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 08:49 PM.
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>
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.
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>
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.
Reply With Quote
More information required ...
Originally Posted by JMRKER
)
Bookmarks