Develop Reference

Preparing the DOM for a Single Page Application

What I am trying to achieve appears to be simple. I am assuming that all content visible on a page, is a child or grandchild of the tag of a HTML page? This text for example must be related to Body.
And this is a tree structure basically starting (visually) with Body.
I want to make a Single Page Application with JavaScript. But I need to prepare the DOM and here is where I struggle.
How do I set up the body of the page so that:
There is no scroll bars
The Body is always filling the entire content area of the browser (if it does not already)
Break out of CSS box model (appendChild 10 times stacks those elements, not flows them)
Any children Divs from Body, also by default break out of the CSS box model too.
I have searched for each step individually but I do not use JQuery, and to be honest, I would prefer to get rid of CSS too all but for the most basic of tasks. I would just like to have a known viewable region and be responsible for its positioning, sizing and content with JS.
Or. If you are similar with Flash. I want to treat the Body as my Stage and use it like a Display List with NO_SCALE enabled. Meaning that when you resize, that should "invalidate" the layout (that is upto me as the developer).
I am not the first person in the world to ask for this. So if you could even point me in the right direction, I would appreciate it.

Try CSS based solution to the fullest, then move on with Javascript. Following would give you pretty much what you want
There is no scroll bars
The Body is always filling the entire content area of the browser (if it does not already)
html, body {
margin : 0px
padding : 0px;
border : 0px;
overflow : hidden;
position : absolute;
left : 0px;
top : 0px;
}
Break out of CSS box model (appendChild 10 times stacks those elements, not flows them)
Any children Divs from Body, also by default break out of the CSS box model too.
put this first
* {
position : absolute;
}

Fit div to size of contents without overlapping text?

I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>

Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Javascript split text string to fit within div element pages

I have been using overflow scroll to display the text. I realize that the overflow property can detect when the data is larger than will fit.
I need to fill one div element, then another, and so on until all the data is set within pages. The breaks can't break a word.
Only one page/div will be display: block; and the rest will be display: none;
What is the best way to allow data to be displayed on multiple div pages?

Why not you use css for this purpose?
<div style="height:50px; width:50px; overflow:hidden">testing</div>

Ali is right in using CSS to address this, but you should use the CSS word-wrap property to easily acheive your desired effect with the overflow content, as Ali's example edited below.
<div style="height:auto; min-height:50px; width:50px; word-wrap:break-word;">testing<div>
The word-wrap property is now supported in all major browsers.
Also as shown above, if you want to be sure that all the text shows as well as wraps in the correct place, then change your height CSS to 'height:auto; min-height:50px;'. This will allow the div to expand in height to show any overflow that would normally be hidden just defining a fixed height, while retaining the preferred size of 50px if possible, and retaining the desired word wrap not breaking a word in the middle.
The only exception where this will not work, is if a word is so long as to be longer than the width of the containing div, in which case it will break the long word at the last character that will fit on the line before continuing the word on the next line.
It's got to be an awfully long word though to run into this. If you use auto for the width property as done in the example with the height, it will fix the word break problem by allowing the width of the div to change, although in page layout it is usually more important to constrain a width much more than a height.

Javascript: how can I tell if a <span> is broken over 2 lines?

I display a bubble help for some short span elements. The bubbles are centered below that span and look great as long as the span isn't broken over two lines.
Looks good:
tell <span>irregular: told, told</span>
Looks bad:
tell <span>irregular: told,
told</span>
It looks bad, because the bubble isn't centered under the span anymore. Is there some way using JavaScript or jQuery to tell, if that span is broken over two lines?

9000's comment is correct. The trick is having access to a <span> that you know will be rendered on a single line. You can do that by wrapping the first word of your block in a span with a specific id, you could also use the last word or some other single word; there are cases where a single word will cross lines but the first word should be safe.
Once you have something that is only on one line you can compare its height to the height of the <span> that will get the tooltip. If the <span> that is getting the tooltip is taller than the single-line <span> then it has wrapped to multiple lines.
Try this jsfiddle:
http://jsfiddle.net/ambiguous/JbMhZ/1/
Adjust the size of the right panes until the red text wraps but the green text doesn't. Then hit Run in the toolbar at the top and it should say this at the bottom of the Result pane:
#has-break spans more than one line
#no-break spans only one line
I'm not exactly proud of this hack but it should work.
I'm left wondering if a better positioning algorithm for your tooltip would be a better idea. Maybe pull the mouse coordinates out of the hover event and use that to position the tooltip rather than positioning it based on the <span>.

I think the nicer way to do this would be with white-space: nowrap in CSS:
CSS:
span.bubble {
white-space: nowrap;
}
HTML:
tell <span class="bubble">irregular: told, told</span>

With or without a line break you can just calculate using .css() in jQuery where exactly on the screen is that span located and then position the tooltip accordingly. Or you can use a jQuery plugin to do all this for you.

Not quite sure what levels of help you're looking for, but \n is the identifier for linebreaks in JS

How can I cause the browser to scroll an element horizontally to a pre-defined location without using JavaScript?

I'm working on 'timeline' project, where I have content inside of list items, in a horizontal unordered list. This is contained in a div, so you can scroll left to right through the content.
My client would like buttons to 'goto' each era. I know this is easily achieved through JavaScript. However they also want this to be functional without JavaScript. I've tried adding anchors to each item, but this doesn't really work since you can't control the exact position the browser want's to end up at. It's very buggy using the anchors with horizontal scrolling.
Any ideas?

Use a vertical timeline (the whole page scrolls, no inner scrollbars) when JavaScript isn't available. Anchors work reasonably well in that scenario. An easy way to achieve this is to make the styles that collapse your list and its containing div dependent on a class higher up in the DOM hierarchy, and set that class at load-time using JavaScript. Something like,
.jsEnabled .containingDiv { height: 10em; overflow: auto; }
.jsEnabled .timelineList li { width: 6em; float: left; }
...
function loadTimeStuff()
{
// enable styles that require JS-assisted scrolling
document.body.className = "jsEnabled";
// ...
}
Sure, it won't look as fancy as the full-blown JS-enhanced page, but it's a fallback - if users want the fancy stuff, they need only use a JavaScript-enabled browser...

You're stuck with javascript here for the most part -- as you found out, anchors don't really do the job.
You do have one other alternative, though you probably wont like it any better: Flash.

You'd have to position the anchors at a certain offset to the item you want to have displayed. F.e. if you want the item in the middle of the screen you would have to position the anchor at x = item.x-screenWidth/2 and y = item.y-screenHeight/2, approximately.
I don't think there's another solution, but using Javascript.

I'm afraid you are out of luck if you have to make this work without JavaScript. At least without some hideous hacking that would involve postbacks and dynamically generating some CSS for offsetting the position of the timeline ...
But as Shog9 has said, non JavaScript version would be a fall-back and can't be expected to work as well as the JS version (why would you need JS then) ...