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()
});
}
});
Related
I am trying to make a cart fly effect but I am getting an error and not sure why the top is being called undefined. I am already able to add the product on the basket but the image just got stuck and appears randomly on screen instead of animation from the parent image to the cart upward
$('.add').on('click', function () {
var cart = $('.cart');
var imgtodrag = $('.zoomImg');
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');
setTimeout(function () {
cart.effect("shake", {
times: 2
}, 200);
}, 1500);
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()
});
}
});
P.S.
I am using Jquery 2.1.3 and jqueryui 1.11.2
already figured it out, the element was missing on some page causing the error
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();
});
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' });
}
I have written a script to have a slide in top bar (branding) and a menu that site above and below a slider (or banner). When they scroll back in it's just the branding and the menu.. no slider or banner.
It works but there is a bug I can't seem to fix.
The page has 4 main elements but the SLIDER OR BANNER are option elements (not always present):
<div id="branding">BRANDING</div>
<div id="header">
<div id="slider">SLIDER OR BANNER</div>
<div id="menu">MENU</div>
</div>
<div id="content">CONTENT</div>
And here is my script so far:
var sticky_navigation = function () {
$lH = ($('#branding').length) ? $('#branding').height() : 0,
$sH = ($('#slider').length) ? $('#slider').height() : 0,
$bH = ($('#banner').length) ? $('#banner').height() : 0,
$mH = ($('#menu').length) ? $('#menu').height() : 0;
var $content = $('#content'), // Main content area
$branding = $('#branding'),
$header = $('#header'),
$menu = $('#menu');
// HEADER
if ($(window).scrollTop() > $lH) {
$header.css({
marginTop: $lH + "px"
});
if ($branding.css('position').toString() != "fixed") {
$branding.css({
position: "fixed",
top: "-" + $lH + "px",
left: 0,
zIndex: 500,
}).animate({
top: 0
}, 700);
}
} else {
$branding.css({
position: "relative",
marginTop: "0px",
});
$header.css({
marginTop: "0px"
});
}
// MENU
if ($(window).scrollTop() > ($bH + $sH + $mH)) {
$branding.css({
boxShadow: "none",
});
$header.css({
marginTop: ($lH + $mH) + "px"
});
if ($menu.css('position').toString() != "fixed") {
$menu.css({
position: "fixed",
top: "-" + $lH + "px",
left: 0,
zIndex: 490,
}).animate({
top: $lH
}, 700);
}
} else {
$menu.css({
position: "relative",
marginTop: "0px",
top: 0,
});
if ($('#branding').length || $('#slider').length) {
$branding.css({
boxShadow: "0 0 16px rgba(0, 0, 0, 0.5)",
})
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function () {
sticky_navigation();
});
// and run it again every time you resize
$(window).resize(function () {
sticky_navigation();
});
Here is a jsfiddle for it as I have it now... to see the bug scroll up and down quickly.. you should see the menu sits lower than it should.
http://jsfiddle.net/hC423/1/
Any help with this is very much appreciated. I'm open to suggestions if there's a better way to do this.
C
http://jsfiddle.net/hC423/2/
Added 250ms delay after user scrolls.
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
var sticky_navigation = function () {
setTimeout(function // ###### ADDED ######
$lH = ($('#branding').length) ? $('#branding').height() : 0,
$sH = ($('#slider').length) ? $('#slider').height() : 0,
$bH = ($('#banner').length) ? $('#banner').height() : 0,
$mH = ($('#menu').length) ? $('#menu').height() : 0;
var $content = $('#content'), // Main content area
$branding = $('#branding'),
$header = $('#header'),
$menu = $('#menu');
// HEADER
if ($(window).scrollTop() > $lH) {
$header.css({
marginTop: $lH + "px"
});
if ($branding.css('position').toString() != "fixed") {
$branding.css({
position: "fixed",
top: "-" + $lH + "px",
left: 0,
zIndex: 500,
}).animate({
top: 0
}, 700);
}
} else {
$branding.css({
position: "relative",
marginTop: "0px",
});
$header.css({
marginTop: "0px"
});
}
// MENU
if ($(window).scrollTop() > ($bH + $sH + $mH)) {
$branding.css({
boxShadow: "none",
});
$header.css({
marginTop: ($lH + $mH) + "px"
});
if ($menu.css('position').toString() != "fixed") {
$menu.css({
position: "fixed",
top: "-" + $lH + "px",
left: 0,
zIndex: 490,
}).animate({
top: $lH
}, 700);
}
} else {
$menu.css({
position: "relative",
marginTop: "0px",
top: 0,
});
if ($('#branding').length || $('#slider').length) {
$branding.css({
boxShadow: "0 0 16px rgba(0, 0, 0, 0.5)",
})
}
}
} ,250); // ###### ADDED ######
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function () {
sticky_navigation();
});
// and run it again every time you resize
$(window).resize(function () {
sticky_navigation();
});
};
I have build a slider using jQuery which works fine except a small issue.
The slider moves quickly before the present one complete its move.
Especially the second and third slide move have the issue
Does any one have solution or alternative to fix this issue ?
$.fx.speeds._default = 1000;
function slider(container) {
var currPg = null,
firstPg = null;
container.find('> *').each(function (idx, pg) {
pg = $(pg);
var o = {
testimonial: pg.find('> .testimonial'),
thumb: pg.find('> .testimonial-thumb'),
pg: pg
};
o.pg.css({
position: 'absolute',
width: '100%',
height: '100%',
});
if (idx > 0) {
o.pg.css({
opacity: 0,
'z-index': -1
});
o.testimonial.css({
'margin-left': '100%'
});
o.thumb.css({
'bottom': '-100%'
});
} else {
firstPg = o;
}
o.prev = currPg;
if (currPg) {
currPg.next = o;
}
currPg = o;
});
firstPg.prev = currPg;
currPg.next = firstPg;
currPg = firstPg;
this.advance = function advance(duration) {
console.log("advance!", this);
var dur = duration || $.fx.speeds._default;
var dur2 = Math.ceil(dur / 2);
var dh = container.height();
var dw = container.width();
var nextPg = currPg.next;
nextPg.pg.css({
opacity: 1,
'z-index': null
});
var _pg = currPg;
currPg.testimonial.stop().animate({
'margin-left': -dw
}, dur, function () {
_pg.pg.css({
opacity: 0,
'z-index': -1
});
_pg = null;
});
nextPg.testimonial.stop()
.css({
'margin-left': dh
})
.animate({
'margin-left': 0
}, dur);
currPg.thumb.stop().animate({
'bottom': -dh
}, dur2, function () {
nextPg.thumb.stop()
.css({
'bottom': -dh
})
.animate({
'bottom': 0
}, dur2);
nextPg = null;
});
currPg = nextPg;
}
}
var s = new slider($('#banner'));
function scheduleNext() {
setTimeout(function () {
s.advance();
scheduleNext();
}, 5000);
}
scheduleNext();
Demo http://jsfiddle.net/sweetmaanu/Pn2UB/13/
You're setting the margin-left to the containers height at this point. Fixing this seemed to fix it for me.
nextPg.testimonial.stop()
.css({
'margin-left': dh
})
.animate({
'margin-left': 0
}, dur);
should be
nextPg.testimonial.stop()
.css({
'margin-left': dw
})
.animate({
'margin-left': 0
}, dur);