Resize a CSS div box dynamically - javascript

if i have one div box with this css content:
.box
{
border-radius: 18px;
background: blue
width: 260px;
height: 60px;
padding: 10px;
margin: 15px;
border: 2px black solid;
position: absolute;
left: 250px;
top: 5px;
}
is it possible to create a second box with only other width, height, left and top with something like a function call with parameters in JS or something else where I only can change this params and dont need define more css boxes by myself?

this should do it: http://jsfiddle.net/91shfpxm/
$(function(){
var newbox = createBox(200, 300, 100, 50);
$('body').append(newbox);
});
function createBox(w, h, t, l)
{
return $('<div class="box"></div>').css('width', w + 'px').css('height', h + 'px').css('left', l).css('top', t);
}

Something like this will get you started:
function newBoxElement(cssClass, position, aWidth, aHeight){
var markup = '<div class = "'+cssClass+'"></div>';
$("body").append(markup);
$('.'+cssClass).css({'position': 'absolute', display: 'block', top: position.top, left: position.left, height: aHeight, width: aWidth, border: '1px solid black'});
}
Here's a jsfiddle http://jsfiddle.net/nn3hboon/
Note that the parameter cssClass is a string, position is an object assuming you're using something like $(element).offset(), and width and height are just width and height values you can get from using offsetWidth and offsetHeight on an element.

You can always create css classes by creating a style tag in your header as follows:
$("<style type='text/css'> .newbox{ color:#f00; font-weight:bold;} </style>").appendTo("head");
But in you case since you are already have a css class defined and would like to just change it's attributes, you can simply select that class using class selector in jquery and change its attributes on the fly.
$(document).find(".box").css("width","200px").css("height","300px").css("background-color","green");

Related

why is child element's width changing when parent's width changes?

I am trying to create a tooltip element that has a min width of 50px and a max width of 200px. I place the tooltip element inside another element so that I can easily control when the tooltip appears or disappears when there is a hover event on the parent.
The problem that I have is that the tooltip element's width appears to be controlled by the parent's width even though I specified that the child(tooltip) has an absolute position.
let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
b = !b;
let w = 10;
if( b ) {
w = 300;
}
p.style.width = `${w}px`
}, 5000 );
#parent {
background-color: cyan;
width: 100px;
height: 25px;
position: relative;
transition: width 2s;
}
#tooltip {
position: absolute;
top: calc( 100% + 5px );
left: 5px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="parent">
<div id="tooltip">
My long tooltip text that wraps to multiple lines as needed.
</div>
</div>
I would like the tooltip (yellow div) to keep it's size at 200px in this example, but we can see that when the parent changes width, the tooltip width also changes. Why?
Is there a way to fix this problem?
Clarification: In this example: https://codepen.io/anon/pen/ePPWER we see that the tooltip text looks nice on one line. I don't want the tooltip's div to change its width when the parent changes width, because it forces the tooltip text to wrap onto 2 lines which is undesirable.
If we check the specification related to the width of absolutely positioned element we can read this:
'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
So in your case the width of your element is shrink to fit:
Calculation of the shrink-to-fit width is similar to calculating the
width of a table cell using the automatic table layout algorithm.
Roughly: calculate the preferred width by formatting the content
without breaking lines other than where explicit line breaks occur,
and also calculate the preferred minimum width, e.g., by trying all
possible line breaks. CSS 2.1 does not define the exact algorithm.
Thirdly, calculate the available width: this is found by solving for
'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width,
available width), preferred width).
To make it easy, and without considering the min/max-width, the width of your element will try to fit the content without exceding the width of its parent container (containing block). By adding min/max-width you simply add more constraint.
One idea of fix it to remove positon:relative from the parent element so that it's no more the containing block of the position:absolute element (it will be the initial containing block which is wide enough to avoid the available width constraint).
Then use margin instead of top/left to control the position:
let p = document.getElementById( 'parent' );
let b = true;
setInterval( ()=> {
b = !b;
let w = 10;
if( b ) {
w = 300;
}
p.style.width = `${w}px`
}, 5000 );
#parent {
background-color: cyan;
width: 100px;
height: 25px;
transition: width 2s;
}
#tooltip {
position: absolute;
margin-top: 30px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="parent">
<div id="tooltip">
My long tooltip text that wraps to multiple lines as needed.
</div>
</div>
ID Tooltip is being used under Parent. When parent's width changes, it also suggest that tooltip's total width is changed. Since you have used mix-width and max-width it will expand till it reaches max-width. If you want it to be fixed then simple use width.
It is because the .parent has a position: relative. This will keep all children (position: absolute included) as confined by the parent div.
Not sure if this will work for you because it is pulling the tooltip out of the parent and making it's own with span wrapping the text. Alternatively, you'll need to change the parent from being relative otherwise it'll continually affect the child.
let p = document.getElementById('parent');
let b = true;
setInterval(() => {
b = !b;
let w = 10;
if (b) {
w = 300;
}
p.style.width = `${w}px`
}, 5000);
#parent {
background-color: cyan;
width: 100px;
height: 25px;
transition: width 2s;
position: relative;
}
#root {
position: relative;
}
#tooltip {
width: 100%;
}
#tooltip span {
position: absolute;
top: calc( 100% + 5px);
left: 5px;
min-width: 50px;
max-width: 200px;
background-color: yellow;
padding: 5px;
border: 1px solid black;
}
<div id="root">
<div id="parent"></div>
<div id="tooltip">
<span>My long tooltip text that wraps to multiple lines as needed.</span>
</div>
</div>

Get width of an element after the browser has determined its width

I have a pop up box that I want to be perfectly centered on the window. It has the following CSS properties:
#pop_up {
position: fixed;
display: inline-block;
border: 2px solid green;
box-shadow: 0px 0px 8px 5px white;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
border-radius: 5px;
background-color: grey;
}
I also have some jQuery stuff that sets this element's left and top properties.
$(document).ready(function() {
window_height = $(window).height();
window_width = $(window).width();
pop_up_height = $('#pop_up').outerHeight();
pop_up_width = $('#pop_up').outerWidth();
pop_up_left = (window_width / 2) - (pop_up_width / 2);
pop_up_top = (window_height / 2) - (pop_up_height / 2);
$('#pop_up').css('left', pop_up_left);
$('#pop_up').css('top', pop_up_top);
});
I had it alert me of all of the variables and the window variables were right but for pop_up_height and pop_up_width it would alert me '4'. This obviously means that it is only getting the border. If I change it to .innerHeight(); and .innerWidth(); it alerts '0'. So, it is returning the width before the browser decides according to my width: max-content; property. Trying to figure how to get the width after the browser auto's it.
Also, when I specify a left property does it position the element according to the border or to the actual inside of the element? So if I gave an element 2px border and a left of 20px, would the border be 20px from the left or the actual inside of the element? Just a side question.
function popCenter()
{
$('#pop_up').css({'top':($(window).height()-$('#pop_up').height())/2,'left':($(window).width()-$('#pop_up').width())/2});
}
$(document).ready(function() {
popCenter();
})
$(window).resize(function() { //if resize the window, keep the selector in center;
popCenter();
})
No the border will not be 20 px.
And the element will stick to left .
Try using $("#pop_up").width(); and .height()

Cannot set div top attribute

I'm trying to change the top value of a div from Javascript, but for some reason it's not working and just sticks with the CSS value. So in this test I try and change it to 500, but it stays at 50. Whatever value I change in CSS will reflect in the position no matter what value I try and over-ride it with in Javascript. If I remove the top from CSS, the value will be 0 no matter what.
Am I missing something obvious here?
var tQuestItemContainer = document.createElement('div');
tQuestItemContainer.id = 'popup_quests_item_container';
tQuestItemContainer.top = 500 + "px";
alert('top: ' + tQuestItemContainer.top);
tQuestContainer.appendChild(tQuestItemContainer);
Here's the CSS
#popup_quests_item_container{
position: absolute;
width: 320px;
height: 30px;
top:50px;
left:13px;
background-color: #000000;
border: 1px solid #676669;
cursor: pointer;
}
You need to set the style attribute:
tQuestItemContainer.style.top = 500 + "px";

Reposition <div> with Javascript

I am trying to reposition a div on the page depending on a certain condition.
if (somecondition)
document.getElementById("Div1").setAttribute("style", "position: absolute; left:297px; top:882px; height: 30px; width: 181px; margin-top: 0px;");
It is not repositioning the div in the html below:
<div id="Div1" style="top:366px; left:134px; position:absolute; height: 30px; width: 175px;">
Other code in the if fires.
Can anyone help?
Browser: IE8
Using setAttribute is unreliable if you want the change to be reflected in the document. Use Element.style instead:
var el = document.getElementById('Div1');
el.style.position = 'absolute';
el.style.left = '397px';
el.style.top = '882px';
el.style.height = '30px';
el.style.width = '181px';
el.style.marginTop = '0px';
You only need to do
document.getElementById("Div1").style.<some css property> = <some value>; // like
document.getElementById("Div1").style.left = "297px";
document.getElementById("Div1").style.top = "882px";
(of course you should cache the getELementById)
To use the CSS as a single string, you should set the Element.style.cssText property:
var element = document.getElementById("Div1");
element.style.cssText = "position: absolute; left:297px; top:882px; height: 30px; " +
"width: 181px; margin-top: 0px;";
Its working perfectly all right, check out the demo here.
HTML:
<div id="Div1" style="top:366px; left:134px; position:absolute; height: 30px; width: 175px;">
hello world
</div>
​
Javascript:
document.getElementById("Div1").setAttribute("style", "position: absolute; left:297px; top:82px; height: 30px; width: 181px; margin-top: 0px;");
​
Make two style classes and add two different positions to the classes. Then change the DIVs class if javascript condition is satisfied. E.g:
if(someCondition) {
document.getElementById('Div1').setAttribute('class', 'style2');
} else {
document.getElementById('Div1').setAttribute('class', 'style1');
}
CSS Styles
.style1 {
top:366px;
left:134px;
position:absolute;
height: 30px;
width: 175px;
}
.style2 {
position: absolute;
left:297px;
top:882px;
height: 30px;
width: 181px;
margin-top: 0px;
HTML
<div id="Div1" class="style1"></div>
try like
document.getElementById("Div1").style.left = "297px";
document.getElementById("Div1").style.top = "882px";
Didn't you put the javascript code in the document.ready(function(){});?

Inherit/Extend CSS properties onto another element

What's the most efficient way in jQuery to extend/inherit CSS properties from one element to another?
Desired effect
$('#blah').extendCSSTo('#me') // Is there a plugin or a good way to do this?
$('#me').css({ background: 'blue' });
#me will now have all the CSS of #blah and also background
CSS:
#blah {
padding: 5px;
width: 200px;
height: 20px;
border: 1px solid #333;
font-family: "Verdana";
}
#me {
position: absolute;
left: 5px;
top: 5px;
}
<div id="blah"></div>
<div id="me">test</div>
Edit: This will be used in a plugin so using classes and simply doing .addClass is not an option
I'm looking for the same effect as setting default value for plugin options, but instead for CSS:
$.extend([css object], [#blah css object], [#me css object])
$('#me').addClass('class');
This works, not sure if you can use the css relative to an ID though.
Try this.
function CloneStyle(sourceID, targetID){
var myStyle;
var source = document.getElementById(sourceID);
var target = document.getElementById(targetID);
if (window.getComputedStyle) {
myStyle = window.getComputedStyle(source).cssText;
}
else if (source.currentStyle) {
myStyle = $.extend(true, {}, source.currentStyle);
} else {
throw "antique browser!";
}
target.style.cssText = myStyle;
}
Now call like.
CloneStyle("blah", "me");
$('#me').css({ background: 'blue' });
Fiddle here: http://jsfiddle.net/naveen/3FdDp/
If you were to use CSS classes rather than ID references you could do the following:
$("#me").addClass($("#blah").attr("class"));
Which would copy the classes from #blah to #me

Categories

Resources