addClass():
jQuery:
<script type="text/javascript">
$(document).ready(function(){
$("p.list").click(function(){
$(this).addClass("active");
});
});
</script>
The CSS:
<style type="text/css">
p{
float: left;
width: 33.3%;
padding: 0;
margin: 0;
}
.block {
margin-right: 10px;
padding: 20px;
background: #fff;
}
.active {background: #ccc;}
</style>
removeClass():
jQuery:
$(document).ready(function(){
$("p.list").click(function(){
$(this).removeClass("list");
});
});
The CSS:
<style type="text/css">
p {
float: left;
width: 33.3%;
padding: 0;
margin: 0;
margin-right: 10px;
padding: 20px;
}
.list{
margin-right: 10px;
padding: 20px;
background: #CCCCCC;
}
</style>
toggleClass():
jQuery:
<script>
$(document).ready(function(){
$("p.list").click(function(){
$(this).toggleClass("active");
});
});
</script>
The CSS:
<style type="text/css">
p{
float: left;
width: 33.3%;
padding: 0;
margin: 0;
}
.block {
margin-right: 10px;
padding: 20px;
background: #fff;
}
.active {background: #ccc;}
</style>
Most Commented Posts
]]>
2. Stilbuero
3. Queness
View Tutorial | View Demo | Download
View Tutorial | View Demo1 | View Demo 2
5. Nettuts
View Tutorial | View Demo | Download
See Also Following Topics:
]]>Image Slide Show is one of the famous components in web design and development. A lot of the websites display news headlines in an image slide show to attract viewers attention, of course, with caption/excerpt. No doubt about it, this is a clever method not only to gain attentions, but it also makes the website more alive (not too static, dull).
So, here we go again, I separated my codes into 3 sections: html, css and javascript and I will explain how it works in each section.
1. HTML
My ultimate objective is – to keep the html as simple as possible. So, the final product is as following. The first image has a class called “show”. Class show has higher z-index, so image with this class will display on top, thus image with this class will always display on top of the rest. The second thing you need to know is the DIV with “caption” class. It has the highest z-index. That DIV will be used to display the caption. The caption is retrieve from the REL attribute in the img element. You can put html element in the REL attribute. Be aware of extra padding and margin of the html elements you used. (eg h1, p).
Have a look at the html code:
<div id="gallery">
<a href="#" class="show">
<img src="images/flowing-rock.jpg" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<h3>Flowing Rock</h3>You can put html element
inside the REL attribute."/></a>
</a>
<a href="#">
<img src="images/grass-blades.jpg" alt="Grass Blades" alt="" title="" width="580" height="360" rel="<h3>Grass Blades</h3>description"/>
</a>
......
......
......
<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>
2. CSS
In this section, I declared a container #gallery for this image slide show. The CSS for this tutorial is pretty straight foward, the most importance thing is the z-index. You have to make sure the “show” class z-index is lower than the “caption” z-index.
body{ font-family:arial}
.clear {
clear:both
}
#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
3. Javascript
Finally, the Javascript code. I have added comments in each line to explain what it does. My concept for this image slide show:
- Hide all the images
- Display the first image and caption
- Find the image with “show” class, and grab the next image using next() method
- Add “show” class to next image
- Animate the image (fadeout the current image, fadein next image)
- And, it repeats above steps over and over again
$(document).ready(function() {
//Execute the slideShow slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
Original Post By: Queness
See Also Following Topics:
]]>Our content’s structure involves a div called #slideshow that serves as the container for our slideshow. Nested inside it is another div called #slideContainer that holds the slides, which are divs with a class set to .slide.
The HTML markup:
<!-- Slideshow HTML --><div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <!-- Content for slide 1 goes here --> </div> <div class="slide"> <!-- Content for slide 2 goes here. --> </div> <div class="slide"> <!-- Content for slide 3 goes here. --> </div> <div class="slide"> <!-- Content for slide 4 goes here. --> </div> </div></div><!-- Slideshow HTML -->
In example 1 below, you’ll see how text-based browsers, and browsers incapable of rendering CSS and JavaScript, will see our slideshow. It’s important to note that all of our content is easily accessible; we’ve hidden nothing from the user – ensuring that everyone will have the ability to view our content.
There is also no markup for the left and right arrow controls, which we will insert into the DOM later on using JavaScript. Having them in the content structure level would be confusing to individuals without CSS or JavaScript capabilities.
he next step to a strong design is having a good set of styles that consider the possibility that the user has JavaScript disabled.
For #slidesContainer, we set the overflow property to auto so that scroll bars appear when our content overflows over the set height of 263px (the height of our slides).
#slidesContainer CSS
#slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative;}We have to reduce the width of the .slide div class by 20px to accommodate the right hand scroll bar that will appear when JavaScript is turned off.
.slide class CSS
#slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels to avoid horizontal scroll */ height:263px;}
Without JavaScript, our content is still accessible; users can scroll up and down using to view our slides.
Slideshow without JavaScript
Alternatively, you can give the .slide style rule a float:left; property so that instead of scrolling vertically, users can scroll horizontally.
Left and right arrow CSS
To save some JavaScript rendering resources, we’ll declare style rules for the left and arrow controls that we will insert in the DOM via jQuery.
The elements will be <span> elements, so we declare a cursor property and assign it the value of pointer to change the mouse pointer when the user hovers over the controls. We use the text-indent property to hide the text out of sight, a CSS background image replacement method.
Controls
/** * Slideshow controls style rules. */.control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer;}#leftControl { top:0; left:0; background:transparent url(img/control_left.jpg) no-repeat 0 0;}#rightControl { top:0; right:0; background:transparent url(img/control_right.jpg) no-repeat 0 0;}The best part… JavaScript
With our HTML and CSS in place, it’s time for the fun stuff. We’ll use the jQuery library to make our slideshow more interactive and animated.
The theory
The first thing we want to do is ‘undo’ the styles that we declared in CSS that deals with the JavaScript off scenario. This involves declaring CSS styles in JavaScript for #slidesContainer to remove its scroll bar. Additionally, we have to resize our .slide divs to 560px, which we reduced by 20px in to accommodate the scroll bar. We also want to float the divs to the left so that they are displayed side by side horizontally instead of stacked on top of each other vertically.
Then, by DOM manipulation, we insert a div called #slideInner that wraps around all of our slides that has a width equal to the total width of all the .slide div.
Finally, we insert left and right controls (with class names of .control) for user navigation; we do this in JavaScript so that browser clients that don’t have JavaScript enabled won’t see the controls.
Here’s the JavaScript code in its entirety for you to study, but we’ll go through it in detail afterwards.
The entire jQuery script
$(document).ready(function(){ var currentPosition = 0; var slideWidth = 560; var slides = $('.slide'); var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert left and right arrow controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() }
else{ $('#rightControl').show() }
}
});
Creating some objects
First we initiate some variables at the top of the script that we’ll use throughout the script.
currentPosition will be a number that contains the current position of the slideshow. slideWidth is the width of each .slide div, which is fixed at 560px. I chose to declare an object for the $(’.slide’) selector to make our code look a bit cleaner, but you can skip this and instead use the full selector ($(’.slide’)) in your syntax.
Finally, we determine the number of slides in our slideshow using the .length method.
Variables and constants
var currentPosition = 0;var slideWidth = 560;var slides = $('.slide');var numberOfSlides = slides.length;Removing the scroll bar
If our script runs, then our user has JavaScript enabled – so we’ll remove the scroll bar by setting the overflow property of slidesContainer to ‘hidden‘ and this will supersede the overflow:auto declaration in our CSS
Changing CSS overflow property value to hidden
$('#slidesContainer').css('overflow', 'hidden');Inserting a div in the DOM
We’ll use the margin property to move our slides left and right (more on this later). To do so, we need to create a div that wraps around all of our .slide divs, set to the same width as the total width of all our slides. By adjusting this div’s margin property (later on), we will create the effect of it moving left and right.
Inserting #slideInner into the DOM using the .wrapAll() method
slides .wrapAll('<div id="slideInner"></div>')We also need to set the width of #slideInner, the newly created div, to the total width of all .slide divs.
Inserting #slideInner into the DOM using the .wrapAll() method
$('#slideInner').css('width', slideWidth * numberOfSlides);Styling the Slideshow slides in JavaScript
With JavaScript enabled, we want to float the slides to the left so that they display side by side. We also want to set them to a width of 560px since we won’t have the scroll bar anymore.
We can chain the .css method along with the .wrapAll() method .
Giving .slide divs overflow:hidden CSS property
slides .css('overflow', 'hidden') .wrapAll('<div id="slideInner"></div>')Inserting the controls in the DOM
We insert the controls by manipulating the DOM; this way, users using JavaScript-disabled browsers and screen readers won’t have an invalid HTML structure with controls that take them nowhere which would be confusing because clicking on them would not work without JavaScript.
We do this using the .prepend() and .append() method which inserts an HTML string inside the selected object/s (in this case, the #slideshow div is selected). The text inside the span elements don’t matter because they were hidden
Inserting the controls in the DOM
$('#slideshow') .prepend('<span class="control" id="leftControl">Moves left</span>') .append('<span class="control" id="rightControl">Moves right</span>');Managing the left and right arrow controls with a function
To manage our controls, we create a function called manageControls that hides and shows the left and right arrow controls based on the current position of the slideshow.
If it’s on the first slide, we hide the left control because there is no preceding slide. On the last slide, we hide the right control because the user has reached the end of the slideshow. We do this by using the .hide() and .show() jQuery methods that hides/shows the selected DOM element/s that precedes it.
the manageControls() function
function manageControls(position){ // position==0 is first slide if(position==0) { $('#leftControl').hide(); } else { $('#leftControl').show(); } // numberOfSlides-1 is last slides if(position==numberOfSlides-1) { $('#rightControl').hide(); } else { $('#rightControl').show(); }} Call manageControls() on DOM ready
When our first script loads, we should call the manageControls() function once to hide the left arrow control. Calling it is easy, we just pass the currentPosition argument into it which should be 0 initially.
calling manageControls() on script load (domready event)
manageControls(currentPosition);Binding click events to the controls
The final step to the jQuery slideshow script is binding events to the left and right controls. This essentially creates “event listeners” that triggers functions when the user clicks on either the left or right arrow controls.
Binding a click event listener to .control class
$('.control').bind('click', function(){ // do something when user clicks});Updating the value of currentPosition
When the user clicks on a control, we update the value of the currentPosition variable: if the user clicks on the right arrow control (with the ID of #rightControl) then we add one to our currentPosition; if the user clicks on the left arrow control (with the ID of #lefControl), then we subtract 1 from currentPosition. What you see below is called a ternary operator, which is shorthand for if/else control structures.
Ternary operator to set new value of currentPosition
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;Calling manageControls() after updating currentPosition
After we’ve adjusted the value of currentPosition, we call manageControls() again to hide or show our controls based on our new slide position.
Calling manageControls() inside .bind method
manageControls(currentPosition);Animating the slides
Finally, we move #slideInner to the left or right by animating it’s margin-left CSS property value. The left margin is the negative of the width of our slides multiplied by our current position. For example, if we’re moving to Slide 3, then our left margin is equal to -1120px.
Using .animate method to transition margin-left CSS property
$('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition)});Originally Post By :SixRevision
See Also Following Topics:
]]>This is a great tip! Instead of doing this
$(document).ready(function() {
//write your code here
} You can also do this, both are the same!
$(function(){
//write your code here
});2. Switch to different CSS style sheets
You want to have different design for your website. You can use this to switch to different CSS Style Sheets:
$("a.cssSwitcher]").click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$("link[rel=stylesheet]").attr({href : this.attr(rel)});
}); <link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a>
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a>
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>3. Disable right click
Some of us might want to disable right click, or want to create our own context menu for the website, this is how we can detect right click:
$(document).bind("contextmenu",function(e){
//you can enter your code here, e.g a menu list
//cancel the default context menu
return false;
}); 4. Text Resizing With jQuery
Ever wondered how to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how – using jQuery (a great JavaScript library).
$(document).ready(function(){
//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array('span','.section2');
section = section.join(',');
// Reset Font Size
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
}); <a class="increaseFont">+</a> |
<a class="decreaseFont">-</a> |
<a class="resetFont">=</a>
<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>
5. How to disabled/enable an element with jQuery
// To disable
$('.someElement').attr('disabled', 'disabled');
// To enable
$('.someElement').removeAttr('disabled');
// OR you can set attr to ""
$('.someElement').attr('disabled', ''); 6. Let Google host jQuery for you
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
//Code to be inserted in this area
});
</script>
/* the best way (fastest and most efficient implementation) */
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//This is more like it!
});
</script> 7. No conflict-mode
jQuery.noConflict();“Run this function to give control of the $ variable back to whichever library first implemented it. This helps to make sure that jQuery doesn’t conflict with the $ object of other libraries.
By using this function, you will only be able to access jQuery using the jQuery variable. For example, where you used to do $(”div p”), you now must do jQuery(”div p”)”.
8. Line breaks and chainability
Instead of doing:
$("a").hide().addClass().fadeIn().hide();You can increase readability like so:
$("a")
.hide()
.addClass()
.fadeIn()
.hide();9. Write our own selector
//extend the jQuery functionality
$.extend($.expr[':'], {
//name of your special selector
moreThanAThousand : function (a){
//Matching element
return parseInt($(a).html()) > 1000;
}
});
$(document).ready(function() {
$('td:moreThanAThousand').css('background-color', '#ff0000');
}); <TABLE>
<table>
<tbody>
<tr><td>1400</td><td>700</td><td>400</td></tr>
<tr><td>2500</td><td>600</td><td>100</td></tr>
<tr><td>100</td><td>1100</td><td>900</td></tr>
<tr><td>2600</td><td>1100</td><td>1200</td></tr>
</tbody>
</table>
</TABLE> 10. Columns of equal height
$(document).ready(function() {
setHeight('.col');
});
//global variable, this will store the highest height value
var maxHeight = 0;
function setHeight(col) {
//Get all the element with class = col
col = $(col);
//Loop all the col
col.each(function() {
//Store the highest value
if($(this).height() > maxHeight) {
maxHeight = $(this).height();;
}
});
//Set the height
col.height(maxHeight);
} <div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div> 11. Back to top button/link
With this plugin, you will easily scroll overflowed elements, and the screen itself.
It gives you access to many different options to customize and various ways to specify where to scroll.
$('#top').click(function() {
$(document).scrollTo(0,500);
} <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top 12. Prevent default behaviour
Assuming we have a long page, and we have a link similar to below that is used for other purposes other than a hyperlink. If you clicked on it, it will bring you to the top of your page. The reason of this behavior is because of the # symbol. To solve this problem, we need to cancel the default behavior by doing this:
$('#close').click(function(e){
e.preventDefault();
});
/* OR */
$('#close').click(function(){
return false;
}); <a href="#" id="close"></a> 13. Get mouse cursor x and y axis
This script will display the x and y value – the coordinate of the mouse pointer.
$().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
}); <p></p> 14. Open in new window
Target attribute is not valid in STRICT W3C standard. Thus, we need to use REL and a bit of jQuery code to dynamically create the attribute to avoid validation error. This is one of my favourite codes. It’s so simple and does the job well.
$('a[rel=external]').attr('target','_blank'); <a href="http://www.queness.com" rel="external">Queness in new window</a> 15. Check if checkbox is checked
jQuery provides us 3 ways to determine if a checkbox is checked.
// First way
$('#checkBox').attr('checked');
// Second way
$('#edit-checkbox-id').is(':checked');
// Third way
$("[:checkbox]:checked").each(
function() {
// Insert code here
}
); jQuery is a great library but I had a hard time to identify if it was checked at the time. So here is the way to do just that. All you need to do is to check checked attribute of an HTML tag:
// First way
$('#checkBox').attr('checked');
// Second way
$('#edit-checkbox-id').is(':checked');
// Third way
$("input[@type=checkbox][@checked]").each(
function() {
// Insert code here
}
);16. Check if jQuery.js is loaded
/* Method 1 */
if (jQuery) {
// jQuery is loaded
} else {
// jQuery is not loaded
}
/* Method 2 */
if (typeof jQuery == 'undefined') {
// jQuery is not loaded
} else {
// jQuery is loaded
} 17. Target blank links
Do you use the target=blank attribute on links? If yes, you might know that XHTML 1.0 Strict don’t allow it. A good solution to this problem should be using JQuery to make links opening in new windows:
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
/*
Usage:
<a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a>
*/18. Preloading images
When you’re using images in Javascript, a good thing is to preload it before you have to use it. This code will do the job:
jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[i]);
}
};
// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");19. Detect browser
Although it is better to use CSS conditionnal comments to detect a specific browser and apply some css style, it is a very easy thing to do with JQuery, which can be useful at times.
//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );
//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );
//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );
//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );
20. Scroll Effect to Obj
// Scroll Effect to Obj
var targetOffset = $(Obj).offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
// Appear Effect
$(Obj).animate({opacity: 'show', height: 'show'}, 1000);
// Appear Toggle Effect
$(Obj).siblings('*:last').children('.part').animate({opacity: 'toggle', height: 'toggle'}, 500);
// Message Effect
$(Obj)
.removeClass().addClass('message'+(type ? ' message_'+type : ''))
.html('Your Message').show().fadeOut(1000);
// Highlight Effect - Requires Color Plugin
function renderer_highlight ( Obj, color )
{
if ( color == null ) color = 'lightyellow';
var origColor = $(Obj).css('backgroundColor');
$(Obj).animate(
{ backgroundColor: color },
{ duration:300,
complete:function(){ $(this).animate({backgroundColor: origColor}, 300); }
}
);
}
// Remove all labels from #sample .actions that are not the first that are not the first
$('#sample .actions label:not(:first)').remove();
// Navigate the first .myText inside #myDiv
$('#myDiv .myText:first');
// or
$($('#myDiv .myText')[0]);
// or
$($('#myDiv').find('.myText')[0]);
// Check the last input that is not animated and is visible
$('#sample .actions label:visible:not(:animated):last input').attr('checked', 'checked');
21.
GridView with Select All CheckBox using JQuery
One of the handy features that one might with to put on GridView is the Select All checkbox which is similar to the one on Hotmail and Yahoo. You click the checkbox on the header and all items (checkboxes underneath) get checked.
I’ve seen several implementation for this feature long time ago. Myself wrote one. And all solutions were using some good amount of JavaScript. Today I was thinking, why not revisit the idea again, but this time using all mighty JQuery.
And as expected, the amount of code used to implement this simple feature is really small. I’m going to explore the JQuery code expecting you already know ASP.NET and how to use GridView along with SqlDataSource.
CheckBoxes are rendered on the last column. I’m mentioning last column because I’m going to use that on JQuery. Also it worth to mention that this GridView will render the header columns like this:
<tr>
<th align="left" scope="col">Category</th>
<th align="left" scope="col">Product</th>
<th align="right" scope="col">Unit Price</th>
<th align="left" scope="col">Supplier</th>
<th scope="col">
<input id="gvProducts_ctl01_chkSelectAll" type="checkbox" name="gvProducts$ctl01$chkSelectAll" />
</th>
</tr>Notice the “th” tag; again because I’ll use this from JQuery. The rest of rows are rendered as normal “td” tags
As I am using AJAX Enabled Web Application, I have the option ASP.NET AJAX Client Events like onload event. I’m using this event to bind click event to each CheckBox on the GridView:
22. jQuery code to select text inside an input field on user click or focus:
$("#myInputField").focus(function(){
// Select input field contents
this.select();
});
// Add this behavior to all text fields
$("input[type=text]").focus(function(){
// Select field contents
this.select();
});23. Get geographical location (geolocation) by IP address using jQuery
{
'status':'ok',
'IP': '74.125.45.100',
'CountryCode': 'US',
'CountryName': 'United States',
'RegionName': 'California',
'ZipPostalCode': '94043',
'City': 'Mountain View',
'Latitude': '37.4192',
'Longitude': '-122.057'
}
// In case of an error
{
'status':'parent server not responding'
}See Also Following Topics:
]]>
jQuery Printable Cheatsheet
See Also Following Topics:
]]>The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.
Usage is very simple; to block user activity for the page:
$.blockUI();Blocking with a custom message:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });2. jQuery Accessibility Plugin
To use jQuery Accessibility Plugin – first you must have jQuery and the jQuery Cookie Plugin. This plugin has been tested with version 1.1.3 on FireFox2 on Ubuntu 7.04.
To initialise this, you need to include the JS files in your HTML header.
<script src="jquery.js"type="text/javascript"></script>
<script src="jquery.cookie.js"type="text/javascript"></script>
<script src="jquery.ability.js"type="text/javascript"></script>
This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.
jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
autoheight: false
});InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.
These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.
$('ID or class of the element containing the fading objects').innerfade({
animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),
speed: Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default: 'normal'),
timeout: Time between the fades in milliseconds (Default: '2000'),
type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),
containerheight: Height of the containing element in any css-height-value (Default: 'auto')
runningclass: CSS-Class which the container get’s applied (Default: 'innerfade')
});
A list with images and links.
<ul id="portfolio">
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
<img src="images/ggbg.gif" alt="Good Guy bad Guy" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
<img src="images/whizzkids.gif" alt="Whizzkids" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html">
<img src="images/km.jpg" alt="Königin Mutter" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html">
<img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html">
<img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />
</a>
</li>
</ul>
On April 16th, 2007, Google announced the Google AJAX Feed API. This is a pretty cool thing as it facilitates feed mashups by providing the server component. This means that developers can easily mash feeds on the client by simply including Google’s new API script. And Google has provided a nice Developer’s Guide which shows how to get started.
To simplify this even more for jQuery developers, I’ve created a small plugin which performs the task of unobtrusively converting an element, such as an <a>, into a <div> element which holds feed content.
$(document).ready(function() {
// add a feed manually
$('#alistapart').gFeed({
url: 'http://www.alistapart.com/feed/rss.xml',
title: 'A List Apart Feed (Added by Brute Force)'
});
}); A jQuery plugin from GSGD to give advanced easing options.
$(element).slideUp(1000, method, callback});
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback});Download
jquery.easing.compatibility.js
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>8. hoverpulse
This article shows a little plugin called ‘hoverpulse’ which grows and then restores an element’s size in response to the mouse hovering over it.
$(document).ready(function() {
$('div.thumb img').hoverpulse();
});The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page. The plugin converts an element (usually an <a>) into a <div> which holds the object, embed or iframe tags neccessary to render the media content.
$('.media').media();10. jQuery Corner
Corner adorners are all the rage in web design these days. Designers say that plain old right-angle corners are so Web 1.0 now. However, some of the techniques to take the edge off corners use extra markup that is only there to support the decoration, which violates the separation of content and presentation. Now that’s really Web 1.0 so we don’t want to go there. Others use single-purpose rounded corner images or bulky Javascript code; that seems like a high price to pay for beauty.
$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")The jQuery Taconite Plugin allows you to easily make multiple DOM updates using the results of a single AJAX call. It processes an XML command document that contain instructions for updating the DOM.
$('#status').append('Your order has shipped');12. jQuery jqGalView
The jQuery jqGalView Plugin allows you to take a grouping of images and turn it into an flash-like image/photo gallery. It allows you to style it how ever you want and add as many images at you want.
<ul id="example1" title="My Gallery">
<li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
<li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
<li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
</ul>Did you ever have the need to prevent users from entering certain characters into your form?
Looking at the plugins available at jQuery, I found a great plugin made by Sam Collet called Numeric.
But it was too limited, what if I’m asking the user to create a username? Or what if I need to enter a number with decimals or an IP Address? There is another great plugin called Masked Input by Josh Bush, which can also control user input by defining a mask. The problem however with that was the length of text to be inserted must be defined as well. Again, what if I needed to control input of a username? I can’t tell how many characters the user will be using, and I can’t force him to use just 8 characters ,so I created AlphaNumeric.
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas. Have fun.
14. Easy Slider 1.5.
The Easiest jQuery Plugin For Sliding Images and Content. New version of my Easy Slider plugin for jQuery is here. This is one of the my rare scripts that make it to their second version. In this case version 1.5
All of the features here are result of your comments, so if you have more ideas, keep ‘em coming!
15. jqZoom Evolution
JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.
var options =
{
zoomWidth: 250,
zoomHeight: 250
}
$(".jqzoom").jqzoom(options);16. autocomplete
A jQuery autocompleter with caching options to limit server requests.
Please also look at the documentation (plain text, download or view).
Source Code:
jQuery.autocomplete = function(input, options) {
// Create a link to self
var me = this;
// Create jQuery object for input element
var $input = $(input).attr("autocomplete", "off");
// Apply inputClass if necessary
if (options.inputClass) {
$input.addClass(options.inputClass);
}
// Create results
var results = document.createElement("div");
// Create jQuery object for results
// var $results = $(results);
var $results = $(results).hide().addClass(options.resultsClass).css("position", "absolute");
if( options.width > 0 ) {
$results.css("width", options.width);
}
// Add to body element
$("body").append(results);
input.autocompleter = me;
var timeout = null;
var prev = "";
var active = -1;
var cache = {};
var keyb = false;
var hasFocus = false;
var lastKeyPressCode = null;
var mouseDownOnSelect = false;
var hidingResults = false;
// flush cache
function flushCache(){
cache = {};
cache.data = {};
cache.length = 0;
};
// flush cache
flushCache();
// if there is a data array supplied
if( options.data != null ){
var sFirstChar = "", stMatchSets = {}, row = [];
// no url was specified, we need to adjust the cache length to make sure it fits the local data store
if( typeof options.url != "string" ) {
options.cacheLength = 1;
}
// loop through the array and create a lookup structure
for( var i=0; i < options.data.length; i++ ){
// if row is a string, make an array otherwise just reference the array
row = ((typeof options.data[i] == "string") ? [options.data[i]] : options.data[i]);
// if the length is zero, don't add to list
if( row[0].length > 0 ){
// get the first character
sFirstChar = row[0].substring(0, 1).toLowerCase();
// if no lookup array for this character exists, look it up now
if( !stMatchSets[sFirstChar] ) stMatchSets[sFirstChar] = [];
// if the match is a string
stMatchSets[sFirstChar].push(row);
}
}
// add the data items to the cache
for( var k in stMatchSets ) {
// increase the cache size
options.cacheLength++;
// add to the cache
addToCache(k, stMatchSets[k]);
}
}
$input
.keydown(function(e) {
// track last key pressed
lastKeyPressCode = e.keyCode;
switch(e.keyCode) {
case 38: // up
e.preventDefault();
moveSelect(-1);
break;
case 40: // down
e.preventDefault();
moveSelect(1);
break;
case 9: // tab
case 13: // return
if( selectCurrent() ){
// make sure to blur off the current field
$input.get(0).blur();
e.preventDefault();
}
break;
default:
active = -1;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function(){onChange();}, options.delay);
break;
}
})
.focus(function(){
// track whether the field has focus, we shouldn't process any results if the field no longer has focus
hasFocus = true;
})
.blur(function() {
// track whether the field has focus
hasFocus = false;
if (!mouseDownOnSelect) {
hideResults();
}
});
hideResultsNow();
function onChange() {
// ignore if the following keys are pressed: [del] [shift] [capslock]
if( lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32) ) return $results.hide();
var v = $input.val();
if (v == prev) return;
prev = v;
if (v.length >= options.minChars) {
$input.addClass(options.loadingClass);
requestData(v);
} else {
$input.removeClass(options.loadingClass);
$results.hide();
}
};
function moveSelect(step) {
var lis = $("li", results);
if (!lis) return;
active += step;
if (active < 0) {
active = 0;
} else if (active >= lis.size()) {
active = lis.size() - 1;
}
lis.removeClass("ac_over");
$(lis[active]).addClass("ac_over");
// Weird behaviour in IE
// if (lis[active] && lis[active].scrollIntoView) {
// lis[active].scrollIntoView(false);
// }
};
function selectCurrent() {
var li = $("li.ac_over", results)[0];
if (!li) {
var $li = $("li", results);
if (options.selectOnly) {
if ($li.length == 1) li = $li[0];
} else if (options.selectFirst) {
li = $li[0];
}
}
if (li) {
selectItem(li);
return true;
} else {
return false;
}
};
function selectItem(li) {
if (!li) {
li = document.createElement("li");
li.extra = [];
li.selectValue = "";
}
var v = $.trim(li.selectValue ? li.selectValue : li.innerHTML);
input.lastSelected = v;
prev = v;
$results.html("");
$input.val(v);
hideResultsNow();
if (options.onItemSelect) {
setTimeout(function() { options.onItemSelect(li) }, 1);
}
};
// selects a portion of the input string
function createSelection(start, end){
// get a reference to the input element
var field = $input.get(0);
if( field.createTextRange ){
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart("character", start);
selRange.moveEnd("character", end);
selRange.select();
} else if( field.setSelectionRange ){
field.setSelectionRange(start, end);
} else {
if( field.selectionStart ){
field.selectionStart = start;
field.selectionEnd = end;
}
}
field.focus();
};
// fills in the input box w/the first match (assumed to be the best match)
function autoFill(sValue){
// if the last user key pressed was backspace, don't autofill
if( lastKeyPressCode != 8 ){
// fill in the value (keep the case the user has typed)
$input.val($input.val() + sValue.substring(prev.length));
// select the portion of the value not typed by the user (so the next character will erase)
createSelection(prev.length, sValue.length);
}
};
function showResults() {
// get the position of the input field right now (in case the DOM is shifted)
var pos = findPos(input);
// either use the specified width, or autocalculate based on form element
var iWidth = (options.width > 0) ? options.width : $input.width();
// reposition
$results.css({
width: parseInt(iWidth) + "px",
top: (pos.y + input.offsetHeight) + "px",
left: pos.x + "px"
}).show();
};
function hideResults() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(hideResultsNow, 200);
};
function hideResultsNow() {
if (hidingResults) {
return;
}
hidingResults = true;
if (timeout) {
clearTimeout(timeout);
}
var v = $input.removeClass(options.loadingClass).val();
if ($results.is(":visible")) {
$results.hide();
}
if (options.mustMatch) {
if (!input.lastSelected || input.lastSelected != v) {
selectItem(null);
}
}
hidingResults = false;
};
function receiveData(q, data) {
if (data) {
$input.removeClass(options.loadingClass);
results.innerHTML = "";
// if the field no longer has focus or if there are no matches, do not display the drop down
if( !hasFocus || data.length == 0 ) return hideResultsNow();
if ($.browser.msie) {
// we put a styled iframe behind the calendar so HTML SELECT elements don't show through
$results.append(document.createElement('iframe'));
}
results.appendChild(dataToDom(data));
// autofill in the complete box w/the first match as long as the user hasn't entered in more data
if( options.autoFill && ($input.val().toLowerCase() == q.toLowerCase()) ) autoFill(data[0][0]);
showResults();
} else {
hideResultsNow();
}
};
function parseData(data) {
if (!data) return null;
var parsed = [];
var rows = data.split(options.lineSeparator);
for (var i=0; i < rows.length; i++) {
var row = $.trim(rows[i]);
if (row) {
parsed[parsed.length] = row.split(options.cellSeparator);
}
}
return parsed;
};
function dataToDom(data) {
var ul = document.createElement("ul");
var num = data.length;
// limited results to a max number
if( (options.maxItemsToShow > 0) && (options.maxItemsToShow < num) ) num = options.maxItemsToShow;
for (var i=0; i < num; i++) {
var row = data[i];
if (!row) continue;
var li = document.createElement("li");
if (options.formatItem) {
li.innerHTML = options.formatItem(row, i, num);
li.selectValue = row[0];
} else {
li.innerHTML = row[0];
li.selectValue = row[0];
}
var extra = null;
if (row.length > 1) {
extra = [];
for (var j=1; j < row.length; j++) {
extra[extra.length] = row[j];
}
}
li.extra = extra;
ul.appendChild(li);
$(li).hover(
function() { $("li", ul).removeClass("ac_over"); $(this).addClass("ac_over"); active = $("li", ul).indexOf($(this).get(0)); },
function() { $(this).removeClass("ac_over"); }
).click(function(e) {
e.preventDefault();
e.stopPropagation();
selectItem(this)
});
}
$(ul).mousedown(function() {
mouseDownOnSelect = true;
}).mouseup(function() {
mouseDownOnSelect = false;
});
return ul;
};
function requestData(q) {
if (!options.matchCase) q = q.toLowerCase();
var data = options.cacheLength ? loadFromCache(q) : null;
// recieve the cached data
if (data) {
receiveData(q, data);
// if an AJAX url has been supplied, try loading the data now
} else if( (typeof options.url == "string") && (options.url.length > 0) ){
$.get(makeUrl(q), function(data) {
data = parseData(data);
addToCache(q, data);
receiveData(q, data);
});
// if there's been no data found, remove the loading class
} else {
$input.removeClass(options.loadingClass);
}
};
function makeUrl(q) {
var sep = options.url.indexOf('?') == -1 ? '?' : '&';
var url = options.url + sep + "q=" + encodeURI(q);
for (var i in options.extraParams) {
url += "&" + i + "=" + encodeURI(options.extraParams[i]);
}
return url;
};
function loadFromCache(q) {
if (!q) return null;
if (cache.data[q]) return cache.data[q];
if (options.matchSubset) {
for (var i = q.length - 1; i >= options.minChars; i--) {
var qs = q.substr(0, i);
var c = cache.data[qs];
if (c) {
var csub = [];
for (var j = 0; j < c.length; j++) {
var x = c[j];
var x0 = x[0];
if (matchSubset(x0, q)) {
csub[csub.length] = x;
}
}
return csub;
}
}
}
return null;
};
function matchSubset(s, sub) {
if (!options.matchCase) s = s.toLowerCase();
var i = s.indexOf(sub);
if (i == -1) return false;
return i == 0 || options.matchContains;
};
this.flushCache = function() {
flushCache();
};
this.setExtraParams = function(p) {
options.extraParams = p;
};
this.findValue = function(){
var q = $input.val();
if (!options.matchCase) q = q.toLowerCase();
var data = options.cacheLength ? loadFromCache(q) : null;
if (data) {
findValueCallback(q, data);
} else if( (typeof options.url == "string") && (options.url.length > 0) ){
$.get(makeUrl(q), function(data) {
data = parseData(data)
addToCache(q, data);
findValueCallback(q, data);
});
} else {
// no matches
findValueCallback(q, null);
}
}
function findValueCallback(q, data){
if (data) $input.removeClass(options.loadingClass);
var num = (data) ? data.length : 0;
var li = null;
for (var i=0; i < num; i++) {
var row = data[i];
if( row[0].toLowerCase() == q.toLowerCase() ){
li = document.createElement("li");
if (options.formatItem) {
li.innerHTML = options.formatItem(row, i, num);
li.selectValue = row[0];
} else {
li.innerHTML = row[0];
li.selectValue = row[0];
}
var extra = null;
if( row.length > 1 ){
extra = [];
for (var j=1; j < row.length; j++) {
extra[extra.length] = row[j];
}
}
li.extra = extra;
}
}
if( options.onFindValue ) setTimeout(function() { options.onFindValue(li) }, 1);
}
function addToCache(q, data) {
if (!data || !q || !options.cacheLength) return;
if (!cache.length || cache.length > options.cacheLength) {
flushCache();
cache.length++;
} else if (!cache[q]) {
cache.length++;
}
cache.data[q] = data;
};
function findPos(obj) {
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
return {x:curleft,y:curtop};
}
}
jQuery.fn.autocomplete = function(url, options, data) {
// Make sure options exists
options = options || {};
// Set url as option
options.url = url;
// set some bulk local data
options.data = ((typeof data == "object") && (data.constructor == Array)) ? data : null;
// Set default values for required options
options = $.extend({
inputClass: "ac_input",
resultsClass: "ac_results",
lineSeparator: "\n",
cellSeparator: "|",
minChars: 1,
delay: 400,
matchCase: 0,
matchSubset: 1,
matchContains: 0,
cacheLength: 1,
mustMatch: 0,
extraParams: {},
loadingClass: "ac_loading",
selectFirst: false,
selectOnly: false,
maxItemsToShow: -1,
autoFill: false,
width: 0
}, options);
options.width = parseInt(options.width, 10);
this.each(function() {
var input = this;
new jQuery.autocomplete(input, options);
});
// Don't break the chain
return this;
}
jQuery.fn.autocompleteArray = function(data, options) {
return this.autocomplete(null, options, data);
}
jQuery.fn.indexOf = function(e){
for( var i=0; i<this.length; i++ ){
if( this[i] == e ) return i;
}
return -1;
};
17. jQuery quickSearch plug-in
For Search
$('table#table_example tbody tr').quicksearch({
position: 'before',
attached: 'table#table_example',
stripeRowClass: ['odd', 'even'],
labelText: 'Search the table'
});Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong
The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.
The plug-in was written with work-intensive forms in mind, such as a blog article writing form.
$('form *').autosave();The BogoFolders plugin provides a filemanager-like view of trees of items. It shows the user a selectable list of “folder” icons. Clicking an icon shows the content associated with it in a separate HTML element and (if the item has child elements) it “changes the directory” to that item, similarly to how a file manager works. It is believed to work as advertised with jQuery 1.1.3, 1.1.4, and 1.2.0.
A jQuery menu plugin. It’s a drop down menu, which behaves like an application menu (click to open, click to close, stays open even after hovering elsewhere). It supports menu creation through HTML markup or through JavaScript. The plugin tries to position its submenus inside the visible area when there is not enough space at the right or bottom border (dimensions plugin required).
var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', onClick: function(e, menuItem){
alert('you clicked item "' + $(this).text() + '"');
}};
$('#menuone').menu(options);
For use in more than one pagers per page, takes a string. Default ‘nav’
$('#example1').pager('div');The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.
$('a.title').cluetip({splitTitle: '|'});Most Commented Posts
]]>So in my journey to to learn jQuery, I’m trying to learn to do some things that CSS can already do but that jQuery can do “sexier”. Jonathan Snook has an article up “Content Overlay with CSS” in which extra content is revealed in a certain area when it is moused over. This inspired me to try to do something similar with jQuery. My first thought was a thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo. Here is the result:
2. jQuery – Using Slider as a Scrollbar
Last week I introduced the jQuery UI element known as a slider and indicated that this control could easily be used as a custom scrollbar.
Today I’m going to show you exactly how that’s done.
First we need to adjust our HTML. We need to add a content area to the HTML we had last week. I’m going to put this content area to the right of the scrollbar, but you could put it to the left by simply changing the CSS.
<div id="slider"></div> <div id="scroller"><div id="content"> here is lots of text<br /> </div></div>The CSS to position this all correctly looks like this:
#slider
{
height: 242px;
width: 13px;
margin:0px 10px 0px 10px;
float:left;
}
#scroller
{
width: 1159px;
height: 243px;
overflow:hidden;
}
#content
{
width: 215px;
}3. jQuery – Auto Scrolling the Slider
There is a timer plugin available for jQuery that will do some of the work for you, but all we really need for this functionality is:
- A function to do the auto incrementing
- A call to the javascript setTimeout() function.
So first, the auto incrementing function.
function scrollWindow() {
var slideValue;
slideValue = $("#slider").slider("value");
if(slideValue > -100)
{
$("#slider").slider("value", slideValue - 1);
setTimeout(scrollWindow, 1000);
}
}4. Slider
Creates vertical, horizontal or rectacle sliders with one or more indicators.
Code sample:
$('.slider1').Slider(
{
accept : '.indicator',
fractions : 4,
onSlide : function( cordx, cordy, x , y)
{
document.getElementById('cordx').value = cordx + '%';
document.getElementById('cordy').value = cordy + '%';
},
values: [
[70,70]
]
}
);5. Creating a Nice Slider With jQuery UI
Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.
One drawback of a slider is the user not knowing what he’s selected as there’s no discrete output. If you are sliding to scale something, you can eyeball something, but wouldn’t it be nice if the slider provided some feedback to the user (”50%”) as the user was fiddling with it? I’m going to show you how to do just that with the jQuery UI library.
The HTML
<div id='container'>
<div class="slider_container">
<div class='small_label'></div>
<div class='slider_bar'>
<div id="slider_callout"></div>
<div id='slider1_handle' class='slider_handle'></div>
</div>
<div class='large_label'></div>
</div>
</div> CSS
body { background: #284a6e; }
#container { height: 100px; border: 1px solid #284a6e;}
.slider_container { position: relative; margin-top: 50px; height: 40px;}
.small_label { background: url(minus.gif) no-repeat; height: 19px; width: 19px; overflow: hidden; float: left; }
.slider_bar { background: url(bar.gif) no-repeat; height: 19px; width: 260px; float: left; margin: 0px 5px; position: relative;}
.large_label { background: url(plus.gif) no-repeat; height: 19px; width: 19px; overflow: hidden; float: left; }
.slider_handle { background: url(selector.png) no-repeat; height: 19px; width: 20px; overflow: hidden; position: absolute; top: 1px;}
#slider_callout { background: url(callout.gif) no-repeat; height: 45px; width: 38px; overflow: hidden; position: absolute; top: -50px; margin-left:-10px; padding: 8px 0px 0px 0px; font-family: "Myriad Pro"; color: #284a6e; font-weight: bold; text-align: center;} Javascript
$(function() {
$('#slider_callout').hide();
var calloutVisible = false;
$('.slider_bar').slider({
handle: '.slider_handle',
minValue: 0,
maxValue: 25,
start: function(e, ui) {
$('#slider_callout').fadeIn('fast', function() { calloutVisible = true;});
},
stop: function(e, ui) {
if (calloutVisible == false) {
$('#slider_callout').fadeIn('fast', function() { calloutVisible = true;});
$('#slider_callout').css('left', ui.handle.css('left')).text(Math.round(ui.value));
}
$('#slider_callout').fadeOut('fast', function() { calloutVisible = false; });
},
slide: function(e, ui) {
$('#slider_callout').css('left', ui.handle.css('left')).text(Math.round(ui.value));
}
});
});
Accessible News Slider is a JavaScript plugin built for the jQuery library.
It meets the accessibility requirements as outlined by WCAG 1.0.
The past few weeks I had a lot of fun playing with jQuery UI for a client. They wanted to replace some elements in an application, sliders and such, with a more accessible solution. For that I turned to jQuery UI, as I had previously introduced jQuery as the standard javascript library for them.
As I started to play with the code I couldn’t helped but be impressed by the great work that has been done by the UI team on this project. But as I looked at it more closely I found some things that could be improved.
So here are some of my grieves with it and a possible way to solve them. I am going to concentrate on the slider ( docs / demo ), as it was with that widget that I started to notice some things missing.
The way you use it is in a true jquery fashion nice and unobtrusive, once you have included the correct javascript files (for that see the documentation), you just do:
$("#slider").slider();8. jQuery plugin – Easy Image or Content Slider
Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.
First you’ll need content and it should be wrapped inside a div containing an ordered list where each list item represents one slide. Here’s a markup example:
- content here...
- content here...
- content here...
...
9. Using jQuery Slider to Scroll a Div
To get this started go ahead and check out the little demo below. There isn’t anything real hard to figure out with the demo. One nicety to check out is the ability to click on the scroll bar anywhere and the div will do an animated scroll to that position. Just as a note, I have noticed a small bug with the jQuery slider where it doesn’t always get the end position correct when you click on the scroll bar. Well, take a second and bask in the glory of the scrolling area below.
Ok, now let’s get coding. We are first going to start with the basic html setup of the demo above. This shouldn’t look like anything crazy. The first element I pretty much always add to wrap my content is a div. We then setup the slider divs which is simply the sliderbar div and the handle div. Next up is a div to scroll and inside a div wide enough to hold the content. And lastly the content, which in my case is a bunch of divs. This ends up looking like the following (minus the content).
<div id="main"><div id="content-slider"><div class="content-slider-handle"></div></div><div id="content-scroll"> <div id="content-holder"> <div class="content-item"> </div> <div class="content-item"> </div> <div class="content-item"> </div> <div class="content-item"> </div> <div class="content-item"> </div> </div></div></div>10. slideViewer (a jQuery image slider built on a single unordered list) 1.1
What’s this? slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images:
Download slideViewer 1.1 (last updated january 14 2009)
<div id="mygalleryinpost10.12.2006" class="svw"> <ul> <li><img src="picts/10.jpg" alt="my description for this image" /></li> <li><img src="picts/08.jpg" alt="this is my dog..." /></li> <li><img src="picts/03.jpg" alt="my dog eating the cat" /></li> <li><img src="picts/05.jpg" alt="my r/c helicopter crashing..." /></li> <!--eccetera--> </ul> </div>