jQuery Questions and Answers
jQuery is designed to change the way that you write JavaScript.
Here you will find best answer for your questions
Wednesday, July 7, 2010
Sunday, April 11, 2010
How to get week number for a date in jQuery
This is a useful function, who tell you week in the year for a custom date.
function(d) {
var day = d.getDay();
if(day == 0) day = 7;
d.setDate(d.getDate() + (4 - day));
var year = d.getFullYear();
var ZBDoCY = Math.floor((d.getTime() - new Date(year, 0, 1, -6)) / 86400000);
return 1 + Math.floor(ZBDoCY / 7);
}
Saturday, April 10, 2010
How to build a jQuery slideshow
A jQuery slideshow I can say it's the most used small application that you can integrate in a website.
There are many on the internet but the best practice is to create one of your own, by own custom rules.
I will show here a basic slideshow with slide effect:
Here is a preview , we have numbers for each slide , left/right arrows and a click for details.
In this example images will have a custom width = 940px.
The jQuery code is :
var currentId = 1; var currentScroll = 0; $(document).ready(function() { // Load the slideshow imageRotator(); }); function imageRotator() { initialize(); updateArrows(); bindArrows(); bindNumbers(); } function initialize() { $('div#rotator ul').empty(); currentId = 1; currentScroll = 0; documentWidth = $(window).width(); $("#rotator #content").width(documentWidth-5); nrOfImages = $("div#rotator #content ul li").length; buildNumbers(nrOfImages); $("#rotator #content ul li a").each(function(i){ $(this).css("left",820 + 940*i) }); } function buildNumbers(nrOfImages) { $('#navbar').empty(); var html = ""; if (nrOfImages === 1) { html = ""; $('#navbar').append(html); } else { for (var i = 1 ; i <= nrOfImages ; i++) { html += '
' + i + ''; } $('#navbar').append(html); } } function bindArrows() { $('#leftArrow').click(function() { currentId--; currentScroll -= 940; changeSlide(); updateArrows(); }); $('#rightArrow').click(function() { currentId++; currentScroll += 940; changeSlide(); updateArrows(); }); } function bindNumbers(){ $('#navbar div').live('click',function() { var select = parseInt($(this).text()); currentScroll = 940 * (select - 1); changeSlide(); currentId = select; updateArrows(); }); } function changeSlide() { var current = $("#rotator #content"); current.animate ( { scrollLeft : currentScroll },1200) } function updateArrows() { changeSlide(); total_pictures = $('div#rotator #content1 ul li').length; if (currentId === total_pictures) { $('#rightArrow').hide(); } else { $('#rightArrow').show(); } if (currentId === 1) { $('#leftArrow').hide(); } else { $('#leftArrow').show(); } };
The html code is :
<div id = "content"> <ul> ul> div> <div id="navbar">div> <div id="leftArrow">div>
<div id="rightArrow">div> div>
And inside ul you will have images
-
Now you need to add css to display things as you want :)
Why jQuery change() don't work in IE
In latest jQuery version change() event don't work in IE , on radio buttons for example , or checkboxes.This happens cause DOM is updated dynamically inIE using AJAX.So the general advice is :
Use click() function instead!
or
Try to bind change() event using new jQuery live :
$("#checkbox").live("change",function() {
alert("checkbox triggered");
}
Where checkbox is the id of your
<.input type = "checkbox" id = "checkbox">
Labels: jQuery change() event, jQuery click(), jQuery live()
How to get numbers of days in a month
This post shows how to get the number of days in a month using jQuery by passing the month and year to a function.
The function is :
function getDaysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
Example :
We want number of days from February 2009
alert(getDaysInMonth(2, 2009));
Output:
28
Why this works?
In fact here :
alert(getDaysInMonth(2, 2009));
we ask for day 0 of March, cause months start from 0.But day 0 of March is last day of February, so with this trick we can get days from a custom month and year;Labels: date, jQuery, numbers of days in a month, trick