Modify pseudo-element :after's width using javascript [duplicate] - javascript

This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 5 years ago.
Markup:
<h1 class="title">Hello World</h1>
CSS:
.title {
border-bottom: 3px solid #aaa;
position: relative;
}
.title:after {
content: "";
width: 100px;
border-bottom: 3px solid red;
display: block;
position: absolute;
}
Demo: http://codepen.io/anon/pen/HDBqe
I wanted to change the .title:after's width based on the text's width, how do I change :after's width using javascript?
$.fn.textWidth = function(){
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
$('.title').each(function(){
// Change :after's width based on the text's width
// .css('width', $(this).textWidth());
});

I've found a trick which works in this case. I've updated your demo:
http://codepen.io/anon/pen/bHLtk
.title {
border-bottom: 3px solid #aaa;
position: relative;
min-width: 100%;
}
.title:after {
content: "";
width: inherit;
border-bottom: 3px solid red;
display: block;
position: absolute;
}
Notice, that .title:after has width set to inherit but his parent (.title) has overridden width with min-width. Now I can freely to set width by JavaScript to title and it take effect only on his nested pseudoelement:
$('.title').each(function(){
$(this).css('width', $(this).textWidth());
});

A pseudo-element is not part of the DOM. Therefore, you cannot change its CSS properties directly through JS.
In order to get your desired effect the way you want it, my best guess would be YUI.StyleSheet and manipulate the stylesheet itself, although I have to admit I haven't tested it myself in recent years.
Including such a utility and doing all of this calculation seems like a lot of work for width matching.
If you are willing to compromise a little bit on the semantic HTML, there is a working technique:
Your element takes the entire width of the screen. Wrapping the text with a span and adding the pseudo-element to that, as an inline-block should allow you to get the border under the text only
HTML:
<h1 class="title"><span>Hello World</span></h1>
CSS:
.title {
border-bottom: 3px solid #aaa;
position: relative;
}
.title span{
display:inline-block;
position:relative;
}
.title span:after {
content: "";
width: 100%;
border-bottom: 3px solid red;
display: block;
position: absolute;
}
Here is my version of the codePen.
For future reference:
There is a W3C Candidate Recommendation that suggests the capability of using attributes for CSS properties other than content.
This way, if and when the recommendation is approved and implemented, it might be possible to have the pseudo-element reflect the parent's attributes, as such:
this.setAttribute("length", $(this).textWidth());
And the relevant CSS:
.title:after {
...
width: attr(length px);
...
}

How's this for a different approach.... http://jsfiddle.net/mayYt/
Added CSS
.title span {
border-bottom: 3px solid red;
}
JQuery
$('.title').wrapInner('<span />');

With just a simple trick any pseudo-element can be changed (or at least replaced with something else):
$('.something').click(function(){
$(this).toggleClass('to_show');
});
.something
{
background: red;
height: 40px;
width: 120px;
position: relative;
}
.something.to_show:after
{
content: "X";
color: white;
background: green;
width: 20px;
height: 20px;
position: absolute;
right: 0px;
top: 0px;
display: block;
text-align: center;
}
.something:after
{
content: "O";
color: white;
background: blue;
width: 30px;
height: 25px;
position: absolute;
right: 0px;
top: 0px;
display: block;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="something">
click here!
</div>
</body>
</html>

Related

How to add HTML tags inside Title attribue [duplicate]

Example:
Link
How do I change the presentation of the "title" attribute in the browser?. By default, it just has yellow background and small font. I would like to make it bigger and change the background color.
Is there a CSS way to style the title attribute?
It seems that there is in fact a pure CSS solution, requiring only the css attr expression, generated content and attribute selectors (which suggests that it works as far back as IE8):
https://jsfiddle.net/z42r2vv0/2/
a {
position: relative;
display: inline-block;
margin-top: 20px;
}
a[title]:hover::after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
<a href="http://www.google.com/" title="Hello world!">
Hover over me
</a>
update w/ input from #ViROscar: please note that it's not necessary to use any specific attribute, although I've used the "title" attribute in the example above; actually my recommendation would be to use the "alt" attribute, as there is some chance that the content will be accessible to users unable to benefit from CSS.
update again I'm not changing the code because the "title" attribute has basically come to mean the "tooltip" attribute, and it's probably not a good idea to hide important text inside a field only accessible on hover, but if you're interested in making this text accessible the "aria-label" attribute seems like the best place for it: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
You can't style an actual title attribute
How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.
However, you can create something very similar using other attributes.
You can make a pseudo-tooltip with CSS and a custom attribute (e.g. data-title)
For this, I'd use a data-title attribute. data-* attributes are a method to store custom data in DOM elements/HTML. There are multiple ways of accessing them. Importantly, they can be selected by CSS.
Given that you can use CSS to select elements with data-title attributes, you can then use CSS to create :after (or :before) content that contains the value of the attribute using attr().
Styled tooltip Examples
Bigger and with a different background color (per question's request):
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
Link with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
Link with normal tooltip
More elaborate styling (adapted from this blog post):
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
position: absolute;
bottom: -1.6em;
left: 100%;
padding: 4px 4px 4px 8px;
color: #222;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);
background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
opacity: 0;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
Link with styled tooltip<br/>
Link with normal tooltip
Known issues
Unlike a real title tooltip, the tooltip produced by the above CSS is not, necessarily, guaranteed to be visible on the page (i.e. it might be outside the visible area). On the other hand, it is guaranteed to be within the current window, which is not the case for an actual tooltip.
In addition, the pseudo-tooltip is positioned relative to the element that has the pseudo-tooltip rather than relative to where the mouse is on that element. You may want to fine-tune where the pseudo-tooltip is displayed. Having it appear in a known location relative to the element can be a benefit or a drawback, depending on the situation.
You can't use :before or :after on elements which are not containers
There's a good explanation in this answer to "Can I use a :before or :after pseudo-element on an input field?"
Effectively, this means that you can't use this method directly on elements like <input type="text"/>, <textarea/>, <img>, etc. The easy solution is to wrap the element that's not a container in a <span> or <div> and have the pseudo-tooltip on the container.
Examples of using a pseudo-tooltip on a <span> wrapping a non-container element:
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
.pseudo-tooltip-wrapper {
/*This causes the wrapping element to be the same size as what it contains.*/
display: inline-block;
}
Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type="text""><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>
From the code on the blog post linked above (which I first saw in an answer here that plagiarized it), it appeared obvious to me to use a data-* attribute instead of the title attribute. Doing so was also suggested in a comment by snostorm on that (now deleted) answer.
Here is an example of how to do it:
a.tip {
border-bottom: 1px dashed;
text-decoration: none
}
a.tip:hover {
cursor: help;
position: relative
}
a.tip span {
display: none
}
a.tip:hover span {
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
left: 0px;
margin: 10px;
width: 250px;
position: absolute;
top: 10px;
text-decoration: none
}
Link<span>This is the CSS tooltip showing up when you mouse over the link</span>
CSS can't change the tooltip appearance. It is browser/OS-dependent. If you want something different you'll have to use Javascript to generate markup when you hover over the element instead of the default tooltip.
I have found the answer here: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
my own code goes like this, I have changed the attribute name, if you maintain the title name for the attribute you end up having two popups for the same text, another change is that my text on hovering displays underneath the exposed text.
.tags {
display: inline;
position: relative;
}
.tags:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: -34px;
color: #fff;
content: attr(data-gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}
.tags:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<a class="tags" data-gloss="Text shown on hovering">Exposed text</a>
I thought i'd post my 20 lines JavaScript solution here. It is not perfect, but may be useful for some depending on what you need from your tooltips.
When to use it
Automatically styles the tooltip for all HTML elements with a TITLE attribute defined (this includes elements dynamically added to the document in the future)
No Javascript/HTML changes or hacks required for every tooltip (just the TITLE attribute, semantically clear)
Very light (adds about 300 bytes gzipped and minified)
You want only a very basic styleable tooltip
When NOT to use
Requires jQuery, so do not use if you don't use jQuery
Bad support for nested elements that both have tooltips
You need more than one tooltip on the screen at the same time
You need the tooltip to disappear after some time
The code
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
Paste it anywhere, it should work even when you run this code before the DOM is ready (it just won't show your tooltips until DOM is ready).
Customize
You can change the var declarations on the second line to customize it a bit.
var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor
Style
You can now style your tooltips using the following CSS:
#tooltip {
background: #fff;
border: 1px solid red;
padding: 3px 10px;
}
A jsfiddle for custom tooltip pattern is Here
It is based on CSS Positioning and pseduo class selectors
Check MDN docs for cross-browser support of pseudo classes
<!-- HTML -->
<p>
<a href="http://www.google.com/" class="tooltip">
I am a
<span> (This website rocks) </span></a> a developer.
</p>
/*CSS*/
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
left:1.5em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
Native tooltip cannot be styled.
That being said, you can use some library that would show styles floating layers when element is being hovered (instead of the native tooltips, and suppress them) requiring little or no code modifications...
You cannot style the default browser tooltip. But you can use javascript to create your own custom HTML tooltips.
a[title="My site"] {
color: red;
}
This also works with any attribute you want to add for instance:
HTML
<div class="my_class" anything="whatever">My Stuff</div>
CSS
.my_class[anything="whatever"] {
color: red;
}
See it work at: http://jsfiddle.net/vpYWE/1/

Small shift on HTML replace with jQuery

I have a server-side created HTML structure, which needs to be recreated and exchanged by jQuery (please don't ask why..).
But the strange thing is, when it gets replaced, also I has the exact same HTML structure, there is a tiny shift of some elements to the left.
I don't have any idea why this happens. Especially after extracted it and could recreate it in a fiddle..
JSFiddle
Do you see any potential solution?
I don't think it will be helpful if I post all the code here in the question. Therefore I just post the CSS. But if you want to see it, please let me know.
.article_overview {
background-color: #f6f6f6;
width: 465px;
}
.article_overview .summaryRow {
padding: 15px 10px 0;
color: #838383;
}
.article_overview .articleRow {
padding-bottom: 20px;
border-bottom: 1px dotted #d9d9d9;
}
.article_overview .counter {
padding-bottom: 8px;
}
.article_overview .articleRow img {
max-width: 60px;
}
.article_overview .image {
float: left;
margin-right: 10px;
overflow: hidden;
}
.article_overview .text {
width: 84%;
display: inline-block;
position: relative;
min-height: 60px;
}
.article_overview .information {
width: 60%;
display: inline-block;
}
.article_overview .articleAmount,
.article_overview .priceTotal {
display: inline-block;
vertical-align: top;
}
.article_overview .articleAmount {
width: 18%;
text-align: center;
}
.article_overview .priceTotal {
width: 19%;
text-align: right;
}
.article_overview .articleNr {
position: absolute;
bottom: 0;
left: 0;
}
The problem is this
<span>Lorem ipsum</span>
<span>Lorem ipsum</span>
is not equal to this
<span>Lorem ipsum</span><span>Lorem ipsum</span>
The browser will add space between spans if you break the line.
With jQuery, you appended it, so it didn't break the line between spans.
Haha !
To solve your problem, in your initial HTML code (Html, not jQuery), remove spaces between inline elements such as span
You are changing the structure. You add an empty <div> just before .summaryRow div. I think this is produced by this line:
var sAllProducts = jQuery('<div>');
To avoid this, try to unwrap() all the content after append it. See more:
https://api.jquery.com/unwrap/

border-radius + overflow:hidden when animating with jQuery

Check this jsFiddle.
The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.
Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.
Also is there a better solution for this?
Modified your fiddle a little bit. Here is the link
Modifications:
Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css
Check if this works for you.
position: absolute and overflow: hidden don't appear to be playing nicely with display: table/table-cell. Removing the table stuff you had in there to vertically center the text fixes the problem. In Firefox, at least.
I think it's the browser thing...
This is the CSS3 version...
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
transition: height 1s;
}
.innerContainer:hover > .progressBar {
height: 300px;
}
http://jsfiddle.net/ZyhgT/2/
It no longer flashing 'cause browser handle the job (not js loop animation...). But still it shows the edge on animation finish!!! This could be the browser things... Could be a bug...
This is not related to jQuery or any javascript. In fact, if you delete all your javascript and manipulate the height of your .progressBar using css on li:hover, you will notice the bug anyway.
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
As a workaround try adding an imperceptible css transform to the mask element:
.outerContainer {
-webkit-transform: rotate(0.000001deg);
}
You just need to change your .outerContainer class and it works just fine!
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Put the level class inside the outerContainer div and style the span inside the level class to be relatively positioned. In the JavaScript, to calculate the level, divide by 10 instead of 100 for the perfect circular hover effect.
Here is a fiddle.
HTML
<div class="outerContainer">
<div class="innerContainer">
<p>Circle 3</p>
<span class="progressBar"></span>
</div>
<div class="level"><span>75</span>
</div>
</div>
CSS
body {
background: blue;
}
#circles {
text-align: center;
margin: 100px 0;
}
li {
display: inline-block;
margin: 0 10px;
position: relative;
}
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
color: #000;
width: 96px;
position: relative;
z-index: 2;
}
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
}
.level span{
position:relative;
}
JS
$(function() {
$("#circles li").hover(function(){
var thisElement = $(this);
var level = $(this).find(".level").text();
var elementHeight = $(this).find(".outerContainer").height();
level = (level/10)*elementHeight;
$(thisElement).find(".progressBar").stop().animate({
height: level
}, 300);
}, function() {
var thisElement = $(this);
$(".progressBar").stop().animate({
height: 0
}, 300);
});
});
display: table doesn't work that good with CSS positioning;
you should avoid using that, and find some other way to vertically center your labels.
If your circles have a known height, like your code seems to indicate (height:96px ecc), then just use a fixed top position for an absolutely positioned <p> element:
http://jsfiddle.net/ZyhgT/5/
Note that you don't even need jQuery for this, it is all achievable with just CSS3 (unless you are targeting old browsers)

Add css border-right in a div

How can i add css border-right after a specific position using javascript. As for example take this :
<div id="test"></div>
<style>
#test {
background-color : red;
height : 30px;
width : 200px;
}
</style>
We can add css style using javascript but if i want to add css border-right after 100px in #test then how can i do that. As in the example http://jsfiddle.net/zUxmd/1/ i have added css border using javascript but if i want to add it after a specific px value how can i do it. Any help would be great.
Update :
I have the following div structure
<div id=test>
<div id="1"></div>
<div id="2"></div>
<div>
The width for #1 and #2 is calculated in javascript and the sum of the width is set to #test. Suppose now if the total width is 188px i want to visually distinguish where is 100px just like the demo http://jsfiddle.net/zUxmd/2/ prepared by tom. Is this possible in any way just like adding marker to that position. But i dont want to add any extra dummy div.
EDIT :
The demo http://jsfiddle.net/davidThomas/zUxmd/7/ put up by david is exactly what i want. Any better idea would be appreciated.
Okay, a border for an element appears on the border of that element. The border represents the outer-most boundary of that element, so it cannot appear within the element itself, nor can it be a different length than the element side upon which it appears.
However, that said, you can sort of emulate what you want, clumsily, through addClass() and the ::after pseudo-element:
CSS:
#test.amended {
width: 100px;
position: relative;
border-right: 2px solid blue;
}
​#test.amended::after {
content: '';
position: absolute;
top: 0;
left: 102px;
bottom: 0;
display: inline-block;
width: 98px;
background-color: red;
}​
jQuery:
$(document).ready(function(){
$('div').addClass('amended');
});
JS Fiddle demo.
Edited to add a...messy (non-optimised) purely-demonstrative (and unrecommended) JavaScript solution:
function borderAt(el, pos) {
if (!el || !pos) {
return false;
}
else {
var pos = parseInt(pos, 10), // ensures a valid number (though there should be a sanity-check too)
w = el.clientWidth,
h = el.clientHeight,
nEl = document.createElement('div'),
pEl = document.createElement('div');
// adds a new 'parent' element to contain the elements
el.parentNode.appendChild(pEl);
// assigns the width of the specified 'el' element
pEl.style.width = w + 'px';
// appends the 'el' element to its new parent
pEl.appendChild(el);
nEl.style.backgroundColor = 'red';
// so the new sibling appears side-by-side
nEl.style.display = 'inline-block';
/* calculates the width required by the new-sibling element
in order to maintain visual continuity with the previous width */
nEl.style.width = w - (pos + 2) + 'px';
nEl.style.height = h + 'px';
el.style.borderRight = '2px solid blue';
el.style.width = pos + 'px';
el.style.display = 'inline-block'; // so the 'el' element appears side-by-side with its new sibling
// inserts new sibling after the 'el' element within its parent.
el.parentNode.insertBefore(nEl, el.nextSibling);
}
}
var el = document.getElementById('test');
borderAt(el, '160px');​
JS Fiddle proof-of-concept.
References:
document.createElement().
element.clientHeight.
element.clientWidth.
node.appendChild().
node.insertBefore().
node.nextSibling.
parseInt().
You can simulate this with CSS gradients and color stops.
Demo: http://dabblet.com/gist/2819172
Keep in mind that an alternative for IE will be needed - see CSS gradients support
If I understood correctly, I would add an inner div: http://jsfiddle.net/zUxmd/1/
Html:
<div id="test">
<div class="inner">
</div>
</div>​​​​​​​​​
Css:
#test{
background-color:red;
height: 30px;
width: 200px;
}
#test .inner {
height: 100%;
width: 100px;
}
Js:
$(document).ready(function(){
$('#test .inner').css('border-right','2px solid blue');
});
UPDATE
Here is another possibility using background image, the idea is to use a 1px x 1px blue dot, but I couldn't find that image :P
http://jsfiddle.net/zUxmd/5/
Html:
<div id="test"></div>​
Css:
#test{
background-color:red;
height: 30px;
width: 200px;
}
#test.limit {
background-image: url("http://www.scratchingpostgazette.com/forum/styles/Blue-Crush/theme/images/blue.gif");
background-repeat: repeat-y;
background-position: 100px 0;
}
​
Js:
$(document).ready(function(){
$('#test').addClass('limit');
});
​
What you're expecting is NOT POSSIBLE. You can do following trick
HTML:
<div class="wrapper">
<div id="test"></div>
</div>
CSS:
#test{
background-color:red;
height: 30px;
width: 200px;
}
.wrapper.bordered {
width: 300px;
border-right: 2px solid blue;
}
jQuery:
$(document).ready(function(){
$('div.wrapper').addClass('bordered');
});
DEMO 1
To get result what David do you can try:
HTML:
<div id="test">
<span class="bordered"> </span>
</div>
CSS
#test{
background-color:red;
height: 30px;
width: 200px;
position: relative;
}
.bordered {
width: 2px;
background: blue;
height: 30px;
position: absolute;
}
jQuery:
$(document).ready(function(){
$('span.bordered').css('left', '100px');
});
DEMO 2
You can't.
A border can only appear along the (whole) edge of an element.
Something like this would give the effect you're looking for, but it involves adding an additional element.
http://jsfiddle.net/zUxmd/2/
if you want to have multiple borders try :after and :before;
#test {
background: red;
border: 1px solid #bbbbbb;
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
#test:before {
border: 1px solid blue;
content: '';
width: 198px;
height: 198px;
position: absolute;
}
#test:after {
content: '';
position: absolute;
width: 196px;
height: 196px;
border: 1px solid yellow;
left: 1px; top: 1px;
}
http://jsfiddle.net/hHxHN/3/

jQuery in Chrome returns "block" instead of "inline"

I have two divs that are inline. they both have similar styles and importantly both are inline.
JQuery is reporting that their css "display" is block ONLY in chrome. I really need to know that these two are inline.
jsfiddle here
css:
div
{
display: inline;
width: 50%;
float: left;
height: 100px;
text-align: center;
font-weight: bold;
padding: 10px;
box-sizing: border-box;
}
.div1
{
background-color: black;
color: white;
border: 2px solid grey;
}
.div2
{
background-color: white;
color: black;
border: 2px solid black;
}
html:
<div class="div1">1</div>
<div class="div2">2</div>
jQuery:
jQuery("div").click(function()
{
jQuery(this).append("<br/><span>" + jQuery(this).css("display") + "</span>");
});
jQuery("div").click();
Does anyone know what is happening or more importantly what can I do? (other than pull my hair out... its starting to hurt ;) )
As I said in my comment, float: left forces display: block.
Here's the relevant information in the spec:
http://www.w3.org/TR/CSS21/visuren.html#propdef-float
The element generates a block box that
is floated to the left.
And then:
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.
To summarize said table: float = display: block.

Categories