Archive for the ‘jQuery’ Category


Locate the code that hooks up the slider. It should look something like the following:

Advertisements

You could use jQuery to dynamically update the mapping

function drawMap() {
 // remove image overlays used during transition
 $('.nivo-slice, .nivo-box').remove();
 var current_title = $('.nivoSlider').data('nivo:vars').currentImage.attr('title'); 
// set usemap attribute for current image
 $('.nivo-main-image').attr("useMap", current_title + "_map"); }

 

Then just call that function after load and after each transition

$('.nivoSlider').nivoSlider({
 // slider config
 afterLoad: drawMap,
 afterChange: drawMap
));

You need to change this (somewhere around line 719 of jquery.fancybox-1.3.1.js):

$(‘body’).append(
tmp = $(‘<div id=”fancybox-tmp”></div>’),
loading = $(‘<div id=”fancybox-loading”><div></div></div>’),
overlay = $(‘<div id=”fancybox-overlay”></div>’),
wrap = $(‘<div id=”fancybox-wrap”></div>’)
);
to

$(‘form’).append(
tmp = $(‘<div id=”fancybox-tmp”></div>’),
loading = $(‘<div id=”fancybox-loading”><div></div></div>’),
overlay = $(‘<div id=”fancybox-overlay”></div>’),
wrap = $(‘<div id=”fancybox-wrap”></div>’)
);

$(document).ready vs. $(window).load

Posted: October 15, 2011 in jQuery

Query offers two powerful methods to execute code and attach event handlers: $(document).ready and $(window).load. The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet. If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place.

1 $(document).ready(function() {
2  // executes when HTML-Document is loaded and DOM is ready
3  alert("document is ready");
4 });

The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

1 $(window).load(function() {
2  // executes when complete page is fully loaded, including all frames, objects and images
3  alert("window is loaded");
4 });

Searchable DropDown JQuery

Posted: June 3, 2011 in jQuery

JQuery Searchable DropDown Plugin

jquery-1.4.2.min

Default.aspx:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title></title>

<script src=”jquery-1.4.2.min.js” type=”text/javascript”></script>
<script src=”jquery.searchabledropdown-1.0.7.min.js” type=”text/javascript”></script>
<script src=”Common.js” type=”text/javascript”></script>
<style>
.searchableDropDown
{
background-color: #CCCCCC;
border: 2px solid gray;
font-weight: bold;
padding: 3px;
text-transform: uppercase;
}
.nomatches
{
color: Red;
font-weight: bold;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”scm” runat=”server”>
</asp:ScriptManager>
<asp:UpdatePanel ID=”upd” runat=”server”>
<ContentTemplate>
<div>
<asp:DropDownList ID=”ddlRestaurant” runat=”server” AutoPostBack=”true” CssClass=”searchableDropDown”>
<asp:ListItem>–Select–</asp:ListItem>
<asp:ListItem>Elephant</asp:ListItem>
<asp:ListItem>Cat</asp:ListItem>
<asp:ListItem>Lion</asp:ListItem>
<asp:ListItem>Zebra</asp:ListItem>
<asp:ListItem>Monkey</asp:ListItem>
<asp:ListItem>Cow</asp:ListItem>
<asp:ListItem>Bat</asp:ListItem>
<asp:ListItem>Camel</asp:ListItem>
<asp:ListItem>Dog</asp:ListItem>
</asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Default.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.ClientScript.IsStartupScriptRegistered(“LoadSearchableDropDown”))
{
string JSscript = string.Format(“<script type=\”text/javascript\”>LoadSearchableDropDown(‘#{0}’);</script>”, ddlRestaurant.ClientID);
ScriptManager.RegisterStartupScript(this, this.GetType(), “LoadSearchableDropDown”, JSscript, false);
}

}

Common.js:
function LoadSearchableDropDown(selector) {

$(selector).searchable({
maxListSize: 100,                       // if list size are less than maxListSize, show them all
maxMultiMatch: 50,                      // how many matching entries should be displayed
exactMatch: false,                      // Exact matching on search
wildcards: true,                        // Support for wildcard characters (*, ?)
ignoreCase: true,                       // Ignore case sensitivity
latency: 100,                           // how many millis to wait until starting search
warnMultiMatch: ‘top {0} matches …’,  // string to append to a list of entries cut short by maxMultiMatch
warnNoMatch: ‘no matches …’,          // string to show in the list when no entries match
zIndex: ‘auto’                          // zIndex for elements generated by this plugin
});
}

Output:

(more…)

JClock

Posted: May 18, 2011 in jQuery

jquery.jclock.js:

/*
* jQuery jclock – Clock plugin – v 2.3.2
* http://plugins.jquery.com/project/jclock
*
* Copyright (c) 2007-2011 Doug Sparling <http://www.dougsparling.com&gt;
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {

$.fn.jclock = function(options) {
var version = ‘2.3.2’;

// options
var opts = $.extend({}, $.fn.jclock.defaults, options);

return this.each(function() {
$this = $(this);
$this.timerID = null;
$this.running = false;

// Record keeping for seeded clock
$this.increment = 0;
$this.lastCalled = new Date().getTime();

var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

$this.format = o.format;
$this.utc = o.utc;
// deprecate utc_offset (v 2.2.0)
$this.utcOffset = (o.utc_offset != null) ? o.utc_offset : o.utcOffset;
$this.seedTime = o.seedTime;
$this.timeout = o.timeout;

$this.css({
fontFamily: o.fontFamily,
fontSize: o.fontSize,
backgroundColor: o.background,
color: o.foreground
});

// %a
$this.daysAbbrvNames = new Array(7);
$this.daysAbbrvNames[0] = “Sun”;
$this.daysAbbrvNames[1] = “Mon”;
$this.daysAbbrvNames[2] = “Tue”;
$this.daysAbbrvNames[3] = “Wed”;
$this.daysAbbrvNames[4] = “Thu”;
$this.daysAbbrvNames[5] = “Fri”;
$this.daysAbbrvNames[6] = “Sat”;

// %A
$this.daysFullNames = new Array(7);
$this.daysFullNames[0] = “Sunday”;
$this.daysFullNames[1] = “Monday”;
$this.daysFullNames[2] = “Tuesday”;
$this.daysFullNames[3] = “Wednesday”;
$this.daysFullNames[4] = “Thursday”;
$this.daysFullNames[5] = “Friday”;
$this.daysFullNames[6] = “Saturday”;

// %b
$this.monthsAbbrvNames = new Array(12);
$this.monthsAbbrvNames[0] = “Jan”;
$this.monthsAbbrvNames[1] = “Feb”;
$this.monthsAbbrvNames[2] = “Mar”;
$this.monthsAbbrvNames[3] = “Apr”;
$this.monthsAbbrvNames[4] = “May”;
$this.monthsAbbrvNames[5] = “Jun”;
$this.monthsAbbrvNames[6] = “Jul”;
$this.monthsAbbrvNames[7] = “Aug”;
$this.monthsAbbrvNames[8] = “Sep”;
$this.monthsAbbrvNames[9] = “Oct”;
$this.monthsAbbrvNames[10] = “Nov”;
$this.monthsAbbrvNames[11] = “Dec”;

// %B
$this.monthsFullNames = new Array(12);
$this.monthsFullNames[0] = “January”;
$this.monthsFullNames[1] = “February”;
$this.monthsFullNames[2] = “March”;
$this.monthsFullNames[3] = “April”;
$this.monthsFullNames[4] = “May”;
$this.monthsFullNames[5] = “June”;
$this.monthsFullNames[6] = “July”;
$this.monthsFullNames[7] = “August”;
$this.monthsFullNames[8] = “September”;
$this.monthsFullNames[9] = “October”;
$this.monthsFullNames[10] = “November”;
$this.monthsFullNames[11] = “December”;

$.fn.jclock.startClock($this);

});
};

$.fn.jclock.startClock = function(el) {
$.fn.jclock.stopClock(el);
$.fn.jclock.displayTime(el);
}

$.fn.jclock.stopClock = function(el) {
if(el.running) {
clearTimeout(el.timerID);
}
el.running = false;
}

$.fn.jclock.displayTime = function(el) {
var time = $.fn.jclock.currentTime(el);
var formatted_time = $.fn.jclock.formatTime(time, el);
el.attr(‘currentTime’, time.getTime())
el.html(formatted_time);
el.timerID = setTimeout(function(){$.fn.jclock.displayTime(el)},el.timeout);
}

$.fn.jclock.currentTime = function(el) {
if(typeof(el.seedTime) == ‘undefined’) {
// Seed time not being used, use current time
var now = new Date();
} else {
// Otherwise, use seed time with increment
el.increment += new Date().getTime() – el.lastCalled;
var now = new Date(el.seedTime + el.increment);
el.lastCalled = new Date().getTime();
}

if(el.utc == true) {
var localTime = now.getTime();
var localOffset = now.getTimezoneOffset() * 60000;
var utc = localTime + localOffset;
var utcTime = utc + (3600000 * el.utcOffset);
var now = new Date(utcTime);
}

return now
}

$.fn.jclock.formatTime = function(time, el) {

var timeNow = “”;
var i = 0;
var index = 0;
while ((index = el.format.indexOf(“%”, i)) != -1) {
timeNow += el.format.substring(i, index);
index++;

// modifier flag
//switch (el.format.charAt(index++)) {
//}

var property = $.fn.jclock.getProperty(time, el, el.format.charAt(index));
index++;

//switch (switchCase) {
//}

timeNow += property;
i = index
}

timeNow += el.format.substring(i);
return timeNow;
};

$.fn.jclock.getProperty = function(dateObject, el, property) {

switch (property) {
case “a”: // abbrv day names
return (el.daysAbbrvNames[dateObject.getDay()]);
case “A”: // full day names
return (el.daysFullNames[dateObject.getDay()]);
case “b”: // abbrv month names
return (el.monthsAbbrvNames[dateObject.getMonth()]);
case “B”: // full month names
return (el.monthsFullNames[dateObject.getMonth()]);
case “d”: // day 01-31
return ((dateObject.getDate() < 10) ? “0” : “”) + dateObject.getDate();
case “H”: // hour as a decimal number using a 24-hour clock (range 00 to 23)
return ((dateObject.getHours() < 10) ? “0” : “”) + dateObject.getHours();
case “I”: // hour as a decimal number using a 12-hour clock (range 01 to 12)
var hours = (dateObject.getHours() % 12 || 12);
return ((hours < 10) ? “0” : “”) + hours;
case “l”: // hour as a decimal number using a 12-hour clock (range 1 to 12)
var hours = (dateObject.getHours() % 12 || 12);
//return ((hours < 10) ? “0” : “”) + hours;
return hours;
case “m”: // month number
return (((dateObject.getMonth() + 1) < 10) ? “0” : “”) + (dateObject.getMonth() + 1);
case “M”: // minute as a decimal number
return ((dateObject.getMinutes() < 10) ? “0” : “”) + dateObject.getMinutes();
case “p”: // either `am’ or `pm’ according to the given time value,
// or the corresponding strings for the current locale
return (dateObject.getHours() < 12 ? “am” : “pm”);
case “P”: // either `AM’ or `PM’ according to the given time value,
return (dateObject.getHours() < 12 ? “AM” : “PM”);
case “S”: // second as a decimal number
return ((dateObject.getSeconds() < 10) ? “0” : “”) + dateObject.getSeconds();
case “y”: // two-digit year
return dateObject.getFullYear().toString().substring(2);
case “Y”: // full year
return (dateObject.getFullYear());
case “%”:
return “%”;
}

}

// plugin defaults (24-hour)
$.fn.jclock.defaults = {
format: ‘%H:%M:%S’,
utcOffset: 0,
utc: false,
fontFamily: ”,
fontSize: ”,
foreground: ”,
background: ”,
seedTime: undefined,
timeout: 1000 // 1000 = one second, 60000 = one minute
};

})(jQuery);

HTML File :

<html>
<head>
<title>jclock – multiple clocks using different time zone offsets</title>

<script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
<script type=”text/javascript” src=”jquery.jclock.js”></script>

<script type=”text/javascript”>
$(function($) {
var optionsEST = {
format: ‘%A %B %d, %Y %I:%M:%S %p’, // 12-hour
utc: true,
utcOffset: -5
}
$(‘#jclock1’).jclock(optionsEST);

var optionsPST = {
format: ‘%A %B %d, %Y %I:%M:%S %p’, // 12-hour
utc: true,
utcOffset: -7
}
$(‘#jclock2’).jclock(optionsPST);

var optionsIndia = {
format: ‘%A %B %d, %Y %I:%M:%S %p’, // 12-hour
utc: true,
utcOffset: 5.5
}
$(‘#jclock3’).jclock(optionsIndia);

});
</script>

</head>

<body>

<p>EST: <span id=”jclock1″></span></p>

<p>PST: <span id=”jclock2″></span></p>

<p>India: <span id=”jclock3″></span></p>

</body>
</html>

OutPut: