I have severals span in my html layout, to each i would like to append a canvas-element with jquery. I tried this with a for-each-loop:
$.each($('span'), function(index,element){
element.append('<canvas width="' + element.width + '" height="' + element.heigth + '"></canvas>');
var context = $(element).find('canvas').first().getContext('2d');
context.drawImage($('img').first(), 0,0);
});
But somehow a canvas is only appended to the first span in the layout! Why? Thanks!
JSFIDDLE: http://jsfiddle.net/aXNYx/
Try giving this fiddle a try.
http://jsfiddle.net/p55T2/1/
width and height are functions to be called.
you misspelled height as heigth
first() doesn't appear to be working, you might want to research why.
Related
I have what I think is very simple code and I expect it to modify the img width/height but it is not working.
I use createObjectURL, then get the width/height of that image.
Then, I will calculate the width/height so that I can create a thumbnail in the proper proportion (not distort the original image but just make it smaller). For now, I am just hard-coding values to see if it works, but it does not.
Then, I load the image with the new values.
But it does not change the original height/width that I set for the img in the css.
A fiddle is here:
All, help, as always is appreciated. Belows is the relevant block of code. The id="fileDisplay" is the container. The background url will be a "loading" image. id="imgDisaply" is the img component where the image gets loaded, which covers up the "loading" background. It was the only way I could figure out how to give a "loading" image as feedback to the user as the image loads.
imgSrc = window.URL.createObjectURL(this.files[0]);
getImgSize(imgSrc);
document.getElementById("imgDisplay" + justNumber).width="500";
document.getElementById("imgDisplay" + justNumber).height="200";
document.getElementById("imgDisplay" + justNumber).src = imgSrc;
In DOM, you need to use .style to mention styles.
document.getElementById("imgDisplay" + justNumber).style.width="500";
document.getElementById("imgDisplay" + justNumber).style.height="200";
You are missing the '.style' and specification of size attr (px, em, etc.).
I believe this may be what you were going for:
imgSrc = window.URL.createObjectURL(this.files[0]);
getImgSize(imgSrc);
document.getElementById("imgDisplay" + justNumber).style.width="500px";
document.getElementById("imgDisplay" + justNumber).style.height="200px";
document.getElementById("imgDisplay" + justNumber).src = imgSrc;
Ok so here is an image taken from a source and a alert message show us her width and height hope this snippet can help you:
var image = document.createElement('img');
var image_url = "https://images-na.ssl-images-amazon.com/images/G/01/img15/other-services/billboard/29597_os_int_fr_showcase_1500x300._CB288675343_.jpg";
image.src = image_url;
image.onload = function()
{
alert("width : " +image.width+ " px");
alert("height : " +image.height+ " px");
}
Hope it help
Either ways of setting width/height is somehow correct. Both of them do work, but in different ways.
document.getElementById("imgId").style.width="500px";
results in an img with inline style attribute:
<img src="..." style="width: 500px" />
While document.getElementById("imgId").setAttribute("width", "500"); creates an img with width attribute(no px at the end):
<img src="..." width="500" />
What would be the best way in Javascript/JQuery to determine the size in pixels a div would actually take to display it?
Let say I have a table with and the columns are fixed with the tag width="60px". Inside this column I add dynamically a div with a certain content, which will mostly be the following :
<div class="auto">
<img width="50px" src="/images/header-5123724.png">
<hr>
<span>Table1</span></div>
So, I know the size of the image which is 50px, but I do not know how long the text will be.
Another hint I have is that the element <span> will always be there, and the content should not be wrapped.
Is there a way to "render" the span and to get the size in pixels?
Any help is appreciated.
I found a way to accomplish what I wanted. I will post it here, maybe that can help somebody.
// add an extra span
$(this).parent().append('<span id="test" />');
//.. pick up the element to test into obj
// test the size
$('#test').html(obj.text()).css({
'font-family': obj.css('font-family'),
'font-size': obj.css('font-size'),
'font-weight': obj.css('font-weight')
});
//Width and adjustment
Width = $('#test').width() + 24;
//...If we want to check the max width, then we can loop through many columns of the table
//Finally adjust the width
obj.width(Width).css('min-width', Width);
//Cleanup
$('#test').remove();";
It is not very clean, but that worked for my case. For some reason the size of the columns were not set properly because it was resized by some plugin after the content was rendered by the browser.
Cheers.
Will the width be calculated on page load or on the fly?
If it is on page load then, #cont is the id of the content box.
$(document).ready(function() {
var dynWidth = $('#cont').width();
console.log('dynWidth: ' + dynWidth);
});
If it is on the fly then,
$(document).ready(function() {
$('#cont').bind('DOMSubtreeModified', function(){
var dynWidth = $('#cont').width();
console.log('changed dynWidth: ' + dynWidth);
});
});
Note: DOMSubtreeModified is not supported in IE8 (and below).
For any details refer this link.
I have a input. I want my div when I append it, it has same width of input. Here my code.
$("#search-result").width($("#searchForm").width());
But $("#search-result")'width not equals $("#searchForm")'s width. I try to debug it in Chrome inspect element.
But it's gerenate to HTML like this:
Why? Is there any solution to make same width? Thanks
var searchWidth = $("#searchForm").width() + 'px';
$("#search-result").css('width', searchWidth );
I am trying to create a dynamic layout of divs (100% wide top to bottom) that can be opened and closed and I don't want the content to extend beyond the bottom of the page so when the open/closed state changes I run code like this:
// BUG: maxHeight exists in the DOM but apparently cannot be programatically set
e.style.maxHeight = h;
alert('Element ' + e.id + ' was set to have a maxHeight of ' + h + ' but actually has a maxHeight of ' + e.style.maxHeight + '.');
The alert always shows no change to the max-height regardless of its initial value. This happens to be on divs. All elements have a display style of block. The debugger is showing no exceptions. Happens on Chrome, IE and Firefox. Setting max-height via a style string is no problem.
I am not doing any fancy CSS such as float, position, or border-box stuff either.
Other related answers I have seen here would seem to say this should work.
Like all dimension values in JS (height,width,top,bottom,etc.), the value(h in this case) must have a unit defined for this to work:
e.style.maxHeight = h + "px";
JSFiddle Demo
var ProdWidth = Math.abs(parseInt(Product.css('width')))
+ Math.abs(parseInt(Product.css('marginLeft')))
+ Math.abs(parseInt(Product.css('marginRight')))
+ Math.abs(parseInt(Product.css('paddingLeft')))
+ Math.abs(parseInt(Product.css('paddingRight')));
This works for coming up with the total width of an element including padding and margins, but its stupid. How should I be doing it?
Check out the outerWidth() property. It gets the width of the element and its padding, border, etc.
Setting its first argument to true will include the margins.
var ProdWidth = Product.outerWidth(true);