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

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!!!

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

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

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

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

To validate a form using jQuery.

Skill Set:

jQuery, HTML, CSS

Demo:

Form 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:

<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}

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>

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

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:

Show/Hide Questionaire

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>

]]> http://edselweb.wordpress.com/2009/10/02/tutorial-creating-a-jquery-form-with-showhide-questions-and-answers/feed/ 0 edselweb