Develop Reference

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();
});

Google pubads appear and then disappear

I'm using Google pubads on http://development-client-server.com/ds/ which is working great, until you get to the actual story page (see http://development-client-server.com/ds/speech-more-common-autism/), when the right top sidebar ad will load and then disappear quickly.
I've narrowed it down to the stickySidebars function I'm using to stick both the social media bar on the left and the jobs listing div on the right (beneath where the Google ad is). However, the sticky function shouldn't affect the Google ad at all?
Here's the JS function I'm using, which I've already rewritten several times (and have tried to talk the clients out of using already).
<script>
// Sticky Sidebars
function stickySidebars() {
var length = $('.post-content').height() - $('article .sharing-links').height() + $('.post-content').offset().top;
var lengthSidebar = $('.sticky-container').height() - $('aside .job-listings').height() + $('.sticky-container').offset().top -30;
$(window).scroll(function () {
// Sharing Links
var scroll = $(this).scrollTop() + 90;
var height = $('article .sharing-links').height() + 'px';
if (scroll < $('.post-content').offset().top) {
$('article .sharing-links').css({
'position': 'absolute',
'top': 'auto',
'bottom': 'auto'
});
} else if (scroll > length) {
$('article .sharing-links').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('article .sharing-links').css({
'position': 'fixed',
'top': '90px',
'height': height
});
}
// Sidebar
var heightSidebar = $('aside .job-listings').height() + 'px';
if (scroll < $('aside .job-listings').offset().top) {
$('aside .job-listings').css({
'position': 'absolute',
'top': '300px',
'bottom': 'auto'
});
} else if (scroll > lengthSidebar) {
$('aside .job-listings').css({
'position': 'absolute',
'bottom': '30px',
'top': 'auto'
});
} else {
if (scroll < $('.sticky-container').offset().top + 300) {
$('aside .job-listings').css({
'position': 'absolute',
'top': '300px',
'bottom': 'auto'
});
} else {
$('aside .job-listings').css({
'position': 'fixed',
'top': '90px',
'height': heightSidebar
});
}
}
});
}
$(window).on('load',function(){
if($(window).width() > 1100){
stickySidebars();
}
});
$(window).resize(function() {
if($(window).width() > 1100){
stickySidebars();
}
});
</script>

The issue is not caused by the sticky sidebar. It is caused by this bit of code:
$(window).on('load',function(){
// Other unrelated functions here...
/*****************************/
// Move Sidebar in Mobile
/*****************************/
if($(window).width() <= 980){
$("aside").appendTo(".mobile-sidebar");
} else {
$("aside").insertAfter(".single-article article");
}
});
Essentially the ad loads and then you move the container (the aside), which causes the ad to disappear.
There are a few different options, but essentially you either need the Google ad script to run after that piece of code or you need to refresh the ads. To refresh the ads you should be able to run this line of code straight after your if else statement:
googletag.pubads().refresh()
This refreshes all of the ads. Depending on how you have it setup you can pass in a variable to refresh() so that a specific ad is refreshed e.g.
var slot1 = googletag.pubads().display('/1234567/sports', [728, 90], 'div-1');
googletag.pubads().refresh([slot1]);
Google Reference Docs for refresh()

jquery slide in menu animation bug

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();
});
};

jQuery Animation - animating different divs at different speeds

I have 5 divs layered and a object in the foreground I want to move across them. This is using the paralax effect. I have been sucessfully able to move the object using basic .animate in jQuery.
The problem I'm having is getting the background divs to animate properly - or at all. What happens is when I click on my trigger div - the div.cloud1 and div.cloud2 move BEFORE my object does. They also change positions despite my playing with the timing values.
All objects in the divs are absolutely positioned - the divs are relative for being able to use z-index.
Specifically I'm trying to move div.cloud1, div.cloud2, div.ground, div.Mountain all at different speeds so it gives the illusion of 3d.
The object I'm sending across is a different div.
I'm not sure what the problem is.
Here is my JSfiddle: http://jsfiddle.net/U6Mu6/
jQuery(document).ready(function () {
jQuery('#cloud-01').css({
backgroundPosition: '50 -180px'
});
jQuery('#cloud-02').css({
backgroundPosition: '0 -100px'
});
jQuery('#mountains-03').css({
backgroundPosition: '0 50px'
});
jQuery('#trees-04').css({
backgroundPosition: '0 50px'
});
jQuery('#ground').css({
backgroundPosition: 'left bottom'
});
jQuery('#branding').css({
backgroundPosition: 'center 0'
});
jQuery('#content').css({
backgroundPosition: 'center 0'
});
jQuery('#sec-content').css({
backgroundPosition: 'center 0'
});
jQuery('#footer').css({
backgroundPosition: 'center 0'
});
jQuery('#wrapper').css({
overflow: "hidden"
});
jQuery('#klicker').click(function () {
jQuery('#cloud-01').animate({
backgroundPosition: '(-100px -10px)'
}, 200000);
jQuery('#cloud-02').animate({
backgroundPosition: '(-400px 0px)'
}, 20000);
jQuery('#mountains-03').animate({
backgroundPosition: '(-2500px 50px)'
}, 20000);
jQuery('#ground').animate({
backgroundPosition: '(-5000px bottom)'
}, 20000);
startHim();
jQuery("#full-robot").animate({
left: "50%",
marginLeft: "-150px"
}, 2000);
setTimeout("leaveScreen()", 15000);
});
});
var num = 1;
function startHim() {
num++;
jQuery("#sec-content").animate({
top: "-=5px"
}, 150).animate({
top: "+=5px"
}, 150);
jQuery("#content,#branding").animate({
top: "-=" + num + "px"
}, 150).animate({
top: "+=" + num + "px"
}, 150);
if (num < 4) {
setTimeout("startHim()", 300);
} else {
setTimeout("bounceHim()", 300);
}
}
function bounceHim() {
jQuery("#sec-content,#branding").animate({
top: "-=4px"
}, 150).animate({
top: "+=4px"
}, 150);
jQuery("#content").animate({
top: "-=8px"
}, 150).animate({
top: "+=8px"
}, 150);
setTimeout("bounceHim()", 300);
}
function leaveScreen() {
jQuery("#full-robot").animate({
left: "100%",
marginLeft: "0px"
}, 2000);
}
Just FYI - some of the objects in the fiddle are not included on purpose. I just want to get things working first.
I did see a error in JSFIDDLE dealing with implied eval on my setTime expression. But I'm not sure how to fix it. I suppose I could pass the div as function and use .hide instead.
All help is welcome thanks!
EDIT:::
I forgot this:
/**
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
'background-position': function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'background-position');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);// JavaScript Document

I don't know if this is too obvious, but your trying to set the "background-position"attribute of the clouds by using backgroundPosition
You might just change them to
$("#cloud-01").css({'background-position': '50px -180px'})
Notice the background-position instead of backgroundPosition
If you want to stagger the time each cloud takes to move, you need to offset your animation durations, like
$('#cloud-01').animate({
'background-position' : '(-100px -10px)'
}, (1000) ); // 1 second duration
$('#cloud-02').animate({
'background-position' : '(-400px 0px)'
}, (2000) ); // 2 seconds
$('#mountains-03').animate({
'background-position' : '(-2500px 50px)'
}, (2000) ); // 3 seconds

Fluid Width Slider

I am making a website here: argit.bounde.co.uk
I have followed a tutorial on making a slider and it works on the principle of having a ul of a big width and then the li's floated. This is then all concealed by a div which has overflow: hidden. Then have jquery which animates the margin-left = imgWidth
The rest of my site is fluid width and so obviously I need the slider to follow along other wise it looks a bit silly. At the moment I have given the li's a set width with jquery and then have img's as 100%. This solution is okay, but falls apart when the device doesn't support jQuery so I would prefer a more robust method. I cant set the ul to 100% as then the images no longer are in a line and they simple stack underneath each other
Can anyone think of a way I could achieve this?
Full slider jQuery here:
var current = 1;
function slider () {
var sliderUl = $('div#slider ul'),
imgs = sliderUl.find('img'),
imgWidth = imgs.width(),
imgLength = imgs.length,
totalImgsWidth = imgLength * imgWidth;
var direction = $(this).data('dir'),
loc = imgWidth;
if( direction == 'next') {
++current;
} else {
--current;
}
if( current === 0) {
current = imgLength;
loc = totalImgsWidth - imgWidth;
direction = 'next';
} else if ( current - 1 === imgLength ) {
current = 1;
loc = 0;
}
transition(sliderUl, loc, direction);
};
function transition( container, loc, direction ) {
var ease;
var unit;
if (direction && loc !== 0) {
unit = (direction === 'next') ? '-=' : '+=';
}
container.animate({
'margin-left': unit ? (unit + loc) : loc
})
};

I've linked to a fiddle of a plugin I programmed that does this. The requirements are that the parent container has position: relative, and to a lesser extent overflow: hidden and that it is called after images are loaded. Feel free to take the code and learn from it.
http://jsfiddle.net/dhQk/35K8X/7/show/
JS
$.fn.fitToParent = function (type, align) {
type = typeof type === 'undefined' ? 'fit' : type;
align = typeof align === 'undefined' ? 'center' : align;
return this.each(function () {
var $this = $(this);
var $parent = $(this).parent();
if ($this.is('img')) {
$this.css({
'position': 'absolute',
'width': '100%',
'height': 'auto'
}).css({ //Allow Height to adjust
'left': '',
'margin-left': '',
'top': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
'bottom': '',
'margin-top': align == 'center' ? (-$this.height() / 2) + 'px' : ''
});
//Size by height depending on sizing type
if (($this.height() > $parent.height() && type === 'fit') || ($this.height() < $parent.height() && type === 'fill')) {
$this.css({
'width': 'auto',
'height': '100%'
}).css({ //Allow Width to adjust
'top': '',
'margin-top': '',
'left': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
'right': align == 'right' ? '0px' : '',
'margin-left': align == 'center' ? (-$this.width() / 2) + 'px' : ''
});
}
if (type === 'none') {
$this.css({
'width': '',
'height': ''
}).css({ //Allow Width to adjust
'top': '50%',
'bottom': '',
'margin-top': (-$this.height() / 2) + 'px',
'left': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
'right': align == 'right' ? '0px' : '',
'margin-left': align == 'center' ? (-$this.width() / 2) + 'px' : ''
});
}
}
});
};
To explain the logic, all it does is sets the width to 100% and checks if it's height is greater, if it isn't then width 100% is fine. If not it switches it to height 100%. On images if one size attribute is set then the other one resizes accordingly. After the size logic is complete. it just centers the image using position absolute and margining.

You can detect does device support jQuery:
$('html').addClass('jQuery');
And then use specific css styles for this class:
.jQuery li {
/* some style */
}
If class 'jQuery' setted then device support jQuery.

The simplest method would be to not float the your panels (li's) and set them to be 100% width of the wrapping div. Then when the user navigates, position the next panel out of view to the right at 100% margin, then animate it to 0 margin while you animate the previous panel to -100% margin. Do the opposite when the user selects the previous panel. I don't think this method works well in older IE, but I could be mistaken.
Alternatively, you can bind to the window resize event (it would be best to throttle the event) and resize the panels and any saved widths/heights