Develop Reference

Append an Element to another Element Jquery

I am trying to append the imgclone to the another div called fa-shopping-bag however the append doesn't work and what happens is it overlaps the screens
$('.add').on('click', function () {
$('html,body').animate({scrollTop: 0}, 1000);
var cart = $('.fa-shopping-bag');
var imgtodrag = $('#product-images > div > ul.slides > li.flex-active-slide > img:nth-child(1)');
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top + 250,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('.fa-shopping-bag'))
.animate({
'top': 0,
'right': 0,
'width': 50,
'height': 50
}, 3000, 'easeInOutExpo');
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()
});
}
});

How to set position with css method in jquery?

My default values for .csw-step4-price-summary div is
.csw-step4-price-summary {
width: 270px;
position: absolute;
display: inline-block;
bottom: 661px;
right: 40px;
}
When I want to do the following, it does change position to fixed, but it does not react to bottom and right values.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 220) {
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661',
'right': '140'
});
} else {
$(".csw-step4-price-summary").css({ 'position': 'absolute'});
}
});
Any suggestions why this might be happening? Thanks in advance.

Try using 'px' in the unit in the css function
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661px',
'right': '140px'
});

it's
'bottom': '661px',
'right': '140px'

jQuery creating Destory & reset

Hey all I am new at jQuery plugins and therefore am unsure how to go about adding a destroy and reset (where I can bring it back) to this plugin I am currently using for tooltips.
The JS code is this:
/**
* This is a simple jQuery plugin that make nice tooltips.
*
* #class ssTooltips
* #author Jacek Berbecki
*/
;(function($) {
'use strict';
$.ssTooltips = {version: '1.0.0'};
$.fn.ssTooltips = function(element, options) {
// set tooltip options
var settings = $.extend({
bgColor: '#333',
txtColor: '#f2f2f2',
maxWidth: 200,
borderRadius: 3,
fontSize: 12
}, options);
// get elements
var elements = $(element);
// start tooltip engine when elements exists
if(elements && elements.length > 0) {
// cteare tootlip element
var tooltipWrapper = $('<div id="tooltip-wrapper"></div>'),
tooltipBox = $('<div id="tooltip-box"></div>'),
tooltipArrow = $('<div id="tooltip-arrow"></div>');
// set tooltop element styles
tooltipWrapper.css({
'display': 'none',
'position': 'absolute',
'opacity': '0.95'
});
tooltipBox.css({
'background': settings.bgColor,
'padding': '5px 15px',
'color': settings.txtColor,
'border-radius': settings.borderRadius + 'px',
'box-shadow': '0 2px 6px -1px rgba(0,0,0,0.3)',
'max-width': settings.maxWidth + 'px',
'font-size': settings.fontSize + 'px'
});
tooltipArrow.css({
'width': '10px',
'height': '10px',
'background': settings.bgColor,
'position': 'absolute',
'left': '16px',
'bottom': '-4px',
'transform': 'rotate(45deg)'
});
// append tooltop to document
tooltipBox.appendTo(tooltipWrapper);
tooltipArrow.appendTo(tooltipWrapper);
$('body').append(tooltipWrapper);
// fire tooltip mouse actions
elements.each(function(index, element) {
var $this = $(this),
dataTxt = $this.attr('data-tooltip');
$this.removeAttr('title');
$this.on({
mousemove: function(event) {
tooltipWrapper
.css({
'left': event.pageX - 20,
'bottom': ($( window ).height() - event.pageY + 20)
})
},
mouseenter: function(event) {
tooltipWrapper
.hide()
.fadeIn('fast');
tooltipBox
.empty()
.html(dataTxt);
},
mouseleave: function(event) {
tooltipWrapper
.stop()
.fadeOut('fast');
}
})
});
} else {
return false;
}
}
}(jQuery));
And as you may see, there is no destroy, delete, etc in there.
The purpose to all of this is for me to disable the tooltips on the page until I press a button to show them then if I pressed the button again, they would get destroyed again.
I see a few examples of the destroy function found here:
destroy: function() {
this._destroy(); //or this.delete; depends on jQuery version
this.element.unbind( this.eventNamespace )
this.bindings.unbind( this.eventNamespace );
//this.hoverable.removeClass( "hover state" );
//this.focusable.removeClass( "focus state" );
}
But am unsure how to implement it in the current code. Same with Destory.
And help would be great!

I got it!
/**
* This is a simple jQuery plugin that make nice tooltips.
*
* #class ssTooltips
* #author Jacek Berbecki
*/
; (function ($) {
'use strict';
$.ssTooltips = { version: '1.0.0' };
$.fn.ssTooltips = function (element, options) {
// set tooltip options
var settings = $.extend({
bgColor: '#333',
txtColor: '#f2f2f2',
maxWidth: 200,
borderRadius: 3,
fontSize: 12
}, options);
// get elements
var elements = $(element);
// start tooltip engine when elements exists
if (elements && elements.length > 0) {
// cteare tootlip element
var tooltipWrapper = $('<div id="tooltip-wrapper"></div>'),
tooltipBox = $('<div id="tooltip-box"></div>'),
tooltipArrow = $('<div id="tooltip-arrow"></div>');
// set tooltop element styles
tooltipWrapper.css({
'display': 'none',
'position': 'absolute',
'opacity': '0.95',
'z-index': 8
});
tooltipBox.css({
'background': settings.bgColor,
'padding': '5px 15px',
'color': settings.txtColor,
'border-radius': settings.borderRadius + 'px',
'box-shadow': '0 2px 6px -1px rgba(0,0,0,0.3)',
'max-width': settings.maxWidth + 'px',
'font-size': settings.fontSize + 'px'
});
tooltipArrow.css({
'width': '10px',
'height': '10px',
'background': settings.bgColor,
'position': 'absolute',
'left': '16px',
'bottom': '-4px',
'transform': 'rotate(45deg)'
});
// append tooltop to document
tooltipBox.appendTo(tooltipWrapper);
tooltipArrow.appendTo(tooltipWrapper);
$('body').append(tooltipWrapper);
// fire tooltip mouse actions
elements.each(function (index, element) {
var $this = $(this),
dataTxt = $this.attr('data-tooltip');
$this.removeAttr('title');
$this.on({
mousemove: function (event) {
tooltipWrapper
.css({
'left': event.pageX - 20,
'bottom': ($(window).height() - event.pageY + 20)
})
},
mouseenter: function (event) {
tooltipWrapper
.hide()
.fadeIn('fast');
tooltipBox
.empty()
.html(dataTxt);
},
mouseleave: function (event) {
tooltipWrapper
.stop()
.fadeOut('fast');
},
mousedown: function (event) {
tooltipWrapper
.stop()
.fadeOut('fast');
}
})
});
$.fn.ssTooltips.destroy = function () {
$('#tooltip-wrapper').remove();
}
$.fn.ssTooltips.reset = function () {
$(document).ssTooltips('.tips', {
//Controls the tooltips for examples for text/select boxes
bgColor: settings.bgColor,
txtColor: settings.txtColor,
maxWidth: settings.maxWidth,
borderRadius: settings.borderRadius,
fontSize: settings.fontSize
});
}
} else {
return false;
}
}
}(jQuery));
I created $.fn.ssTooltips.destroy and $.fn.ssTooltips.reset and I am calling them like so:
$('#tool_destory').on('click', function (e) {
//Destory the tool tips
$('#tooltip-wrapper').ssTooltips.destroy();
});
$('#tool_addback').on('click', function (e) {
//Add tool tips
$('#tooltip-wrapper').ssTooltips.reset();
});

Jquery Window scroll .... if else

I face some issues in window scroll function in if...else
It only go in through SCROLL END 1.
Anyone can tell me where I'm doing wrong or suggest me to make it better. Thanks a lot
$(window).scroll(function () {
var scrollend = 1250;
var second_scrollend = 4500;
if ($(window).scrollTop() + $(window).height() >= scrollend) {
console.log("SCROLL END 1");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': '10px', 'width': '300px' });
} else if ($(window).scrollTop() + $(window).height() >= second_scrollend) {
console.log("SCROLL END 2");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': marginbottom + 'px', 'width': '300px' });
} else {
$("#sidepanel").css({ 'position': 'relative', 'bottom': '0px', 'width': 'auto' });
}
});

change your variable value
var scrollend = 4500;
var second_scrollend = 1250;
Why we change the value
Your first codition always true because if $(window).scrollTop() + $(window).height() is greater than 1250 it is always true
Other Way change the sequence of condition
if ($(window).scrollTop() + $(window).height() >= second_scrollend) {
console.log("SCROLL END 2");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': marginbottom + 'px', 'width': '300px' });
}
else if ($(window).scrollTop() + $(window).height() >= scrollend) {
console.log("SCROLL END 1");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': '10px', 'width': '300px' });
}
else {
$("#sidepanel").css({ 'position': 'relative', 'bottom': '0px', 'width': 'auto' });
}

Script only to run if window is bigger than div

I have the following script that is working great, but I want to wrap it in an if statement that only runs this script when the window height is larger than the #tip element. What do I add?
$(document).scroll(function () {
if($(window).scrollTop() >= 40){
$('#tip').css({'position' : 'fixed', 'top' : '20px', 'left' : '50%', 'margin-left' : '250px' });
}
if($(window).scrollTop() <= 40){
$('#tip').css({'position' : 'absolute', 'top' : '15px', 'left' : '', 'margin-left' : ''});
}
console.log($(window).scrollTop());
});

simply
$(document).scroll(function () {
if ($(window).height() > $('#tip').height()) {
... your code here
}
});