Add css border-right in a div - javascript

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/

Related

Finding div left position relative to window

I want to find the div left position relative to window.
I am doing like this
var diff = ($('.content-wrapper').outerWidth(true) - $('.content-wrapper').outerWidth()) ;
This is working fine but I want to see if there are any better ways to do it?
Any suggestion or help would be appreciated.
Thanks in advance
Use getBoundingClientRect.
var left = document.querySelector('div').getBoundingClientRect().left;
You can use getBoundingClientRect.
function getOffsetLeft() {
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.getBoundingClientRect().left;
}
html, body {
margin: 0;
}
#test {
left: 100px;
margin: 10px;
padding: 10px;
width: 300px;
position: relative;
border: 5px solid black
}
<div id="test">
<p>Click the button to get getBoundingClientRect().leftt for the test div.</p>
<p><button onclick="getOffsetLeft()">Try it</button></p>
<p>offsetLeft is: <span id="demo"></span></p>
</div>
Use the offset() method
var diff = $('.content-wrapper').offset().left - $(window).scrollLeft();
only this code is enough
$('.content-wrapper').offset().left
I have tested using following code
html, body {
margin: 0;
}
.content-wrapper{
position: relative;
left: 100px;
width: 200px;
height: 200px;
border: 1px solid black;
}
<div style="position:relative; left: 40px; width: 500px;height:auto; border: 1px solid black;">dfgdfgdf
<div class="content-wrapper">
dfs sf dsfds fsdfdsf
</div>
</div>
I am getting left including border of parent.
result is : 141 [ self div left is 100 + parrent div border 1 + parrent div left 40 ]

How to make a page "lights out" except for one element

I'm not really asking for help with my code, I'm more asking, how do you do this?
When you click my div, the screen goes black, but I want my div underneath to still show as normal, but the rest of the area to be blacked out.
function lightsout() {
document.getElementById("lightsout").style.visibility = "visible";
}
<div style="width:100px;height:100px;border:2px solid blue" onclick="lightsout()">Click Me</div>
<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">
You can use the box-shadow property to achieve this effect.
Updated the Code
function lightsout() {
document.getElementById("maindiv").classList.toggle("visible");
}
.visible{
box-shadow: 0 0 0 10000px #000;
position: relative;
}
body{
color: red;
}
<div style="width:100px;height:100px;border:2px solid blue; color: #000;" onclick="lightsout()" id="maindiv">Click Me</div>
Other elements on the page will be hidden...
You can simply add z-indexes to your positioning. With giving the black area a lower z-index than your button but a higher z-index than the rest, you will have your effect.
Also it is recommended to not use inline styles, as your code becomes way more maintainable with styles and markup seperate.
function lightsout() {
document.getElementById("lightsout").classList.toggle("visible");
}
.button {
position: relative;
z-index: 10;
width: 100px;
height: 100px;
border: 2px solid blue;
background: white;
}
#lightsout {
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
visibility: hidden;
}
#lightsout.visible {
visibility: visible
}
<div class="button" onclick="lightsout()">Click Me</div>
<div id="lightsout"></div>
Other elements are hidden.
you can use css,
z-index, and add divbox background-color like this :)
function lightsout() {
document.getElementById("lightsout").style.visibility = "visible";
}
#lightsout{
z-index: -1
}
<div style="width:100px;height:100px;border:2px solid blue;background-color:white;" onclick="lightsout()">Click Me</div>
<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">http://stackoverflow.com/questions/42688925/how-to-make-a-page-lights-out-except-for-one-element#

How to attach scroll bar into a div section?

I've just wrote a page with couple div-s and little CSS and javascript.
I don't know how to insert scroll bar into one of my div.
Code is not that hard to understand. CSS and javascript are included in code.
<html>
<head>
<style>
#container
{
vertical-align: top;
width: 98%;
height: 90%;
padding: 5px;
}
#discussion {
width: 99%;
height: 90%;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 5px;
text-align: left;
/*position: absolute; bottom: 0; left: 0;*/
position: relative;
}
#content
{
overflow-y: auto;
position: absolute; bottom: 0; left: 0;
}
#message {
width: 100%;
vertical-align:bottom;
padding: 5px;
border: 1px solid #ccc;
}
</style>
<script>
function init(){
var message = $('#message');
var content = $('#content');
message.keypress(function (e) {
if (e.keyCode == 13 && message.val().length > 0) {
content.append(message.val() + "<br/>");
//content.scrollTop(discussion.get(0).scrollHeight); //works fine with top to down
message.val('').focus();
}
});
};
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body onload="javascript:init();">
<div id="container">
<div id="discussion">
<div id="content"></div>
</div>
<input id="message" type="text" placeholder="Hit Enter button to insert"/>
</div>
</body>
</html>
I need scroll bar when content gets out of discussion section.
Thing is when I insert some text with from top to bottom flow scroll bar works fine.
Unfortunately, all text has to be inserted from bottom to top flow.
---------------
-
-
-
-
- first text
---------------
---------------
-
-
-
- first text
- second text
---------------
---------------
- second text
- third text
- fourth text
- fifth text
- sixth text
--------------- now I need a scroll bar to see first text.
You set the height to 90%, but it doesn't know what it's 90% of.
If you want it set to 90% of the body, you'll need to set html,body {height: 100%;}.
Then you need to remove the absolute positioning you put on the content.
Working fiddle here: http://jsfiddle.net/davidpauljunior/2PpqN/
The main cause for the problem is you missed to set the width and height for #content div.
So add it
width: 100%;
height: 100%;
Also for the parent element discussion, instead of using % value stick to static values for height so that user can view it. Currently it is very small to view the scroll.
width: 100%;
height: 200px;
JSFiddle
Hope you understand.
You need to remove overflow from #discussion and change postion to relative in #content
CSS
#discussion {
width: 99%;
height: 90%;
border: 1px solid #ccc;
padding: 5px;
text-align: left;
/*position: absolute; bottom: 0; left: 0;*/
position: relative;
}
#content
{
overflow: auto;
position: relative;
height:100px;
width:100%;
}
updated fiddle

Extend height to include absolutely positioned children

I'm building an html/javascript theme designer for a CMS. Elements are positioned absolutely and can be moved/resized via the mouse, and/or contain editable text whose height may be determined by the number of lines. However I'm running into the problem where a parent element's height does not expand to include its absolutely positioned children.
Minimal code (also on JSFiddle here):
<style>
div.layer { position: absolute }
div.layer1 { width: 400px; border: 1px solid #ccc }
div.layer2 { top: 15px; left: 100px; width: 100px; border: 1px solid blue }
</style>
<div class="layer layer1">container should expand to the bottom of the child.
<div class="layer layer2" contentEditable>Child with<br/>editable text.</div>
</div>
A CSS-only solution is ideal and I'm not concerned about older browsers. But I'm mostly looking for any way to prevent the need for javascript to run on every page using a created theme to set their height (since pages with the same theme may have different amounts of text).
There are already a few similar questions but their accepted answers (e.g. don't use absolute positioning) won't work in my case. Unless there is a way to have multiple layers of draggable/resizable elements without them being position: absolute.
I found a pure-css solution! In summary:
Set the child elements to position: relative instead of absolute.
Set their margin-right to be their negative width, to give them zero effective width, and make them float: left to keep them all on the same line. This makes all of them have an origin of 0, 0.
Then we can set their left and margin-top properties to position them absolutely within their parents. Note that margin-top is required instead of top because top won't push down the bottom of the parent element.
JSFiddle here or code below:
<style>
div.layer { position: relative; float: left; }
div.layer1 { width: 400px; border: 1px solid black }
div.layer2 { margin-top: 20px; left: 100px; width: 100px; margin-right: -100px; border: 1px solid blue }
div.layer3 { margin-top: 30px; left: 170px; width: 100px; margin-right: -100px; border: 1px solid red }
div.layer4 { margin-top: 30px; left: 20px; width: 60px; margin-right: -60px; border: 1px solid green }
</style>
<div class="layer layer1" style="position: relative; display: block; width: 400px; border: 1px solid black;">
Container
<div class="layer layer2" contentEditable>Edit me</div>
<div class="layer layer3">
<div class="layer layer4" contentEditable>Edit me</div>
</div>
</div>
absolute positioned elements are removed from the flow, thus ignored by other elements
the only way you have is to set the child position to position:relative, in this way it is possible to move it using right,left,top and bottom and also change parent display to display:inline-block
If you want keep the children absolutely positioned, you can use the following script to resize the container : http://jsfiddle.net/6csrV/7/
var layer1 = document.getElementsByClassName('layer1'),
i = 0, len = layer1.length, childHeight;
for(; i < len; i++) {
childHeight = layer1[i].getElementsByClassName('layer')[0].clientHeight;
layer1[i].style.height = childHeight + 'px';
}
document.addEventListener('keyup', function(e) {
if(e.target.className.indexOf('layer2') !== false) {
e.target.parentNode.style.height = e.target.clientHeight + 'px';
}
});

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

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>

Categories