Develop Reference

Background position animation on hover

I have a div1 which animates background position on hover direction of mouse by jquery.
But it's working properly. it's going not right direction and I want it to work on every single mouse hover on the div.
Find jsfiddle
code:
$(function() {
$(".mainCont").hover(function(e) {
// $(this).addClass("hoverOnce");
var edge = closestEdge(e.pageX, e.pageY, $(this).width(), $(this).height());
}, function(){
$(this).removeClass('top right bottom left');
// $(this).removeClass("hoverOnce");
});
});
function closestEdge(x,y,w,h) {
var topEdgeDist = distMetric(x,y,w/2,0);
var bottomEdgeDist = distMetric(x,y,w/2,h);
var leftEdgeDist = distMetric(x,y,0,h/2);
var rightEdgeDist = distMetric(x,y,w,h/2);
var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);
switch (min) {
case leftEdgeDist:
$(".hoverOnce").addClass("left");
case rightEdgeDist:
$(".hoverOnce").addClass("right");
case topEdgeDist:
$(".hoverOnce").addClass("top");
case bottomEdgeDist:
$(".hoverOnce").addClass("bottom");
}
}
function distMetric(x,y,x2,y2) {
var xDiff = x - x2;
var yDiff = y - y2;
return (xDiff * xDiff) + (yDiff * yDiff);
}

The size of this image that you use in the background is 700x500:
http://thesis2010.micadesign.org/kropp/images/research/bird_icon.png
I think that if you add these settings to .mainCont that this will get you the desired result:
width: 700px;
height: 500px;
position: absolute;
For example:
.mainCont {
width: 700px;
height: 500px;
background: url(http://thesis2010.micadesign.org/kropp/images/research/bird_icon.png) no-repeat center center;
transition: all 0.5s ease-in-out;
margin: 100px auto;
position: absolute;
}
Fiddle

Finally, It got solved.
find fiddle demo
$('.mainCont').hover(function(e){
var dir = determineDirection($(this), {x: e.pageX, y: e.pageY});
$(this).addClass('direction_'+dir);
}, function() {
$(this).removeClass('direction_3 direction_1 direction_2 direction_0');
});
function determineDirection($el, pos){
var w = $el.width(),
h = $el.height(),
x = (pos.x - $el.offset().left - (w/2)) * (w > h ? (h/w) : 1),
y = (pos.y - $el.offset().top - (h/2)) * (h > w ? (w/h) : 1);
return Math.round((((Math.atan2(y,x) * (180/Math.PI)) + 180)) / 90 + 3) % 4;
}

How to draw a line beet wen two points in loop?

I have an animations with jQuery which looks like that:
$(function() {
var elems = $('div.icon').not('#icon-0');
var increase = Math.PI * 2 / elems.length,
x = 0,
y = 0,
angle = 0,
radius = 200;
var center_top = ($("#slider-1").outerHeight() - $("#icon-0").outerHeight())/2,
center_left = ($("#slider-1").outerWidth() - $("#icon-0").outerWidth())/2;
$('.icon').css({
'top': center_top + 'px',
'left': center_left + 'px'
});
$(elems).css('opacity', '0').each(function(i) {
elem = elems[i];
x = radius * Math.cos(angle) + center_left;
y = radius * Math.sin(angle) + center_top;
$(elem).delay(400*i).animate({
'position': 'absolute',
'left': x + 'px',
'top': y + 'px',
'opacity': '1'
}, 1000);
angle += increase;
});
});
http://jsfiddle.net/d6pYR/
How do I write the line between the circle in the center and each of the outer circles?
I tried with the canvas and getting center coordinates via offset and some easy math, but canvas wouldn't do it properly or I just can't do that.
I'd appreciate any help from you guys.
Cheers!

taking into mind that you do not want to use canvas (or is not feasible) made ​​a solution using css3 transform ...
follows the solution
in this JSFiddle -> http://jsfiddle.net/d6pYR/2/
you need to create more one css class to make a line
.line {
border-top: 1px solid black;
position: absolute;
height: 1px;
opacity: 0;
-webkit-transform-origin: left;
transform-origin: left;
}
to create a element you can create in loop
var line = $("<div class='line'></div>");
slider.append(line);
line.css("width", 0);
line.css("top", center_top + ( $(this).height() / 2 ) );
line.css("left", center_left + ( $(this).width() / 2 ) );
line.css("transform", "rotateZ(" + angle + "rad)");

Centering a div in firefox with jQuery

So I am attempting to use the following code to center a div in the window using jQuery:
(function($) {
$.fn.extend({
center: function(options) {
var options = $.extend({ // Default values
inside: window,
// element, center into window
transition: 0,
// millisecond, transition time
minX: 0,
// pixel, minimum left element value
minY: 0,
// pixel, minimum top element value
withScrolling: true,
// booleen, take care of the scrollbar (scrollTop)
vertical: true,
// booleen, center vertical
horizontal: true // booleen, center horizontal
}, options);
return this.each(function() {
var props = {
position: 'absolute'
};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {
top: top + 'px'
});
}
if (options.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {
left: left + 'px'
});
}
if (options.transition > 0) $(this).animate(props, options.transition);
else $(this).css(props);
return $(this);
});
}
});
})(jQuery);​
This works fine in Chrome but it doesn't seem to vertically center in firefox and I can't figure what I am doing wrong. Is there a bug with firefox that would render it unable to calculate the window height?

I can't remember what I've changed but here it is:
$.fn.extend({
center: function(options) {
var options = $.extend({ // Default values
inside: window,
// element, center into window
transition: 0,
// millisecond, transition time
minX: 0,
// pixel, minimum left element value
minY: 0,
// pixel, minimum top element value
withScrolling: true,
// booleen, take care of the scrollbar (scrollTop)
vertical: true,
// booleen, center vertical
horizontal: true // booleen, center horizontal
}, options);
$(this).each(function() {
var props = {
position: 'absolute'
};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {
top: top + 'px'
});
}
if (options.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {
left: left + 'px'
});
}
if (options.transition > 0) $(this).animate(props, options.transition);
else $(this).css(props);
});
return $(this);
}
});
It seems to work fine in firefox: http://jsfiddle.net/NQRUF/4/

Try this:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
Usage:
$(element).center();
Source

jQuery on click scroll not working

The white block to the right of the image once clicked should slide across to the wonder-diner page but it doesn't seem to do anything.
http://www.wondercafe.co.uk/test/
I'm getting the following error message in element inspector:
Failed to load resource: the server responded with a status of 404 (Not Found)
<script type="text/javascript">
$.getDocHeight = function(){
return Math.max(
$(document).height(),
$(window).height(),
/* For opera: */
document.documentElement.clientHeight
);
};
$(document).ready(function() {
$('#wonder-diner #ajax-wrapper').load('/node/10 #wonder-diner', function() {
$('#wonder-diner #wonder-diner #clicker').remove();
$('#wonder-diner #ajax-wrapper #scroll').jScrollPane();
var centerwidth = $(window).width() - $('#sidebar-left').width() - $('#clicker').width() - $('#center').width() - 15;
$('#wonder-diner #center').css({ 'left' : centerwidth / 2 + $('#clicker').width() + 2.5, 'margin' : '0', 'position' : 'absolute' });
if ($(window).width() < 937) {
$('#wonder-diner #center').css({ 'right' : '230px' });
}
var contentHeight = $.getDocHeight() - ($('#footer').height() + 15) - (26 + 15) - 80; // Height of window - (footer height + padding bottom) - (margin top of #aqueeze + padding top) - padding on .inside
$('#wonder-diner #wrapper #container #center .inside').css({'height' : contentHeight});
$('#wonder-diner #scroll').css({'height' : contentHeight});
$('#wonder-diner #scroll').not($('.page-food-drink #scroll, .page-roastery-coffees #scroll')).jScrollPane({ verticalDragMaxHeight: 100 });
$(window).bind('resize', function () {
var contentHeight = $.getDocHeight() - ($('#footer').height() + 15) - (26 + 15) - 80; // Height of window - (footer height + padding bottom) - (margin top of #aqueeze + padding top) - padding on .inside
$('#wonder-diner #wrapper #container #center .inside').css({'height' : contentHeight});
var centerwidth = $(window).width() - $('#sidebar-left').width() - $('#clicker').width() - $('#center').width() - 15;
$('#wonder-diner #center').css({ 'left' : centerwidth / 2 + $('#clicker').width() + 2.5, 'margin' : '0', 'position' : 'absolute' });
$('#wonder-diner #scroll').css({'height' : contentHeight});
$('#wonder-diner #scroll').not($('.page-food-drink #scroll, .page-roastery-coffees #scroll')).jScrollPane({ verticalDragMaxHeight: 100 });
if ($(window).width() < 937) {
$('#wonder-diner #center').css({ 'right' : '230px' });
}
});
});
$('.scrollPage').click(function() {
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().left;
$("html:not(:animated),body:not(:animated)").animate({ scrollLeft: destination}, 500, 'linear' );
return false;
});
$('li.menu-2409 a').click(function() {
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().left;
$("#holder").animate({
left: '-100%'
}, 500, 'linear');
return false;
});
$('li.menu-2456 a').live('click', function() {
//var elementClicked = $(this).attr("href");
var destination = $('#restaurant').offset().left;
$("#holder").animate({
left: '0'
}, 500, 'linear');
return false;
});
});
</script>

.load('/node/10 #wonder-diner' is not a correct URL.

Change thickbox popup size dynamically

I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?
Thanks in advance.

This is the code they use
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
so you can use the same with a slight change (assuming you use a modern version of jQuery)..
$('#yourbutton').click(function() {
var TB_WIDTH = 100,
TB_HEIGHT = 100; // set the new width and height dimensions here..
$("#TB_window").animate({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
});
Demo at http://jsfiddle.net/gaby/rrH8q/

Attach a click event handler to said tab that changes the TB_Window dimensions and margins to center it again, e.g.
$("#tab").click(function() {
$("#TB_window").css("height", newHeight);
$("#TB_window").css("width", newWidth);
$("#TB_window").css("margin-top", ($(window).height()-newHeight)/2 );
$("#TB_window").css("margin-left", ($(window).width()-newWidth)/2);
});

A little correction in Gaby aka G. Petrioli's answer so that popup should set the margins also correctly :
var TB_WIDTH = 500, TB_HEIGHT = 400;
// set the new width and height dimensions here..
$("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH) / 2),10)
+ 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT) / 2),10) +
'px"'});

I did something like this.
This needs to be re-launched if the wiewport is resized while the popup is open.
function tb_position() {
if(TB_WIDTH > $(window).width())
{
$("#TB_window").css({marginLeft: 0, width: '100%', left: 0, top:0, height:'100%'});
$("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'});
$("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'});
}
else
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
}

You have to enclose this inside a setTimeout so that this will be done after the thickbox is opened, not when the button is click. Usually, it happens in between of "Clicking of button" and "opening of thickbox".
var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(),
TB_HEIGHT = 400; // set the new width and height dimensions here..
setTimeout(function() {
jQuery("#TB_window").css({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
}, 0);