The problem is therein, that element.style.width returns a string, and not a number.
I want to do increase the width like so:
element.style.width += 100;
, but it remains the same. My solution is to take one of the long ways:
element.style.width = element.offsetWidth + 100;
element.style.width = parseInt(element.style.width) + 100;
(Thankfully, it doesn't require + 'px')
Is there a better way to do this?
You can do so:
var computedStyles = window.getComputedStyle(element, null);
var width = window.parseInt(computedStyles.width, 10);
element.style.width = (width + 100) + 'px';
or with jQuery you can do like this:
$(element).css("width", "+=200");
See more about it http://api.jquery.com/css/
You could also try this, though it is not particularly apposite or compact;
element.setAttribute("style","width:" + (element.offsetWidth + 100) + "px");
A fiddle example
Related
I'm totaly confused with this piece of code. When I just load the page imgWidth1 and imgHeight1 are both equal to "0" But when I resize my window, the code works and imgWidth1 and imgHeight1 have the same value as the image dimension.
All help is welcome, thanks.
var imgWidth1 = $("#image-hover-0").outerWidth();
var imgHeight1 = $("#image-hover-0").outerHeight();
$("#hover-img-0").css("width", imgWidth1 + "px");
$("#hover-img-0").css("height", imgHeight1 + "px");
$("#hover-img-0").css("line-height", imgHeight1 + "px");
$(window).resize(function() {
var imgWidth = $("#image-hover-0").outerWidth();
var imgHeight = $("#image-hover-0").outerHeight();
$("#hover-img-0").css("width", imgWidth + "px");
$("#hover-img-0").css("height", imgHeight + "px");
$("#hover-img-0").css("line-height", imgHeight + "px");
});
This is most likely due to the fact that your code is not nested inside a $(window).load() function call. Modify your code to the following:
$(window).load(function(){
var imgWidth1 = $("#image-hover-0").outerWidth();
var imgHeight1 = $("#image-hover-0").outerHeight();
$("#hover-img-0").css("width", imgWidth1 + "px");
$("#hover-img-0").css("height", imgHeight1 + "px");
$("#hover-img-0").css("line-height", imgHeight1 + "px");
$(window).resize(function() {
var imgWidth = $("#image-hover-0").outerWidth();
var imgHeight = $("#image-hover-0").outerHeight();
$("#hover-img-0").css("width", imgWidth + "px");
$("#hover-img-0").css("height", imgHeight + "px");
$("#hover-img-0").css("line-height", imgHeight + "px");
});
});
I faced this problem before. But still the question is, do you want the real size? or the size showed on the screen ?
For the first, you should wait the image to be loaded after you can get the real size :
yourImage.addEventListener('onload',
function() {
console.log("pic's width : ", this.naturalWidth);
console.log("pic's height : ", this.naturalHeight);
});
For the second, you must encupsle it within a div and get its size.
I hope that my answer may helps you.
I want to increase the height of the div tag on click of button. Every time a user clicks a button it should increase the height of that particular div tag, say by 200px or so..
HTML
<div id="controls">
<input type="button" onclick="incHeight()" id="btn" name="btn">
</div>
<div id="container" style="min-height:250px;"> </div>
The below script works properly
Javascript
<script type="text/javascript">
function incHeight()
{
document.getElementById("container").style.height = 250+'px';
}
</script>
But I want to do something like this, which is not working. The problem I think is the 'px' portion in the value. Anybody have any idea how to extract the INT portion of the value...
<script type="text/javascript">
function incHeight()
{
document.getElementById("container").style.height += 250;
}
</script>
The problem is how do I get the '250' portion of the height value neglecting the 'px' in javascript..
Try this:
function incHeight() {
var el = document.getElementById("container");
var height = el.offsetHeight;
var newHeight = height + 200;
el.style.height = newHeight + 'px';
}
Fiddle
Try something like
var container = document.getElementById('container');
container.style.height = (container.offsetHeight + 250) + "px";
In case offsetHeight is not working, try parsing the style.height for its numeric value instead.
var currentHeight = (container.style.height) ? (parseInt(container.style.height.match(/[0-9]+/)[0]) : container.offsetHeight;
Also, simply parseInt(container.style.height) might work
Try this:
getElementById('container').setAttribute("style","height:500px");
or
function resize(element) {
var height = 0;
var body = window.document.body;
if (window.innerHeight) {
height = window.innerHeight;
} else if (body.parentElement.clientHeight) {
height = body.parentElement.clientHeight;
} else if (body && body.clientHeight) {
height = body.clientHeight;
}
element.style.height = ((height - element.offsetTop) + "px");
}
You can use a regular expression to only keep the numbers in the string:
var style = document.getElementById("container").style;
style.height = style.height.replace( /^\D+/g, '') + 'px';
I want to change the padding on my header so that it effectively is lowered onto the page. I have the following code which runs and does nothing:
function openPage() {
var i, el = document.getElementById('headbar');
for(i=0;i<30;i++) {
el.style.paddingTop = el.style.paddingTop + 1;
}
}
However, while trying to figure out why it wasn't working in the console I figured out that maybe it is because the padding must be written in pixels because the following works and changes the padding in the console:
document.getElementById('headbar').style.paddingTop='100px';
is there any way I could do this without Jquery and without having to make a substring and reconcatonating?
Try appending px to the variable
var fontSize = parseInt(el.style.paddingTop, 10);
el.style.paddingTop = ( (!isNaN(fontSize) : fontSize : 0) + 1) + 'px';
Pretty simple just do this:
for(i=0;i<30;i++) {
var px = (el.style.paddingTop + 1) + "px";
el.style.paddingTop = px;
}
I am trying to give my container element height and width via jQuery .css() but my code is setting it as window height and width. Can anyone please tell me why is the code not working?
Below is the code:
$(document).ready(function () {
var H = $(window).height();
var W = $(window).width();
var h = W / 1.625;
var w = H * 1.625;
if (w > W) {
$("#container").css("height", h + 'px').css("maxWidth", W + 'px;');
else {
$('#container').css("maxHeight", H + 'px').css("width", w + 'px;');
}
});
Your if statement is missing a }, so won't work in the first place. Change:
if(w>W)
{
$("#container").css("height", h+'px').css("maxWidth", W+'px;');
else
...
To:
if(w>W)
{
$("#container").css("height", h+'px').css("maxWidth", W+'px;');
}
else
...
Also as you're setting multiple CSS properties, you can combine these into one CSS method by passing the properties in as an object:
if (w>W)
{
$("#container").css({height:h, maxWidth:w});
}
...
jQuery sorts out the px for you in most cases. See jQuery's css() documentation for more info. :)
You're missing a closing brace } on the if, so your code should look like,
if (w > W) {
$("#container").css("height", h + 'px').css("maxWidth", W + 'px;');
}
else {
$('#container').css("maxHeight", H + 'px').css("width", w + 'px;');
}
You could improve your code readability by, passing your css properties as a part of an object, as opposed to chaining, as adding many properties is rather helpful when you pass them as an object.
if (w > W) {
$("#container").css({
"height": h + 'px',
"max-width": W + 'px'
});
}
else {
$("#container").css({
"max-height": H + 'px',
"width": w + 'px'
});
}
I have a simple function that sets the width of a bar based on an argument.
And I call the function on .each with jQuery.
The console logs the statement correctly, showing me it seems to work. However, the style seems to be overridden by the last value found.
Here is the function:
function barGraph(innerWidth, barWidth) {
innerWidth = parseInt(innerWidth) * .01 || .50;
barWidth = parseInt(barWidth) || 267;
// find percentage of total width
var innerWidth = Math.floor(innerWidth * barWidth);
var $innerBar = $('.slider-box div');
$innerBar.css('width', innerWidth + 'px');
console.log("Width should be: " + innerWidth + 'px');
}
then i call the function on each with jQuery:
$(document).ready(function() {
var $innerBar = $('.slider-box div');
$innerBar.each(function(index) {
var newWidth = $(this).attr("data-bar-width");
barGraph(newWidth, 267);
});
});
the console log shows 10 times, with all appropriate widths. However, the style for all is the same as the last width.
Can someone help explain how I get the function to set the width of the currently selected div?
Thanks so much in advance,
Adam.
Let's break it down
$(document).ready(function() {
var $innerBar = $('.slider-box div');
// going to call the barGraph function on each matching element
// so far, so good
$innerBar.each(function(index) {
var newWidth = $(this).attr("data-bar-width");
barGraph(newWidth, 267);
});
});
Then in barGraph
function barGraph(innerWidth, barWidth) {
innerWidth = parseInt(innerWidth) * .01 || .50;
barWidth = parseInt(barWidth) || 267;
// find percentage of total width
var innerWidth = Math.floor(innerWidth * barWidth);
// getting all the matching elements (again)
var $innerBar = $('.slider-box div');
// setting the width of each matched element to
// the innerwidth calculated in this barGraph call.
$innerBar.css('width', innerWidth + 'px');
console.log("Width should be: " + innerWidth + 'px');
}
So, the barGraph function is run as many times as there are matched elements in $('.slider-box div'), but each run sets the width of all matched elements. In effect, the last run will set the width of all matched elements to whatever the innerWidth is calculated to be on the last run. Is that what you want to happen?
What is more likely is perhaps something like this
$(function() {
var $innerBar = $('.slider-box div');
// going to call the barGraph function on each matching element
// so far, so good
$innerBar.each(function(index) {
var bar = $(this),
newWidth = bar.attr("data-bar-width");
barGraph(bar, newWidth, 267);
});
function barGraph(bar, innerWidth, barWidth) {
innerWidth = parseInt(innerWidth, 10) * .01 || .50;
barWidth = parseInt(barWidth, 10) || 267;
innerWidth = Math.floor(innerWidth * barWidth);
bar.css('width', innerWidth + 'px');
console.log("Width should be: " + innerWidth + 'px');
}
});
If the barGraph function is not used outside of the each call, then I might be inclined to move the function body inside of the anonymous function passed to each or modify barGraph function to be the function passed to each i.e.
$(function() {
$('.slider-box div').each(barGraph);
function barGraph(index, element) {
var bar = $(this),
newWidth = bar.attr("data-bar-width");
newWidth = parseInt(newWidth , 10) * .01 || .50;
newWidth = Math.floor(innerWidth * 267);
bar.css('width', newWidth + 'px');
console.log("Width should be: " + newWidth + 'px');
}
});
the problem is in here, have a look at your barGraph function:
var $innerBar = $('.slider-box div'); //here you choose all divs inside .slider-box
$innerBar.css('width', innerWidth + 'px'); //and set the width for all of them
change the barGraph function:
function barGraph(innerWidth, barWidth) {
innerWidth = parseInt(innerWidth) * .01 || .50;
barWidth = parseInt(barWidth) || 267;
// find percentage of total width
var innerWidth = Math.floor(innerWidth * barWidth);
var $innerBar = $('.slider-box div');
$innerBar.each(function(index){
$(this).css('width', innerWidth + 'px');
});
console.log("Width should be: " + innerWidth + 'px');
}
this may happen bacause on last barGraph() call you set all $('.slider-box div');
with last value you read into the each()
what if you try something like this
function barGraph(el, innerWidth, barWidth) {
...
el.css('width', innerWidth + 'px');
console.log("Width should be: " + innerWidth + 'px');
}
$(document).ready(function() {
var $innerBar = $('.slider-box div');
$innerBar.each(function(index, el) {
var newWidth = $(el).attr("data-bar-width");
barGraph($(el), newWidth, 267);
});
});
in this approach I passed a jQuery reference to each element, to the barGraph() function. It's also less expensive than before, since you always create a jQuery reference to a div collection.
In your barGraph function you select all instances of .slider-box div and set the width. You only want to set the one you are currently working with.
function barGraph($bar, innerWidth, barWidth) {
innerWidth = parseInt(innerWidth) * .01 || .50;
barWidth = parseInt(barWidth) || 267;
// find percentage of total width
var innerWidth = Math.floor(innerWidth * barWidth);
$bar.css('width', innerWidth + 'px');
console.log("Width should be: " + innerWidth + 'px');
}
by passing the bar into barGraph during the loop.
$(document).ready(function() {
var $innerBar = $('.slider-box div');
$innerBar.each(function(index) {
var $bar = $(this)
, newWidth = $bar.attr("data-bar-width");
barGraph($bar, newWidth, 267);
});
});
You may also want to move the selection of the width into the barGraph function to keep things clean.
Like most of jQuery's functions, css() works on collections as well as on single elements. Since $('.slider-box div') returns a collection, the CSS rule will be applied to all of the divs on every iteration of the each loop. So for 10 divs, barGraph will be called 10 × 10 = 100 times. And because the divs stay in the same order, the newWidth of the last div will be applied to all of the divs.
To apply the newWidth only to the current element in the each loop, you could keep all your logic inside that function:
var $innerBar = $('.slider-box div');
$('.slider-box div').each(function(index, element) {
var $this = $(this);
var innerWidth = ($this.attr("data-bar-width") / 10) || 0.5;
var barWidth = 267;
innerWidth = Math.floor(innerWidth * barWidth);
$this.css('width', innerWidth); // Note: no need to append 'px'; jQuery
});
This works pretty well as long as the logic is simple (a couple of lines at most) and you don't need to use it elsewhere. But when your code gets a bit more complex, you might want to brake it out into a separate function. Since you had already done this, let's look at some other solutions.
Two common solutions:
Eiter: pass the current element as a parameter of the function;
or: make it into a jQuery plugin.
The first is pretty simple:
function barGraph(element, innerWidth, barWidth) {
var $this = $(element);
// et cetera
}
// Call like this:
$('.slider-box div').each(function(index) {
var newWidth = $(this).attr("data-bar-width");
barGraph(this, newWidth, 267);
});
Like I said: simple. But it's not very neat, is it? The second solution is a bit more elegant:
$.fn.barGraph = function(barWidth) {
var $this = this; // `this` is already a jQuery object
var innerWidth = ($this.attr("data-bar-width") / 10) || 0.5;
barWidth = barWidth || 267;
innerWidth = Math.floor(innerWidth * barWidth);
$this.css('width', innerWidth);
};
// Use like this:
$('.slider-box div').each(function(index) {
$(this).barGraph(267);
});
And that's how easy it is to write your own jQuery plugin! Of course, it can use a little work, like a more descriptive name and support for chainability.