RSS Feeds 
Feed Comment 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> 
Leave Your Comments Below