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

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.

Related

CSS class will not work due to some magic hidden digits

I have a <div> with a class and want to assign a basic style to it. Somehow, my editor Atom seems to have messed up this code. I have copied and pasted
.my {
background: yellow;
}
out of my editor, which does not work. Then I have added two other examples, which do work. The video below illustrates the problem:
https://vid.me/c2iB
While its easy to solve this, I got this problem in a second class, and I am interested, in how this error does occur. Does someone have an idea?
CODEPEN DEMO
The character you have after .my is not a space. It's a two bit character, with ASCII "194 160". Space is 032.
http://www.unit-conversion.info/texttools/ascii/
There is some hidden character here
.my {
^
If you delete the space and remake it, it fixes the issue.

mouseover fires multiple times over one span element

Here's a simple jsFiddle:
http://jsfiddle.net/cEDj6/
I have one span element that I bound mouseover to. When I move the mouse horizontally across different lines of text, mouseover happens only once. However, when I move between lines of text within the same span element, mouseover happens multiple times.
Is this expected?
Is there a standard way of preventing this (short of adding logic to consider the last visited element)?
Using Chromium, version 28.0.1500.71 Ubuntu 13.04 (28.0.1500.71-0ubuntu1.13.04.1).
This seems to stem from an inline elemnt <span> with multiple lines of text. In reality space between each line is not contained in element as far as mouse is concerned.
This can be seen by putting background color on element. Changing it to block elemnt in css with display:block alleviates the problem, or by using other native block elements other than span
Background demo
If you make it a div instead of a span it works as expected
This is odd usage of a span. Since the semantic element is a <p> tag, use that. This also will correct your issue.
Funny enough, it's because the span is an inline element and it's wrapping. Because a span is an inline item, and it's wrapping, you get individual lines, and there is space between the lines. I never picked up on this before, but, because you have a mouseout event, it makes it more obvious. To demonstrate this, check out this update on your fiddle.
Fiddle: http://jsfiddle.net/LSRvn/
The reason a DIV doesn't do this is because the DIV is a block element containing the items.

Span element overflows when added dynamically

I am adding a span elements dynamically from input field into a div. When they reached the right end of the div. It overflows in the same line.
However, when the number of span elements are pre-defined into a div element then they are not overflowed and they comes down and starts from a new line. I want this way.
I analysed both the element structure in firebug and both look same.
Here the fiddle for demonstration - FIDDLE
Please let me know for any mistake I am doing and if there is any workaround.
Since span is an inline element, it's affected by whitespace in the HTML.
In your predefined example, you have a line break between each span.
To make your JavaScript version work, you need to add some whitespace.
Add either a line break:
$("#box1").append("<span>"+val+"</span>\r\n");
or just a space:
$("#box1").append("<span>"+val+"</span> ");
The choices are equivalent, but your intention may be clearer with a line break.
How about adding CSS
.span{
display: inline-block
}

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

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.

Categories

Resources