We Keep Coding

Hover an image and show a zoomed version of an area around the cursor in a canvas element?

I am using Magnify.js (http://mark-rolich.github.io/Magnifier.js/) in an older project and want to move away from it as it is pretty convoluted.
I attempted to build my own image zoom capabilities by refactoring + reading some articles on the subject but honestly the code wasn't going to go anywhere and thus I deleted it all due to its ineptitude at the time.
Anyway, to the issue at hand, here is what I am looking to make happen:
I hover an image with a specific css class
A canvas element appears on screen only if an image with that class is what is hovered
A zoomed in version of an area around the cursor (100px x 100px) is shown inside the canvas element
As the cursor is moved around the image the canvas updates in real time to show the zoomed in part of the new hover area as described above
When the hovering stops, the canvas item is hidden once more
Sounds simple enough but it is far from it in how I am thinking about this issue.
So, my question, in short is: Are there any simple frameworks other than Magnify.js (as linked above) that you know of that I could check out or if it is simple enough to do and I am just over complicating it, how would you go about the issue?

Well, using a framework use to be a good idea because it solves cross-browser issues and is a more full-featured solution than a code that you can make from scratch.
Anyway, if your needs are very limited you can do it yourself. BTW, you dind't tag the question with jQuery, but I will suppose that you are using it.
I don't think you need to use a canvas. Instead:
Place the image twice, the second one inside a hidden container.
Scale down the first one so you can use as a thumbnail.
Leave the second one in its original size, but ensure the container has overflow: hidden.
Create a mousemove event. It needs to make visible the container.
Detect the position of the mouse inside the picture with e.pageX / e.pageY and $( element ).offset().
Calculate the ratio between the area of the thumbnail and the original picture size.
Every time you move the cursor, modify the margins of the original size picture (the one inside the container) according the calculated ratio.
Create a mouseout event that hides the container.
Here you have a snippet:
var zoom_container_size = $( '.zoom_container').height();
var zoom_area_size = 100;
var zoom_radius = zoom_area_size / 2;
$( '.thumbnail' ).mousemove(function(e) {
// Show original picture
var $original = $( '#' + this.id + '_original');
var $container = $original.parent();
$container.removeClass( 'hidden' );
// Thumbnail
var offset = $( this ).offset();
var tX = e.pageX - offset.left;
var tY = e.pageY - offset.top;
// We stay inside the limits of the zoomable area
tX = Math.max( zoom_radius, Math.min( $( this ).width() - zoom_radius, tX ) );
tY = Math.max( zoom_radius, Math.min( $( this ).height() - zoom_radius, tY ) );
// Ratios
var ratioX = ( $original.width() - zoom_container_size) / ( $( this ).width() - zoom_area_size );
var ratioY = ( $original.height() - zoom_container_size) / ( $( this ).height() - zoom_area_size );
// Margin to be set in the original
var moX = -Math.floor( ( tX - zoom_radius ) * ratioX );
var moY = -Math.floor( ( tY - zoom_radius ) * ratioY );
// Apply zoom efect
$original.css( 'marginLeft', moX );
$original.css( 'marginTop', moY );
// Log values
$('#ratios').html( 'Ratio X: <b>' + ratioX + '</b><br>Ratio Y: <b>' + ratioY + '</b>' );
$('#coordinates_thumbnail').html( 'tX: <b>' + tX + '</b><br>tY: <b>' + tY + '</b>' );
$('#coordinates_original' ).html( 'Margin left: <b>' + Math.round(moX) + '</b><br>Margin top: <b>' + moY + '</b>' );
});
$( '.thumbnail' ).mouseout(function(e) {
var $original = $( '#' + this.id + '_original');
var $container = $original.parent();
$container.addClass( 'hidden' );
});
.main_container div {
display: inline-block;
}
.thumbnail {
height: 200px;
}
div.zoom_container {
width: 200px;
height: 200px;
overflow: hidden;
}
.zoom_container.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
A beautiful pic from Külli Kolina.
<div id="zoom_area"></div>
<div class="main_container">
<img id="forest" class="thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Talv_V%C3%A4ike-Taevaskojas.jpg/640px-Talv_V%C3%A4ike-Taevaskojas.jpg">
<div class="zoom_container hidden">
<img id="forest_original" class="original" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Talv_V%C3%A4ike-Taevaskojas.jpg/640px-Talv_V%C3%A4ike-Taevaskojas.jpg">
</div>
</div>
<hr><span id="ratios">Ratios</span>
<hr><span id="coordinates_thumbnail">Coordinates</span>
<hr><span id="coordinates_original">Negative margin</span>
There is a lot of things that can be optimized in this code (mainly related to get some of the work out of the event handler) to get a smoother effect, but you have now a base to start to work on. If you are really concern about performance you can read this other answer (the topic is different but most of the ideas apply in the same way).
Hope it helps!

Jquery div movement on timer then repeat

I am having some issues with some code. I am trying to get a div to move in time with a slider show. Each time a new slide is shown the div moves.
This is what I came up with
setInterval(function() {
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
}, 3000);
This works great, the div keeps up with the slider. But It never stops. I have been trying to come up with the code to make this work but I can't seem to do it.
Once the div reaches a certain point I want it to go back to its starting point and then repet its animation over and over just as the image slider does.
Could I put another timer on another line of code to tell the div to go back to a point after a set duration? then the above code will keep playing the aniamtion? (I will give this ago now!)

Are you using a plugin for the slider? Some plugins you can set a callback like flexslider plugin:
$(elem).flexslider({
before: function(){
//event before slide transition
},
after: function(){
//event after slide transition
}
});

var count = $(".bar").length;
var current = 1;
setInterval(function() {
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
current++;
if(current == count) {
$( ".bar" ).animate({ "right": "+=" + (count*13.5) "em" }, "fast" );
current = 1;
}
}, 3000);
Maybe something like that?

var startPos = $(".bar").offset();
var endPos = $("foo").offset();
var foo = setInterval(function() {
var updatedPos = $( ".bar" ).position();
if (updatedPos.left === endPos.left) {
$(".bar").css({"left":startPos.left,"top":startPos.top});
}
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
}, 3000);
EDIT:
var pos = $(".bar").offset(); this gets the position relative to the document, you could also get the position relative to the parent node with .position() and then check on the interval if it hit the position, you could also just update the left right or top bottom, depending on your needs. but this would be a way to reset the position. You just need to know the start and end points.

How to tweak jQuery animation for the element to stay in the middle?

I have a jQuery Mobile page and I want to animate the Save button on this page to lose half of its width/height and then to animate back to its original size.
function animateMe() {
var originalHeight = $("#btnSave").height();
var originalWidth = $("#btnSave").width();
$("#btnSave").animate(
{"height": originalHeight / 2, "width": originalWidth / 2},
{ duration: "fast" }
);
$("#btnSave").animate(
{"height": originalHeight, "width": originalWidth},
{ duration: "fast" }
);
}
The animation works fine, but I was hoping for the button to collapse its middle, instead it collapses to its top/left location (as one would expect).
How can I animate the button to collapse to its middle and then back?

This would be much better using CSS3 animation and the scale transform, instead of relying on jQuery's animate. Beside other advantages with using CSS3 animations for this, the performance should be much better.
Here's a rough example, just to give you an idea:
http://jsfiddle.net/ghinda/8nNeS/

You would have to add to the animation a position change, or padding change, that offsets the element's image as well.
$("#btnSave").animate({
"height": originalHeight / 2 + "px",
"width": originalWidth / 2 + "px",
"padding-left": (originalWidth / 2) + "px",
"padding-top": (originalHeight / 2) + "px",
}, {
duration: "fast"
});
Something similar to that, anyway.

How can I make a dialog box center in the window?

I resized my jQuery UI dialog box like this:
height: $(window).height(),
width: $(window).width(),
But now It's no longer in the center of the window. Is there some way I can make it become centered?

Try below function- change the variable as per requirement
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
console.log("The calculated position is:");
console.log(top,left);
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
console.log('A jQuery selection:');
console.log($('#lightbox'));
}

Specifies where the dialog should be displayed. Possible values:
1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).
Code examples
Initialize a dialog with the position option specified.
$( ".selector" ).dialog({ position: 'top' });
Get or set the position option, after init.
//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", 'top' );
position : 'center'

If the dialog box uses absolute positioning, you can try this after resizing:
$('#dialog').animate({
'top' : ($(window).height() - $('#dialog').outerHeight()) / 2 + $(document).scrollTop(),
'left': ($(window).width() - $('#dialog').outerWidth()) / 2 + $(document).scrollLeft()
});
this will move the dialog box to the center.
Otherwise, in case the dialog box uses fixed positioning you can omit the $(document).scrollTop() and $(document).scrollLeft() from the calculation

jquery UI slider to move multiple divs

Hey i want to use jquery UI to have a slider on my page that moves multiple divs different distances.
So basically you pull the slider and div1 moves 10px left and div2 moves 20px left.
I have taken a look at the jquery UI slider here http://jqueryui.com/demos/slider/#side-scroll but i cant figure out how to get that slider to move multiple divs.
Help would be greatly appreciates. I am pretty new to jquery but i am enjoying the learning experience =]

You can use the .slide() event, no?
http://jqueryui.com/demos/slider/#event-slide
That way you can adjust the divs like you want. I'll write a little example
Made a small example:
http://labs.joggink.be/slider-multiple-divs/
The slider resizes 3 divs like this (it's very basic and ugly written):
$("#slider").slider(
{
value:100,
min: 10,
max: 250,
step: 10,
slide: function(event, ui) {
$('#div-1').css({
width : ui.value + 'px',
height: ui.value + 'px'
});
$('#div-2').css({
width : ui.value + 10 + 'px',
height: ui.value + 10 + 'px'
});
$('#div-3').css({
width : ui.value + 20 + 'px',
height: ui.value + 20 + 'px'
});
}
});
});