jQuery Double Scroller Slideshow
15 Dec 2010 Leave a Comment
in JavaScript, jQuery
The following jquery slideshow is created using two scrollers, one for the main scroller, and one for the navigation scroller.
Code for main scroller:
var main_api = $(“div.main_scrollable”).scrollable({
mousewheel: false,
api: true,
speed: 400,
prev: “.main_prev”,
next: “.main_next”,
clickable: “true”
});
Code for navigation scroller:
var thumbs_api = $(“div.nav_scrollable”).scrollable({
mousewheel: false,
api: true,
speed: 400,
prev: “.thumb_prev”,
next: “.thumb_next”,
items: “img.thumb”
})
Code to help restict number of thumbnails appearing:
.onSeek(function(){
//this help to keep the number of thumbnails restricted
var size = 5;
if (this.getIndex() >= this.getSize() – size) {
this.seekTo(this.getSize() – size);
}
});
Code to set fading on all thumbs except the one at index:
thumbs_api.setFade = function(index) {
thumbs_api.getItems().fadeTo(“fast”,0.4);
thumbs_api.getItems().eq(index).stop().fadeTo(“fast”,1);
};
the rest of the code with comments:
// the initial state
thumbs_api.setFade(0);
thumbs_api.vps = 4; // viewport size for thumbs
// – scroll the main scrollable according to the clicks on the thumbs
// – set the fading to thumbs accordingly
// Rem.
// – clickable has been removed from the scrollable API:
// -> we use ‘each’ from JQuery to associate the callback to each thumb, including
// a counter at each call
// – We can use seekTo to scroll the main scrollable as it presents only
// a single image in its viewport
$(“img.thumb”).each(function(count) {
$(this).click(function () {
thumbs_api.clicked = true;
thumbs_api.setFade(count);
main_api.seekTo(count);
index = thumbs_api.getIndex(); // first visible thumb
size = thumbs_api.getSize(); // number of thumbs
if (index == count) {
thumbs_api.move(-2);
}
else if (index == count – 1) {
thumbs_api.prev();
}
else if (index <= count – thumbs_api.vps + 1) {
if (size – index – thumbs_api.vps >= 2) {
thumbs_api.move(2);
}
else if (size – index – thumbs_api.vps >= 1) {
thumbs_api.next();
}
}
else if (index <= count – thumbs_api.vps + 2) {
if (size – index – thumbs_api.vps >= 1) {
thumbs_api.next();
}
}
});
});
// – scroll the thumb scrollable according to the scroll of the main
// scrollable when it is scroll directly (click on the image, use of
// the mousewheel or the main control buttons)
// Rem.
// – onBeforeSeek callback is called at each time the main scrollable
// is scrolled, even when it is due to a thumb click. We use a state
// variable to avoid double effects
// – requires scrollable 1.1.1 (bugfix on callback for onSeek and
// onBeforeSeek)
main_api.onBeforeSeek(function (jq_event, index){
if (! thumbs_api.clicked) {
thumbs_api.setFade(index);
thumbs_api.seekTo(index);
}
});
// reset the state variable after each main scroll
main_api.onSeek(function (jq_event, index){
thumbs_api.clicked = false;
});
Showcase of the completed double scroller slideshow:
http://www.edselweb.com/fun-stuff/jquery/doubleScrollerSlideShow/doubleScrollerSlideShow.htm
JavaScript Error ‘expected identifier, string or number’ in IE
15 Dec 2010 Leave a Comment
in JavaScript
I just can’t resist myself to blog this, as this is one of the most annoying error I found in IE. When I was testing a Jquery Code I’m writing, Firefox worked without a hitch, but IE threw an ‘expected identifier, string or number’ error pointing to the last line of the variable declaration.
Here is the code:
var main_api = $(“div.main_scrollable”).scrollable({
mousewheel: false,
api: true,
speed: 400,
prev: “.main_prev”,
next: “.main_next”,
clickable: “true”,
});
Look at clickable: “true”, notice the comma after. That’s what was causing the the error. I had taken out a variable under that one but forgot to remove the comma. FireFox ignored the error, but not IE. One little misplaced character, so much wasted time. Arrrrrggg….IE!!!
CSS 3.0 with PIE
07 Oct 2010 Leave a Comment
in CSS 3.0 Tags: CSS 3.0, PIE, Progression Internet Explorer
Objective: To recreate a box-shadow using CSS3.0
Problem encountered: CSS3.0 is not widely supported in IE browsers.
Solution: Use Progression Internet Explorer (PIE).
Code Example:
#subNavContainer {
/* css3 shadow styles*/
box-shadow: 2px 1px 3px #000; // CSS3.0
-moz-box-shadow: 2px 1px 3px #000; // for Firefox
-webkit-box-shadow: 2px 1px 3px #000; // for webkit based browsers like Chrome and Safari
behavior:url(/styles/PIE.htc); // Add this for CSS3.0 to work in IEs browsers
}
Download PIE:http://css3pie.com
Using .live() and .die() in jQuery
10 Nov 2009 Leave a Comment
in JavaScript, jQuery Tags: jQuery
In jQuery 1.3, a new pair of methods, .live() and .die(), have been introduced. These methods perform the same tasks as .bind() and .unbind(), but behind the scenes they use event delegation. Event delegation is also useful in situations, such as when new elements are added by DOM manipulation methods or AJAX routines.
Example:
The following element #pIconVideo is added using AJAX routine. “.live()” bind the function to be called when “click” event is sent to the element. To remove the bindings on the element bound with .live(), we could use .die() .
$(‘a#pIconVideo’).live(“click”, function(event) {
$(this).fancybox({‘frameWidth’:780, ‘frameHeight’:620});
return false;
})
Creating a sign-up form with validation using jQuery
09 Nov 2009 Leave a Comment
in JavaScript, jQuery Tags: CSS, Form, jQuery
Objective:
To create a sign-up form with validation using jQuery.
Skill Set:
jQuery, HTML, CSS
Demo:
Sign-Up Form with validation using jQuery
Steps:
- Download jQuery library here.
- Download jQuery Form Validation plugin here.
- Insert this code within the header tag:
- <script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”jquery.validate.pack.js” type=”text/javascript”></script> - Insert the following code within the header for the plugin:
$().ready(function() {
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
// check if confirm password is still valid after password changed
$("#password").blur(function() {
$("#confirm_password").valid();
});
//code to hide topic selection, "none" class is use to hide topic at first
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
// [inital ? "removeClass" : "addClass"] ---- if initial is true, then remove class, otherwise add class
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("none");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("none");
topicInputs.attr("disabled", !this.checked);
});
});
Creating a simple comment form with validation using jQuery
09 Nov 2009 Leave a Comment
in JavaScript, jQuery Tags: CSS, Form, jQuery
Objective:
To create a simple comment form and validate with jQuery.
Skill Set:
jQuery, HTML, CSS
Demo:
Simple Comment Form with validation using jQuery
Steps:
- Download jQuery library here.
- Download jQuery Form Validation plugin here.
- Insert this code within the header tag:
- <script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”jquery.validate.pack.js” type=”text/javascript”></script> - Insert the following code within the header for the plugin:
$().ready(function() {
// validate the comment form when it is submitted
$(“#commentForm”).validate();
});
Form Validation using jQuery
22 Oct 2009 Leave a Comment
in JavaScript, jQuery Tags: jQuery
Objective:
To validate a form using jQuery.
Skill Set:
jQuery, HTML, CSS
Demo:
Steps:
- Download jQuery library here.
- Download jQuery Form Validation plugin here.
- Insert this code within the header tag:
- <script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”jquery.validate.pack.js” type=”text/javascript”></script> - Insert the following code within the header for the plugin:
<script type=”text/javascript”>
//an alert message when the form is submitted.
$.validator.setDefaults({
submitHandler: function() { alert(“submitted!”); }
});
//this is where the validation function start
$().ready(function() {
// validate form when submit
$(“#bodenform”).validate({
rules: {
//used the “name” attribute for each of the form element
ctl00$ContentPlaceHolder1$GenericAddress1$ddlTitle: “required”,
ctl00$ContentPlaceHolder1$GenericAddress1$txtFirstName: “required”,
ctl00$ContentPlaceHolder1$GenericAddress1$txtLastName: “required”,
ctl00$ContentPlaceHolder1$GenericAddress1$txtEmail: {
required: true,
email: true
},
//validate radio button
radGender: “required”,
//validate checkbox
chkType:”required”
},
//Error messagea for each of the form elements
messages: {
ctl00$ContentPlaceHolder1$GenericAddress1$ddlTitle:”Please enter your title”,
ctl00$ContentPlaceHolder1$GenericAddress1$txtFirstName: “Please enter your first name”,
ctl00$ContentPlaceHolder1$GenericAddress1$txtLastName: “Please enter your last name”,
ctl00$ContentPlaceHolder1$GenericAddress1$txtEmail: “Please enter a valid email address”,
radGender: “Please select your gender”,
chkType: “Please check at least a box”
}
});
});
</script>
Note:
- Some browser might show the error message in the wrong place. Edit the the CSS for the layout of the error message by overriding css class “label.error”.
- label.error { display: none; color:#F00; position:absolute; left:400px; width:200px; text-align:left}
Embeding Flash movies using swfobject
22 Oct 2009 Leave a Comment
Objective:
To embed Flash movie using swfobject
Skill Set:
javascript, HTML, CSS
Demo:
Embeding Flash movie using swfobject
Steps:
- Download the swfobject script from here
- Insert this code within the header tag:
- <script type=”text/javascript” src=”swfobject.js”></script>
- <script type=”text/javascript”>
var flashvars = false;
var params = {
base:”http://edselweb.com/flash/flickbook/images/”
};
var attributes = {};
swfobject.embedSWF(“images/flickBookUK.swf”, “myContent”, “353″, “698″, “9.0.0″, “expressInstall.swf”, flashvars, params, attributes);
</script> - A div for alternative content is necessary within the body tag as follow:
<div id=”myContent”>
<h1>Alternative content</h1>
<p><a href=”http://www.adobe.com/go/getflashplayer”><img src=”http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=”Get Adobe Flash player” /></a></p>
</div>
How to execute a function only after your ajax request has completed?
02 Oct 2009 Leave a Comment
Objective:
To only execute a jQuery function only after all your ajax request in your page has completed successfully.
Method:
- Search the last tag of the Body tag and then “bind” the “ajaxSuccess ” event to the function.
Code:
$(document).ready(function() {
$(‘body:last-child’).bind(‘ajaxSuccess’, function() { })
});
Tutorial: Creating a jquery form with show/hide questions and answers
02 Oct 2009 Leave a Comment
in jQuery
Objective:
To create a form which will show and hide the questions and answers according to the user’s selection.
Skill Set:
jQuery, HTML, CSS
Demo:
Steps:
- Create a standard HTML form with various questions and answers. View the form source code in the Demo.
- Incude the Standard jQuery library in the Header Tag.
<script src=”jquery-1.3.2.min.js”></script>
- Create a jQuery function that will use the show/hide methods. The function also use the Switch control sturcture of jQuery. This function should be placed in the header tag too.
<script>
$(function(){
<!– “#event_type_id” is the ID for the select option –>
$(“#event_type_id”).change(function () {
var val = $(this).val();
<!– Use Switch/Case Control structure to choose the different selection that the users has choosen. Use Show method to show the relevant selection, and use Hide method to hide rest of the selection. –>
switch(val){
case ‘image’:
$(“#image”).show();
$(“#comment”).show();
$(“#price”).hide();
$(“#colour”).hide();
$(“#product”).hide();
$(“#johnnie”).hide();
$(“#garmentMeasurements”).hide();
$(“#bulletPoints”).hide();
$(“#upsell”).hide();
$(“#crossSell”).hide();
$(“#other”).hide();
break;
case ‘price’:
$(“#price”).show();
$(“#comment”).show();
$(“#image”).hide();
$(“#colour”).hide();
$(“#product”).hide();
$(“#johnnie”).hide();
$(“#garmentMeasurements”).hide();
$(“#bulletPoints”).hide();
$(“#upsell”).hide();
$(“#crossSell”).hide();
$(“#other”).hide();
break;
case ‘colour’:
$(“#colour”).show();
$(“#image”).hide();
$(“#price”).hide();
$(“#product”).hide();
$(“#johnnie”).hide();
$(“#garmentMeasurements”).hide();
$(“#bulletPoints”).hide();
$(“#upsell”).hide();
$(“#crossSell”).hide();
$(“#other”).hide();
$(“#comment”).hide();
$(“#freeboardersYes”).hide();
$(“#freeboardersNo”).hide();
break;
case ‘product’:
$(“#product”).show();
$(“#image”).hide();
$(“#colour”).hide();
$(“#price”).hide();
$(“#johnnie”).hide();
$(“#garmentMeasurements”).hide();
$(“#bulletPoints”).hide();
$(“#upsell”).hide();
$(“#comment”).hide();
$(“#crossSell”).hide();
$(“#mplanYes”).hide();
$(“#mplanNo”).hide();
$(“#other”).hide();
break;
case ‘johnnie’:
$(“#johnnie”).show();
$(“#comment”).show();
$(“#image”).hide();
$(“#price”).hide();
$(“#colour”).hide();
$(“#product”).hide();
$(“#garmentMeasurements”).hide();
$(“#bulletPoints”).hide();
$(“#upsell”).hide();
$(“#crossSell”).hide();
$(“#other”).hide();
break;
case ‘garmentMeasurements’:
$(“#garmentMeasurements”).show();
$(“#image”).hide();
$(“#price”).hide();
$(“#colour”).hide();
$(“#product”).hide();
$(“#johnnie”).hide();
$(“#bulletPoints”).hide();
$(“#upsell”).hide();
$(“#crossSell”).hide();
$(“#other”).hide();
$(“#comment”).hide();
$(“#garmentMeasurementsYes”).hide();
$(“#garmentMeasurementsNo”).hide();
break;
case ‘bulletPoints’:
$(“#bulletPoints”).show();
$(“#image”).hide();
$(“#price”).hide();
$(“#colour”).hide();
$(“#product”).hide();
$(“#johnnie”).hide();
$(“#garmentMeasurements”).hide();
$(“#upsell”).hide();
$(“#crossSell”).hide();
$(“#other”).hide();
$(“#comment”).hide();
$(“#bulletPointsYes”).hide();
$(“#bulletPointsNo”).hide();
break;
case ‘upsell’:
$(“#upsell”).show();
$(“#image”).hide();
$(“#price”).hide();
$(“#colour”).hide();
$(“#product”).hide();
$(“#johnnie”).hide();
$(“#garmentMeasurements”).hide();
$(“#bulletPoints”).hide();
$(“#crossSell”).hide();
$(“#other”).hide();
$(“#comment”).hide();
break;
case ‘crossSell’:
$(“#crossSell”).show();
$(“#image”).hide();
$(“#price”).hide();
$(“#colour”).hide();
$(“#product”).hide();
$(“#johnnie”).hide();
$(“#garmentMeasurements”).hide();
$(“#bulletPoints”).hide();
$(“#upsell”).hide();
$(“#other”).hide();
$(“#comment”).hide();
break;
case ‘other’:
$(“#other”).show();
$(“#comment”).show();
$(“#image”).hide();
$(“#price”).hide();
$(“#colour”).hide();
$(“#product”).hide();
$(“#johnnie”).hide();
$(“#garmentMeasurements”).hide();
$(“#bulletPoints”).hide();
$(“#upsell”).hide();
$(“#crossSell”).hide();
break;
}
});
});
</script>
- For questions that includes radio buttons selection, us the onClick events with show/hide methods to show and hide the ID of the relevent section.
<!– when users select the Yes radio button –>
<input id=”yes” onClick=”javascript: $(‘#freeboardersYes’).show(‘slow’); $(‘#freeboardersNo’).hide(‘slow’);” type=”radio” name=”subscribe” value=”1″/>
<label for=”yes”>Yes</label>
<!– when users select the No radio button –>
<input id=”no” onClick=”javascript: $(‘#freeboardersNo’).show(‘slow’); $(‘#freeboardersYes’).hide(‘slow’);” type=”radio” name=”subscribe” value=”0″/>
<label for=”no”>No</label>
