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');
}
}
Related
I want to do this: <div class="container" style="height: calc(100vh - 349px);"> but dynamically through JavaScript because the "394" will vary.
I did this:
<script>
var afooter = document.getElementById('footer').positionInfo.height;
var acontainer = document.getElementById('container').positionInfo.height;
var dif = parseInt(acontainer) - parseInt(afooter);
document.getElementById('contenedor').setAttribute('style','height: calc(100vh -' + dif + '');
</script>
What I am doing wrong?
Try this function.
function resizeElementHeight(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");
}
I found a workaround disabeling some things instead of not showing them, so the footer now has a fixed height. That way the <div class="container" style="height: calc(100vh - 349px);">is now working.
Thank you very much all for your help.
Why my function get full height of div using javascript not work ?
I tried my code but not work , How can i do that ?
<script type="text/javascript">
$(document).ready(function(){
var elmHeight, elmMargin;
if (document.all) { // IE
elmHeight = document.getElementById(divxx).currentStyle.height;
elmMargin = parseInt(document.getElementById(divxx).currentStyle.marginTop, 10) + parseInt(document.getElementById(divxx).currentStyle.marginBottom, 10) + "px";
}
else { // Mozilla
elmHeight = document.defaultView.getComputedStyle(document.getElementById(divxx), '').getPropertyValue('height');
elmMargin = parseInt(document.defaultView.getComputedStyle(document.getElementById(divxx), '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(document.getElementById(divxx), '').getPropertyValue('margin-bottom')) + "px";
}
alert("Height=" + elmHeight + "\nMargin=" + elmMargin);
});
</script>
<style type="text/css">
#divxx {
height:20px;
margin:7px;
}
</style>
<div id="divxx">TEST AREA</div>
You've said that it doesn't show the alert, which almost certainly means there's a syntax or runtime error somewhere. Your browser's debugger can tell you where.
You're also working too hard. :-) As you're already using jQuery, why not...use jQuery?
var eleHeight = $("#divxx").outerHeight();
And if you really need that margin information for some other reason:
var $div = $("#divxx");
var eleHeight = $div.outerHeight();
var eleMargin =
parseInt($div.css("margin-top"), 10) +
parseInt($div.css("margin-bottom"), 10);
jQuery's .css handles the whole .currentStyle vs. getComputedStyle thing for you.
Live Example:
var $div = $("#divxx");
var eleHeight = $div.outerHeight();
var eleMargin =
parseInt($div.css("margin-top"), 10) +
parseInt($div.css("margin-bottom"), 10);
alert("eleHeight = " + eleHeight + ", eleMargin = " + eleMargin);
#divxx {
height: 20px;
margin: 7px;
}
<div id="divxx">TEST AREA</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
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 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')">
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';