I have the code
<script type="text/javascript">
var yourImg = document.getElementById('image');
if(yourImg && yourImg.style) {
yourImg.style.height = screen.availWidth;
yourImg.style.width = screen.availHeight;
}
</script>
And I need to append px to the end of the width and height.
Thanks in Advance,
Chase
Concatenation of strings (and other values) in javascript is made using the "+" (plus) character. In your code:
<script type="text/javascript">
var yourImg = document.getElementById('image');
if(yourImg && yourImg.style) {
yourImg.style.height = screen.availWidth;
yourImg.style.width = screen.availHeight;
var height = yourImg.style.height + 'px';
var width = yourImg.style.width + 'px';
}
</script>
You didn't really provide much information, but:
screen.availWidth + 'px';
screen.availHeight + 'px';
yourImg.style.height = screen.availWidth+'px';
yourImg.style.width = screen.availHeight+'px';
Related
I have a problem with setAttribute() . I have searched the internet and this website but they did not solved my problem . I want to change the width and height of a picture with javascript but it does not work . please help me.
<html>
<head>
<meta charset="utf-8"/>
<title>Width Height Changer</title>
<script type="text/javascript">
function chang(){
var wid = document.getElementById('width').value;
var hei = document.getElementById('height').value;
var set = document.getElementById('pic');
if(Number(wid) && Number(hei)){
set.setAttribute("style","width : wid");
set.setAttribute("style","height : hei");
}else{
alert('Error');
}
}
</script>
</head>
<body>
<input type="text" id="width" placeholder="Enter Width"/>
<input type="text" id="height" placeholder="Enter Height"/>
<button onclick="chang()">OK</button><br/>
<img src="back4.jpg" id="pic" />
</body>
better to use:
set.style.width = wid +"px";
set.style.height =hei+"px";
Demo
function chang(){
var wid = document.getElementById('width').value;
var hei = document.getElementById('height').value;
var set = document.getElementById('pic');
if(Number(wid) && Number(hei)){
set.style.width = wid +"px";
set.style.height =hei+"px";
}else{
alert('Error');
}
}
Your variables are treated as strings since they are quoted - change to:
if(Number(wid) && Number(hei)){
set.setAttribute("style","width :" + wid + "px");
set.setAttribute("style","height :" + hei + "px");
} else {
you can use:
set.style.width = wid + "px";
set.style.height = hei + "px";
or
set.style.setAttribute("width", wid + "px");
set.style.setAttribute("height",hei + "px");
Recommend a few changes as well to improve readability. Using an id="width" and "height" is confusing since width/height are also JS/html keywords. Also some additional error checking never hurts:
function chang(){
var wid = document.getElementById('inputWidth').value;
var hei = document.getElementById('inputHeight').value;
var set = document.getElementById('pic');
if(Number(wid) && Number(hei) && set && set.style){
set.style.setAttribute("width", wid + "px");
set.style.setAttribute("height",hei + "px");
}else{
alert('Error');
}
}
I have the following code and it seems like the .style does not recognize my variable wid! what is wrong with it?
var wid = document.getElementById("bd").offsetWidth/2;
obj = document.getElementById('div1');
obj.style.left = wid.toString();
'bd' is the id of my body and 'div1' the id of the div i want to move.
If I just use the following, it works fine:
obj.style.left = '10px';
You don't need to use toString, just append px to the number :
var wid = document.getElementById("bd").offsetWidth/2;
obj = document.getElementById('div1');
obj.style.left = wid + 'px';
ok... I just changed my code from:
obj.style.left = wid.toString();
to:
object.style.left = wid.toString()+'px';
and it worked fine
How to change div's width by a certain value, like this:
someDiv.style.width += "100px";
It works when I want to set a value (i.e. width = "100px") but the problem is with += operator.
This would work for a vanilla javascript solution (since you didn't mention jquery):
var someDiv = document.getElementById("someDiv");
var w = 0;
if (typeof someDiv.clip !== "undefined") {
w = someDiv.clip.width;
} else {
if (someDiv.style.pixelWidth) {
w = someDiv.style.pixelWidth;
} else {
w = someDiv.offsetWidth;
}
}
someDiv.style.width = (w + 100) + "px";
<div id="test" style="height:100px"></div>
var elem=document.getElementById("test");
height=parseInt(elem.style.height);
height+=100;
height+="px"
console.log(height);
Try the following
http://jsfiddle.net/CME3Y/
That is because Javascript can't understand what "100px" + "100px" means, since those are string values.
I would do it like this using jQuery:
$(someDiv).width($(someDiv).width() + 100);
var currentwidth= $('#div').width();
$('#div').width(currentwidth +100);
http://jsfiddle.net/dolours/CME3Y/1/
Also you can use this https://stackoverflow.com/a/6179629/1479798
I have a javascript function that resize and centers images based on the surrounding container size (that in turn depend on the window size). I use jquery as js framework. The function need to be executed after document load (on document ready) but also when and if the user changes size of the browser, ie I have the following running in the html-document:
$(document).ready(function(){
fixImageSizes();
});
$(window).resize(function() {
fixImageSizes();
});
But for some unknown reason the function is only executed when a user resizes the browser and not after loading. Can anyone please help with this?
(my function is below for knowledge...)
function fixImageSizes()
{
var cw = $('#imagecontainer').width();
var ch = $('#imagecontainer').height();
$('#imagecontainer img').each(function()
{
var iw = $(this).css('width');
var ih = $(this).css('height');
if (parseInt(iw) < parseInt(cw)) // image width < viewport
{
var newih = Math.ceil(parseInt(ih) * parseInt(cw) / parseInt(iw)) + 'px';
var newimargint = '-' + Math.ceil(parseInt(newih)/2) + 'px';
var newimarginl = '-' + Math.ceil(parseInt(cw)/2) + 'px';
$(this).css({'width':cw,'height':newih,'margin-left':newimarginl,'margin-top':newimargint});
}
if (parseInt(ih) < parseInt(ch)) // image height < viewport
{
var newiw = Math.ceil(parseInt(iw) * parseInt(ch) / parseInt(ih)) + 'px';
var newimargint = '-' + Math.ceil(parseInt(ch)/2) + 'px';
var newimarginl = '-' + Math.ceil(parseInt(newiw)/2) + 'px';
$(this).css({'width':newiw,'height':ch,'margin-left':newimarginl,'margin-top':newimargint});
}
if (parseInt(ih) > parseInt(ch) && parseInt(iw) > parseInt(cw)) // viewport smaller than image, shrink image
{
if (parseInt(ch) - parseInt(ih) > parseInt(cw) - parseInt(iw)) // difference is less on height
{
var newiw = Math.ceil(parseInt(iw) * parseInt(ch) / parseInt(ih)) + 'px';
var newimargint = '-' + Math.ceil(parseInt(ch)/2) + 'px';
var newimarginl = '-' + Math.ceil(parseInt(newiw)/2) + 'px';
$(this).css({'width':newiw,'height':ch,'margin-left':newimarginl,'margin-top':newimargint});
}
else // difference less on width
{
var newih = Math.ceil(parseInt(ih) * parseInt(cw) / parseInt(iw)) + 'px';
var newimargint = '-' + Math.ceil(parseInt(newih)/2) + 'px';
var newimarginl = '-' + Math.ceil(parseInt(cw)/2) + 'px';
$(this).css({'width':cw,'height':newih,'margin-left':newimarginl,'margin-top':newimargint});
}
}
});
You should use the load event instead of the ready event.
The ready event runs after the document has loaded, but before the images has loaded, so you won't have the correct size of all elements.
The function is probably executing (you can double-check with a simple alert), but the images you are "fixing" is probably not loaded yet. You can use the window.onload event or listen to the image load event like this:
var scale = function() {
// rescale
};
$('#imagecontainer img').each(function() {
this.complete ? scale.call(this) : $(this).load(scale);
});
Try this:
$(window).load(function (){
fixImageSizes();
});
I have an iframe that loads a page inside it.. when a link is clicked on the page in the iframe, resize the body of the parent aka the document that has the iframe's body..
Body <------------------------
Iframe |
Page |
Link... Upon Click, resize body --
How do I do the above? I tried Parent.document.body.style.width = "200px". and it didn't work. Not sure what to do. Please Help!
function Parentresize(id)
{
var newheight = 2000;
var newwidth = 2000;
parent.document.getElementById(id).height= (newheight) + "px";
parent.document.getElementById(id).width= (newwidth) + "px";
}
I think you have missed the style.height and style.width
This is the code I used in iframe
<script language="javascript">
function Parentresize(id)
{
alert("U r there");
var newheight = 200;
var newwidth = 200;
parent.document.getElementById(id).style.height = newheight + "px";
parent.document.getElementById(id).style.width = newwidth + "px";
}
</script>
<a href="javascript:Parentresize('sam');" >Call Me </a>
Ok I figured it out. This code will exactly do that. It is a bit lengthy because of extra code for cross browser compatibility:
function WindowSize()
{
WinWidth = 0, WinHeight = 0; //Initialize variables with a value of 0;
if(typeof(parent.window.innerWidth) == 'number') //Well I need the parent width of the iFrame aka browser width. Width is a number, not undefined..
{
//FireFox/Opera..
WinWidth = parent.window.innerWidth;
WinHeight = parent.window.innerHeight;
}
else if(parent.document.documentElement && (parent.document.documentElement.clientWidth || parent.document.documentElement.clientHeight))
{
//IE 6+
WinWidth = parent.document.documentElement.clientWidth;
WinHeight = parent.document.documentElement.clientHeight;
}
return WinWidth;
}
function BodyResize(ID)
{
var IDTag = parent.document.getElementById(ID);
if(IDTag.clientWidth == '1024')
IDTag.style.width = (WindowSize() + 'px');
else
IDTag.style.width = '1024px';
}
just call this function BodyResize(ID)
as
<body id="mainbody" onClick="BodyResize('mainbody')"> or <iframe id="interframe" onClick="BodyResize('interframe')">