Posts tagged jquery

Extract HTML from XML in a jQuery AJAX request

May 25th

Posted by alex in AJAX

No comments

This is a bit tricky when you are parsing XML with jQuery. As you will realize, all HTML passed is ignored, and only the text is displayed. I have seen many people do this, which unfortunately won't work!

$(xml).find('element').each(function(){
	if($(this).html() < 0){
		alert($(this).html())
	}
});

Now this will throw an error, you can't take HTML from XML attributes like that!, you have to use $(this).text() as your function. So how will we do this?

The solution is very simple, where you generate the XML, make sure you wrap the html code with the CDATA marker as follows:

<element attribute="value"><![CDATA[Some HTML <span style="color:red">code</span> here]]></element>

And that will work perfectly!

, , ,
The Programmers Hierarchy

The Programmers Hierarchy

Nov 18th

Posted by alex in Programming

No comments

The Programmers Hierarchy

The Programmers Hierarchy

I hope you enjoy this ;)

, , , , , ,

Our of the oven Flash Templates:

Nov 3rd

Posted by alex in Graphic Design

No comments

Flash MintI was building a site for a relative new company a couple weeks ago, and they wanted "A professional looking, brilliant display" for their products, I know Flash, and can do decent stuff with it, but seriously, how long does it take to do something really cool?

So I headed to the only place where I know this can be found for sure, Flash Mint, it was right then when I realized how much I had grown accustomed to it, the ease of use and friendliness of the design, and always full of new stuff!

You can even customize the products, get full website designs, and many flash templates for almost anything (Along with HTML, CSS, WordPress themes... etc) the list looks almost endless haha

Not so long ago I even bought a WordPress theme for a client I didn't have enough time to spend on. He was looking for something like that and I told him I could offer him a better price if he bought a pre-made template, so I showed him the ones that best fit his description and he ended up getting the "Personal Blog Theme", which looked really nice and fitted my client perfectly,

So if you are in a rush, or simply need a professional-looking Flash Movie, Template, or anything of the sort, this is a great alternative!

, , , ,

Perfect jQuery UI rotating tabs

Oct 20th

Posted by alex in CSS

No comments

Tabs are nice. They create a very elegant interface, and jQuery UI does this marvelously, here we have a little preview of this:

jQuery UI Tabs

jQuery UI Tabs

How to do that?

Include the files

With jQuery and jQuery UI it is dead simple. First, load the JS libraries, I recommend using the hosted files at Google for jQuery:

 
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="path/to/jquery UI" type="text/javascript"></script>
 

Remember to include also the CSS files for the UI Theme! Otherwise the tabs won't seem to work!

The HTML for the tabs:

We need a little HTML for our tabs to work:
A wrapper, a few divs with the content, and an unordered list with the tabs:

 
<div id="tabs-rotate">
<ul>
<li><a href="#tab1"><span>Tab 1</span></a></li>
<li><a href="#tab2"><span>Tab 2</span></a></li>
<li><a href="#tab3"><span>Tab 3</span></a></li>
</ul>
<div id="tab1">Tab 1 content</div>
<div id="tab2">Tab 2 content</div>
<div id="tab3">Tab 3 content</div>
</div>
 

The JavaScript:

Now comes the cool part, basically we want to have tabs. But although tabs are nice, people may not realize there is more content, or they might be just too lazy to browse through it, so, why not rotate through the tabs?
jQuery UI does that by itself with a very simple commant, but it is not perfect! So we need to program our tabs to rotate, unless the mouse is over them. This way when a user is looking for a link, the tab will wait!

So here is how this is achieved:

 
$(document).ready(function(){
	$("#tabs-rotate").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
	$('#tabs-rotate').hover(function(){
			$(this).tabs('rotate', 0, false);
		},function(){
			$(this).tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
		}
	);
});
 

First we instruct jQuery UI to set up tabs in that div, and to rotate them. Then we use a hover event to control the rotation. On hover no rotation, and on out resume rotation.

See it in action

You can see it working on the DJs Music homepage

As with the best stuff, it's terribly simple ;)

Hope you enjoy,
Alex

, , , ,

Easiest rounded corners ever

Mar 17th

Posted by alex in Javascript

3 comments

After an incredible amount of time spent looking for a way of easily rounding my corners, I've come across the one I find the easiest possible:

jquery + rounded corners plug-in

So now I'll explain how to install, use, improve...

Installation:

First of all, download and place the needed files:

Now place them in your desired folder, for this tutorial I'll be using "js/"

Usage:

In a html document, you would paste the following code in the head:

 
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<script src="js/rounded.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--
        $(document).ready(function() {
                $(\\'div.round\\').corner(); 
                // Note: Due to wordpress formatting a backslash \ is introduced here.
                //      You must delete it for the script to work
        });
-->
</script>

And anywhere in your website's body, whenever you place a div with a class="round", its corners will be rounded.

To create special corners, or achieve special effects, visit my demo page, full of special tricks.

Special cases:

The round command fills the "rounded" area with the body background color, so if you place this inside somewhere with a different background-color you must specify what color you want the corner to have.
Here you have an example:

 
        $('div.round').corner("cc:#F1F1F1");

If you want a bigger radius for your corners, just write the pixel radius in the parameters of corner():

 
       $('div.round').corner("10px");

Example and demo page:

I've set up an example and demo page, with all possible ways to do this, just go and see.

If you find any problems or suggestions feel free to comment!

, , , , , ,