Develop Reference

Stop selection of text in next span/div over in ReactJS

The issue
I'm having a weird issue that I'd like to resolve. I have two spans which are next to each other in my code. When you select the last word in the first span, it will select the first word in the span next to it.
Here is a JSFiddle to demonstrate: https://jsfiddle.net/b7mybsLr/1/
What I have tried
Of the solutions I found online, the one which got me the closest was applying the CSS rule:
user-select: all;
This stopped the issue, but instead created a new issue because when you click the text it highlights all the text in the span which isn't really what I want.
I've also tried adding:
display: inline-block;
Which has also not helped, as seen in the demo.
I have also added ' ' to the end of each line, which actually does fix the issue. However, ideally this is code we'd like to avoid in our codebase.
And finally, I have tried swapping out the spans for divs, but as seen in the jsfiddle, the issue is still there. I'm not sure if this is a React issue in the way it renders the DOM, or if it is a CSS issue - thank you.

It is because the browser sees the text One and Test as a single piece of text. You can see this by removing the margin from the css. You will see the text OneTest
To fix this just add a space at the end of the TestComp text as in
<TestComp type={'span'} text={"Test Span One "} />
Or add your to the end of the tag as in
<TestComp type={'span'} text={"Test Span One"} />
There are lots of ways to overcome it.

"More" functionality for comments problems

I'm trying to make a "More" functionality for comments.
How I'm trying to make it work:
I split comment in 2 parts - 1st 200 symbols and the rest of the symbols.
The rest of the symbols are placed in a <span class="hidden_comment_container" ></span> which by default gets display:none
Toggle to show the rest is placed if needed (if comment length > 200 symbols).
This is working more or less fine (jsfiddle demo) but there are 2 problems.
Upon slidedown, hidden_comment_container receives display:inline-block and messes up things a bit, since it gets transferred to a new line (check demo to see what I mean)
When sliding down and sliding up, near the end of animation you can notice some twitching.
Can anyone please help me solve these 2 problems?

The first one can be resolved by adding the following to the case when the remaining text is hidden.
$(this).next(".comment_container").children('.hidden_comment_container').slideDown('medium', function() {
$('.hidden_comment_container').css('display', 'inline');
});
Basically you're changing the display attribute of the .hidden_comment_container selector as I believe slideDown is adding a display:inline-block to it which would cause it to jump a line.
Fiddle here
Answer to point 2 can be found in Basic jQuery slideUp and slideDown driving me mad!; basically you need to explicitly add the height of the element before hiding / showing it.
As a side note the css property content can only be used with the pseudo elements :after and :before; I updated my fiddle accordingly.
An alternative solution
Have a look at this script, it does everything you need! I tested it already on another project and it works like a charm: jquery plugin to truncate elements based on height instead of number of characters

How to get nth line of a text by JavaScript?

Consider a simple html element as
<div id="test">
a long text without line break
</div>
The browser will create lines based on the glyph and font sizes. After text arrangement by the browser (e.g. depending on the window width), how to get the lines of the text by JavaScript?
For example:
How to get the total number of lines
How to get the first line as appeared in the current window?
How to get the nth line?

No, there is no API that gives you access to the rendered text after layout has occurred. The only way to approximate this is pretty hacky, i.e. add words into a container one at a time and see when it changes height. See this related question:
detecting line-breaks with jQuery?
Yeah, who'd have thought it, even jQuery doesn't do this! ;-)

2 easy solutions and a extremely hard one.
1 Formatting the text.
Inside a pre & textContent
html
<pre>hello
hello1
hello2</pre>
js
document.getElementsByTagName('pre')[0].textContent.split('\n')
http://jsfiddle.net/gq9t3/1/
2 Adding br's
Inside a div with br & textContent
html
<div>hello<br>hello1<br>hello2<br>pizza</div>
js
document.getElementsByTagName('div')[0].innerHTML.split('<br>')
http://jsfiddle.net/gq9t3/4/
To much trouble
css
div{width:100px;line-height:20px;}
html
<div>hello dfgfhdhdgh fgdh fdghf gfdh fdgh hello1gfhd gh gh dfghd dfgh dhgf gf g dgh hello2</div>
js
document.getElementsByTagName('div')[0].offsetHeight/20
easy way to find the number of lines but you need to calculate the text width to find the corresponding line content.
http://jsfiddle.net/gq9t3/3/

I was attempting to style the first line of text, but text-transform:uppercase messed it up. http://zencode.in/lining.js/ helped with addressing the first line (responsively!), so perhaps this library will assist with your issue too.

"Splitting" long words

I'm making a responsive website for a client using twitter bootstrap, which is responsive by default. However when the words get too long in a <h1> it doesn't fit the mobile sized browser.
What I would like to do is change "thisisaverylongword" into "thisisa-verylongword" with the final part on a new line.
Is there a simple way to do this, maybe with javascript? I'm thinking some condition like "if $word is wider than $body then" or something similar. Any tips will be very useful, gold star if the same code works for any word.

You could use the (experimental) CSS property hyphens:
h1 {
-webkit-hyphens: manual;
-moz-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
and specify the line break by using special unicode characters:
U+2010 (HYPHEN)
The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.
U+00AD (SHY)
An invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.
Browser compatibilty
MDN reference
EDIT
As mentioned by #hustlerinc it might be needed to set word-break: break-all to make it work.

I've written a jQuery plugin that might fit this purpose quite well. Check out ellipsis.js. Using the following configuration should work:
$('h1').ellipsis({visible: 10, more: '…', separator: '', atFront: false})
I guess the advantage of doing it this way is that the users still may display the whole header on tap if they want to.
You can apparently achieve something like this with a bit of CSS, check out the text-overflow property. Perhaps that's the ticket for this case. No JS needed. :)

Can't you set the CSS property word-break to hyphenate?
example here

I think that you must do it by yourself.
With the function "split", you split your string into a table of words. Then, you can check all the words into a for.

jQuery Slide Toggle Not Working - Resolved

On the first click, it works as expected:
the class is changed
and the html content is changed from 'Show...' to 'Close...'
the content area is expanded with the slideDown effect,
Good so far.
On the second click, ...
the class changes
the html content is changed from 'Close...' to 'Show...'
The content area does NOT go away as expected.
On the third click, ...
the class is changed
the html content is changed
the already-shown content is re-shown with the slidedown effect.
So everything is working except for the 2nd click when the content is supposed to be hidden again.
Here's the jQuery:
-
$('.open_user_urls').live('click', function() {
$('#user_urls').slideDown('slow');
$(this).addClass('close_user_urls');
$(this).removeClass('open_user_urls');
$(this).html('Close Search History');
return false;
});
$('.close_user_urls').live('click', function() {
$('#user_urls').slideUp('slow');
$(this).addClass('open_user_urls');
$(this).removeClass('close_user_urls');
$(this).html('Show Search History');
return false;
});
Here's the HTML it's acting on:
<h3 class='open_user_urls'>Show Search History</h3>
<div id='user_urls'>
// an OL tag with content
</div>
And the only applicable CSS:
#user_urls { display: none; }
EDIT - I replaced my jquery code with functionally equivalent code supplied in an answer below, but the problem persists. So the cause must be elsewhere. I do recall this code working originally, but then it stopped. I'm stumped. Time to strip everything else out piece by piece...
EDIT 2 - Since the bug must be elsewhere, I'm accepting a code improvement for my jquery as the answer. Thanks.
Edit 3 - Found the source of the problem.
Inside the #user_urls div I have an series of OLs with the following css:
.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}
Each OL contains a list of 20 urls and is meant to display in as many multiple columns as required to display all the URLs.
Removing the float: left; on these OL tags causes the problem to go away.
So having a float on the content contained in the DIV thats showing and hiding is causing it not not hide at all. Why would this happen?
EDIT 4: Adding a inside the #user_urls DIV allows the hiding action to work properly.

Perhaps something like this would be simpler?
$(".open_user_urls").toggle(
function () {
$(this).text("Close Search History").siblings(".user_urls").slideDown("slow");
},
function () {
$(this).text("Show Search History").siblings(".user_urls").slideUp("slow");
}
);
The toggle function is designed for precisely the scenario you're encountering.

To reiterate the problem and resolution to this question...
Inside the #user_urls DIV were a series of OL tags, each floated left. It was the float that was causing the problem.
Adding a <br style='clear: left;' /> inside the #user_urls DIV fixed the problem.

From what I've found, jQuery needs to have the height style set in order to slide it correctly. A work around I've used is to set the height before you slide it closed.
$('#user_urls').css('height', $('#user_urls').height() + 'px');
After you set it once, it should work correctly from then on. Check out this tutorial for a more detailed explanation.

Since this question was opened, jQuery have put in a fix for this themselves.
Updating to the latest version of jQuery solved the problem for us with no CSS changes. (jQuery 1.4.4 as of Dec 9th 2010)
Found via discussion on Google Groups in turn found from d12's answer. According to duscussion, in some jQuery 1.3x versions this bug affected several actions, slideUp, fadeOut, and toggle, if the element being hidden/slid up is a a non-floated parent containing floated children.

I think Conor's answer might put you on the right track. I might also suggest slideToggle and toggleClass:
http://docs.jquery.com/Attributes/toggleClass
http://docs.jquery.com/Effects/slideToggle
I could be as easy as:
$("h3.open_user_urls").click(function () {
next("div#user_urls").slideToggle();
});

I can't duplicate your bug. I used your exact code and I cannot replicate your issue.
This must be a script error from a different place in your JS code.

Thanks for this question. It really got me on my way figuring out the problem toggling an element with floated children.
Another resource that really helped and explains the behavior a bit can be found
on this Google group discussion.

Putting a non breaking space in your div is another solution similar to what The Reddest suggested that worked for me on a similar issue.