How do you get a nice outline? This is similar to the question:
CSS/Javascript: How to draw minimal border around an inline element?
However, the accepted solution to that question results in jagged textboxes, as seen here:
http://jsfiddle.net/z9THQ/2/
/* p {
text-align: justify;
} */
.wrapped {
outline: 2px solid black;
box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
}
.wrapped span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
Even with justified text, the right edge is still jagged; it should look like a single line, like in the image below.
A pure CSS solution would be ideal, but if Javascript is necessary, that would be fine too.
A related symptom which a solution would ideally solve is the fact that the :hover attribute is not activated by the region in between two lines of text. Ideally, the whole section should feel like a text-area, only it is non-rectangular since it is inline with other text.
Related
I am trying to change the border color of a textarea. I have used jQuery for doing so. Previously, I was using .css("border-color","rgb(250,0,0)"), and it was working fine. Now I am told not to use CSS in Javascript and use Class.
So I created one class named:
.redBorderColor{
border-color:rgb(255,0,0);
}
and in jQuery I used:
.addClass("redBorderColor")
When I checked it in browser, then I find class name is there in textarea's class attribute, but border color does not change. I have seen in firebug following class, from Pure CSS which was already implemented in project:
.pure-form select, .pure-form textarea {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 3px #ddd inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
}
Question is that, I want my new style class to be implemented and previous one should be not considered or ignored. As of now, my style is cut off by firebug
Firstly note the typo; redBorderClass in your JS code should be redBorderColor.
That said, you also need to make the redBorderColor CSS class more specific so that it over-rules the other CSS styling. You can use either !important:
.redBorderColor {
border-color: rgb(255, 0, 0) !important;
}
Or you can make the selector more specific:
.pure-form textarea.redBorderColor {
border-color: rgb(255, 0, 0);
}
Note that the latter is better practice.
You have
.redBorderColor
while you are adding:
redBorderClass
Issue seems to me is a simple typo. You have defined your css selector as .redBorderColor, here you can see Color.
On the otherside when you are adding the class with js/jquery you have used redBorderClass not redBorderColor.
If you wanna ignore or not considered the previous class, then remove the current class and add your class.
.removeClass('pure-form').addClass("redBorderColor");
Then, put this into your class to keep the other configuration.
border-radius: 4px;
box-shadow: 0 1px 3px #ddd inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
I have a list on my website and I would like to add a mouseenter function so that two lines appear when the mouse moves over one item and disappear when the mouse leaves. I am able to make the lines appear and disappear, but when they do they move the list items up and down, which reduces functionality and is aesthetically unappealing. I would like to make the lines appear (one above and one below the SPAN) without displacing the elements in the list.
Here is my code and a demonstration: http://jsfiddle.net/strw22fe/
script:
$(document).ready(function(){
$("SPAN").mouseenter(function() {
var line = "<hr>";
$("SPAN").eq(this.id-1).before(line);
$("SPAN").eq(this.id-1).after(line);
});
});
$(document).ready(function(){
$("SPAN").mouseleave(function() {
$("hr").remove();
});
});
Note: I have applied this function to the span because I can control its width more easily than I can the width of an li.
Best way is to do it using CSS :hover
Something like this should do fine.
Remove your JS code and insted use the following CSS code
li:hover{
border-top: 1px solid black;
border-bottom: 1px solid black;
}
li{
list-style-position: inside;
border-top: 1px solid transparent;
border-bottom:1px solid transparent;
}
Here is your updated fiddle.
I agree with Maverick, but I would expand the css so the elements don't move around and the border goes above and below the bullet point:
li:hover{
border-top: 1px solid black;
border-bottom: 1px solid black;
}
li{
list-style-position: inside;
border-top: 1px solid transparent;
border-bottom:1px solid transparent;
}
Sure enough, you should go with CSS, as suggested by Maverick.
Interesting solution the transparent borders, even if in your (simple) case I'd rather do something like this:
li{
list-style-position: inside;
}
li:hover {
border-top:1px solid;
border-bottom:1px solid;
/* just subtract the 2px added by the border-top and border-bottom from the height of the <li> */
margin:-1px 0 -1px 0;
}
re-(re-re-)updated fiddle here. ;)
There are a couple of ways to keep the span elements in place when the extra lines are added:
Initialize the page with space for the lines, so that when you add the lines you don't need extra space and don't have to move the elements.
If you are adding something like a tooltip, which isn't the case, you can make the element float above the rest of the elements so elements don't get re-sized.
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>
Consider the following HTML:
<p>This is a potentially large paragraph of text, which <span>may get
wrapped onto several lines when displayed in the browser.
I would like to be able to draw a minimal</span> box round the span</p>
I would like to draw a minimal border round the span.
That is:
If the span is rendered on a single line, the border is equivalent to setting a CSS style of border: 1px solid black;
If the span is rendered on multiple lines, the border is drawn around the outermost edges of the span, not between the lines which it crosses. This is equivalent to setting a CSS background color on the span, and drawing the line around the edges of the highlighted area.
I am fairly confident this cannot be done with raw CSS alone (in the second case). Solutions involving javascript libraries, or those which are Firefox-specific, are acceptable.
This is a mock-up of how the second scenario should look:
Consider adding an outline, not border http://jsfiddle.net/tarabyte/z9THQ/
span {
outline: 2px solid black;
}
Firefox draws outline between lines. There is a workarond: http://jsfiddle.net/z9THQ/2/
.wrapped {
outline: 2px solid black;
}
.wrapped span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
<p>
This is a potentially large paragraph of text, which
<span class="wrapped"><span>
may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal
</span></span>
box round the span
</p>
I'm trying to make a highlighter on a simple line graph, and no matter what I do, the pointlabel keeps being above the tooltip and hides the content
anyone has an idea of how to make it happen?
You must modify the jqplot css file:
.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
border: 1px solid #cccccc;
font-size: 0.75em;
white-space: nowrap;
background: rgba(208,208,208,0.5);
padding: 1px;
z-index: 3;
}
Adding a z-index greater than the .jqplot-point-label has, must solve the problem.