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/

Replacing a title with position fixed, with another title position fixed

So I have a node.js app using express and trying to do the following:
div(class="title")
h1(class="h1_title") example_title
My jQuery for this is as follows:
jQuery(function($) {
function fixDiv() {
var $cache = $('.title');
if ($(window).scrollTop() > 140)
$cache.css({'position': 'fixed', 'top': '10px'});
else
$cache.css({'position': 'relative', 'top': 'auto'});
}
$(window).scroll(fixDiv);
fixDiv();
});
So when I scroll the title will become fixed at the top of the page. Got this working, however! I have another title below this, the exact same code. But I'm trying to get my title to replace the previous one and become fixed.
So As your scrolling down through content, the title is always fixed but its just being updated with the title relevant to the content your viewing.
Can anyone help, I'd really appreciate it. I can't find anything which is what i'm exactly looking for and my knowledge is limited.
Thank you!

I see you were asking a lot of questions about that ... I'm gonna show you an example that maybe can helps.
With an structure like this:
<div class="title">TITLE</div>
<div class="cont"><h1>TITLE</h1></div>
<div class="cont"><h1>Content1</h1></div>
<div class="cont"><h1>Content2</h1></div>
<div class="cont"><h1>Content3</h1></div>
Where .title gonna be the fixed header you can use Jquery to change the value base on the h1 of the other containers.
$(window).scroll(function(){
$('.cont').each(function(){
var t = $(this).offset().top - 50,
tit = $(this).find('h1').text(),
h = $(this).height(),
ws = $(window).scrollTop();
if (t < ws && ws < (h+t)) {
$('.title').html(tit);
}
})
})
Check this CodePen Demo

Here is a really basic example: http://jsfiddle.net/jgxevwa6/1/ -- I didn't try to get the spacing perfect or anything.
You have your fixed class:
.fixed {
position: fixed;
top: 0;
}
And then the magic. Basically any time you scroll, it cycles through each block and determines which is in the viewport by using a basic scrolling model:
(function($) {
var utils = {
fixTitle: function(e) {
var top = e.currentTarget.scrollY;
$('div').each(function() {
var thistop = $(this).position().top;
if(top > thistop) {
$('.title').removeClass('fixed');
$(this).find('.title').addClass('fixed');
}
});
}
};
$(function() {
$(window).scroll(utils.fixTitle);
});
})(jQuery);
The javascript and CSS could be a little more accurate, but this gives you the basic gist of it.

fixed position for a div inside a div

i was working on woocommerce site.My Site . The single product page has a control generator with a number of drop down options.So when a user selects each options he cannot see the changes happening at the top.So i position the image div as fixed.As follows.
.single-product .images{position:fixed;}
this made the image fixed but it is floating till down the page.I only need it just before the description/review tabs starts.Is there any other css or any js/jquery solutions to solve this .Please help.Thanks!!

Based on your website environment, you need something like this:
var images = jQuery('.images');
jQuery.fn.followTo = function (pos) {
var $this = this,
$window = jQuery(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos - $this.height()
});
} else {
$this.css({
position: 'fixed',
top: 'auto' //earlier it was 0
});
}
});
};
images.followTo(jQuery('#myTab').offset().top - images.height());
You may need to re-position the elements a bit, but the script will work on your website, as I tested with firebug.
I have note written this script, the script attributed to: Stopping fixed position scrolling at a certain point?
Let me know if you can take it forward from here :)

Elements refuse to move - jQuery .css

Here I have an odd problem. I'm building a simple helicopter game (the old type - click to go up, avoid obstacles). My problem is that the obstacles generate, but don't position correctly, and then they won't move. I'm trying to move them with jQuery's css() - the css method works fine on anything else but when used with top and left doesn't.
The problem functions (generate and move obstacles):
game.background.generateObs = function() {
var top = Math.floor(Math.random()*game.canvas.height);
var left = game.canvas.width-10;
var $obs = $("<div></div>")
$obs.addClass("obs").appendTo("#canvas");
$obs.css({
background: "black",
position: "absolute",
height: game.obstacle.height,
width: game.obstacle.width,
});
$obs.css("top", $("#canvas").offset().top + top )
.css("left",$("#canvas").offset().left + left);
game.obstacle.width = Math.floor(Math.random()*200);
if(game.gameState=="running") {
setTimeout("game.background.generateObs()",obsInterval);
}
else {
return;
}
}
game.background.moveObs = function() {
var currentPos = $("#canvas div.obs").css("left");
var newPos = currentPos - game.obstacle.frameWidth;
$("#canvas div.obs").css("left",newPos);
if(game.gameState=="running") {
setTimeout("game.background.moveObs()",interval);
}
else {
return;
}
}
The other thing is that jsFiddle is now telling me that game is undefined, when I have defined it right at the start.
Can anyone tell me what I'm doing wrong? Here's the fiddle.

$("#canvas div.obs").css("left") is returning auto in your fiddle, not a number.
Try using .offset().left instead.
Additionally, you should change your setTimeout calls like this:
setTimeout(game.background.moveObs,interval);

jQuery animation affects content below (Chrome)

I've create an affect that runs when a row of icons are visible on screen.
The animation is essentially changing the padding of a div, giving the effect of a pulse from the icons.
It works perfectly in every browser except Chrome (surprisingly!). Chrome for some reason wobbles the text under each icon while it animates. I used padding in the hopes that it would only affect the content within the div (using the box-sizing: border-box model).
I did write a fix for it which works in Chrome but then breaks the layout in Safari.
So I'm not sure if I can fix the wobble in Chrome or if I can alter my fix to help Safari out.
Here's the link to the page as it is at the moment, without the jQuery fix. It's in the JS file but commented out.
Here's the code that runs the animation, the fix is in here, just commented out:
$('.wrapper').scroll(function(e) {
var tTop = target.offset().top;
var tTopOffset = tTop+target.height();
if( tTop < height ) {
if (flag) {
targetDiv.animate({
opacity: 1
}, 500);
targetDiv.each(function(i){
// FIX breaks on safari, but fixes issue in Chrome...
// targetDiv.css('height', targetDivHeight);
$(this).delay((i++) * 900).animate({
padding: '0em'
}, 400);
$(this).animate({
padding: '0.5em'
}, 400);
});
flag = false
}
} else {
targetDiv.css('opacity', '0');
flag = true;
}
});

I think it is because you didn't specified the width and height of the element you are trying to animate. border-box doesn't just ignore padding value, it needs width and height value that includes padding and border. Using transform:scale could be nice either as commented above, but IMHO it is a bit tricky to achieve with .animate() and has less browser support.
Try this in console and try modify your code. I tried and it works well in the latest Safari and Chrome. (should use .outerHeight() to get correct value, since you use padding value to animate)
$ = jQuery;
var targetDiv = $('.icon-img-div');
var targetDivHeight = $('.icon-img-div').outerHeight();
var targetDivWidth = $('.icon-img-div').outerWidth();
targetDiv.each(function (i) {
// this breaks on safari, but fixes issue in Chrome...
targetDiv.css({
height: targetDivHeight,
width: targetDivWidth
});
$(this).delay((i++) * 900).animate({
padding: '0em'
}, 400);
$(this).animate({
padding: '0.5em'
}, 400);
});