Do you remember how you used to do your revisions in school and after? Which way was the most effective for you? Do you commit everything to memory, use mindmaps, make a recording of your teacher or lecturer’s lessons or carry around note cards to read on the way to school and back? Well, it turns out that the way one student studies may differ from the way a classmate does because there are different styles of learning we are individually adept for.

There are essentially four types:

1. visual learners,
2. auditory learners,
3. read and write learners, and
4. kinesthetics learners.

Each function is clearly illustrated and explained in today’s featured infographic by onlinecollege.org. You will get learning suggestions and find out which tests you are likely to excel better in than others. This will also be a helpful guide to today’s educators, especially those who are adamant that there is only one way to revise.

Tell us which is your learning style.

Recommended Reading: More infographics

Spot an infographic you think will be a perfect fit here? Send the link to us with relevant details and we’ll credit you with the find.

Related posts:

1. 16 Ways How Educators Use Pinterest [Infographic]
2. What Happens in an Internet Minute [Infographic]
3. The Infographic Revolution: Where Do We Go From Here?
4. The State of IT Security [Infographic]

If you are a freebies hunter, chances are you have downloaded lots of PSD user interfaces (UI). Some of them are truly amazing and could save our time by prototyping the design we were working on.

In this post we will code a PSD UI and turn it into something more functional. We are going to code the following PSD UI Slider to be applied as the jQuery UI Slider theme.

However, please take note that this tutorial is intended for intermediate levels of experience. Having said that, It’s still relatively easy to follow, so long as you are fairly familiar with CSS and jQuery.

All right, now let’s get started.

Step 1: the jQuery UI

We obviously need the jQuery and the jQuery UI Library, and we have two option to utilize them. First, we can link the jQuery and the jQuery UI directly from the following CDN: Google Ajax API CDN, Microsoft CDN, and jQuery CDN, there are lots of advantages of using the hosted CDN file when we put our site live online.

But since we will only be working on it offline, we will be using the second way instead.

We will download and customize the jQuery UI library from the official download page. As we only need the Slider plugin, we will select only the Slider library along with its dependencies and leave the others. That way the files we use will be much slimmer and can load faster. After that, link all those libraries to the HTML document, preferably at the bottom of the page or before the close </body> tag to be exact.

  <script src="js/jquery-1.7.2.min.js"></script>  <script src="js/jquery-ui-1.8.21.custom.min.js"></script>  

Step 2: HTML markup

The markup for the slider is very simple, we wrapped all necessary markup – the tooltip, the slider, and the volume – inside an HTML5 section tag. The jQuery UI will then automatically generate the rest.

  <section>  	<span class="tooltip"></span>  	<div id="slider"></div>  	<span class="volume"></span>  </section>

Step 3: Install the Slider UI

The snippet below will install the Slider on the page, but it applies only the default configuration.

  $(function() {  	$( "#slider" ).slider();  });  

So here we will enhance the slider a little by adding other configurations.

First, we store the slider element as a variable.

  var slider = $('#slider'),  

Then we set the minimum default value of the slider to be about 35, when it is firstly loaded.

  slider.slider({  	range: "min",  	value: 35,  });  

At this point, we won’t see anything on the browser yet, because the jQuery UI is basically only generating the markup. So, we need to apply some styles to start seeing the result visually on the browser.

Step 4: The Styles

Before proceeding, we need some assets from the PSD source file such as the background texture and the icon.

We will not talk about how to slice in this article, we will just focus on the code. If you aren’t sure how to slice, watch the following screencast first before proceeding.

• Converting a Design from PSD to HTML – Nettuts+

All right, now let’s begin adding the styles.

We will start by positioning the slider at the center of the browser’s window and attach the background that we had sliced out from the PSD to the body.

  body {  	background: url('../images/bg.jpg') repeat top left;  }  section {  	width: 150px;  	height: auto;  	margin: 100px auto 0;  	position: relative;  }  

Next, we will apply the styles for the tooltip, the volume, the handle, the slider range and the slider itself.

We will do this part by part, starting with…

Slider

Since we did not define the maximum value for the Slider itself, the jQuery UI will apply the default; that is 100. Therefore, we can also apply 100 (px) for the slider’s width.

  #slider{  	border-width: 1px;  	border-style: solid;  	border-color: #333 #333 #777 #333;  	border-radius: 25px;  	width: 100px;  	position: absolute;  	height: 13px;  	background-color: #8e8d8d;  	background: url('../images/bg-track.png') repeat top left;    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),    				 0 1px 0 0px rgba(250, 250, 250, .5);    left: 20px;  }  

Tooltip

The tooltip will be positioned above the slider by specifying its position absolutely with -25px for its top position.

  .tooltip {  	position: absolute;  	display: block;  	top: -25px;  	width: 35px;  	height: 20px;  	color: #fff;  	text-align: center;  	font: 10pt Tahoma, Arial, sans-serif ;  	border-radius: 3px;  	border: 1px solid #333;    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);  	box-sizing: border-box;  	background: linear-gradient(top, rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);  }  

Volume

We have modified the volume icon a bit to meet our idea. The idea is we are going to create an effect to raise the volume bar gradually in accordance with the slider’s value. I’m sure you often seen such an effect in a media player user interface.

  .volume {  	display: inline-block;  	width: 25px;  	height: 25px;  	right: -5px;  	background: url('../images/volume.png') no-repeat 0 -50px;  	position: absolute;  	margin-top: -5px;  }  

The UI Handle

The handle’s style is quite simple; it will have an icon that looks like a metallic circle, sliced from the PSD, and attached as the background.

We will also change the cursor mode to pointer, so the user will notice that this element is drag-able.

  .ui-slider-handle {  	position: absolute;  	z-index: 2;  	width: 25px;  	height: 25px;  	cursor: pointer;  	background: url('../images/handle.png') no-repeat 50% 50%;  	font-weight: bold;  	color: #1C94C4;  	outline: none;  	top: -7px;  	margin-left: -12px;  }  

The Slider Range

The slider range will have a slightly white gradient color.

  .ui-slider-range {  	background: linear-gradient(top, #ffffff 0%,#eaeaea 100%);  	position: absolute;  	border: 0;  	top: 0;  	height: 100%;  	border-radius: 25px;  }  

Step 5: The Effect

In this step we are going to start working on the Slider’s special effect.

Tooltip

At this point, the tooltip has no content yet, so we are going to fill it with the slider’s value. Also, the tooltip’s horizontal position will be correspond with the handle’s position.

First of all, we store the tooltip element as a variable.

  var tooltip = $('.tooltip');  

Then we define the tooltip’s effect we have mentioned above inside the Slide Event.

  slide: function(event, ui) {  var value = slider.slider('value'),  tooltip.css('left', value).text(ui.value);  

But, we also want the tooltip to be initially hidden.

  tooltip.hide();  

After that, when the handle is about to start sliding, it will be shown with a fade-in effect.

  start: function(event,ui) {  	  tooltip.fadeIn('fast');  },  

And, when the user stops sliding the handle, the tooltip will fade-out and be hidden.

  stop: function(event,ui) {  	 tooltip.fadeOut('fast');  },  

Volume

As we have mentioned above in the Styles section, we plan the volume icon to change correspondingly with the handle’s position or to be exact, the slider’s value. So, we will apply the following conditional statement to create this effect.

But, firstly, we store the volume element as well as the slider’s value as a variable.

  volume = $('.volume');  

Then we start the conditional statement.

When the slider’s value is lower or equal to 5 the volume icon will have no bars at all, indicating that the volume is very low, but when the slider’s value is increasing, the volume bar will start increasing as well.

  if(value <= 5) {  	volume.css('background-position', '0 0');  }  else if (value <= 25) {  	volume.css('background-position', '0 -25px');  }  else if (value <= 75) {  	volume.css('background-position', '0 -50px');  }  else {  	volume.css('background-position', '0 -75px');  };  

Put them all together

All right, in case you are confused with all the above stuff, don’t be. Here is the shortcut. Put all the following codes into your document.

  $(function() {    	var slider = $('#slider'),  		tooltip = $('.tooltip');    	tooltip.hide();    	slider.slider({  		range: "min",  		min: 1,  		value: 35,    		start: function(event,ui) {  		  tooltip.fadeIn('fast');  		},    		slide: function(event, ui) {    			var value = slider.slider('value'),  				volume = $('.volume');    			tooltip.css('left', value).text(ui.value);    			if(value <= 5) {  				volume.css('background-position', '0 0');  			}  			else if (value <= 25) {  				volume.css('background-position', '0 -25px');  			}  			else if (value <= 75) {  				volume.css('background-position', '0 -50px');  			}  			else {  				volume.css('background-position', '0 -75px');  			};    		},    		stop: function(event,ui) {  		  tooltip.fadeOut('fast');  		},  	});    });  

All right, let’s now view the result in the browser.

• Demo
• Download Source

Conclusion

Today we have successfully created a more elegant jQuery UI theme but at the same time we have also successfully translated a PSD User Interface into a functional volume controller.

We hope this tutorial inspires you and could help you understand how to turn a PSD into a more usable product.

Lastly, if you have any question regarding this tutorial, feel free to add it in the comments section below.

Related posts:

1. How to Create an Image Slider using Photoshop & jQuery
2. Mobile App Design/Dev: Building Navigation with jQuery
3. Mobile App Design/Dev: Custom Themes with jQuery Mobile
4. Mobile App Design/Dev: Beginner’s Guide to jQuery Mobile

We’ve come a long way from reading from print sources. No longer are we confined to reading magazines, newspapers and books that we must first get from a store. Smartphones and tablets now allow us to read materials straight from a website or app, in the comforts of our own home or at the office. We can now read updated materials on-the-go every day without fail.

But there is one more thing that our electronic reading supplements can do better than its printed counterparts. Thanks to the new iOS update, you can activate the ‘Text-to-Speech’ function to let your iOS read out a highlighted article. Imagine getting your iPhone or iPad read out the news or a report for you while you work on other pressing matters. Let’s get this feature activated.

Recommended Reading: Apple’s iOS6: 9 New Features You Should Know

Activate Text-to-Speech

1. From your iOS device, go to the Settings page, select General > Accessibility.

   

2. Tap on Speak Selection.

   

3. Slide the option to ON and made an adjustment to the Speaking Rate. The speaking rate will detemine how fast the text is read.

   

4. Now open any website, touch and hold the text area until an option appears. Adjust the highlighted area to highlight the text you want your iOS to read out. Once selected, tap on the Speak button.

   

5. It doesn’t only work for websites, it also works for all your documents on your iOS devices.

Conclusion

Now with this Text-to-Speech option, you can sit back and listen to any content on your iOS device, without having to read out. It is great help for when you want to go through a long article but don’t want to strain your eyes to do so. It will also be a great substitute for reading to kids, and for when you want to find the correct pronunciation of any word you find on the Internet.

Related posts:

1. How To Convert Your Tweets Into A Published Book [Quicktip]
2. How to Read .ePub Ebooks on Firefox and Chrome [Quicktip]
3. How to Fix Home Button Delays on iOS Devices [Quicktip]
4. How to Find Your Previous Google Search Queries [Quicktip]