We Keep Coding

jQuery duplicating div on resize events

There is a piece of code inside of a magento view.phtml file that was put there to control an out of stock functionality. It only displays on the page when the product is not saleable.
It works as intended, to a point. However on mobile devices such as an iPad or when the user resizes the viewport (even when inspecting for example) it causes a duplication of the div in question and eventually causes the browser to 'crash' the page.
The code is here:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.sharing-links').appendTo(jQuery('.current_configuration_bottom'));
jQuery('.configured-bundles-wrap').appendTo(jQuery('.current_configuration_bottom'));
function isElementOutViewport(el) {
el = document.getElementById(el);
var rect = el.getBoundingClientRect();
return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
}
function setBuyBox() {
var width = jQuery(window).width();
var right_description = jQuery('.right_description');
var is_iPad = navigator.userAgent.match(/iPad/i) != null;
if (( width >= 998 || is_iPad )) {
right_description.appendTo('.product-sidebar');
right_description.addClass('stick-right');
right_description.css('top', '250px');
var rightContent = jQuery('.current_configuration');
var stick_right = jQuery('#header .container').offset().left
var stick_width = (22 / width) * jQuery('#header .container').outerWidth();
var rightCol_offset_top = right_description.offset().top - 205;
jQuery(window).scroll(function () {
var stop_offset_top = jQuery('#bottom').offset().top - right_description.outerHeight() - 250;
if (jQuery(window).scrollTop() > rightCol_offset_top && jQuery(window).scrollTop() < stop_offset_top) {
if (is_iPad) {
// console.log('case 1');
rightContent.css('top', '200px');
rightContent.css({
'position': 'fixed',
'width': '223px',
'max-width': '100%',
'right': 'auto',
'bottom': 'auto'
});
rightContent.removeClass("stick-right-bottom");
rightContent.removeClass("stick-right");
var footerOutView = isElementOutViewport('footer-container');
var headerOutView = isElementOutViewport('header');
if (!headerOutView) {
rightContent.css({
'position': 'static',
'top': '0',
'bottom': 'auto',
'right': 'auto'
});
}
if (!footerOutView) {
rightContent.css({
'position': 'absolute',
'bottom': '0',
'top': 'auto',
'right': '0'
});
}
} else {
// console.log('case 2');
right_description.css('top', '200px');
right_description.addClass("stick-right");
right_description.removeClass("stick-right-bottom");
rightContent.css('top', '200px');
rightContent.addClass("stick-right");
rightContent.removeClass("stick-right-bottom");
var footerOutView = isElementOutViewport('footer-container');
//console.log(footerInView);
if (!footerOutView) {
rightContent.css('top', 'auto');
rightContent.removeClass('stick-right');
rightContent.addClass('stick-right-bottom');
}
if (is_iPad) {
rightContent.css('top', 'auto');
rightContent.css({
'position': 'absolute',
'bottom': '0',
'top': 'auto',
'right': '0'
});
}
}
} else if (jQuery(window).scrollTop() > stop_offset_top) {
// console.log('case 3');
right_description.css('top', 'auto');
right_description.removeClass("stick-right");
right_description.addClass("stick-right-bottom");
if (is_iPad) {
// console.log('ipad 3');
rightContent.css({
'position': 'absolute',
'bottom': '0',
'top': 'auto',
'right': '0'
});
}
var footerOutView = isElementOutViewport('footer-container');
//console.log(footerInView);
if (!footerOutView) {
rightContent.css('top', 'auto');
rightContent.removeClass('stick-right');
rightContent.addClass('stick-right-bottom');
}
//rightContent.css({'width':'auto', 'position': 'static'});
} else {
// console.log('case 4');
right_description.css('top', 'auto');
right_description.removeClass("stick-right");
right_description.removeClass("stick-right-bottom");
rightContent.css('top', '200px');
var footerOutView = isElementOutViewport('footer-container');
//console.log(footerInView);
if (!footerOutView) {
rightContent.css('top', 'auto');
rightContent.removeClass('stick-right');
rightContent.addClass('stick-right-bottom');
}
if (is_iPad) {
var headerOutView = isElementOutViewport('header');
//console.log(headerOutView);
if (!footerOutView || !headerOutView) {
rightContent.css({'position': 'static', 'top': 'auto', 'width': 'auto'});
}
}
}
});
} else {
// console.log('case 5');
//right_description.appendTo('.product_details');
//right_description.css('top', 'auto');
//right_description.removeClass('stick-right');
}
}
jQuery(window).resize(function () {
setBuyBox();
});
window.onorientationchange = function () {
setBuyBox();
};
setBuyBox();
});
</script>
I have tried a couple of things to get this to stop happening, changing right_description.appendTo('product-sidebar'); to .after however it is still happening.
Im not entirely sure this whole code is necessary to achieve what was originally needed.
Im brushing up on my js/jquery implementation and any pointers on how to clean this code up and fix the issue would be appreciated.

How to let the html image move to a certain place?

my image cannot to move to the place that I set.
this is some code that i found in https://codepen.io/anon/pen/REvbEZ it not working when i try to apply into my code.
I have try to change some movement but its does not working at all.
$('.add-to-cart').on('click', function () {
var cart = $('.shopping-cart');
var imgtodrag = $(this).parent('.item').find("img").eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('body'))
.animate({
'top': cart.offset().top + 10,
'left': cart.offset().left + 10,
'width': 75,
'height': 75
}, 1000, 'easeInOutExpo');
});
Let the product image move to the cart image after i press the add to cart button.
This is for the user to know the product is successfully added to the cart.

Use JQuery to fix element from bottom of window

I found plenty of examples of fixing an element's top relative to the window. How do I fix an element X pixels from the bottom of the window? Simply changing 'top' to 'bottom' does not work (for example,if the element's height is more than the window height)
From the top:
var pixels = 10;
var $elemPosition = $element.position();
var $elementH = $element.height();
var $windowH = $(window).height();
var $bottom = $element.offset().top + $element.height();
if ($(window).scrollTop() + pixels >= $elemPosition.top) {
$element.css({
'position': 'fixed',
'top': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}
Solved it! Solution I came up with:
if (($windowH + $(window).scrollTop() - $bottom - pixels) >= 0) {
$element.css({
'position': 'fixed',
'top': ($windowH - $element.height() - pixels) + 'px',
'width': $eW + 'px',
'height': $eH + 'px'
});
} else {
$element.css({
'position': 'relative',
'top': '0px'
});
}

Use the CSS bottom property instead of the top property.
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});

According to your comments and demand :
for example,if the element's height is more than the window height
You wants something like this ?
JS
$element = $("#element");
function setPosition(){
var pixels = 10;
var $elementH = $element.height();
var $windowH = $(window).height();
if ($windowH > $elementH) {
$element.css({
'position': 'fixed',
'bottom': pixels + 'px'
});
} else {
$element.css({
'position': 'relative',
'bottom': '0px'
});
}
}
$(function(){
setPosition();
$(window).scroll(function(){
setPosition();
});
});
If you try to change the height of the element to 700px for instance, you'll see he gets relative position.

moving the caption of a tooltip

Can somebody please tell me how to arrange the caption above the image in the jsfiddle below as I can not seem to do it. The caption is currently below the image. Thanks in advance.
Sample Code
<script type="text/javascript">
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
</script>
I hope this helps

Here is an updated FIDDLE.
The relevant line is this one:
.css('top', -h.toString() + 'px');
It positions the div for the text, and to change the position above the image, I just placed a negative sign in front of h.toString(). You could finely adjust the position by multiplying the h.toString() by a coefficient like -.8 or -.92 to make finer adjustments. It may be problematic putting it above the image, because you'll have to adjust the position based on the height of the text div.

jquery offset() return empty string in each() in firefox 12

http://jsfiddle.net/suenot/3b3XM/1/
// in FF and IE each() don't work offset()
// $(this).offset().top return empty string
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});​
Help me please, i can't find the solution.

I am not sure if $(this).css('background-color'); is what you want, but after updating it shows the box. See output in fiddle
$(document).ready(function(){
var index = 0;
$('.box').each(function(){
var background = $(this).css('background-color');
$(this).css('background', 'none');
var height = $(this).css('height');
var top = $(this).offset().top;
$('body').prepend('<div id="box' + ++index + '"></div>');
$('#box' + index).css({
'height': height,
'background': background,
'position': 'absolute',
'z-index': '-1',
'top': top,
'width': '100%'
});
});
});