I'm using jQuery 10.4.2 at the moment. I want to smoothly scale up an absolute positioned image. When I use the following code, I get no errors, but the animation does not occur. Instead, the image simply snaps to the full (100%) size.
HTML
<div class="box">
<img class="scaleMe" src="img.gif" />
</div>
CSS
.box { position:relative; height:0; padding-bottom:61.6667%; background-image:url('background.gif'); }
.scaleMe { display:block; position:absolute; bottom:0; left:0; z-index:1; width:50%; }
JS
$('.scaleMe').animate({width:'100%'}, 2000);
What am I doing wrong?
Update:
Here is a jsFiddle that works: http://jsfiddle.net/s_d_p/27DhK/
But here is a live demo that doesn't work.
You don't have a src on your image tag. Try:
<div class="box">
<img class="scaleMe" src="http://placekitten.com/g/200/300" />
</div>
http://jsfiddle.net/GZ8yX/
This is kind of lame, but if I capture the target width first and animate to that pixel value and then replace it with a percentage it works:
var oli = $('.scaleMe');
var toWidth = $('.box').width();
var scaleUP = function() {
oli.animate({width:toWidth}, 2000, function(){
oli.removeAttr("style");
oli.css("width", "100%");
});
}
Related
I would like to make a div move from it's current position to the right(left: 1000px) using transitions? How can I do that and trigger it using Javascript?
Check the following fiddle
JS
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
What have you tried?
Here's a simple example using vanilla js:
var box = document.getElementById("box");
box.addEventListener("click", moveBox);
function moveBox() {
box.classList.add("move");
}
#box {
background-color:blue;
height:150px;
width:150px;
left:0;
transition:left .33s ease;
position:relative;
}
#box.move {
left:500px;
}
<div id="box">
</div>
and here is is on jsfiddle: https://jsfiddle.net/cx7n88s0/
To use left, you need to set a position of relative or absolute.
Use transition on the main id or class
I have an image and a colored div overlay over my image.
I get the image width and height using jquery to set the colored overlay div width and heights.
it works fine.
here is my html :
<div class="image_overlay">
<div class="overlay"></div>
<img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" class="image">
</div>
<div class="image_overlay">
<div class="overlay"></div>
<img src="http://4.bp.blogspot.com/-BrLngyC1Bto/UpO-IY1kcNI/AAAAAAAALqA/1bSQRy3G_gU/s1600/Image-b%C3%A9b%C3%A9-facebook-8.jpg" class="image">
</div>
my css
.image_overlay{
position:relative}
.image{
z-index:1;
width:50%;
height:auto;
}
.overlay{
background-color:rgba(13, 181, 30, 0.8);
position:absolute;
z-index:2;
}
and my jquery
$(".image").load(function(){
var image_h=this.height,
image_w=this.width;
$(".overlay").height(image_h);
$(".overlay").width(image_w);
});
now I'm trying when resizing the window that the overlay get the same size of my image, using $(window).on('resize',function()... but I can't find out how to do it...
here is what I tried : http://jsfiddle.net/o4ngj624/
Can anybody help me with this ?
thanks a lot for your help,
$(document).ready(function(){
$(".image").load(function(){
var image_h=this.height,
image_w=this.width;
$(".overlay").height(image_h);
$(".overlay").width(image_w);
});
$(window).trigger('resize');
});
$(window).on('resize',function() {
var image_h=this.height,
image_w=this.width;
$(".overlay").height(image_h);
$(".overlay").width(image_w);
});
here is Jsfiddle to see it in action :
You should just trigger load event of image.
$(document).ready(function () {
$(".image").load(function () {
var image_h = this.height,
image_w = this.width;
//Use prev to find previous overlay
$(this).prev(".overlay").height(image_h).width(image_w);
});
});
$(window).on('resize', function () {
$(".image").trigger('load'); //Trigger load event of image
}).trigger('resize');
DEMO
I have a group of objects (divs) that are small squares that I can move anywhere (there's a JavaScript function to move then). Those squares are all together and form a figure. So I have that figure centered by the CSS: "left: 600px" but now I'm trying to make a more responsive design for my page and I started to percents but I encountered 2 problems.
If I add the percentage to all the objects individually, when I zoom in or zoom out or when i resize my page they become more closer of far away from each other.
If I create a div including all the objects and then add "left:50%" when I click to move them they go instantanially another 50% to left.
So my mouse is this -> () [spacespacescpace] / \ <- and this the object, but I'm still selecting that object. So that's weird...
This is the HTML:
<div id="container">
<div class="VEPart" id="me2"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me2", MoverBehaviour);
</script>
<div class="VEPart" id="me3"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me3", MoverBehaviour);
</script>
<div class="VEPart" id="me4"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me4", MoverBehaviour);
</script>
<div class="VEPart" id="me5"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me5", MoverBehaviour);
</script></div>
Here's the CSS:
#me2
{
content:url("some image");
top:401px;
left:0px;
z-index:5;
}
#me3
{
content:url("some image");
top:400px;
left:-58px;
z-index:5;
}
#me4
{
content:url("some image");
top:400px;
left:58px;
z-index:5;
}
#me5
{
content:url("some image");
top:500px;
left:-57px;
z-index:5;
}
Try setting the position property to absolute and using the percentage. It sounds like you are having a problem with relative positioning.
#me2
{
content:url("some image");
position:absolute;
top:401px;
left:50%;
z-index:5;
}
http://www.w3schools.com/cssref/pr_class_position.asp
provide a style for all div..
Just put this in your css
div {
margin-left: 20%
}
So Far:
The image is shown on the browser, but it is not resized.
<html>
<img id="banner" src="c:/Users/Name/Downloads/picture.jpg" alt="banner" />
<Script>
var X = screen.width;
var Y = screen.height;
banner = document.getElementById('banner');
banner.style.width = X + 'px';
banner.style.height = (Y/5) + 'px';
</Script>
</html>
Other Attempts:
Show the image using purely javascript
Width and height variables accessed through javascript
First, try with no size specs
Image is not shown when I use:
document.write("<img src='c:/Users/Name/Downloads/picture.jpg' />")
Future Thoughts:
My next attempt will be trying to pass the javascript width and height variables to the html since it seems that the html image always shows and given the right size specifications, then that would be exactly what I want. I will post that here if I find a successful method.
markup and CSS like this should do trick for you.
<div class="banner"></div>
div
{
background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat left top;
width:100%;
height:200px;
background-size:cover;
}
Or even better you can try this CSS instead of above
div
{
position:fixed;
left:0px;
right:0px;
top:0;
height:250px;
background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat center center;
}
I am trying to crop an image from an url and then stretch the cropped image to the available space.
<div style="width:300px; height:400px;">
<img style="width:100%; height:100%;" src="http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&d=identicon&r=PG" />
</div>
This will stretch the image appropriately, but I do not know how to crop it. I have tried to use clip:rect(0px,60px,200px,0px); but the image will stretch to the available space first and then apply the clip, so it doesn't work for me.
Edit - jsfiddle: http://jsfiddle.net/bjMp6/
For example, I want to try and just crop the head and then stretch the head
Working off of Yoshi's idea without the second div
div
{
width:300px;
height:400px;
border:1px solid #333;
overflow:hidden;
position:relative;
}
img
{
width:300%;
height:300%;
position:absolute;
top:0;
left:-50%;
}
Added the border just to see the containing div. This way you will not need to know the dims of the container but for cropping an image you will have to play with the number with any solution unless all of the images have the same relative composition ie headshots or something similar.
Here's a fiddle for your viewing pleasure.
Also as the container grows/shrinks your image will retain the same crop and position.
I made a fiddle to illustrate the canvas solution :
http://jsfiddle.net/dystroy/mDy24/
Here's the html :
<div id=theimg style="width:300px; height:400px;">
<canvas id=thecanvas style="width:100%;height:100%;">
</div>
And the js :
var img = new Image();
img.src = "http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&d=identicon&r=PG";
img.onload = function() {
var can = document.getElementById('thecanvas');
var con = can.getContext("2d");
console.log(con);
con.drawImage(img, 0, 0, 50, 50, 0, 0, can.width, can.height);
}