Selection of text appears across window in Chrome - javascript

So I am using a function to select text in a <div>. It works, but I don't like the way it displays in Google Chrome. You can see my work here. Click the button and the text in the <div> gets selected, but in Chrome, the selection stretches all the way across to the right of the window, which isn't good. It works like I want it in Firefox and IE, though.
The <div>, of course, has a width on it of 200px. I tried also putting a max-width declaration on, but that wasn't any good either. Is there any way to keep the selection from displaying this way?

Try adding the CSS rule display:inline-block to your div:
#result {
width: 200px;
font-family: Arial;
font-size: 10pt;
text-align: center;
padding: 8px;
border: 2px solid black;
display:inline-block;
}
​
jsFiddle example

You can use selectNodeContents() instead of selectNode(): http://jsfiddle.net/6XUJR/

Related

How can I stop the transparent background of multiline text overlapping between lines?

I'm facing an issue where I have an inline <span> containing multiline text, with a transparent background. Despite having a default line-height, the background on the text overlaps, causing darker, horizontal rows where the background is overlaid onto itself.
Here is a good demonstration of the problem (image + jsfiddle)
JsFiddle demonstrating this issue.
Minimal reproduction of issue
HTML:
<h1>
<span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span>
</h1>
CSS:
h1 {
text-transform: uppercase;
font-family: Arial;
line-height: 1;
font-size: 30px;
background: rgba(0,0,0,0.5);
color: #FFF;
display: inline;
}
h1 span {
position: relative;
}
Solution requirements
The background color must conform to the shape of the text; so setting the span to display:inline-block is not a workable solution.
Setting a fixed line-height (or padding) is not an optimal answer as the exact font rendering changes between browsers, and user's settings. Setting the line-height perfectly in Chrome will product an imperfect result in Firefox, for example.
The text must be dynamic and semantic. A solution cannot involve rendering an image representation of the text on the server for the client.
Preferably allows for arbitrary padding to be added or removed to reduce or increase the space between the text and the edge of the background.
Javascript could be fine. I'm using Angular 2 here, so answers which integrate nicely with that are even better.
Line height will accept a 'none' value, so you can set that and it works (if it's display:block), however (at least in chrome, safari and ff on Mac) anything inline had a 1px gap between the lines. So in the solution below I just added a padding top of 1px to the span to adjust for that gap. I'ts a little hacky, but it gets the job done. You'll want to do much more browser testing obviously. It scales fairly well with browser zoom on chrome and ff, but gets a little off at really large zoom rates on safari.
h1 {
text-transform: uppercase;
font-family: Arial;
line-height: none;
font-size: 30px;
color: #FFF;
}
h1 span {
background: rgba(0,0,0,0.5);
line-height: inherit;
display: inline;
padding-top: 1px;
}
<h1>
<span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span>
</h1>

Is it possible to prevent hidden elements jumping into view on focus

I've been tasked to create an accessible/responsive carousel and have come across an issue in Chrome regarding the focus of hidden elements.
As per this jsfiddle (http://jsfiddle.net/ft1oosep/); if you tab until the hidden element gets focus you'll see the link is hoisted into view without any update to the css properties of the element.
For the carousel, this causes problems as I need to keep track of where the carousel is at any given time. I've attempted to blur on focus but even that seems too late. Is there an easy solution to this problem or am I going to develop some complex focus/tab management?
Thanks in advance
(Please, no responses suggesting carousels are a bad idea... Its the task I've been set)
Example Code:
<style>
body {
background-color: #f2f2f2;
font-family: 'Arial';
font-size: 13px;
}
div {
width: 200px;
height: 200px;
overflow: hidden;
background-color: #ffffff;
}
a {
width: 200px;
height: 200px;
text-align: center;
background: #A6C6DD;
display: block;
color: #ffffff;
text-decoration: none;
}
a:last-child {
background: #746F9E;
}
</style>
<p>Pressing tab forces hidden link into view.</p>
<div>
Visible Link
Hidden Link
</div>
In my case, I added a dynamic tabindex attribute, so that when the tab-able elements where hidden, it was tabindex="-1" (prevent all tabbing) and when visible it becomes tabindex="0" (tab-able in the normal browser tab-order).
The code will likely be specific to the instance, but in general, set the tabindex attribute of the problmatic element to tabindex="-1" on render, then in the event that makes the problmatic element visible set tabindex="0" on that element whenever it is visible (and back to tabindex="-1"` once hidden again.)
Accessibility note: very rarely should anything other than -1 (disable tabbing) or 0 (normal tabbing flow) be used for tabindex values.
Would adding a node with js after the first link gets blurred be of any help ? So while the carousel is running there is no node there until tabbed through.

Div Content Not Appear

I have a menu that under certain circumstance some items show a little red box (think facebook friend count).
I've recently redone the css targetting the menu but nothing should have changed to cause the problem I'm seeing.
It's a simple div like this:
<div id="request-count" class="noticount"></div>
The CSS looks like:
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 0.6em;
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
I've checked the page sounce and my javascript is correctly setting the value so the div ends up looking like this:
<div id="request-count" class="noticount">1</div>
The only way I can get this to actually show up is by manually hacking the live CSS and setting the Width and Height, then it shows up without a problem.
The really odd bit is that the content "1" never shows in the div either. Very confused over this and really don't know what to try.
Not sure if this is significant or an oddity with FireBug but sometimes this div appears in the code view slightly tranparanent which usually disnifies that an element is display:none which I'm not getting either.
What can I try to solve this?
EDIT
Here is a fiddle displaying the problem:
http://jsfiddle.net/UYa5Z/
Not sure of the exact reason, but it appears that the formatting of your font-size is not working as intended. With the example that you linked, if you simply change the font-size of the noticount class from em based to px based it seems to fix the issue.
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 10px; /* this instead of font-size: 0.6em */
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
JSFiddle
Edit:
Based on my second comment below, I investigated the issue further. As this JSFiddle shows, you can keep .noticount's font-size relative if you remove the font-size: 0; from both ul#moomenu and ul#moomenu li. I'm not sure what the purpose of setting those to 0, but given you use px (instead of em) on ul#moomenu a and ul#moomenu ul a I'd suggest using my first suggested fix as it's consistent with the other font-sizes you set in your css.
Make sure the parent of.noticounthas a relativeposition that will fixe the problem
.noticountParent{
position:relative;
}
.noticount{
position:absolute;
}
Html:
<article class=noticountParent>
<div id="request-count" class="noticount">1</div>
</article>
Your ul#moomenu and ul#moomenu li define font-size:0
Since the .noticount has font-size:0.6em, the resulting font size is... 0
A font size of zero is invisible.

how to outline a long span tag?

a outline box as below is needed:
The HTML code is:
<p>We <span>prefer questions that can be answered, not</span> just discussed.</p>
It is difficult to get the coordinate of the left-top point and right-bottom point of the outline box.
using:
outline: 2px red solid;
can only work in chrome, but failed in firefox. And also failed in chrome while the line-height of <p> is 300%.
Like so:
CSS:
p {
width: 220px;
}
span {
outline: 2px red solid;
}
So you have the span around what you want, just put outline on it and done. Pretty simple uh? :D
DEMO HERE
Note: As pointed out in the comments, this doesn't seem to work in Firefox. Looking into a solution now.
If you know how to use CSS3, use it. Else, please insert the following within your html page.
<style type="text/css">
span {
border: 5px solid red;
}
</style>

How do I figure out why the contenteditable attribute doesn't work?

I seem to be having an issue with some of my css/javascript. I can't seem to be able to get contentEditable to work in my webapp. I was inspired by the answer to this post to try this method.
I've tested my browser here and it works fine.
Are there any css rules I should be aware of that may be causing it to not work? I can select the object (it highlights the div) but I can't edit/append/delete any text in the object.
I have also made sure that document.designMode = "on"
Unfortunately it's an internal app so I can't get links for everyone to try.
--EDIT--
Code Snipped as requested
<div id="textarea_textObject0_preview_container" class="te_preview" style="width: 650px; height: 365px; overflow-x: hidden; overflow-y: hidden; text-align: left; background-image: url(http://172.18.4.249/workspace/tc-a/web/style/images/bgrid.jpg); ">
<div style="display: inline-block; position: relative; cursor: move; font-weight: normal; font-style: normal; text-decoration: none; left: 170px; top: 129px; " class="ui-draggable" contenteditable="true">Start Text</div>
</div>
Some of the CSS parameters are reported by chrome:
Not sure offhand what style rules might screw things up, but to figure it out, first I'd try to inspect the page in Firebug, highlight your contenteditable element, then turn off styles rules for that element one selector at a time until it starts to work.
I see you are using the jquery UI class "ui-draggable" on your contenteidtable div. This may be a problem as draggable silences editable content like textareas by default. It can be avoided if you make your div draggable from js and specify options:
$('div').draggable({
cancel: 'div'
}
Here's more details on draggable options

Categories