We Keep Coding

Jquery plugin using second instance's options

I have written a Jquery Pagination plugin that works great with just one instance of the plugin. When I try to use two instances, the first instance ignores its given options and uses the second instance's options. I know this because the two sections both start out with the defined items per page, but when you navigate to another 'page' in the pagination, it reverts to the second instance's itemsPerPage - 2.
My guess is the second time this plugin is called, it is overwriting $.pagination's options, so when either pagination goes to a new page, it uses the overwritten options.
Here's the plugin:
/* Jquery Pagination */
(function($){
$.pagination = {
defaultOptions : {
itemsPerPage : 5,
startPage : 1,
showNextPrev : true,
navigationPosition : 'before',
paginationClass : 'pagination',
paginationItemClass : 'paginationItem',
paginationItemActiveClass : 'active',
nextClass : 'next',
nextText : 'Next',
prevClass : 'prev',
prevText : 'Prev',
}
}
$.fn.extend({
pagination : function(newOptions){
var options = $.extend($.pagination.defaultOptions, newOptions),
itemsToPaginate = $(this),
itemsToPaginateContainer = itemsToPaginate.eq(0).parent(),
paginationWrapper = "<div class='" + options.paginationClass + "'></div>",
paginationControls = '',
pagination,
numberOfPages,
showPage = function(goToPage){
var page = (typeof goToPage === 'number') ? goToPage : goToPage.attr('href').replace('#page', ''),
itemRangeEnd = page * options.itemsPerPage
itemRangeStart = itemRangeEnd - options.itemsPerPage;
$( '.' + options.paginationItemClass, pagination).removeClass(options.paginationItemActiveClass);
if (typeof goToPage === 'number')
pagination.find('.' + options.paginationItemClass).eq(goToPage-1).addClass(options.paginationItemActiveClass);
else
goToPage.addClass(options.paginationItemActiveClass);
itemsToPaginate.hide().slice(itemRangeStart, itemRangeEnd).show();
},
createPagination = (function(){
// Add pagination element to DOM
switch(options.navigationPosition.toLowerCase()){
/*
// TODO: Create ability to insert pagination after or before & after
case 'both':
itemsToPaginateContainer.before(paginationWrapper);
itemsToPaginateContainer.after(paginationWrapper);
break;
case 'after':
itemsToPaginateContainer.after(paginationWrapper);
break;
*/
default:
itemsToPaginateContainer.before(paginationWrapper);
break;
}
// Selecting pagination element
pagination = itemsToPaginateContainer.siblings('.' + options.paginationClass);
// Count how many pages to make
numberOfPages = Math.ceil( itemsToPaginate.length / options.itemsPerPage );
// Insert controls into pagination element
if(options.showNextPrev) paginationControls += "<a href='#' class='" + options.prevClass + "'>" + options.prevText + "</a>";
for (var i = 1; i <= numberOfPages; i++) {
paginationControls += "<a href='#page" + i + "' class='" + options.paginationItemClass + "'>" + i + "</a>";
}
if(options.showNextPrev) paginationControls += "<a href='#' class='" + options.nextClass + "'>" + options.nextText + "</a>";
(numberOfPages !== 1) ? pagination.html(paginationControls) : pagination.remove() ;
}()),
bindUIEvents = (function(){
pagination.find('.' + options.paginationItemClass + ':not(.' + options.nextClass + '):not(.' + options.prevClass + ')').on('click', function(e){
e.preventDefault();
showPage( $(this) );
});
pagination.find('.' + options.prevClass).on('click', function(){
var prevPageIdx = pagination.find('.' + options.paginationItemActiveClass).index() - 1;
// console.log(prevPageIdx);
if(prevPageIdx < 1)
showPage(numberOfPages);
else
showPage(prevPageIdx);
});
pagination.find('.' + options.nextClass).on('click', function(){
var nextPageIdx = pagination.find('.' + options.paginationItemActiveClass).index() + 1;
if(nextPageIdx > numberOfPages)
showPage(1);
else
showPage(nextPageIdx);
});
}());
showPage(options.startPage);
return this;
}
});
})(jQuery);
JSFiddle
Any idea why each instance of this plugin doesn't just use its own options? How would I need to structure a plugin to encapsulate and protect their own options? Thanks!

Change
var options = $.extend($.pagination.defaultOptions, newOptions),
To
var options = $.extend({}, $.pagination.defaultOptions, newOptions),
Demo
Reason is you are providing the target as defaultOption while using the syntax jQuery.extend( target [, object1 ] [, objectN ]

Jquery countdown timer that doesn't reset on page refresh

I need you help about this one. I am using Vassilis Dourdounis jquery plugin, and I have created countdown timer that hides some link on complete. But it restarts whenever the page is refreshed, and it shouldn't, it should finish the count and then disappear. Can anypne help, please?
This is jquery:
/*!
* jQuery Countdown plugin v1.0
* http://www.littlewebthings.com/projects/countdown/
*
* Copyright 2010, Vassilis Dourdounis
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
(function($){
$.fn.countDown = function (options) {
config = {};
$.extend(config, options);
diffSecs = this.setCountDown(config);
if (config.onComplete)
{
$.data($(this)[0], 'callback', config.onComplete);
}
if (config.omitWeeks)
{
$.data($(this)[0], 'omitWeeks', config.omitWeeks);
}
$('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
$(this).doCountDown($(this).attr('id'), diffSecs, 500);
return this;
};
$.fn.stopCountDown = function () {
clearTimeout($.data(this[0], 'timer'));
};
$.fn.startCountDown = function () {
this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
};
$.fn.setCountDown = function (options) {
var targetTime = new Date();
if (options.targetDate)
{
targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));
}
else if (options.targetOffset)
{
targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
targetTime.setDate(options.targetOffset.day + targetTime.getDate());
targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
}
var nowTime = new Date();
diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);
$.data(this[0], 'diffSecs', diffSecs);
return diffSecs;
};
$.fn.doCountDown = function (id, diffSecs, duration) {
$this = $('#' + id);
if (diffSecs <= 0)
{
diffSecs = 0;
if ($.data($this[0], 'timer'))
{
clearTimeout($.data($this[0], 'timer'));
}
}
secs = diffSecs % 60;
mins = Math.floor(diffSecs/60)%60;
hours = Math.floor(diffSecs/60/60)%24;
if ($.data($this[0], 'omitWeeks') == true)
{
days = Math.floor(diffSecs/60/60/24);
weeks = Math.floor(diffSecs/60/60/24/7);
}
else
{
days = Math.floor(diffSecs/60/60/24)%7;
weeks = Math.floor(diffSecs/60/60/24/7);
}
$this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
$this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
$this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
$this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
$this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);
$.data($this[0], 'diffSecs', diffSecs);
if (diffSecs > 0)
{
e = $this;
t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
$.data(e[0], 'timer', t);
}
else if (cb = $.data($this[0], 'callback'))
{
$.data($this[0], 'callback')();
}
};
$.fn.dashChangeTo = function(id, dash, n, duration) {
$this = $('#' + id);
for (var i=($this.find('.' + dash + ' .digit').length-1); i>=0; i--)
{
var d = n%10;
n = (n - d) / 10;
$this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:eq('+i+')', d, duration);
}
};
$.fn.digitChangeTo = function (digit, n, duration) {
if (!duration)
{
duration = 800;
}
if ($(digit + ' div.top').html() != n + '')
{
$(digit + ' div.top').css({'display': 'none'});
$(digit + ' div.top').html((n ? n : '0')).slideDown(duration);
$(digit + ' div.bottom').animate({'height': ''}, duration, function() {
$(digit + ' div.bottom').html($(digit + ' div.top').html());
$(digit + ' div.bottom').css({'display': 'block', 'height': ''});
$(digit + ' div.top').hide().slideUp(10);
});
}
};
})(jQuery);
This is HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="js/jquery.cookie.js"></script>
<script language="Javascript" type="text/javascript" src="js/misc.js"></script>
<link rel="Stylesheet" type="text/css" href="style/main.css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
</head>
<body>
<div id="container">
<h2>OFFER</h2>
<img src="images/top.png" style="float:left;padding-left:15px;">
<div id="top_offer">
<p>REGISTER NOW AND GET SPECIAL BONUSES!</p>
</div>
<!-- Countdown dashboard start -->
<div id="countdown_dashboard">
<div class="dash minutes_dash">
<span class="dash_title"></span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title"></span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
<!-- Countdown dashboard end -->
<div class="info_message" id="complete_info_message">
<img src="images/offer.png" /> <p>Klikni ovde ► </p>
</div>
<script language="javascript" type="text/javascript">
// Set the Countdown
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 0,
'sec': 60
},
// onComplete function
onComplete: function() { $('#container').slideUp() }
});
});
</script>
</div>
</body>
</html>
THANK YOU!

are you sure this is called
$.cookie('mytimeout', count, {
expires: 7,
path: '/'
}
try putting it in the oncomplete function

Custom Twitter Button with Dynamic Content and Popup Window

I am using the following code which does 2 out of the 3 things I want it to do, shares dynamic content with a custom twitter button:
<script type="text/javascript">
// <![CDATA[
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
document.write('<a href="' + twtLink + '" target="_blank"' + '><img src="images/twitter.png" border="0" alt="Tweet This!" /' + '><' + '/a>');
// ]]>
</script>
What I would like it to do is also popup in a window rather than a full page view. My knowledge of script is limited so I don't know where to insert the appropriate popup code.
Any help?

instead of document.write you need window.open. Make sure the event is done in a click action, otherwise popup blockers would stop your script
<script type="text/javascript">
function fbs_click() {
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
window.open(twtLink);
}
</script>
And in your HTML add your image tag like this:
Hope this helps

You can place an ID="twitPop" on the anchor and use this as well.
$('#twitPop').click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});

Button for continous scrolling of a div with Javascript code

Found this code on the net. Want to modify it to make it scroll a div continously when the mouse button is down and stop scrolling when the mouse button is up. I tried this:
Change from the click event to the mousedown event. That did not do it.
Added a call to the same function within the function. That did not do it either.
What should I modify in this function to have the continous scrolling on mouse down?
(function ($) {
var vscrollid = 0;
$.fn.vScroll = function (options) {
var options = $.extend({}, { speed: 500, height: 300, upID: "#up-arrow", downID: "#bottom-arrow", cycle: true }, options);
return this.each(function () {
vscrollid++;
obj = $(this);
var newid = vscrollid;
obj.css("overflow", "hidden");
obj.css("position", "relative");
obj.css("height", options.height + "px");
obj.children().each(
function (intIndex) {
$(this).addClass("vscroll-" + vscrollid + "-" + intIndex);
});
var itemCount = 0;
$(options.downID).click(function () {
var nextCount = itemCount + 1;
if ($('.vscroll-' + newid + '-' + nextCount).length) {
var divH = $('.vscroll-' + newid + '-' + itemCount).outerHeight();
itemCount++;
$("#vscroller-" + newid).animate({
top: "-=" + divH + "px"
}, options.speed);
}
else {
if (options.cycle) {
itemCount = 0;
$("#vscroller-" + newid).animate({
top: "0" + "px"
}, options.speed);
}
}
});
$(options.upID).click(function () {
var prevCount = itemCount - 1;
if ($('.vscroll-' + newid + '-' + prevCount).length) {
itemCount--;
var divH = $('.vscroll-' + newid + '-' + itemCount).outerHeight();
$("#vscroller-" + newid).animate({
top: "+=" + divH + "px"
}, options.speed);
}
});
obj.children().wrapAll("<div style='position: relative; top: 0' id='vscroller-" + vscrollid + "'></div>");
});
};
})(jQuery);
/*
* jQuery vScroll
* Copyright (c) 2011 Simon Hibbard
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/
/*
* Version: V1.2.0
* Release: 10-02-2011
* Based on jQuery 1.4.2
*/

Was able to get the continuous scrolling with simpler code.
<script type="text/javascript">
$(document).ready(function($) {
$(".scrolling_prev", $("#'.$node['ID'].'")).mousedown(function() {
startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "-=50px");
}).mouseup(function() {
$(".link_drop_box", $("#'.$node['ID'].'")).stop()
});
$(".scrolling_next", $("#'.$node['ID'].'")).mousedown(function() {
startScrolling($(".link_drop_box", $("#'.$node['ID'].'")), "+=50px");
}).mouseup(function() {
$(".link_drop_box", $("#'.$node['ID'].'")).stop();
});
});
</script>

cursor JAVASCRIPT needs to be adapted to wordpress DOCTYPE

if you are experienced with relations between javascript and doctype declaration , any help would be appreciated. i use wordpress and i am trying to include cursor script into a page. the script works without default wordpress doctype, with it - it does not. any suggestions how to make the cursor script work, please?
HTML doctype declaration for my WordPress:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Code for cursor:
<STYLE type="text/css">
<!--
.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}
-->
</STYLE>
<SCRIPT language="JavaScript1.2" type="text/JavaScript">
<!-- cloak
//Kissing trail
//Visit http://www.rainbow.arch.scriptmania.com for this script
kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1200 //duration images stay on screen (in milliseconds)
kissSpacer = 30 //distance to move mouse b4 next heart appears
theimage = "cur.png" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd image to be displayed
//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {
posX = getMouseXPos(e)
posY = getMouseYPos(e)
if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
showKisser(posX,posY)
lastX = posX
lastY = posY
}
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageX+10)
} else {
return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
}
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageY)
} else {
return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
}
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
eval("clearTimeout(kissDelay" + curKisser + ")")
}
eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}
function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
document.captureEvents(Event.MOUSEMOVE)
document.onMouseMove = doKisser
} else {
document.onmousemove = doKisser
}
}
window.onload=kissbegin
// decloak -->
</SCRIPT>
<!--Simply copy and paste just before </BODY> section of your page.-->
<SCRIPT language="JavaScript" type="text/JavaScript">
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
}
}
// decloak -->
</SCRIPT>

The script is riddled with very old browser detection code, this could cause it to break in 'newer' browsers with a stricter DOCTYPE.
Try to remove the 'language="JavaScript1.2"' in the script tag. If that doesn't work you'd have to rewrite the browser detection.
The actual script isn't very complicated though so perhaps you could find parts elsewhere and combine them.
You need to do two things:
Hide the cursor (which is done with CSS)
Fetch the mouse position and place your own cursor there (typically an image). For this you will need a script that fetch the mouse position.
Shouldn't be too hard :)