Javascript for pulling from a cross-domain xml file: for dummies

I had an assignment at work, to write a small piece of plug and play script for one of our clients.
They needed to read from our rss feed, and display the content on their webpage.

Now, there are many server site solutions for this, however, its gets a little tricky when you need to parse the xml only using javascript.

Here’s one solution that works, but ON THE SAME DOMAIN.

After some amount of struggle, here’s a solution that I stumbed across to get this to work CROSS-DOMAIN and tweaked for my use.
Here’s where I found the answer (in case you are interested): http://plugins.jquery.com/project/jgfeed

This script uses Google Feeds API and jQuery plugin.

Example:

Step 1: Include the following scripts on your page:

<script src=”jquery.js”></script>
<script src=”jquery.jgfeed.js”></script>

Step 2: Include the html into which you are going to inject the response & customize the display on your page using CSS.

A) Include the css file that apply’s styles to the content that you display. I have customized this based on the content that I’m displaying:

<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css” />

B) Include the following html on your page. This is the ul tag that you’re going to inject your response into.
I have this as a UL tag because I’m injecting li tags into this

<ul id=”entry-display”>
<h1>content</h1>
</ul>

Step 3: Here’s an example of the snippet that you need to include.

var randomnumber=Math.floor(Math.random()*1000000); //to ensure that the response isn’t cached
var tofetchfrom = “http://contest.shutterfly.com/contests/viewallentriesincontestrss/7234?v=”+randomnumber;

$.jGFeed(tofetchfrom,
function(feeds){
// Check for errors
if(!feeds){
// there was an error
return false;
}
// do whatever you want with feeds here
for(var i=0; i<feeds.entries.length; i++){
var entry = feeds.entries[i];

// defining variables of the information that I needed to display on my page.
// there are only specific xml nodes that you can pull from (some of them below)
var title = entry.title; // <title>title</title>
var url = entry.link;  // <link>url</link>
var mycontent = entry.content; // <description>description</description>

//i’m injecting this into a ul with an id of entry-display.
//Remember, since this script is appending to the content, you need to have some default content is the ul tags
//for this piece of script to work. You can customize the html / content that you want to use

$(‘<li></li>’).html(‘<a href=”‘+url+'”>’+mycontent+'</a><h5><a href=”‘+url+'”>’+title+'</a></h5>’).appendTo(‘#entry-display’);
}
}, 8);

This example pulls 8 entries from the rss @ http://contest.shutterfly.com/contests/viewallentriesincontestrss/7234
You can customize the feed, number and the piece of code to inject this based on what / how you want displayed.

Step 4: We’re DONE! As simple as that.

CLICK HERE TO VIEW THE EXAMPLE
CLICK HERE TO DOWNLOAD THE WORKING EXAMPLE

Javascript for reading from an xml file: for dummies.

This script uses jquery to do this. Found initial post at: http://think2loud.com/reading-xml-with-jquery/

Remember, this script works ONLY if the html and xml are on the SAME DOMAIN.

If you’re looking for a solution that works cross-domain, CLICK HERE.

Step 1: Include the following script on your page:

<script src=”jquery.js” type=”text/javascript”></script>

Step 2: Add the following snippet of code on the page (description below):

$(document).ready(function(){
$.ajax({
type: “GET”,
url: “contestdata.xml”,
dataType: “xml”,
url: “contestdata.xml”,

$(xml).find(‘item’).each(function(i){
if(i <= “7”) {
var title = $(this).find(‘title’).text();
var url = $(this).find(‘link’).text();
var thumbnail = $(this).find(‘thumbnail’).text();
$(‘<li></li>’).html(‘<a href=”‘+url+'”><img width=”112″ height=”85″ border=”0″ alt=”” src=”‘+thumbnail+'”></a><h5><a href=”‘+url+'”>’+title+'</a></h5>’).appendTo(‘#entry-display’);
}
});
}
});
});

What the script is doing:

A) You just need to tell jQuery to read the file and print out the contents. Start by adding the document.ready function to the page.
$(document).ready(function(){

});

B) Within the document.ready we start a jQuery ajax request to read the XML file. The ajax request takes four parameters: file type, url, dataType, and success.

$.ajax({
type: “GET”,
url: “contestdata.xml”,
dataType: “xml”,
success: function(xml) {

}
});

C) Now that we are reading the XML, we need to find the data within it and do something with it. We start by reading the returned data and using the find method to get all the nodes that match the text we supply, and then use the each function to loop through what the find function give to us. You can pass i to the function to loop through the number of items. In the example about, I needed to display only 8 entries.

$(xml).find(‘item’).each(function(i){

});

D) Now get the data from the nodes and print it out. Do this by using the attr function, and the find function to get the text and any attributes on the nodes.

var title = $(this).find(‘title’).text();
var url = $(this).find(‘link’).text();
var thumbnail = $(this).find(‘thumbnail’).text();
$(‘<li></li>’).html(‘<a href=”‘+url+'”><img width=”112″ height=”85″ border=”0″ alt=”” src=”‘+thumbnail+'”></a><h5><a href=”‘+url+'”>’+title+'</a></h5>’).appendTo(‘#entry-display’);

Step 3: Add the css to apply styles to this data.
I included my css file on the page:

<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css” />

Step 4: We’re done!

CLICK HERE TO VIEW THE EXAMPLE
CLICK HERE TO DOWNLOAD THE WORKING EXAMPLE
Please note, that you’ll need to view this over a server for it to work.

Randomize the display order of content on my page.

What I needed to do: Randomize the display order of content on my page.

What I found: As the first step, I started to look around to see if someone had already written a javascript for this.

And I found one really good one on dynamic drive. They have just about everything!
http://www.dynamicdrive.com/dynamicindex17/randomcontentorder.htm

Where I was getting stuck: So while this script was working really well, my div’s (that I needed displayed  in a random order) had buttons
that sent ajax requests and received html response. And those stopped working.

My own alternate solution: Here’s the solution I came up with. It may not be most optimized, but for the little content on my page, it works very well.

The logic:

1. I defined a set of css classes to absolute position my div’s. Each of these classes ended with a number. For. e.g .cls1, .cls2…and so on.
2. I created a javascript function, that randomly picks a number from a pre-defined array of numbers.
3. I use this random number to apply the css classes and randomly place my div’s on the page.

<style>
#mycontainer {position:relative;} // you need to set this position to relative to have the child div’s position in relation to this.
.cls1 {position:absolute; top:0px;} // position absolute to where you want the div’s on the page.
.cls2 {position:absolute; top:20px;}
.cls3 {position:absolute; top:40px;}
.cls4 {position:absolute; top:60px;}
.cls5 {position:absolute; top:80px;}
.cls6 {position:absolute; top:100px;}
</style>

<script type=”text/javascript”>

function randOrd(){return (Math.round(Math.random())-0.5);}

function J$(eleID){ return document.getElementById(eleID);}

//this is where we assign random classes to our div’s
window.onload=function() {
anyArray = new Array(‘1′,’2′,’3′,’4′,’5′,’6’);
anyArray.sort( randOrd );

J$(‘mydiv1’).className = “cls”+anyArray[0];
J$(‘mydiv2’).className = “cls”+anyArray[1];
J$(‘mydiv3’).className = “cls”+anyArray[2];
J$(‘mydiv4’).className = “cls”+anyArray[3];
J$(‘mydiv5’).className = “cls”+anyArray[4];
J$(‘mydiv6’).className = “cls”+anyArray[5];
}

</script>

<div id=”mycontainer”>

<div id=”mydiv1″>DIV 1</div>
<div id=”mydiv2″>DIV 2</div>
<div id=”mydiv3″ >DIV 3</div>
<div id=”mydiv4″ >DIV 4</div>
<div id=”mydiv5″ >DIV 5</div>
<div id=”mydiv6″ >DIV 6</div>

</div>

FINAL RESULT: Click here to download the html file.

CSS drop down menus

My requirement was to create a simple dropdown that would work across browsers.
And I wanted to use CSS (and not just javascript) to create this so that it would be more “search optimized”.

And I found it!! On www.alistapart.com
It’s a very small piece of javascript that uses DOM to create drop downs.
A BIG thanks to whoever wrote it!

And if you want to change the menu from horizontal to vertical, all you need to do is make tiny tweaks in the CSS file. And you’re done!

See this.
This uses the original script / css.

But, my design required me to have the menu appear under the links on the header.
See this.

All I needed to do is change the CSS around a little. No changes to the javascript at all!

Here’s what you need to make sure it works –

1. Make sure you include the .js file in the head tag of your html page and point to the appropriate path.
<script type=”text/javascript” src=”js/drop_down.js”></script>

2. Make sure you include the .css file in the head tag of your html page and point to the appropriate path / file.

//THIS CALLS THE NEW CSS FILE
<style type=”text/css”>
@import “css/new.css”;
</style>

//THIS CALLS THE ORIGINAL CSS FILE
<style type=”text/css”>
@import “css/new.css”;
</style>

Note: Use only one of these at a time depending of what dropdown you want to create.

3. Here’s the html that you need to include in the body of your html page:

<ul id=”nav”>
<li><a href=”#”>1. Link</a></li>
<li><a href=”#”>2. Link</a>
<ul>
<li><a href=”#”>1. Drop Down</a></li>
<li><a href=”#”>2. Drop Down</a></li>
<li><a href=”#”>3. Drop Down</a></li>
</ul>
</li>
<li><a href=”#”>3. Link</a>

<ul>
<li><a href=”#”>1. Drop Down</a></li>
<li><a href=”#”>2. Drop Down</a></li>
<li><a href=”#”>3. Drop Down</a></li>
<li><a href=”#”>4. Drop Down</a></li>
</ul>
</li>
</ul>

Note: Make sure that the first UL tag has an id=”nav”. That’s what the script uses to create the menu.

You can change this around in more than one way. You can make them regular dropdowns, change positions around so the menu appears next to the where the header link appears, add colors / backgrounds to the links….and more. If anyone has any questions or needs any help with creation of any of these, drop a note and I’d love to help!

Click here to download the above examples in a zip format.

CLEAN, TABLE-less (CSS) FORMS

I’ve been doing a lot of work on forms currently, hence the multiple form UI posts!

There are many ways in which you can use css to create table-less forms.

The implementation below is a very effective one, that uses <dd> tags, that are more commonly used now that the earlier days of HTML. This tag was standardized in HTML 2.0 and has been existing for a really long time.

To see an example of the usage of the dd tag, refer to http://www.w3schools.com/TAGS/tag_dd.asp

It essentially stands for “Description of items in a definition list”

Here’s what our form will look like after we’re done coding it.

I have tested this on IE6, FF, Safari and Chrome. I should ideally be testing it on IE7 as well, but unfortunately my computer that has IE7 installed has been attacked. Will update the post once I’ve tested it out on that too..

1. Here’s the CSS that needs to go either in a seperate stylesheet or in the head tag of your html file in the <style> tag

/*******************************************
GENERAL CSS FOR FONT SIZE / COLOR
*******************************************/
body, dl, div, p {color:#000; font-family:tahoma, arial; font-size:10pt;}

/*******************************************
FORM CSS – THESE ARE GENERAL DL / DD STYLES
*******************************************/
dl {float:left; position:relative; width:700px; padding:0px; margin:0px;}
dl div {float:left;}
dt {float:left; width:75px; padding:4px 0 2px 0; text-align:left;}
dd {float: left; width:205px; margin: 0 0 8px 0; padding: 0 0 0px 8px;}
dd p {padding:0px; margin:0px; height:10px;}
dt label {width:75px; float:left; text-align:right; display:block;}
input {width:205px;}

/*******************************************************************************************
FORM CSS – THESE ARE SPECIFIC TO CERTAIN FIELDS. IN THIS CASE, TO ACHIEVE THE STATE / ZIP ON
THE FORM. THIS WILL ALSO GIVE YOU A GENERAL IDEA OF HOW TO ADD FLEXIBILITY TO CHANGE
THESE AROUND FOR CERTAIN ELEMENTS ONLY.
*******************************************************************************************/

#Zip {width:118px;}
#Zip dt {float:left; width:44px; padding:4px 0px 2px 0;}
#Zip dd {float: right; width:70px; padding:0px; text-align:right;}
#Zip dt label {width:44px; float:left; text-align:right; display:block;}
#zipcode {width:63px;}

#State dt {float:left; width:75px; padding:4px 0 2px 0; text-align:left;}
#State dd {float:left; width:85px; padding:0 0 0px 8px;}
select {width:95px; height:20px;}

2. Here’s the markup that goes in the <body> of your file.

<dl>

<div id=”FirstName”>
<dt><label for=”firstname”>First Name</label></dt>
<dd>
<input type=”text” id=”firstname”>
<p><!–the backend error can be served here–></p>
</dd>
</div>

<div id=”Address”>
<dt><label for=”address”>Address</label></dt>
<dd>
<input type=”text” id=”address”>
<p><!–the backend error can be served here–></p>
</dd>
</div>

<div id=”LastName”>
<dt><label for=”lastname”>Last Name</label></dt>
<dd>
<input type=”text” id=”lastname”>
<p><!–the backend error can be served here–></p>
</dd>
</div>

<div id=”Address2″>
<dt><label for=”address2″>Address 2</label></dt>
<dd>
<input type=”text” id=”address2″>
<p><!–the backend error can be served here–></p>
</dd>
</div>

<div id=”Email”>
<dt><label for=”email”>Email</label></dt>
<dd>
<input type=”text” id=”email”>
<p><!–the backend error can be served here–></p>
</dd>
</div>

<div id=”City”>
<dt><label for=”city”>City</label></dt>
<dd>
<input type=”text” id=”city”>
<p><!–the backend error can be served here–></p>
</dd>
</div>

<div id=”Confirm”>
<dt><label for=”confirm”>Confirm</label></dt>
<dd>
<input type=”text” id=”confirm”>
<p><!–the backend error can be served here–></p>
</dd>
</div>

<div id=”State”>
<dt><label for=”state”>State</label></dt>
<dd>
<select id=”state”>
<option value=””>– State –</option>
</select>
<p><!–the backend error can be served here–></p>
</dd>
</div>

<div id=”Zip”>
<dt><label for=”zipcode”>Zip</label></dt>
<dd>
<input type=”text” id=”zipcode” class=”textInput”>
<p><!–the backend error can be served here–></p>
</dd>
</div>

</dl>

3. Here’s a very short explanation. The code itself should explain the rest!

-> All the dt / dd tags have been put in their own unique containers. This is done so that you have the flexibility to change the widths / heights of any of the element within that container. For e.g. I’ve applied different width’s / padding / floats to the zip and state fields.

I actually used the above markup to a form that was generated in a loop, giving a unique id to each div. It really helped me position around the elements the way I wanted to without changing the markup. A simple CSS file did the trick!

-> It is very useful to have <label> tags in a form. They help in many ways.

If you want to read more on label tags, see the browser support for it etc, you can refer to http://www.w3.org/TR/html401/interact/forms.html#h-17.9 and / or http://www.w3schools.com/tags/tag_label.asp

4. Download the html / css for this file here – http://www.pluthra.com/blogdata/final-form.html

Make your forms look pretty with css

this is going to be my first post. and you’ll notice as i go along, my writing style is extremely informal. a lot of hyphens, no capitalization, lots of sentences ending with periods – well, that’s just me….

i’m going to start my first post with some tips on making input boxes and dropdowns look pretty.
at my current workplace, i was asked to work on making all our forms look nice and pretty. web 2.0’ish form elements – big, rounded…

so i started looking to see if i could find nice rounded input boxes and dropdowns that are created using css. i haven’t found a solution for dropdowns yet, but here are a couple that can be used for input boxes.

solution 1. this one does not work in IE, but works across all other browsers.

apply this css to your input box:

input {
border-width: 2px;
border-style: solid;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
font-size: 1.7em;
outline: none;
border-color:#cccccc;
width:250px;
font-family:Trebuchet MS, Georgia, arial;
}

your input box will end up looking like this –

solution 2: this is the other way you can apply the same effect, and this one will work across all browsers. this uses a background image instead.

input {
background:url(input-bg.gif);
width:455px;
height:40px;
border:0px;
font-size:16px;
background-repeat:no-repeat;
padding:2px 0px 0px 10px;
font-family:Trebuchet MS, Georgia, arial;
}

and here’s the bg image.

input css background

and finally, here’s a way to make your select boxes look pretty and web 2.0’ish using css.

select {
border: 2px solid #cccccc;
padding:6px;
font-family:Trebuchet MS, Georgia, arial;
}

your select box will look like this –