Develop Reference

Display just the bottom left quarter inside img tag on prepend

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.

pass div height and width to image

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

How to set a div height according to another div height using javascript?

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.

Center image on jQuery Slider in HTML

I have an jQuery Content Slider. But i have an problem, where tall images is stretch. Isn't it possible to center the image. Some says that i need to set the overflow to hidden. But it doesn't make any differences.
Best regard Morten Starck
The html code:
<ul class="bxslider">
<li>
<img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/4fac343a-5d4b-4aab-8205-f57f165bc484_Size687x458.jpg"/></li>
<li>
<img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/7bdfb0cc-47ec-4afa-9fc7-aa2cbb9d43a0_Size687x458.jpg"/></li>
<li>
<img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/aad1d457-285d-42e3-8e68-e243bd2988d4_Size687x458.jpg"/></li>
<li>
<img id="propImageSliderLarge" src="http://billeder.edc.dk/edcmedia/2012/04-April/04/768fda69-af61-4322-a60b-012040d78384_Size687x458.jpg"/></li>
<li>
<img id="propImageSliderLarge" onload="FixImages(true)" src="http://www.blog.designsquish.com/images/uploads/victorian-flatbush-old-hous_thumb.jpg" /></li>
And the Javascript:
<script type="text/javascript">
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager'
});
</script>
and the CSS code:
#propImageSliderLarge {
width: 530px;
height: 400px;
overflow: hidden;
position: relative;
}

There're two things you're doing wrong here. First, you're using the same ID for multiple elements, this isn't valid. I think you intended to use CSS classes. Second, you're setting the width and height attributes of the IMG tag, when in fact you should set these attributes on the container (in this case the LI). Try the following:
Change your markup to this
<li class="propImageSliderLarge">
<img src="http://billeder.edc.dk/edcmedia/2012/04-April/04/4fac343a-5d4b-4aab-8205-f57f165bc484_Size687x458.jpg"/>
</li>
Change your CSS to this
.propImageSliderLarge {
width: 530px;
height: 400px;
overflow: hidden;
position: relative;
text-align: center; /* this will centre your image in the LI */
}
Update the image dimension if larger than LI container
This script assumes variables set for containerWidth and containerHeight so just set these to whatever your LI container size is and it'll resize the images to the max constraints of the container so you can see the entire image.
function resizeImage(img) {
var imgWidth = parseInt($(img).width());
var imgHeight = parseInt($(img).height());
if (imgWidth > containerWidth || imgHeight > containerHeight) {
$(img).width(containerWidth);
$(img).height(containerHeight);
}
}​

First, change the attribute id to attribute class. Id means Identifier, and as the name goes, two things cannot have same identifier. To center the images, give an id to ul tag and add following css:
text-align: center;
Try this...not sure if it'll work.

you can run the slider in onload and check it out.
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
});
</script>
otherwise, you can use anyone suitable slider in http://bxslider.com/examples

How to color an image based on a dynamically changing percentage value?

I have an image which i want to fill with some color based on a dynamically changing value that represents percentage, e.g. if the value is 50% half of the image should be colored.
How to achieve that using JavaScript (jQuery can be used)?

You can accomplish that by utilizing the clip CSS property, and a little bit of added markup to serve an underlaying container for the unrevealing background color.
Abstract
Place an element underneath the image for the faux color fill, and set its dimensions and position to match the images'. Then use JavaScript to clip the image dynamically - thus revealing the underlying color - by altering the clip value of the image element according to your needs (you can, of course, control each offset separately, e.g. left, bottom).
Note: To achieve specifically what you desire you can alter the underlying element to contain another image that suits your needs (i.e. a top image of an empty barrel, and a bottom image of a full one).
Implementation
In this example a slider is used to trigger the value change.
Markup
<input type="range" min="0" max="100" id="slider" value="100" />
<div id="underlay"></div>
<img src="http://placekitten.com/500/207" id="image" />
Styles
#slider,
#image,
#underlay {
/* absolute positioning is mandatory for clipped elements (#image) */
position: absolute;
left: 50px;
width: 500px;
}
#image,
#underlay {
top: 100px;
height: 207px;
}
#image {
/* initial clip state */
clip: rect(auto, auto, auto, 500px);
}
#slider {
top: 50px;
}
#underlay {
background-color: #4C76A5;
}
Functionality
var img = document.getElementById('image');
var sld = document.getElementById('slider');
sld.addEventListener('change', function(e) {
// get the slider value
var val = e.srcElement.value;
// calc the percentage to pass an absolute length value to the clip property
var perc = img.width / 100 * val;
// set the images' left offset clip accordingly
img.style.clip = 'rect(auto, auto, auto, ' + perc + 'px)';
});
Live Demo
On jsFiddle
References
clip on Mozilla Developer Network
Browser support