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 run javascript when screen size over certain width size?

I want to run certain javascript only when the window width is over 1024.
The script is long. I've tried to combine them with
if ($(window).width() >= 1024
but it still not working.
Can someone help me?
This is the script I want to run when the width is over 1024 :
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(window).load(function() {
$(window).on("scroll resize", function() {
var pos = $('#fixPlace').offset();
$('.post').each(function() {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
var newDescr = $(this).find('.feature__description').html();
var oldDescr = $("#fixPlace").html();
$('#fixPlace').html(newDescr);
if (newDescr !== oldDescr) {
$("#fixPlace").css('opacity', 0.4).animate({ 'opacity': '1', }, 200);
return;
}
}
});
});
$(document).ready(function() {
$(window).trigger('scroll');
});
});
let fixPlace = '#fixPlace';
let scrollStart = null;
let scrollEnd = null;
let floatBoxTop = 0.25 * $(window).height();
$(document).ready(function() {
scrollStart = $('#fixPlace').offset().top;
scrollEnd = $('.transition').offset().top - 680;
})
$(window).scroll(scroll)
function scroll() {
let scrollTop = $(document).scrollTop() + floatBoxTop;
scrollTop = Math.min(scrollEnd, Math.max(scrollTop, scrollStart))
if (scrollTop === scrollStart || scrollEnd === scrollTop) {
$(fixPlace).css({
position: 'absolute',
top: scrollTop
});
} else {
$(fixPlace).css({
position: 'fixed',
top: floatBoxTop
});
}
}

debug lag of calculate margin top for Position fixed sidebar scrolling to bottom

I want to fix left sidebar on the responsive view.
I use Margin top (dependency with scroll position) for wrapper of sidebar!
that's work! but on the some browser it's slow motion (example: macbook pro retina 15" 2014 chrome Version 42)
jsfiddle
jQuery(function($){
var target = $('#fixed_sidebar .fixed');
var sidebarPosition = $(target).offset().top;
function calculatesidebar(){
var heightWindow = $(window).height();
var scrollPosition = $(document).scrollTop();
var sidebarHeight = target.outerHeight();
var positionOftarget = (sidebarPosition + sidebarHeight) - heightWindow;
var targetMargin = parseInt(target.css('marginTop'));
if (scrollPosition >= positionOftarget){
var margin = scrollPosition - positionOftarget;
target.css('marginTop', margin+'px');
}else{
target.css('marginTop', '0');
}
}
$( window ).scroll(function(){
calculatesidebar();
});
$( window ).resize(function() {
calculatesidebar();
});
});

i'm resolved in other way
jsfiddle
jQuery(function ($) {
function fixed_sidebar_bottom(wrapper, target) {
var left = $(wrapper).offset().left,
right = $(wrapper).offset().right,
top = $(wrapper).offset().top,
width = $(wrapper).width(),
target = $(target),
targetHeight = target.outerHeight(),
scrollPosition = $(document).scrollTop(),
windowHeight = $(window).height(),
windowWidth = $(window).width(),
hotSpot = (top + targetHeight) - windowHeight;
if (scrollPosition >= hotSpot) {
if (!target.attr('style')) {
target.css({'left': left, 'right': right, 'position': 'fixed', 'bottom': '0', 'width': width});
} else {
target.css({'left': left, 'right': right, 'width': width});
}
} else {
target.removeAttr("style");
}
}
$(window).scroll(function () {
fixed_sidebar_bottom('#fixed_sidebarLeft','#fixed_sidebarLeft_target');
});
$(window).resize(function () {
fixed_sidebar_bottom('#fixed_sidebarLeft','#fixed_sidebarLeft_target');
});
});

Active anchor links not getting set properly on fixed nav on scroll/click

I'm adding and removing a class for active anchor link (color:red). The issue is the class is not being added consistently according to sections and I don't seem to figure this one out.
How can I modify my code as so anchor links get "highlited" when its respective section is on top of the page consistently?
Here is my code:
// for secondary nav
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
contentTop = [];
// Set up content an array of locations for secondary nav
$('.overlay-box').find('a').each(function(){
var href = $(this).attr('href');
var name = href.substr(href.lastIndexOf('#')+1);
contentTop.push( $('[name="' + name + '"]').offset().top );
});
// adjust secondary nav on scroll
$(window).scroll(function(){
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each( contentTop, function(i,loc){
if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
$('.nav-bar li')
.removeClass('anchor-selected')
.eq(i).addClass('anchor-selected');
}
});
});
here is the site:
http://www.icontrol.com/what-we-do/platform-services/

I cant see exactly how you are going about doing this.
I have put together a jsfiddle to achieve what you are looking to do
Hope its what you need :-)
http://jsfiddle.net/66ZbB/
$(document).ready(function() {
$('a').click(function() {
$('a').removeClass('anchor-selected');
var obj = $(this);
$('html, body').animate({
scrollTop: obj.offset().top
}, 1000, function () {
obj.addClass('anchor-selected');
});
});
$(window).scroll(function() {
$('a').removeClass('anchor-selected');
//alert($(window).scrollTop() +":");
$('a').each(function() {
console.log($(this).offset.top);
if (($(window).scrollTop() <= ($(this).offset().top)) && ($(window).scrollTop() > ($(this).offset().top - 20))) {
$(this).addClass('anchor-selected');
}
});
});
});

jQuery plugin only working on last selector

In my quest for learning more Javascript I'm trying to create a jQuery plugin that creates my own custom scrollbars. It is working fine for one scrollbar at a time but if I try to do two of them only the last one works.
JSFiddle: http://jsfiddle.net/JoelCool/K4mW7/1/
I've noticed the variable "scrolling" is not true on the first scrollbar in the HandleMouseMove() function so it seems like it might be a scoping thing?
HTML
Scrollbar Test
.scroller-bar {
background-color:#ccc;border:1px solid black;float:left;position:relative;cursor:pointer;
}
.noSelect
{
user-select:none;
-o-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
}
<div id="container" style="width:600px;height:300px;background-color:#ccc;overflow:hidden;position:relative;">
<div id="content" style="background-color:blue;width:800px;height:283px;position:relative;left:0;">
12345678901234567890123456789012345678901234567890
</div>
<div style="top:0;left:0;height:300px;width:100px;background-color:yellow;z-index:100;position:absolute;"></div>
<div id="scroll-track-h" style="position:absolute;bottom:0;right:0;height:17px;width:500px;background-color:cyan;"></div>
<div id="scroll-track-v" style="position:absolute;top:0;right:0;height:283px;width:17px;background-color:orange;"></div>
</div>
<br /><br />
<script src="jquery-2.1.0.min.js"></script>
<script src="scroller.js"></script>
<script>
$('#scroll-track-v').scroller();
$('#scroll-track-h').scroller();
//$('#scroll-track-v, #scroll-track-h').scroller();
</script>
Javascript
(function( $ ) {
$.fn.scroller = function( options ) {
options = $.extend( $.fn.scroller.defaults, options );
// Plugin code
return this.each(function () {
var $elem = $(this),
scrolling = false,
mouseStartPos = 0,
barPos = 0,
xy = $elem.width() > $elem.height() ? 'x' : 'y', // x = horizontal, y = vertical
trackLength = xy == 'x' ? $elem.width() : $elem.height(),
barLength = (trackLength * options.barPct / 100) - 2, // should make it figure out the border width
travelLength = trackLength - barLength - 2;
console.log($elem);
var $bar = $('<div class="scroller-bar"></div>')
.width( xy == 'x' ? barLength : $elem.innerWidth() - 2)
.height( xy == 'x' ? $elem.innerHeight() - 2 : barLength);
$elem.append($bar);
$elem.on('mousedown', function (evt) {
scrolling = true;
$("body").addClass("noSelect"); // turn off text selection while scrolling
mouseStartPos = xy == 'x' ? evt.pageX : evt.pageY;
barPos = xy == 'x' ? $bar.position().left : $bar.position().top;
$(document).on('mousemove', function (evt) { HandleMouseMove(evt); });
});
$(document).on('mouseup', function (evt) {
if (scrolling) {
$("body").removeClass("noSelect");
$(document).off('mousemove');
mouseStartPos = 0;
scrolling = false;
}
});
HandleMouseMove = function (evt) {
console.log(scrolling);
if (scrolling) {
var mouseMovedBy = xy == 'x' ? evt.pageX - mouseStartPos : evt.pageY - mouseStartPos,
newBarPos = barPos + mouseMovedBy;
if (newBarPos < 0) { newBarPos = 0; }
if (newBarPos > travelLength) { newBarPos = travelLength; }
$bar.css(xy == 'x' ? 'left' : 'top', newBarPos);
var pct = newBarPos / travelLength;
}
}
});
}
// Set up the default options.
$.fn.scroller.defaults = {
barPct : 25,
onScroll : null
};
})( jQuery );
$('#scroll-track-v').scroller();
$('#scroll-track-h').scroller();
I'm calling it on the vertical bar first and then the horizontal and only the horizontal works. If I switch them then only the vertical works.
Can anyone give me a clue? Am I doing it completely wrong?

Your function HandleMouseMove() was not binded to the Element. It was getting mixed values for the 'scrolling' Boolean value.
I just added $elem. before the function name. and made it as $elem.HandleMouseMove(event);
Check the code
(function( $ ) {
$.fn.scroller = function( options ) {
options = $.extend( $.fn.scroller.defaults, options );
// Plugin code
return this.each(function () {
var $elem = $(this),
scrolling = false,
mouseStartPos = 0,
barPos = 0,
xy = $elem.width() > $elem.height() ? 'x' : 'y', // x = horizontal, y = vertical
trackLength = xy == 'x' ? $elem.width() : $elem.height(),
barLength = (trackLength * options.barPct / 100) - 2, // should make it figure out the border width
travelLength = trackLength - barLength - 2;
console.log($elem);
var $bar = $('<div class="scroller-bar"></div>')
.width( xy == 'x' ? barLength : $elem.innerWidth() - 2)
.height( xy == 'x' ? $elem.innerHeight() - 2 : barLength);
$elem.append($bar);
$elem.on('mousedown', function (evt) {
scrolling = true;
$("body").addClass("noSelect"); // turn off text selection while scrolling
mouseStartPos = xy == 'x' ? evt.pageX : evt.pageY;
barPos = xy == 'x' ? $bar.position().left : $bar.position().top;
$(document).on('mousemove', function (evt) { $elem.HandleMouseMove(evt); });
});
$(document).on('mouseup', function (evt) {
if (scrolling) {
$("body").removeClass("noSelect");
$(document).off('mousemove');
mouseStartPos = 0;
scrolling = false;
}
});
$elem.HandleMouseMove = function (evt) {
console.log(scrolling);
if (scrolling) {
var mouseMovedBy = xy == 'x' ? evt.pageX - mouseStartPos : evt.pageY - mouseStartPos,
newBarPos = barPos + mouseMovedBy;
if (newBarPos < 0) { newBarPos = 0; }
if (newBarPos > travelLength) { newBarPos = travelLength; }
$bar.css(xy == 'x' ? 'left' : 'top', newBarPos);
var pct = newBarPos / travelLength;
}
}
});
}
// Set up the default options.
$.fn.scroller.defaults = {
barPct : 25,
onScroll : null
};
})( jQuery );
$('#scroll-track-v').scroller();
$('#scroll-track-h').scroller();
Check the Updated jsfiddle http://jsfiddle.net/shinde87sagar/K4mW7/3/

I've updated your code to work using data objects. When you have multiple DOM elements being worked on in a plugin, you should explicitly state which objects you're referring to. Keeping them global as you did makes it impossible for the mousemove and mouseup events to know which element to refer to. This way is cleaner and you only have to worry about the scope inside each event handler.
edit: this doesn't move the content pane yet, but this should give you an idea how to proceed correctly.
http://jsfiddle.net/ozzy_og_kush/K4mW7/2/
$.fn.scroller = function( options ) {
options = $.extend( $.fn.scroller.defaults, options );
// Plugin code
return this.each(function () {
var $elem = $(this);
var xy = ($elem.width() > $elem.height() ? 'x' : 'y');
var trackLength = (xy == 'x' ? $elem.width() : $elem.height());
var barLength = (trackLength * options.barPct / 100) - 2;
$elem.data({
'scrolling' : false,
'xy' : xy,
'barPos' : 0,
'mouseStartPos' : 0,
'trackLength' : trackLength,
'barLength' : barLength,
'travelLength' : trackLength - barLength - 2
});
console.log($elem);
var $bar = $('<div class="scroller-bar"></div>')
.width($elem.data('xy') == 'x' ?
$elem.data('barLength') :
$elem.innerWidth() - 2
)
.height($elem.data('xy') == 'x' ?
$elem.innerHeight() - 2 :
$elem.data('barLength')
);
$elem.append($bar).data('bar', $bar);
$elem.on('mousedown', { elem : $elem }, function(evt) {
evt.data.elem.data('scrolling', true);
$thisBar = evt.data.elem.data('bar');
$("body").addClass("noSelect");
evt.data.elem.data('mouseStartPos', (
evt.data.elem.data('xy') == 'x' ?
evt.pageX :
evt.pageY
));
evt.data.elem.data('barPos', (
evt.data.elem.data('xy') == 'x' ?
$thisBar.position().left :
$thisBar.position().top
));
$(document).on(
'mousemove',
{ elem : evt.data.elem },
HandleMouseMove
);
});
$(document).on('mouseup', { elem : $elem }, function(evt) {
if (evt.data.elem.data('scrolling') === true) {
$("body").removeClass("noSelect");
$(document).off('mousemove');
mouseStartPos = 0;
evt.data.elem.data('scrolling', false);
}
});
HandleMouseMove = function(evt) {
console.log(evt.data.elem.data('scrolling'));
if (evt.data.elem.data('scrolling') === true) {
var mouseMovedBy = (
evt.data.elem.data('xy') == 'x' ?
evt.pageX - evt.data.elem.data('mouseStartPos') :
evt.pageY - evt.data.elem.data('mouseStartPos')
),
newBarPos = evt.data.elem.data('barPos') + mouseMovedBy;
if (newBarPos < 0) { newBarPos = 0; }
if (newBarPos > evt.data.elem.data('travelLength')) {
newBarPos = evt.data.elem.data('travelLength');
}
evt.data.elem.data('bar').css(
(
evt.data.elem.data('xy') == 'x' ?
'left' :
'top'
),
newBarPos + "px"
);
//var pct = newBarPos / evt.data.elem.data('travelLength');
}
}
});
}
// Set up the default options.
$.fn.scroller.defaults = {
barPct : 25,
onScroll : null
};
$('#scroll-track-v').scroller();
$('#scroll-track-h').scroller();