Design-Notes » jQuery

Using jQuery to Parse XML data

alexandra — Tue, 23 Feb 2010 20:53:48 +0000

I love jQuery. It made things so much easier. if you still don’t much know it, you can read about more amazing features on their official jQuery site. Also there is a easy way to parse XML data with jQuery and here it is.

First, Include jQuery

The best way to include jQuery these days is using google Ajax Library
URL for jQuery is here:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Load XML with jQuery

My xml file is test.xml which I got from W3C XML tutorial

$.ajax({ type: "GET",
    url: "test.xml",
    dataType: "xml",
    success: parseXml
  });

XML file:

 version="1.0" encoding="ISO-8859-1"?>
>
  >
    >Empire Burlesque>
    >Bob Dylan>
    >USA>
    >Columbia>
    >10.90>
    >1985>
  >
 
 
>

A Function to Parse XML

function parseXml(xml)
{
  //find every Tutorial and print the author
  $(xml).find("cd").each(function()
  {
   $("#tiles").append(": " + $(this).find("title").text() + "
");
  });
 
}

ADD TO If this helps, why not tell your friends?

Play with jQuery – infinite loop and hover sliding effect

alexandra — Sun, 26 Jul 2009 11:33:31 +0000

Play with jQuery

This is how this “game” works. The flashing text says “LOOK AT ME”. When you hover just underneath the text it reveals a little cartoon girl. It covers the girl again when you move the mouse away quickly. When you click the “LOOK AT ME” text the sliding animation will end. Refresh it if you wanna see the animation again.
To see the Demo

This is how to do it:

Simple HTML



	LOOK AT ME

CSS to add background image

#nav{background:url(images/girl-11.png) no-repeat;width:150px;height:150px;top:100px;left:400px;position:absolute;}
#gate{position:absolute;background:#fff;width:50px;height:50px;padding:50px;}
#girl a{position:absolute;top:-20px;left:10px;color:pink;font-weight:bold;font-family:arial;text-decoration:none;font-size:18px;}

Javascript

jQuery Infinite Loop from line 2 to line 9:basically you make a loop start with show end with hide. Put anything you want in between and put this in a runIt function. This is also useful if you wanna do a warning sign.
Sliding effect from line 10 to line 25:This is very similar to my previous tutorial on Make fancy light up RSS button with jQuery I changed fadeTo to slideUp and slideDown, inserted line 21 cause it has slide down from a hiding state.

$(document).ready(function() {
function runIt() {
		$("#girl a").show(100);
		$("#girl a").fadeTo(500,0);
		$("#girl a").fadeTo(500,1);
		$("#girl a").fadeTo(500,0);
		$("#girl a").hide(1, runIt);
		   }
		    runIt();
		$(function () {
			 $('#girl')
			    // create our new span.hover and loop through anchor:
			  .append('').each(function () {
			   var $span = $('> span.hover', this).css('opacity', 1);
			   // when the user hovers in and out
			   $(this).hover(function () {
			    // on hover
			     $span.stop().slideUp(1200);
			      }, function () {
			        // off hover
			 $span.hide();
			$span.slideDown(1500);
			      });
			    });
			});
	 });
span>

Conclusion

You are welcome to copy the code and experiment with it. I believe the next web trend will be “game like” interactions and jQuery is a great framework to do all sorts of fancy effects. Learn more and prepare yourself for the challenge.

ADD TO If this helps, why not tell your friends?

Make A Dynamic Page Accordion Menu With jQuery

alexandra — Thu, 25 Jun 2009 17:14:47 +0000

There are many ways to add an flexible accordion menu to your web page. Most of them use div or paragraph but in this post I’m going to use unordered list and jQuery toggle to make an accordion menu.The most important information here is how to toggle list and how to hide/show the related page to viewer. I explained here specifically on dynamic page display with WordPress, you can always take the same theory and apply in other situations.

Work in Wordpress
Accordion Slide
Show only top level page list when visiting top level pages
Show current page’s child page
Show allpages when visiting child page

Wordpress Code to display page list

I got this code from wordpress.org


  if($post->post_parent)
  $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
  else
  $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
  if ($children) { ?>
  
   echo $children; ?>
  
   } ?>

The code displays all pages. This is the html code generated by Wordpress


Archives
Blogroll

This is a demo page
 


linking
About

Javascripts

Now what we need to do is to create accordion with jQuery’s toggle function and make it dynamically display the page you want your reader to see. Wordpress’s “current_page_item” class is very useful here. I used it on line 5 to list parent pages and again on line 9 to show its child pages.

$(document).ready(function()
{//hide child page
$('#page-list ul li.page_item ul').hide();
//when navigate to a child page show all pages
$('#page-list ul li.current_page_item').parent("ul").show();
//show page list when toggle
$('#page-list ul li.active ul').show();
//show cerrent page's child page
$('#page-list ul li.current_page_item ul').show();
 
	 $('#page-list ul li').click(function() { 
$(this).addClass("active");
                    $(this).children('ul').slideToggle("slow"); 
            });
 
 
});

CSS

#page-list {
float:left;
clear:left;
margin:20px 0 0 10px;
display:block;
position:relative;
}
#page-list ul {
	list-style:none;
	margin:0;
	}
#page-list ul li{
padding:0 10px 0 10px;
margin:2px 0;
display:block;
cursor:pointer;
background-color:#ccc;
}
#page-list ul li ul li{
padding:0;
margin:0;
position:relative;
 
}
#page-list ul li ul li a{
	}
#page-list ul li a{
padding:3px 5px;
display:block;
width:150px;
background-color:#f4f4f4;
}

Conclusion

I first displayed all pages then hide or show them dynamically with jQuery. Its quite handy than using php alone. You can check out the demo page list on the sidebar by navigating to pages. I made a couple of demo pages for you too.

ADD TO If this helps, why not tell your friends?

Make Your Header Responses To Mouse Movements with jParallax

alexandra — Tue, 09 Jun 2009 10:04:07 +0000

jParallax is no news to jQuery lovers. For those who still dont know anything about it. Here is a little introduction.

jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Next, I will show you how to make a beautiful header that response to mouse movements. My portfolio site uses this trick, so you can see the result first.

Linking javascripts

HTML and CSS code.

Setup the window, give its id name parallax and width, so only this area responses to mouse movements. As the diagram shows above, the image you list first goes to the back.
Make sure the width is set properly to prevent collapsing view point. If any of the layer travels outside the parallax window, it will be hidden.

CSS

#parallax
    {position:relative; overflow:hidden; width:800px; height:450px;border:none;
	margin:0 auto 20px auto;}

My image 0

My image 1

My image 2

My image 3

Basic JavaScripts

jQuery(document).ready(function(){
	jQuery('#parallax').();
});

This is the result with default settings. As you can see, it is a bit weird.

Use Layers option

jQuery(‘element’).jparallax(options, layer_0_options, layer_1_options, etc.);

I disabled the Y axis movement and gave travel range to layer 0 (image 0) and layer 1(image 1). Now I have a nice ocean view header!!

jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({yparallax:false},{xtravel: '100px'},{xtravel: '300px'});
});

ADD TO If this helps, why not tell your friends?

Make fancy light up RSS button with jQuery fading

alexandra — Tue, 05 May 2009 10:37:17 +0000

It is important to make your RSS button stand out in web design and there are many techniques. I have seen many sites use this kind of lighting up RSS button. For example: vectorvalley.com:

It is only a simple animation technique. In this tutorial, I will show you how to do it with jQuery Fading effect. It is actually very simple.

You can look at the demo first.

First, I downloaded this RSS icon from devian art
Then I made it black and white

What we gonna do is to make the button fade from black and white to full color. We set black white as default so your RSS button’s background image is rss_bw.png at first.

HTML

Let’s do some simple preparation: the html is very simple.

CSS Code

At this part, we need to define RSS buton’s default background image as well as span that holds the colored background image.

body{
background:#000;}
#rss{
width:500px;
height:500px;
margin:auto;
position:relative;
display:block;}
#rss a{
	background-image:url(rss_bw.png);
	background-repeat: no-repeat;
	position:relative;
display:block;
width:500px;
height:500px;
}
 #rss span.hover{
 width:500px;
height:500px;
 background-image:url(rss.png);
	background-repeat: no-repeat;
	position:relative;
display:block;}

Using fadeTo

fadeTo( speed, opacity, [callback] )

What this javascript does is find “a” under #rss > append “span” within a element > set span’s opacity to 0 at first > when user hovers in, change the opacity to 1 within 800ms > when user hovers out change the opacity back
This is what the html looks like with JavaScript

Make fancy light up RSS button with jQuery fading

$(function () {  
  $('#rss a')   
    // create our new span.hover and loop through anchor:
    .append('').each(function () {
      var $span = $('> span.hover', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(800, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });
    });
});

ADD TO If this helps, why not tell your friends?

Flashy intro with jQuery animation

alexandra — Sun, 26 Apr 2009 08:37:45 +0000

Remember those days which almost every website has a Flash intro or header that makes you wait un… forever. Now more and more people are using jQuery’s animation function to make their sites interesting. Let’s see how we do it.

Try the demo.

Header:

link jquery and jQuery color plugin

The HTML:

I used a list of links, like a menu, because I want to be able to make them to real links in the future. For now the links are empty. Each link has a class of “c+number” which stands for the color number in the color list we make later in the JavaScript.



	Design-Notes
	Likes to be
	Creative

CSS

This part is pretty standard, dark background goes well with this intro.#navigator li a’s position has to be defined. It can either be absolute or relative. Each will give you a different result of animation.

body{
background:#000;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
}
a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
#container{
width:600px;
margin: 100px auto;
}
#navigator li{
display:inline;
}
#navigator li a{
position:relative;
padding:2px 5px;}

JavaScript

A litter harder than my previous post on the cost estimator with UI but still quite short.

Using animation:

animate( Hash params, String|Number speed, String easing, Function callback (optional) A function to be executed whenever the animation completes. )
You can use fontSize,color, backgroundColor, width and borderWidth etc. Then define the speed of your animation. You can use strings like slow, fast or integers in milliseconds (1000 =1 second).
here is a simple example:

 $("#myDiv").animate({ color: "pink" }, 500);

Here is our code:

Line 1:choose the colors you wan to use, put them in an array called menu_over_color
Line 3:The object I will animate is a under navigator, so select all of them with each:

Each: Execute a function within the context of every matched element.
Line 4:point the class attribute to our color list in line1. substring(start,stop)for example: the substring(1,3)’s result of “hello” is “hel”. I originally had fifteen colors listed. Here is a more detailed explanation on attr
Lin5 to 13: animation sequence: change color>font size>position>background color> then settle down to white text and their own background color. This is not the only option, play around with it. You could surprise yourself.
Last 8 lines are optional. They deal with hover.

Finally, I suggest you read about chained animation and unqueued animation animation.

/* the colors */
var menu_over_colors = ["#ffffff","#55C7FF","#FF5A8D","#FFA324","#f453g5"];/* the colors you want to use*/
$(document).ready(function(){
$("#navigator > li > a").each(function(){
var over_color = menu_over_colors[$(this).attr('class').substring(1,3)];
   $("#navigator li a").animate({ color: over_color }, 200);/* animate text color for all text*/
  $("#navigator li+li+li a").animate({fontSize: '3em'}, 300);/* animate text of the third list*/
 $("#navigator li+li a").animate({top: '50px'}, 300);/* animate text of the second list*/
  $("#navigator li a").animate({left: '50px',}, 300)
  .animate({fontSize: '1.5em'}, 300)
  .animate({ backgroundColor:over_color }, 500, 
function() {var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];/* point out the colors again*/
$(this).animate({color:'white',backgroundColor:over_color},300);});
});/* animate all text again with callback function*/
	$("#navigator > li > a").hover(
		function(){//over
			var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];
			$(this).animate({ color: over_color }, 500 );
			$(this).animate({ backgroundColor:over_color }, 500 );
		},
		function(){//out
			$(this).animate({color: menu_over_colors[0]},500);
		}); 
});

ADD TO If this helps, why not tell your friends?

Build a simple cost estimator with jQuery UI Slider

alexandra — Sat, 18 Apr 2009 19:47:24 +0000

I believe everyone is very familiar with jQury UI-JQuery’s user interface add on. It is a great library and themes are quite fancy, but its lack of documentation often frustrate people especially beginners.Thats why I would like to write a simple tutorial

Lately, I read a post on online tools for designers at a web site (can’t remember which one). One of the tools in the selection is a cost estimator which was very detailed and build with PHP and JavaScript. One problem with this. It was on a well established design agency’s web site. Come on!! who would refer their customers to go to use a cost estimator on a competitor’s web site? So I came up with my version of free online tools for designers.

Also, I m in the process of building my online portfolio, and came up with an idea of having a simple cost estimator for potential clients. Here is how I did it. Its very simple, definitely beginner level. So don’t be afraid to read on. As for experts. wait up a more complicated version’s on its way.

Header

Straightforward: link every scripts and make sure ui.slider.js is in the same directory with other js files

jquery-ui-1.7.1.custom.css
jquery-1.3.2.js
jquery-ui-1.7.1.custom.min.js

</span>Simple Cost Estimator<span class="htmlOtherTag">
"text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />

CSS

I didn’t stylize much, just need it to work. Basically it is same with the UI default theme.

#panel-contents{position:relative;height:40px;}
#small-label{ background:url(images/small_label.gif) no-repeat; height:4px; width:17px; overflow:hidden;float:left; }
#large-label{ background:url(images/large_label.gif) no-repeat; height:18px; width:17px; overflow:hidden;float:left; }
#slider-bar{ background:url(images/slider.gif) no-repeat; height:4px; width:100px; position:relative; float:left;}
#slider-handle{ background:url(images/slider_handle.gif) no-repeat; height:12px; width:13px; overflow:hidden;position:absolute;z-index:1;}
#slider-bubble{ background:url(images/callout.gif) no-repeat; height:46px; width:38px; overflow:hidden; position:absolute; top:-50px;padding:8px 0 0 0;text-align:center;font-weight:bold;color:#202020; }
#box{position:absolute; left:40px;background-color:#202020;width:200px;height:200px;}
#container{width:700px; margin:auto;}
input{font-size: 1em;}
#rate{background:#bfbfbf; width:4em; padding:0 3px;}

JavaScript: The slider controls page number which is from 0 to 20.

value:initial value
min:minimum value(0)
max: maximum value(20)
step: the amount of each interval(1). This means it slides one for each step, and we have 20 steps
#amount is page amount
Price=rate x amount
(ui.value) is slider’s current value, when you slide it
slider(“value”) means slider’s initial value which is 0
here is how to calculate price in javascript: $ sign plus ui current value multiply rate input value.
```
'$'+ui.value*$("#rate").attr("value")
```
last two line’s function is to set everything back to 0 (as our initial value is 0) after refreshing

HTML

step1 call the slider

Build yourself a cost estimator with jQuery UI
"slider">

step2: write three input fields


"rate">Rate in US dollar:
"text" id="rate" style="border:0; color:#f6931f; font-weight:bold;" />
"amount">Page number:
"text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />


"price">Price:
"text" id="price" style="border:0; color:#f6931f; font-weight:bold;" />

Finally, this is the result.

You might want to read more on using jQuery Cycle and jCarousel in my other tutorial

Also, there are more good tutorials at learningjquery.com

ADD TO If this helps, why not tell your friends?

How to create a Feature Article slide show with thumbnails and indicator

alexandra — Tue, 14 Apr 2009 08:02:54 +0000

I am a regular visitor of tutorial 9 among other popular design sites. I really love their gallery on the front page so I tried to figure out how they did it or How I can do it maybe in some other ways. I also like watch football (soccer to Americans) so Goal.com is my favorite site too. They also got a news slide show on front page even with better features than tutorial9’s. You can also check out previous post about currently available slide show/gallery scripts .

slideshow on Goal.com

Divs Explained

Here is how I do the slide show similar to theirs.Two jQury plugins are needed: jCarousel and jQuery cycle

First of all, the features I want to have:

Not to manually resize thumbnails
Be able to display photos with different size and ratio
Auto scroll with thumbnail indication
Manually scroll though thumbnails
Sliding effect with easing animation instead of fading

Here is the Demo

You can also download it

This is how I did it:

Header:





//your future js file

Slide show with jQuery cycle. According to JQuery cycle’s intermedia level 2 tutorial, having a slide show with pager and auto scroll is easy. Here is the HTML code:
- Use DIV to hold your images.
- Give your gallery a name- featured gallery.
- Give images class ‘change’ for resizing with CSS
1 2 3 4 5 6 7 8 9 10 11 12

The JavaScript for jQuery Cycle:

Wrapall bigimgs.
Prepend ul named feature_gallery_pager before all bigimgs.
Define scroll effect and time

$('#feature_gallery .bigimg').wrapAll('
').parents('#feature_gallery').prepend('
').cycle({
fx:'scrollLeft',
easing: 'swing',
inDelay:    250,
drop:       40,
timeout:    5000,
pause:      true,
 
slideExpr: '.bigimg', //slide name
pager:      '#feature_gallery_pager'//pager name
}
 
});ul>
div>

I also want to have the caption or related text displayed. Then we need a call back function. There are two choices. You can use onBefore or onAfter. There isn’t too much difference.

Thebefore option specifies the name of the callback function to be invoked
immediately before a slide transition. The after option specifies the name
of the callback method to be invoked at the end of a slide transition.

I will just use before.Also I stored captions or related texts in id attribute. You can always use somthing else.
```
$('#feature_gallery .bigimg').wrapAll('
').parents('#feature_gallery').prepend('
').cycle({
fx:'scrollLeft',
easing: 'swing',
inDelay:    250,
drop:       40,
timeout:    5000,
pause:      true,
before:  onBefore,//add call back function
slideExpr: '.bigimg',
pager:      '#feature_gallery_pager'
}
});    function onBefore() {
$('#output').html("Scrolling image:" + this.id);
}ul>
div>
```
Now we need to get thumbnails from bigimgs’ url and shrink them. Add this code after pager name and define width and height for class thumbnail. What it does is to get src from bigimg’s title attribute. Now you understand why I put the image url in title attribute of its div, you can always use other attributes. Why not get it from src? cause it does not work, and I have seen many people stuck here. One guy in a forum used a whole page of code to get thumnail url. I think I just gonna take the shorcut.
```
 pagerAnchorBuilder: function(idx, slide) { 
 
            return '
	+slide.title+'" alt="" />
';
        }
```
Put thumb nails in jCarousel, so we can scroll them.The thumbnails are called feature_gallery_pager in jQuery cycle.
```
$(function() {
jQuery('#feature_gallery_pager').jcarousel({
scroll:1
});
});
```

Style with CSS:

Define bigimg change class with width or height so they are not constrained.
class .jcarousel-item ’s width need to be slightly smaller than it really is.
the active slide is called a.activeSlide

body {
font:12px;
}
a img {
border:none;
}
.jcarousel-container {
position: relative;
clear:both;
width:510px;
margin:10px auto 0 auto;
padding:0 40px;
}
.jcarousel-clip {
z-index: 2;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.jcarousel-item {
float: left;
list-style: none;
/* We set the width/height explicitly. No width/height causes infinite loops. */
 
width:80px;
}/**
*  Horizontal Buttons
*/
.jcarousel-next-horizontal {
position:absolute;
top:10px;
right:5px;
width: 32px;
height: 32px;
cursor: pointer;
background:  transparent url(jcarousel_next.png) no-repeat 0 0;
}
.jcarousel-next-horizontal:hover{
background-position: -32px 0;
}
.jcarousel-next-horizontal:active{
background-position: -64px 0;
}
.jcarousel-next-disabled-horizontal, .jcarousel-next-disabled-horizontal:hover, .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-prev-horizontal {
position:absolute;
top:10px;
left:5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(jcarousel_prev.png) no-repeat 0 0;
}
.jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-prev-disabled-horizontal, .jcarousel-prev-disabled-horizontal:hover, .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
#feature_gallery{
height:500px;
width:600px;
margin:auto;
display:block;
background-color: #F2F2F2;
padding: 10px;
border: 1px solid #DADADA;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
ul#feature_gallery_pager{
display:block;
margin:auto;
overflow:hidden;
height:65px;
}
#feature_gallery ul.menu li a:hover{//you can define sth here
}
ul#feature_gallery_pager li a{
overflow:hidden;
width:80px;
height:60px;
padding:2px;
float:left;
display:block;
}
ul#feature_gallery_pager li{
margin:0 2px;
padding:0 0 10px 0;
}
#feature_gallery ul.menu a.activeSlide{
background:url(arrow.png) no-repeat;
}
#feature_gallery .bigimgs{
overflow:hidden;
background-color:#000;
height:330px;
width:500px;
border:2px solid #fff;
position:relative;
margin:0 auto;
}
#feature_gallery img.change{
width:500px;
position:relative;
}
#feature_gallery img.thumb{
width:80px;
height:51px;
}
#output{
width:500px;
margin:1em auto;
display:block;
clear:both;}

Make the js external:

// DOM Loaded
$(function(){ 
 
    //init js styles
    $('body').addClass('hasJS'); 
 
    // homepage cycles
    $('#feature_gallery .bigimg').wrapAll('
').parents('#feature_gallery').prepend('
').cycle({
        fx:'scrollLeft',
        easing: 'swing',
        inDelay:    250,
        drop:       40,
        timeout:    5000,
        pause:      true,
		before:  onBefore,
        slideExpr: '.bigimg',
        pager:      '#feature_gallery_pager',
        pagerAnchorBuilder: function(idx, slide) { 
 
            return '
	+slide.title+'" alt="" />
';
        } 
 
    });
 
$(function() {
    jQuery('#feature_gallery_pager').jcarousel({
        scroll:1
    });
});
 
function onBefore() {
    $('#output').html("Scrolling image:
" + this.id);
} 	
 
});ul>
div>

(optional) If your photos’ size are very different you can define the image change class like this

.change{width:600px;//make it bigger than your frame so you can move it position: relative; top:-30px;left-40px}

Next, I will show you how to integrate it with WordPress.

ADD TO If this helps, why not tell your friends?