i m just trying to add div in document body but not able to do image size default as div have
try to fit image in div without give height and width,its depend on div only..
so what can i do..
HTML
<div id="placehere" style="height: 250px; width: 300px;
overflow:hidden;position:absolute">
Javascript
window.onload=function(){
var elem = document.createElement("img");
elem.setAttribute("src", "images/slider-1.jpg");
elem.setAttribute("height", "");
elem.setAttribute("width", "");
elem.setAttribute("alt", "");
document.getElementById("placehere").appendChild(elem);
}
Why not just use CSS for that? There really is no need to use JS to transfer the sizes of the containing <div> to the <img>:
The following CSS definitions should achieve what you need:
#placehere img {
width: 100%;
height: 100%;
}
jsFiddle Demo
#BenM already provide good answer using css but if you want using jquery then you can try this:-
$(document).ready(function(){
var dv=$('#placehere');
var img=$('<img/>',{ width:dv.width()+'px',height:dv.height()+'px',src:"images/slider-1.jpg"});
dv.append(img);
});
Demo
Related
I'm trying to prepend an <img> tag to a <div> like JSFiddle but I need to display just the bottom left quarter of it, not just the full one.
Markup
<div id="myDiv"></div>
Javascript
imgUrl = "nerdist.com/wp-content/uploads/2018/02/oblivion-song-615x346.png"
$('#myDiv').prepend('<img id="theImg" style="width:100%;" src="https://' + imgUrl + '"/>');
It is possible to display just a part of the image from the image src?
You do not add background to a img. Either add background to div or add an <img src=""
$('#myDiv').prepend('<img id="theImg" src="https://' + imgUrl + '"/>');
This will prepend the img tag, to append it (attach it to the last) then use .append()
You might need to style this image for proper alignment which you can do using
#theImg{
/* Your CSS here */
}
To achieve what you are trying to do, you need to style your code to adjust the image, showing only the quarter that you want by positioning the img as relative and utilizing top and left decalartions. to show a quarter (25%), we will hide (75%) in both direction.
I included a live sample for you.
check out the css, understand the mathematics and modify as much as you want. note that you must give height to the img-wrapper. without it, the top and left properties wont work.
Meanwhile, in the your js code, an image cannot have a background image, rather use the src attribute to specify the image location. I hope this solves your problem
$(document).ready(function() {
//create the image here
var img = document.createElement('img');
//listen for load event on the image.
img.addEventListener('load', function(e) {
var height = this.offsetHeight,
width = this.offsetWidth;
var hiddenheight = parseInt(0.75 * height),
visibleheight = parseInt(0.25 * height),
hiddenwidth = parseInt(0.75 * width);
$(this).css({
'top': '-' + hiddenheight + 'px',
'right': '-' + hiddenwidth + 'px'
});
$('.img-wrapper').css({
'max-height': visibleheight + 'px'
});
});
$('.img-wrapper').append(img);
$(img).attr({
'src': 'http://fjsfoundations.com/image/global/tile.jpg',
'alt': 'test image'
});
});
.img-wrapper {
overflow: hidden;
background-color: blue;
position: relative;
}
.img-wrapper > img {
display: inline-block;
height: 100%;
width: 100%;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div>
<div class="img-wrapper"></div>
</div>
Try this:
$("#mydiv").html("<img id="theImg" src="............" />");
and you can either have the img tag have it's css preset or you can do it in javascript using the same methord but using
$("#mydiv").css(...........................);
if this is the way you'd like it then i'll help more.
I'm trying to resize a panel using JavaScript to fit a small image into a panel, and struggling badly.
It's within the bold:
<body id="visCinemaTransRefund"><br>
<div id="content"><br>
<ul class="PayPanel" id="paymentDetails"><br>
Here's the CSS that needs modifying:
visCinemaTransRefund .PayPanel { width: 435px; }
How would I be able to modify with width of this panel?
I've also got a form I'm trying to resize within CSS:
visCinemaTransRefund FORM (width: 1005px;)
document.getElementById('paymentDetails').style.width = '1000px';
Have you tried using:
document.getElementById("paymentDetails").getElementsByClassName("PayPanel")[0].style.width="1000px"
Remember: getElementsByClassName return an array of elements, so using [0] you are indexing first element (and, of course, the only one).
Since getElementsById return a single elements, getElementsByClassName could be useless.
If you want to do this using CSS class :
HTML:
<div id="myDiv" class="medium"></div>
<button id="btn">Click me</button>
CSS:
#myDiv {
background-color: gray;
}
.medium {
height: 50px;
width: 50px;
}
.big {
height: 100px;
width: 100px;
}
JS:
document.getElementById("btn").onclick = function() {
var element = document.getElementById("myDiv"); // or document.getElementsByClassName("className")
if (element.className == "medium") {
document.getElementById("myDiv").className = "big";
} else {
document.getElementById("myDiv").className = "medium";
}
};
JSFIDDLE
Use the following code to change the width of tags by accessing HTML element from the DOM using getElement functions and setting width to it using setAttribute javaScript function.
document.getElementById("paymentDetails").setAttribute("style","width:500px;");
document.getElementById("visCinemaTransRefund").getElementsByTagName("form")[0].setAttribute("style","width:1000px;");
Using JavaScript:
document.getElementById('paymentDetails').style.width = '1000px';
Using JQuery:
$("paymentDetails").width(1000);
$("paymentDetails").css("width","1000px");
I'm trying to get an inline property of an element using jquery: width: auto.
As soon as I get the width, .width() returns a px value instead of auto.
This is an example of what I need:
I've an img with this inline style setted:
<img id='image' style='position: absolute; height: 200px; width: auto; top: 25px; left: 50px;' src='http://tinyurl.com/k8ef66b'/>
I need to wrap that image in an a, to make the image clickable. I need also to get the image style and move it to the anchor tag:
//--- get height, width and entire style
var imgHeight = $("#image").height();
var imgWidth = $("#image").width();
var imgStyle = $("#image").attr("style");
//---remove inline style from the img
$("#image").removeAttr("style");
//--- create the <a>, add the inline style
var anch = $("<a href='#'></a>");
$(anch).attr("style", imgStyle);
//--- add back to the img it's width and height
//--- the problem is here: imgWidth does not contain 'auto'
$("#image").css({"width" : imgWidth, "height" : imgHeight});
//--- wrap the img
$("#image").wrap(anch);
here's a fiddle with the code: http://jsfiddle.net/cBXAz/1/
any idea? How can I get the auto out of that inline style? I need to give width: auto to the image instead of a px value.
Thanks in advance, best regards
document.getElementById('image').style.width;
Or for more jquery's way:
$("#image")[0].style.width;
I have 2 divs. Since div 1 could be longer, i.e. infinite scroll div, I want to make div 2 the same height with div 1 using javascript. I tried to use the code below, but it does not work. Why?
javascript:
<script type="text/javascript">
document.getElementById("div2").setAttribute("height",document.getElementById("div1").clientHeight);
</script>
my divs:
#div1 {
width: 700px;
background: #FFF;
overflow: hidden;
float: left;
}
#div2 {
width: 300px;
background-image: url(../images/user_panel.png);
background-repeat:repeat-y;
}
What about this:
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.style.height = div1.style.height; // Might have to add +"px" here.
Just from the top of my head.
This should do the trick:
document.getElementById("div2").style.height=document.getElementById("div1").clientHeight+'px';
the setAttribute function is a DOM function to add a new attribute to an HTML element. You are trying to add the height on a div. That would have the effect:
<div id="div2" height="...">...</div>
But HTML does not define such an height HTML element attribute.
What you are looking for is to set the style of the DOM element. That would be the style DOM element property. And inside the style you have the height property that you must set:
document.getElementById("div2").style.height = document.getElementById("div1").clientHeight + "px";
In the above code sample you might also think about div1's padding (probably bringing it into the computation). This is because clientHeight includes the padding but style.height does not.
My div has a styling position:absolute, and as a result, it doesn't expand if the content is higher than it's height.
Therefore, I thought that a solution would be if I find what the is the actual content's height, and assign the height to the div with the position:absolute styling.
Any idea how to do it? or maybe an idea how to make an absolute div to expand according to its content.
Thanks in advance!
Element.scrollHeight should do the job.
Here's an awful way to get the height of the container. We're basically cloning the whole div, setting the position so that it has height, checking that height, and then removing it:
$(function () {
var clone = null;
alert( clone = $('.test').clone().css('position', 'static').appendTo(".container").height());
clone.remove();
});
Here's the fiddle: http://jsfiddle.net/vPMDh/1/
It should expand even if being absolute.
check you don't have a height: xxpx
if so, change it to min-height
As you've said "it doesn't expand if the content is higher than it's height." I guess you have a fixed height set on it.. if you do need this for some reason try using min-height instead.
Have a look at this fiddle.
<div class="classname">
Some content....
<p style="clear:both"> </p>
</div>
use a clearfix hack. heres the link
and add clearfix to you div
example
in your style sheet
<style>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
...
and in your div add clearfix the class
<div class="clearfix">
//some html tags
</div>
Thanks for contributing your question. If you use this:
$(document).ready(function(){
var x = $("#container").height();
alert(x);
//if not works then
var y = $("#container").outerHeight();
alert(y);
});
I think it is easy as clean code to find the height of any div if you do not apply the div's height too.
similar solution to #MattDiamant, but with vanilla JS and without creating a clone:
function getDivHeight(posAbsoluteDiv) {
const heightBackup = posAbsoluteDiv.style.height;
posAbsoluteDiv.style.height = 'auto';
const contentHeight = posAbsoluteDiv.getBoundingClientRect().height;
posAbsoluteDiv.style.height = heightBackup;
return contentHeight;
}