Scaling image causes temporary jitter - javascript

This may be a duplicate question; I wasn't exactly sure how to word it so I wasn't able to find an answer.
I'm using jQuery to make an image pop out when the page loads. See http://jsfiddle.net/KT728/
The issue is that when the image reaches its final size, the edges are jittery/rough for a second or two, after which they become smooth. I've noticed this in Safari and Firefox so far. Here's the code for the animation:
$(document).ready(function() {
$("img").animate({
opacity: 1,
width: "300px",
height: "300px"
}, 400, "swing", function() {
$("img").animate({
width: "200px",
height: "200px"
});
});
});
I'm using PNG images that are 512px by 512px, scaled down anywhere from 10 by 10 to 300 by 300.
Would converting the PNG images to SVG format solve the issue, or at least make it less obvious? Are SVG images supported by most recent browsers?

Related

Javascript: Upload image on bigger background, then crop it

In my application, I need my images to be 500x360. I wanna provide an upload form to allow the user to pick a picture, resize it to the desired format, then send it to the server.
Very simple for widescreen images. I have trouble with the other sizes - more height than width. With every cropping tool I tried, there's no way for me to squeeze the complete image inside the canvas since it is limited by the width.
You can try it here. I don't know how to fit the bottle inside the canvas.
http://codepen.io/anon/pen/ZeLvJm
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 500,
height: 360,
type: 'square'
},
boundary: {
width: 600,
height: 400
},
enforceBoundary: false
});
Load this image: http://www.lcbo.com/content/dam/lcbo/products/000067.jpg/jcr:content/renditions/cq5dam.web.1280.1280.jpeg
I tried many libraries without success: croppie, cropper, angular-image-cropper, ngImgCrop...
I thought about setting a canvas 900x900, upload my image in the middle, then fiddle with it to crop it the way I like, but I am not sure on how I should proceed.
Generic directions / Library would be appreciated (jquery / angular if possible).
Thank you !

How to do 2 animations at once with jQuery

I'm working on a web project. I want to draw a div element (looks like a table) with an animation: I click on the button, then the div element appears with a small size upon the button, then it floats to "its" posion meanwhile gaining its original size.
I managed to do this, but only sequentely. First the scaling, than the floating. I want these animations to do at the same time.
I use jQuery ui show() function to make the div appear and scale to its origin size, then I use the jQuery animate fuction for the floating.
I tried to use the queue : false property. And I also called the .dequeue() function, but it woulnd't work as I wanted so.
I'll appreciate any pieces of advice. Thanks in advance. Cheers.
$('#matrix').animate({
top: positionTop,
left: positionLeft,
});
$('#matrix').show("scale", { percent: 100, direction: 'both', origin: ['top', 'left'] }, 2000);
$('#matrix').animate({
top: positionTopAim,
left: positionLeftAim
});
Fiddle here: LINK
var $matrix = $('#matrix');
// store original size
var size = {
width: $matrix.width(),
height: $matrix.height()
};
$matrix.animate({
top: positionTop,
left: positionLeft,
});
// Sets the width and height to 0
$matrix.width(0).height(0).show();
// animates into original size
$matrix.animate({
width: size.width,
height: size.height
}, {queue: false});
$matrix.animate({
top: positionTopAim,
left: positionLeftAim
}, {queue: false});
queue: false does the stuff
Here's the workaround
For further working with jQuery, prevent yourself from using the same selector twice/more-than once. It's not efficient. There's a formal directive to store the jQuery object into variable called "$something".
For more information visit this site.
Good Luck ;)

Want to use custom image for cursor of bigger size. What is the workaround for that? Is it possible to do it with javascript?

$('#dustingBrush').unbind('click').bind('click' , function () {
$(".section, window.parent.document").css({"cursor": "url("+localImagePath + data.brushPointer1+"),pointer"});
$(this).css("display" , "none");
});
The cursor image is coming from json but it is not reflecting when I am using the image of bigger size however it is working fine with smaller image.
Please suggest me the workaround for this.
Thanks ....
Please see limitation section in https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url
Firefox allows you to use 128×128px images. Larger images are ignored.
As per the article, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms
Workaround would be to hide the cursor and use a trailing div which contains the bigger image.
This will simulate the behaviour of a bigger cursor.
The sample CSS, html and jquery is given below.
CSS:
#replacePointer {
position: absolute;
cursor:none;
}
HTML:
<div id="replacePointer"><img src="http://www.w3schools.com/images/w3logotest2.png" /></div>
Jquery:
$(document).bind('mousemove', function(e){
$('#replacePointer').css({
left: e.pageX -10,
top: e.pageY -10
});
});

jquery make div with image get smaller

Hey guys i got an image inside a div and iam moving it down at a specific time by giving it a delay. I was just wondering when it is moving down how do i make it become smaller as it goes down the screen till eventually it disappears completely at a specfic location i gave it.
So far this code makes it move down with a delay function on it and a duration.
$('#fourth').animate({
width: '100px',
height: '100px'
}, 3000, function() {
$(this).show('fast').animate({
top : '-=-100'
},
{duration: 2000}
)
Thanks for all the help
Just add the width and height to the animate.
$(this).show('fast').animate({
top : '-=-100',
width: 0,
height: 0
},
{duration: 2000})
http://jsfiddle.net/xMV5Q/1/
Also, -=- is the same as += which is a bit more understandable.

CSS, jQuery: How can I zoom a image gallery?

I have an image gallery which holds lots of inline-block containers (similar to a chess field). No when I use the browser zoom strg + mouse wheel the images get scaled so that I can see more or less depending on if I zoom out or zoom in.
My question now is how I can do this directly in jQuery (maybe with a slide) without using the browser zoom function?
Is there an easy way to do this or do I have to change all widths heights?
Regards
The first question would be how much do you want to zoom the images and how big they are. I'm asking because you will need to preload the images at their maximum resolution, could be slow with large images.
Assuming this is not an issue, what I would do is write my own function to animate both width and height; I think there is no more straightforward way.
Other than this, there are plenty of jQuery plugins out there: just Google them, I've found an interesting list on: http://www.tripwiremagazine.com/2011/10/jquery-image-zoom.html
Try also this, in compact form:
$('#image').mouseover(function()
{
$(this).animate({width: "300px", height: "300px"}, 'slow');
});
$('#image').mouseout(function()
{
$(this).animate({width: "200px", height: "200px"}, 'slow');
});

Categories

Resources