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();
});
Related
I'm new in angular programming and I searched and couldn't find something that could help me and I have no idea what should I search for this problem. I'm using a template for my project Here is that template and there is a javascript file in that template :
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
and I want to convert the javascript file to typescript and use this part in a directive like this:
import { Directive, ElementRef, HostListener, Renderer2 } from '#angular/core';
declare var $: any;
#Directive({
selector: '[appListItemsShow]'
})
export class ListItemsShowDirective {
constructor(
private elementRef: ElementRef,
private renderer: Renderer2) { }
#HostListener('mouseenter') mouseenter(eventData: Event) {
console.log("mouse enter");
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width': '170px',
'height': '170px',
'left': '0px'
}, 400, 'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({ 'top': '140px' }, 500, 'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({ 'height': '170px' }, 300, function () {
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length) {
var left = '170px';
if ($elem.parent().children().length == $elem.index() + 1)
left = '-170px';
$sub_menu.show().animate({ 'left': left }, 200);
}
});
}
#HostListener('mouseleave') mouseleave(eventData: Event) {
console.log("mouse leave");
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length)
$sub_menu.hide().css('left', '0px');
$elem.find('.sdt_active')
.stop(true)
.animate({ 'height': '0px' }, 300)
.andSelf().find('img')
.stop(true)
.animate({
'width': '0px',
'height': '0px',
'left': '85px'
}, 400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({ 'top': '25px' }, 500);
}
}
And I get errors like this:
$elem.find(...).stop(...).animate(...).andSelf is not a function
at ListItemsShowDirective.mouseenter (list-items-show.directive.ts:22)
$elem.find(...).stop(...).animate(...).andSelf is not a function
at ListItemsShowDirective.mouseleave (list-items-show.directive.ts:50)
What am I suppose to do? How can I convert this js to ts to use it in my directive?
(by the way I'm using this directive in li element which is in ul element with id='sdt_menu')
Thanks for help :)
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
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()
});
}
});
I'm having problem figuring out how to code the support tab (on the right) of this page - http://test88.fccbet.com/. It currently slides out on click.
This is where I got the the current tab slide out effect: http://www.building58.com/examples/tabSlideOut.html
What I want is that both the main tab and side tab will appear when the page loads (refer to IMAGE1). But when the side tab image is clicked, the main image will hide itself leaving only the tab image (refer to IMAGE2).
(IMAGE1)This is how it currently looks like when the page loads:
echosantos dot com/tabslideout/tab-current-outcome.jpg
(IMAGE2)This is how I want it to look like when the page loads (basically I don't want to click the side tab first to see the rest of the tab) :
echosantos dot com/tabslideout/tab-desired-outcome.jpg
This is my first Stackoverflow question, I hope I gave you enough details for your answer. Thanks in advance for the help!
Cheers!
html:
<div id="bannerLeft">
<div class="slide-out-div no-phone no-phone-landscape" style="background-image:url(images/support-tab.png); "><br />
Fccbet
<a class="handle" href="#"></a><div id="close-bottom"><img src="#routes.Assets.at("images/close-chat.jpg")"/>
</div>
css:
.slide-out-div {
width: 125px;
height:392px;
background: url(../images/support-tab.png); }
#range-logo {
background-image:url(../images/support-tab.png);
display:block;
text-indent:-9999px;
width: 125px;
height:396px;}
javascript:
<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: '#routes.Assets.at("images/support-tab-side.png")', //path to the image for the tab (optionaly can be set using css)
imageHeight: '284px', //height of tab image
imageWidth: '43px', //width of tab image
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top
fixedPosition: true //options: true makes it stick(fixed position) on scroll
});
});
</script>
<script>
$(document).ready(function(){
$("#close-bottom").click(function(){
$("#bannerLeft").remove();
});
});
</script>
You need to add this line $('.slide-out-div > .handle').click(); to achieve the target that you want. As you defined the click event on your handler tab so need to enforce a click on page load. Just add the following line in your JQuery code and place it after $('.slide-out-div').tabSlideOut({...});
Working JSFiddle Demo
$(function () {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('.slide-out-div > .handle').click(); // Add this line and that's it
});
JSFiddle Snippet
Click on the below Run code snippet button to test it here.
(function($) {
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: 'left',
topPos: '50px',
leftPos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
onLoadSlideOut: false
}, callerSettings || {});
settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}
//ie6 doesn't do well with the fixed option
if (document.all && !window.opera && !window.XMLHttpRequest) {
settings.positioning = 'absolute';
}
//set initial tabHandle css
if (settings.pathToTabImage != null) {
settings.tabHandle.css({
'background': 'url(' + settings.pathToTabImage + ') no-repeat',
'width': settings.imageWidth,
'height': settings.imageHeight
});
}
settings.tabHandle.css({
'display': 'block',
'textIndent': '-99999px',
'outline': 'none',
'position': 'absolute'
});
obj.css({
'line-height': '1',
'position': settings.positioning
});
var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};
//set calculated css
if (settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({
'left': settings.leftPos
});
settings.tabHandle.css({
'right': 0
});
}
if (settings.tabLocation === 'top') {
obj.css({
'top': '-' + properties.containerHeight
});
settings.tabHandle.css({
'bottom': '-' + properties.tabHeight
});
}
if (settings.tabLocation === 'bottom') {
obj.css({
'bottom': '-' + properties.containerHeight,
'position': 'fixed'
});
settings.tabHandle.css({
'top': '-' + properties.tabHeight
});
}
if (settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height': properties.containerHeight,
'top': settings.topPos
});
settings.tabHandle.css({
'top': 0
});
}
if (settings.tabLocation === 'left') {
obj.css({
'left': '-' + properties.containerWidth
});
settings.tabHandle.css({
'right': '-' + properties.tabWidth
});
}
if (settings.tabLocation === 'right') {
obj.css({
'right': '-' + properties.containerWidth
});
settings.tabHandle.css({
'left': '-' + properties.tabWidth
});
$('html').css('overflow-x', 'hidden');
}
//functions for animation events
settings.tabHandle.click(function(event) {
event.preventDefault();
});
var slideIn = function() {
if (settings.tabLocation === 'top') {
obj.animate({
top: '-' + properties.containerHeight
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({
left: '-' + properties.containerWidth
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({
right: '-' + properties.containerWidth
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({
bottom: '-' + properties.containerHeight
}, settings.speed, settings.onSlideIn).removeClass('open');
}
};
var slideOut = function() {
if (settings.tabLocation == 'top') {
obj.animate({
top: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({
left: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({
right: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({
bottom: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
}
settings.onSlideOut
};
var clickScreenToClose = function() {
obj.click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
slideIn();
});
};
var clickAction = function() {
settings.tabHandle.click(function(event) {
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});
clickScreenToClose();
};
var hoverAction = function() {
obj.hover(
function() {
slideOut();
},
function() {
slideIn();
});
settings.tabHandle.click(function(event) {
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();
};
var slideOutOnLoad = function() {
slideIn();
setTimeout(slideOut, 500);
};
//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}
if (settings.action === 'hover') {
hoverAction();
}
if (settings.onLoadSlideOut) {
slideOutOnLoad();
};
};
})(jQuery);
$(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '50px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('.slide-out-div > .handle').click();
});
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<div class="slide-out-div"> <a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
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);