We Keep Coding

Display huge text (partly colored)

I am curently working on one visualization, using JavaScript, which should deal with large amount of text.
In each sentence there are at least couple of words which I need to color, which means that a single sentence would look something like that:
"Word word word coloredWord word word coloredWord coloredWord word...".
Currently for each part without coloredWord I am creating a span element and appending a text node to it. And also each coloredWord is put in one span (I am using spans to be able to set classNames).
However it takes too long to display it.
I have tried to use fragment and also to first set the div.style.display to "none" till all nodes are created. But I could not see any difference.
Is there maybe another way how to display such a text where huge part of it needs to be colored in different colors?

As #monxas mentioned you could use spans inline like so
<p>Test test <span>colored</span> test test </p>
css
span{
color:red;
}

Make my own custom timeline for a website

I'm a designer, but I also do some programming (javascript, html, css). I need to create a custom timeline for a website (Couldn't post a photo because of insufficient reputation on here, but here's a link to the design: http://postimg.org/image/5p92wkk8f/ Like you hover the mouse over a part of the timeline, and according to that the year changes) But I have no idea where to begin. (I tried looking it up on the internet, but there's no timeline code examples and I don't wanna generate a timeline from other websites, I wanna make a custom one that would be exactly like this design). Would anyone be able to give me hints, say anything useful, tell me where to start? Thanks!

Timeline JS is may be exactly what you are looking for. As it's open source tool, you can modify it as per your needs.

I'd make many divisions, one for each part (year in this case) of the timeline. So there'll be about 20 divs that together make the whole white line.
CSS would be something like:
.timeline { /*"timeline" is a class name that I made up.*/
background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
height: 30px; /*estimation*/
width: 30px; /*estimation*/
position:absolute;
}
.timeline:hover {
background-color:#000000; /* This is black color, change it to the brownish background color.*/
}
This is just a part of the CSS. You'll need to position each division with margins. With the CSS code done, you'll have the timeline change it's color for each div you hover on.
The harder part is actually changing the text, and for it we'll use javascript. In order to make the code not too long (and easier for me to write) I'm going to write it as if there were only 2 divisions in the timeline. Once you get what I do, you will be able to finish it off easily.
So first of all, add an id to the division in which the text is, "text" e.g. In html, add to the 2 timeline divisions the event onmouseover, then a function. The functions are numbered.
<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>
Now we need to write the functions. We'll make a variable which will include the whole "text" id, then make 2 functions (one for each div) and make each function change the text according to the function's number.
var text_div=document.getElementById("text");
function changeText1()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}
So let's review. The CSS makes the division change color when hovered on. Additionally, when a division of the timeline is hovered, it will trigger a function from the javascript code which will change the text, according to which division was hovered on.
Another thing you should notice: In the image you added, there isn't one paragraph only, for each paragraph a different CSS code. The javascript code I wrote will change the whole "text" division, making it's CSS be the affecting one for the whole text you entered in javascript ("Some Text" part). If you wish the CSS to stay different, you should:
make for each paragraph its own id (in html).
then make a new variable in javascript for each id.
and then add a new line to each function, which will change the inner HTML of the new paragraph separately.
If something is unclear, please ask.

How to measure word/caret position in Google Docs?

For those who haven't worked with the Google Docs editor here's a short explanation of how it works:
Google Docs has no visible editable textarea or contentEditable elements.
Google Docs listens for keydown/press/up in a separate iFrame where they place the OS cursor for event listening.
When the iFrame catches an event Google handles it by performing the equivalent operations on the visible document.
The "caret" in Google Docs is a DIV that is styled and scripted to look and act like an OS cursor.
With that out of the way, here's my request:
I'm working on a plugin that interacts with the Google Doc and I need to be able to do two things:
Highlight words with an opaque overlay DIV.
Determine cursor position inside a word.
I've been exhausting a lot of ideas about just how to handle this, but so far I've only manage to get a buggy solution for the latter problem (I perform a backspace, determine where the text changed and undo the backspace).
I'm looking for all the best ideas you can come up with to solve these problems. They don't need to be cross browser, but they do need to be able to be turned into something robust that will also handle things such as font size changed mid line.
A little bit of extra info explaining what a Google Doc looks like in HTML:
<wrapper> // Simplified wrapper containing margins, pagination and similar
<div class="kix-paragraphrenderer"> // single DIV per page wrapping all content
// Multiple paragraphs separated by linebreak created by Enter key:
<div class="kix-paragraphrendeder">...</div>
<div class="kix-paragraphrendeder">...</div>
<div class="kix-paragraphrendeder">
// Multiple wrapper divs created by Google's word wrapping:
<div class="kix-lineview">...</div>
<div class="kix-lineview">...</div>
<div class="kix-lineview">
// Single inner wrapper, still full width of first wrapper paragraph:
<div class="kix-lineview-content">
// Single wrapper SPAN containing full text of the line, but not display:block
<span class="kix-lineview-text-block">
// Multiple spans, one per new font change such as normal/bold text,
// change in font size, indentation and similar:
<span>This is normal text</span>
<span style="font-size:40px; padding-left:4px;">This larger text.</span>
<span style="font-weight:bold; padding-left:10px;">This is bold text</span>
<span style="padding-left:4px;">More normal text</span>
</span>
</div>
</div>
</div>
</div>
</wrapper>

After more tinkering I came to the conclusion that it is extremely troublesome - if not impossible - to try and programmatically determine cursor position with regard to a letter inside a <span>, simply because the <span> is the smallest element that is measurable (correct me if I am wrong).
So how to solve the problem? Here's what I ended up doing:
I create an offscreen positioned <div>
I get the text of the current paragraph (<div class="kix-paragraphrenderer">) - I could get the entire text, but wanted to limit the computational load.
I extract each single character of the paragraph by looping through its children in the following way:
Loop through linveviews of the paragraph (<div class="kix-lineview">)
Get the lineview content (<div class="kix-lineview-content">)
Loop through text blocks of the lineview content (<span class="kix-lineview-text-block">)
Loop through <span>'s of the text block
Loop through innerText of the <span>
I append each character in my offscreen <div> with the currently applied style extracted from style.cssText of the current <span>
For each character appended I measure the width of the <div> and save this in an array. I now have a position of each single character.
I measure the position of the cursor relative to my widths and voila - I know where the cursor is positioned in the text.
This is obviously a bit simplied (I left out details about margins and paddings of the different elements), but it covers the idea behind how it's possible to get the cursor position.
It works quite well, but there are many pitfalls and a lot of measuring required. On top of that it's also required to post-parse the text if you want to use it for anything, since tabs, spaces and linebreaks aren't always included in innerText (depending on where these are in the text, Google may or may not make them through positioning of new elements).

I made something like Kix two years ago Google Docs. And for any HTML design and yes, for IE6 too :-) How? All we need is to compute letter absolute position. How? Replace textNode with inline element without layout, that's important, and then use Element.getClientRects I remember I also needed wrap just letter and compute its position via fast and reliable https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
The trick how to detect lines and wraps for home and end keys was based on some vertical heuristic letter position change. Something like if base line is different, than stop caret walking. It was pretty fast and with any markup and without any caching. Holy grail :)
The only not resolvable problem was justified text, because letters were distributed randomly and spaces between them was not computable.
That project is dead http://webeena.com now. Bad management killed it (and me almost too).

Using Javascript or CSS, how can I add additional space at the end of a block of text, but only if it does not start on a new line?

Let's say I have some text, with a (more)... link at the end of each paragraph. It ends up looking something like this:
This is just a test paragraph. Click on the more link for more info. (more...)
Now I'd like to add some space between the link and the paragraph text, so I wrap the link in a <span> tag and push it to the right with a margin-left: 10px:
This is just a test paragraph. Click on the more link for more info. (more...)
The problem here is, if the text wraps right on the more so that it shows up on a second line by itself, it will look indented:
This is just a test paragraph. Click on the more link for more info. Push it down!
(more...)
When the desired output should be:
This is just a test paragraph. Click on the more link for more info. Push it down!
(more...)
Is it possible to achieve this effect using either Javascript or CSS?
Side note: It is possible to achieve this effect by removing the <span> tag and using &nbspcharacters to push the more linke to the right with proper text wrapping, but this is a solution I'd like to avoid unless there is no other choice. Or I could use Javascript to insert the &nbsp's before the span, but that's not exactly a nice solution either.

You could set a width on the paragraph and then float the span to the right.
That way the (more...) remains on the the right always.
Not exactly what you are after but I think it looks decent.
Example: http://jsfiddle.net/WFuBd/1/

If you wrap the content before the link in a span and apply a margin-right to that, you'll get the desired effect. (Unfortunately, this, too, is not really a nice solution)

Why not use 2 div's. Div one floats left, div two floats right... Make sure overflow=hidden on div one, and (more...) is on div two.
[div 1 lots of text i.e.: 300px] [div 2(more...) i.e.: 40px]
It will look perfect every time. You'll have to play around with it to look right, but it'll work. You could then just do a little jQuery when you click more...to show the rest and hide 'more'.

How to truncate text until "more" link is clicked?

I have a long series of paragraphs and I'd like to trim each down to 2 lines (50 characters) and when you click a link "more" it will show the full paragraph.
I am using the prototype library and rails.
I'd ideally like to do this with out breaking the paragraph into 2 divs and showing the other when you click on more. Or is that the only way?

Put your text in a div and set the height to your desired height (with overflow: hidden). When the more link is clicked set the div height to div.scrollHeight . If you're using jquery or mootools you can throw in a neat transition.
<div id="myText" style="overflow:hidden; height:50px;">Text here...</div>
more
<script type="text/javascript">
function showMore() {
var mydiv = document.getElementById('myText');
mydiv.style.height = mydiv.scrollHeight;
}
// or with a transition (mootools)
function showMoreTransition() {
new Fx.Tween($('myText'), {
duration: 1000
}).start('height', $('myText').getScrollHeight());
}
</script>

Do you have a problem with spans? It seems the most effective way set this up is to wrap the excess in a hidden span tag. You can even wrap the whole operationin a nice helper method to make it reusable.
Assuming prototype:
def sample_with_more(body, html_options = {})
more_link = link_to_function(" More...", "$('more').hide(); $('hidden').show();', :id => 'more')
content_tag(:div, html_options) do
body[0..49] + more_link +
content_tag(:span, body[50..-1], :style => "display:none", :id => "hidden")
end
end

Because I'm a jQuery guy, here is some psuedo code
Select element which contains p
Select after first 50 chars and wrap a div around with a class 'more-text'
Insert with Js after a <button>more</button>
Add a click event button that sets display: block or something more fancy on the more-text
Remove button or change it's text to 'less' and change necessary code

The above answers assume that you send the full text to the browser, then let it only display a certain amount of it by clipping it vertically. This is actually a good idea, as truncating a text afer a certain amount of characters is actually not as straight-forward as it seems.
In an early project, I had a long list of truncated texts and didn't want to send them all to the browser in full length. The important thing to keep in mind here is if your text may contain control or escape characters (e.g. HTML, BBCode, HTML-Entities, etc) you need to take special care about them.
I ended up writing a small HTML-tag parser to not deliver HTML tags which were cut in half, and to add end-tags to e.g. bold, italic, etc, to not screw up the rest of the screen layout.
Additionally, it's usually not what you want - i.e. you won't get two lines worth of text for different screen widths or when having line break characters in your text.