We Keep Coding

jQuery UI Position Utility behavior in IE 7

I'm in the process of updating our site to use modern browsers, but I still need to support the cavemen on IE7. I'm experiencing an issue with jQuery UI's position utility. The strange behavior occurs for the Windows 7 OS, using IE 11, emulating IE7 (document mode 7). The strange behavior is nonexistent to me, Windows 8 OS, using IE 11, emulating IE7 (document mode 7).
I need someone to see if this happens to them using either IE7 (not emulated) or with the same setup as our testers experiencing the issue.
The issue occurs when you hover over the missing image element in the upper right of the div. The unordered list shows up once on hover, then any subsequent hovers nothing appears. Either that or the hover never brings up the unordered list to begin with.
Here's a fiddle where the issue should appear if you have a similar work space to what I've mentioned above.
https://jsfiddle.net/bpdxL1e6/
var hoverCollection = $('.current-menu-item');
$.each(hoverCollection, function(index, object) {
$(object).hover(function() {
$(object.lastChild).position({
my: "right top",
at: "bottom right",
of: object.parentElement,
collision: "flipfit"
});
});
});
Its hard to tell the position utility is working at all in jsFiddle, as the purpose of it is mainly to keep the unordered list visible in the viewport on hover.
I have a local html doc on my desktop with the contents of the fiddle to see the effects of the position working.
Here's a link to a download of the full html file.
http://www.filedropper.com/testhtmlfiddle

I just wrote my own positioning utility. Its called hoverCopter. Supports IE7 as well as all other modern browsers.
var hoverCollection = $('.current-menu-item');
var hoveringCollection = [];
$.each(hoverCollection, function(idx, object) {
hoveringCollection.push(object.lastChild);
});
hoverCopter(hoverCollection, hoveringCollection);
function hoverCopter(objectsToTriggerHover, objectsToHover) {
$.each(objectsToTriggerHover, function(idx, object) {
$(object).hover(function() {
var bool = true;
var objWidth = $(object).offset().left + $(objectsToHover[idx]).width();
var winWidth = $(window).width() + $(window).scrollLeft();
var objHeight = $(object).offset().top + $(objectsToHover[idx]).height();
var winHeight = $(window).height() + $(window).scrollTop();
if (objWidth > winWidth) {
var left = (objWidth - $(object).width() / 2) - winWidth + (winWidth - $(object).offset().left);
$(objectsToHover[idx]).css({
'left': -left + 'px'
});
} else {
$(objectsToHover[idx]).css({
'left': 0 + 'px'
});
}
if (objHeight > winHeight) {
var top = (objHeight - $(object).height() / 2) - winHeight + (winHeight - $(object).offset().top);
$(objectsToHover[idx]).css({
'top': -top + 'px'
});
bool = false;
} else {
$(objectsToHover[idx]).css({
'top': 0 + 'px'
});
}
// this is a zIndex hack for IE7 so that the ul display above the images
var elements = $('[name="homepart_nav_wrap"]');
var int = 100;
$.each(elements, function(idx, object) {
if (bool == false) {
$(object).css("zIndex", idx);
} else {
$(object).css("zIndex", int);
}
int--;
});
});
});
}
And here's a jsFiddle. https://jsfiddle.net/bpdxL1e6/3/

Detect initial device orientation values

I'm trying to manually create a parallax effect of sorts, and so far here's my JavaScript:
var bottom = document.getElementById("bottom");
var top = document.getElementById("top");
window.addEventListener("deviceorientation", function(e) {
var gamma = e.gamma;
var beta = e.beta;
$(bottom).css('left',(gamma/2)+'px').css('top',(beta/2)+'px');
$(top).css('left',(gamma)+'px').css('top',(beta)+'px');
});
So far its working great and I have the effect I want, but the starting position of the device is not quite what I want. Currently the alpha, beta, and gamma values are only at 0,0,0 if the device is flat on the table. What I want to do is that when you load the page, that position is taken as 0,0,0.
For example, if I am reading my phone in my hand, then of course my phone is going to be at an angle already, and I want to take this starting position as 0,0,0 when the page is loaded.
So to put that into some sort of pseudo code, here's what I'm trying to achieve:
gammaOnLoad and betaOnLoad = initial device orientation
gammaCurrent and betaCurrent = e.gamma and e.beta (from event listener)
gammaDifference and betaDifference = Math.abs(gammaOnLoad - gammaCurrent)
$(elem).css('left', gammaDifference + 'px').css('top', betaDifference + 'px');
So essentially you take in the values when loading the page and use those as 0, your point of origin. This means that whatever angle your phone is at, when you load the page the image will always look normal and from there it will begin the parallax effect.

I wanted to do the same thing as you. This is very basic, but it seems to work:
$(document).ready(function() {
var origLR, origFB;
function setOrigin(eventData) {
origLR = eventData.gamma;
origFB = eventData.beta;
}
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', setOrigin, false);
setTimeout(function() {
window.removeEventListener('deviceorientation', setOrigin, false);
window.addEventListener('deviceorientation', function(eventData) {
var tiltLR = eventData.gamma,
tiltFB = eventData.beta;
tiltLR = (origLR - tiltLR);
tiltFB = (origFB - tiltFB);
deviceOrientationHandler(tiltLR, tiltFB);
}, false);
}, 100);
};
function deviceOrientationHandler(tiltLR, tiltFB) {
$('.bottom').css('transform','translateX(' + (tiltLR/5) + 'px) translateY(' + (tiltFB/5) + 'px)');
$('.top').css('transform','translateX(' + (tiltLR/2.5) + 'px) translateY(' + (tiltFB/2.5) + 'px)');
}
});
I added an event listener for 100ms that sets the initial device orientation values, then removed it and replaced it with one that calculates the difference between initial and current.
This can probably be more efficient, I'm not a particularly experienced programmer.

Jquery Drag and Drop without plugins

I have tried to create a drag and drop plugin using JQuery.
$('.draggable').on{
mousemove : function(){
var mouseposition = { // this also needs to account for onclick offset of pointer vis-a-vis element
x : pageX,
y : pageY
};
$(this).css({
top : mouseposition.y,
left : mouseposition.y
});
if( // this statement is kinda bogus, idea is to perform a collision detection via coordinate comparison
$('.draggable').offset().top < $(.droppable').offset().top
&&
$('.draggable').offset().left < $(.droppable').offset().left
) {
alert('the item has been dropped');
}
}
});
Here is the demo link what I have tried.

I have reworked your code, and updated the fiddle.
http://jsfiddle.net/XTMK8/2/
var dragging = undefined;
$('.draggable').on('mousedown', function(){
dragging = $(this);
});
$('body').on('mousemove', function(e){
if(typeof dragging != "undefined") {
dragging.css({
top : e.pageY - 50,
left : e.pageX - 50
});
}
});
$('body').on('mouseup', function(){
dragging = undefined;
});
Collision Detection
I would then recommend using the following snippet to handle collision:
jQuery/JavaScript collision detection

I'm assuming this must be an academic task or you want to do it for learning purposes (otherwise, why someone wouldn't want to use JQuery UI's draggable?) but anyway, the link below should guide in the right direction: http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
If you still want to know what's wrong with your code, I recommend starting over and add bit by bit to try to achieve the basic functionalities before coming up with a draggable and droppable at once, e.g., your mousemove function seems different from the one in JQuery's doc, I believe that, in order to retrieve pageX and pageY, you need the event object within the function's parameters:
$("#target").mousemove(function(event) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
$("#log").append("<div>" + msg + "</div>");
});
Try to set some breakpoints using Firebug and see if all variables are being populated accordingly.
I hope that helps, cheers!

Strange JavaScript scroll in firefox

I have build a website just to try out some off my ideas and to learn. I found a problem when I tested it in firefox. I made a scroll function which scrolls the page when an image reach a specific position. the image moves by arrow keys. It works great in IE9 and Chrome, but in firefox the page scrolls when I enter an arrow key. I thought it was becuase of the the page up, page down, home and end navigation on the arrowKeys, but if I disable the navigation by arrowkeys in firefox, the problem still ocures.
The scroll function:
function scrollPage() {
if(xpos > scrollPosX[scrolledX + 1]) {
scrolledX++;
window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);
}
if(xpos < scrollPosX[scrolledX] - ufoWidth) {
scrolledX--;
window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);
}
if(ypos > scrollPosY[scrolledY + 1]) {
scrolledY++;
window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);
}
if(ypos < scrollPosY[scrolledY] - ufoHeight) {
scrolledY--;
window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);
}
info5.html('scrolledX: ' + scrolledX + '<br />scrolledY: ' + scrolledY + '<br />scrollPosX: ' + scrollPosX[scrolledX] + '<br />scrollPosY: ' + scrollPosY[scrolledY]);
scrollLoop = setTimeout(scrollPage, 100);
}
xpos and ypos are the left and top positions of the image.
scrollPosX and scrollPosY are arrays containing the positions to
scroll to.
scrolledX and scrolledY are for counting the scrolls.
Here is a demo I uploaded. for the full code please lookup the page source: http://www.mikeywebs.nl/
I hope someone can tell me how to solve this. Some commentary on my code is also welcome cause im still learning.
Thanx.

In your demo's code, there is nothing preventing the scroll event to fire. Try this near line 96 in the inline JS code:
$(document).keydown(function(e){
e.preventDefault(); // Add this
var code = e.keyCode;
switch (code) {
For further info here on SO about preventing scrolling:
How to disable scrolling.

How do i make "facebook zoom"

Im making a website, and i love the functionality of this google chrome extension call Facebook Photo Zoom # https://chrome.google.com/extensions/detail/elioihkkcdgakfbahdoddophfngopipi
I think the essential idea behind the extension is when you hover over the thumbnail, it grabs the original image file and displays it in full view. If the image is too big, then it will be position on the corners or the top and bottom bars of the window. If it is not too big, it will float next to the mouse position.
The logic behind it i understand, but the actually coding seems to be a bit daunting. I guess the only parts of it i dont understand is how do you code the positions of the expanded images and make them contract/expand when you move your mouse to the left/right. Thanks

13 zoom jquery plugins in here. Choose the best for your needs:)

on mouseover you create big image with
css({position: 'absolute', left: e.pageX, top: e.pageY})
on mousemove you update the left and top in the same way.
check also:
http://api.jquery.com/event.pageY/
http://api.jquery.com/css/
http://api.jquery.com/event.pageX/

Check out this preview image tooltip which is similar to what that Chrome extension does, but you have to provide it the url to the thumbnail and full sized image. Here is the original blog post.
I modified the script to adjust the image size to fit the distance between the cursor and right browser edge. It's not perfect, but it works. Here is a demo.
/*
* Image preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$('a.preview').hover(function(e){
this.t = this.title;
this.title = '';
var p, c = (this.t != '') ? '<br/>' + this.t : '';
$('body').append('<p id="preview"><img src="' + this.href + '" alt="Image preview" />' + c + '</p>');
// load image and get size
p = $('#preview');
p
.fadeIn('fast')
.find('img').load(function(){
// get image dimensions after it has been loaded
p.data('widths', [ $(window).width(), p.find('img').width() ]);
// set image to 100% to fit in preview window
$(this).width('100%');
position(e);
});
},
function(){
this.title = this.t;
$('#preview').remove();
});
$('a.preview').mousemove(function(e){
position(e);
});
var position = function(e){
var w, prevw = $('#preview'),
w = $.data( prevw[0], 'widths' );
if ( w ) {
prevw
.css('top', e.pageY + yOffset)
.css('left', e.pageX + xOffset)
.css('max-width', (e.pageX + prevw.outerWidth() > w[0]) ? w[0] - e.pageX - xOffset : w[1] || 'auto' );
}
};
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});

See the Kabbar Image Zoomer at http://www.ideabonus.com/Kabbar/index.html