CARVIEW

MOTORHOMES

Select Language

HTTP/2 301 server: nginx date: Sat, 24 Jan 2026 00:47:30 GMT content-type: text/html; charset=UTF-8 location: https://srinix.wordpress.com/category/ui/ x-hacker: Want root? Visit join.a8c.com/hacker and mention this header. host-header: WordPress.com link: ; rel="https://api.w.org/" vary: accept, content-type, cookie x-redirect-by: WordPress x-ac: 3.bom _dca MISS alt-svc: h3=":443"; ma=86400 strict-transport-security: max-age=31536000 server-timing: a8c-cdn, dc;desc=bom, cache;desc=MISS;dur=359.0 HTTP/2 200 server: nginx date: Sat, 24 Jan 2026 00:47:30 GMT content-type: text/html; charset=UTF-8 vary: Accept-Encoding x-hacker: Want root? Visit join.a8c.com/hacker and mention this header. host-header: WordPress.com link: ; rel="https://api.w.org/" vary: accept, content-type, cookie content-encoding: gzip x-ac: 2.bom _dca MISS alt-svc: h3=":443"; ma=86400 strict-transport-security: max-age=31536000 server-timing: a8c-cdn, dc;desc=bom, cache;desc=MISS;dur=415.0 UI | Sridhar: Web Unplugged!!!!

Archive | UI RSS for this section

January 17, 2012

in Code, UI, Web 2.0
Leave a comment

Parsing prototype’s responseXML in JavaScript

Here’s a quick code snippet to parse the responseXML using JavaScript.

I am printing the xml file using php, feel free to use your server side scripting language.

First make a quick Ajax.Request call to send the data to server file.

function AddItem() {

var input = ‘myinput=’+$F(‘myinput’);
var list = ‘ListID=’+$F(‘ListID’);
var user = ‘userID=’+$F(‘userID’);

var pars = input+’&’+user+’&’+list;

new Ajax.Request(

‘GetItem.php’,
{
  asynchronous:true,
  parameters:pars,
  onComplete: ShowData

}
);
$(‘myform’).reset();
$(‘myinput’).activate();
return false;

}

Now that we have sent the data to our server file, in the above case its GetItem.php

Print the xml file in the php side.

Collect the reponse from the server in the form of the responseXML.

Below is the code to parse the responseXML and picking it up in javascript DOM.

function ShowData(originalRequest) {

var xmlDoc = originalRequest.responseXML.documentElement;

var value = xmlDoc.getElementsByTagName(“ItemValue”)[0].childNodes[0].nodeValue;
var value1 = xmlDoc.getElementsByTagName(“ItemID”)[0].childNodes[0].nodeValue;

divID = ‘DIV’+value1;

var div = document.createElement(‘div’);
div.className =’ItemRow’;
div.id = divID;

var val = ‘”‘+value+'”‘;

var i = document.createElement(‘input’);
i.type=’checkbox’;
i.id=value1;
i.value=value;
i[“onclick”] = new Function(“MarkDone(this.id)”);
var t = document.createTextNode(value);

div.appendChild(i);
div.appendChild(t);

$(‘ItemTree’).appendChild(div);

new Effect.Highlight($(div));
}

This has worked perfectly for me, let me know if you run into issues with this code.

Cheerz

November 26, 2007

in UI, Yahoo
9 Comments

Simple Ajax with YUI!!!

For those of you, who want to get started with YUI and Ajax, this would surely prove helpful.


<html><head>
<title>Lets learn YUI</title>

</head>

<body>
<div id="mydiv">

Add some Text or Images if you want to replace dynamically</div>
<a href="Loading.html" onclick="return YUI();">My first AJAX</a>
<script src="build/yahoo/yahoo-min.js" type="text/javascript"></script>

<script src="build/event/event-min.js" type="text/javascript"></script>

<script src="build/connection/connection-min.js" type="text/javascript"></script>

<script type="text/javascript">

//<!&#91;CDATA&#91;

function YUI(){

var loadUrl = "Loading.html";

var callback = {

success: function(o) {

document.getElementById('mydiv').innerHTML =  o.responseText;

},

failure: function(o) {

alert("AJAX doesn't work"); //FAILURE

}

}

var transaction = YAHOO.util.Connect.asyncRequest('GET', loadUrl, callback, null);

return false;

}

//&#93;&#93;>

</script>

</body>

</html>

This is how one can simply make AJAX calls using YUI. The code is simple and self explanatory. If you need any help with this, please drop in comments.

Cheerz
Shri

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

August 7, 2007

in CSS, Designing, Script.aculo.us, Techie, Tutorial, UI, Web 2.0
1 Comment

Web Design Tip #4: Using ToolTips Helps a LOT!!!!

ToolTips are really useful. If you are considering of making a web start-up. This tip would surely come in handy.

According to wikiperdia:

” The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over “

Where can we use ToolTips?

Most of the time, designers are not sure when we should use ToolTips. Lets us imagine a scenario where in user has to fill details. It would be really nice to put down a form tooltip to guide user on do’s-n-dont’s.

UserName <input type=”text”>

Now, if we apply a form tooltip, at the right-hand side a tip would appear when the user clicks on the text box.

“Choose username as smart as ur”

This not only helps in guiding the user about the details but also helps in creating humor 🙂

Which are the free ToolTips we can use?

Im using YUI{Yahoo UI library} and it has some really powerful features for tooltips. Alternatively one can also use the below mentioned libraries which can surely help in grooving the UI.

1. ProtoTIP : Simple, sleak, beautiful, can add effects and AJAX support. Good for Prototype+ Scriptaculous libraries {Im using it as well}

2. Ask The CSS Guy : ONLY useful for forms

3. Nifty Corners Cube: Awesome library perfect for all rounded-corner needs

4. Last but not least, Google it 🙂

If you know of any other library, drop in comments, I shall update the post.

Related Posts:

Web Design Tip#1: Yellow Fade Technique

Web Design Tip#2: Alternative Row colors for Rowset

Web Design Tip#3: Epicentric Designing

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

July 12, 2007

in Blogging, CSS, Designing, Education, Entrepreneurs, FOSS Stuff, Techie, Tutorial, UI

Web Design Tip #3: Epicentric Design!!!

I admit its been sometime I have been out of blogging. Almost a week. I was out coz of some hectic deadlines, personal work and above all I didnt try anything new last week. But I am back!!!

Epicentric Design is a must to read and follow for all the web designers. It is not a new technology or something, but a simple way to make great applications.

Let me just start by giving a simple example.

Consider this blog you are reading. What do u feel is the most important feature?

Yes, you are right. The article. And then follows the sidebar features, footers and headers.

What does that mean?

It means for this particular page, the epicenter is “the article”. Just that article. Forget rest all.

Now, when you get to really start designing or building an application, consider only the epicenter. Most of the web apps I come across fail to do so, which leads in lot of messy stuff on page and creates confusion.

Rediff.com, I dont have any personal problem with them, but yes when u see the home page, what do u feel? U feel its for Logging in? or Shaadi.com Ads? or wht?

Now, simillarly consider the login page, Its functionality is to implement login system, no need for junk there. Best examples Yahoo Mail, Gmail. Their foucs is only on “Login” rest all are not focussed.

So what should be the best possible approach to build the app?

1. Sketch the raw UI, this is imp as we get an idea of what it shud look like.

2. Figure out the Epicenter for the page. Stick to it.

3. Design a simple html page before coding. It is a MUST, afterwards it may be of no use but it adds to a clear picture of what it should like and contain.

4. Code it. If u fail to do the above 3 steps, chances are you will loose an eye from epicenter.

A personal note from my side, DONT start coding first. It is a serious time waste. If u cant have a design or layout or epicenter dont proceed to coding.

Which methods do u follow to build your app? Do share with us.

Cheerz
Sridhar

PS: extract from 37signals

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

July 4, 2007

in CSS, Designing, Techie, UI
3 Comments

Web Full Of Colors…..whts ur color?

For web designing, one needs to be full of colors specially when it comes to UI layer and trust me I kid you not, it is the most toughest part of web app.

Well, wouldnt it be simple if we learn from Nature? Yes, you are right, most of the below combinations are either from the skins of butterflies or birds or metals or rocks!!!!

What we learn from it? Before using “color” tag in web page, think of nature, design and colors will come naturally!!!!!

Have a look at some of the color combinations which can used to play and design a Web app.

###Drop in comments which one you find most appealing

PS: my personal fav is “DNA Mismatch with lil Black in it”

PPS: more color combinations follow!!!

Blue Bird Reflection

Butterfly Brown

DNA Mismatch

Flirt

Gabriels_Oboe

Icicles

lets_change_this_day

Metall_Auf_Metall

Old Spider

SnowTails

Trying to Keep Going

River Washed Himway

Top Brass

Which one you like the most????

June 26, 2007

in Blogging, CSS, Designing, Education, FOSS Stuff, Techie, Tutorial, UI
3 Comments

Web Design Tips #2: Alternate Row Colors in Resultset!!!!

Web Design Tips #2: Alternate Row Colors

In my recent post of Web design tip, I have shown how to use Yellow Fade Technique. If you have missed it. Read it Here.

Okay, What is alternate row coloring?

Imagine you have a set of records in database, you fetched them and just “echoed” them as a bulk in form of table. How appealing right?

So we solve this problem. I know, I understand not everyone just echo’s the result directly. But then, how you show is, what your user sees!!!

Now, imagine this, we fetch the rows from database and then while placing them, we modify them in a way it looks more clear, decent and ofcourse appealing as well.

How do we do it then?

Simple. let us suppose we have got 17 rows as result of some fetch operation. Now using a while loop{for can also work}, use n/2 formula and get the even and odd results.

For every even result set we use a specific color, and for odd result set we use different color. This helps in making it in a readable and appealing form.

Wasnt it simple? Most of us, programmers make this mistake of choosing wrong colors for display { red/blue, yaak }, which is often called as Programmers Design!!!! No wonder why they call it 😀

Accept the fact that design is not programmers cup of taste!!!!

Anyways, I am working on some script for my project, so soon I will post the result and code of this as well.

If you know/happen to work, or anything related to Design techniques, pls feel free to contact me, and you can be our guest author.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

June 18, 2007

in CSS, Designing, Entrepreneurs, FOSS Stuff, Javascript, PHP, Techie, Tutorial, UI, Web 2.0
3 Comments

Web Tip #1: Yellow Fade Technique (YFT)

Web 2.0, Web 2.0 *Yawn Yawn*

I guess the web is half full with Web 2.0 jagron. I wont go deep in explaning what exactly web 2.0 is, but I would stress on one point.

“No Refreshing of Whole Page” {AJAX, as we call it}

I surf web for more than 20 websites {new} a day, one thing I find pretty common and uncommon is the UI. Some sites suck so-much that I never visit them again, and some are so awesome that i fall in love with them.

So here, I am starting a new section “Web Tips” for web workers to plan and design sites in a way to impress the users.

Web Tips #1: Yellow Fade Technique

When you are using AJAX in your site, often one feels it’s a big deal to implement AJAX and then they feel like next Google. But, most of them fail to understand that the user is unaware of what happened just now? For god sake, he doesnt understand AJAX 🙂

So the user panics, can be to an extent, he says “Goodbye”

What can be done to avoid such things? Tell the user you have posted/got the data.

How? Simple

Yellow Fade Technique

Just change the background of the DIV to light yellow and then once the operation is done, again with a time duration fade it out to the original color. This really helps users in understanding that something has happened.

If you are one of the fans of WordPress, it has that implementation in the comments tab.

I am implementing it as well, so you can expect a YFT treat tutorial soon from me.

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Cheerz
Sridhar

June 4, 2007

in Designing, FOSS Stuff, How-To's, Javascript, MySQL, PHP, Techie, Tutorial, UI, Web 2.0
55 Comments

Tutorial: How-To make a Tag Cloud using PHP & MySQL

How to make Tag Cloud using PHP & MySQL

Tag Clouds are pretty common now-a-days in almost all the web 2.0 company sites. Be it Technorati, Zoom CLouds, WordPress, Blogger etc.

Why Tag Clouds are important?

Pretty much for the same reasoon: Appealing Users.

On seeing all these even I have decided to introduce the Tag Cloud feature in our project.

Now, the very important question: How do we code to create a Tag Cloud using PHP & MySql?

Here I will show you how to code it.

First the logic:

1. Collect all the tags & Count{how-many times it has been tagged} from DB{MySQL}

2. Put them into a array {PHP}

3. Calculate the maximum and minimum count of the tags used

4. Now, loop through each tag and just change the size of the font.

5. Define a simple class say “wrapper” which will contain the tag clouds

6. Call the function to generate the tag cloud. {Javascript}

Now, since Im falling short of time, so I will cut the crap and you guys take the code directly.

Yes, a word from me, I will surely update it as time permits in full detail.

Cheerz

Srinix

PS: Download the Code here: Tag Cloud Code

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

PHP and Script.aculo.us Book

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

May 23, 2007

in Designing, Education, FOSS Stuff, How-To's, Javascript, RICO, Techie, Tutorial, UI, Web 2.0
3 Comments

How-To create Rounded Corners using RICO Library!!!

How-To create Rounded Corners using RICO Library!!!

In my previous two posts I have covered some tutorials using Script.aculo.us to enhance the User Experience. But, Script.aculo.us doesnt have the beauty of adding Rounded Corners, which RICO is rich in!!!!

1. Making a simple SlideShow using Script.aculo.us
2. How to Use Script.aculo.us Effects to add beauty

In this tutorial, we will explore yet another AJAX library. RICO Library

RICO is a powerful, creative ajax library which gives you control over UI designing as well as functionality.

In this tutorial, we will see how to create Rounded Edge Corners.
I assume these steps are already done before you see the naked code.

1. You have downloaded RICO library. If not, you can do it here
2. You have downloaded the Prototype Library. If not, you can do it here
3. Enable javascript in your system.

OKay, so lets see the code:

Include all the files{Rico & Prototype} inside the html code.

<head>
<script type=”text/javascript” src=”../src/rico.js” mce_src=”../src/rico.js”> {SRC should be ur rico.js path}
<script type=”text/javascript” src=”../src/prototype.js” mce_src=”../src/prototype.js”> {SRC should be ur prototype.js path}
</head>

so once, we are done with including the libraries to your html file.

Now, time to add some content to the Body of the html file.

Hello This is me, a Rounded Corner hell.

</div>
</div>
</body>

Understanding this particular code is very important, from the compatibility point of view. Coz if you skip some of the style parameters, this code wont work properly in IE.

U know IE sucks!!! {Keep an eye on Padding, it stinks in IE}

Okay, so no big deal here in code. Just two DIV tags and inside the child DIV the content is placed.

Simple, Isnt it? kooool. Lets go and add a simple line and see the magic.

Now, that we have decided the structure and included the libraries, what are we waiting for? Oh, yeah we still need to call the functions of RICO.

What else? Not much. Just save it and see the magic.

If you still want to keep on hacking other options, you are always welcome!!!

Just add these parameters to the same line.

Rico.Corner.round(’roundMe’,{color:’transparent’,compact:true,blend:true;});

What all other options one can add to Corners?

1. Color
2. Blend
3. Compact
4. Color
5. BgColor
6. Specify which corners to be rounded
7. border.

For more information. Visit Demos @officially site of RICO.

Yes, some folks out there can argue that we can do it with CSS also. I agree with you. But can you do it in just one line of code?

Sorry dude!!!

Anyways I have attached a simple code for the same at the bottom if you can want. Take it, use it, try it and please let me know as well, if I missed any.

Cheerz
Sridhar

Download COde: ROunded Corner Using RICO Library

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

May 18, 2007

in CSS, Designing, How-To's, Techie, Tutorial, UI, Web 2.0
2 Comments

UI Designing with CSS: Example login form

After the dot com bubble, start-ups are growing like mushrooms everywhere. And, 80% of these being either in Consumer Internet or Mobile.

So what do these web-based start-ups focus on mostly?

User Experience. Users have become powerful and above all decision makers. If users like the service, UI, application they will support it else they will kill them.

Talking about user experience, Its very important to understand what would a user appreciate? I will explain this taking a simple example of login form.

A simple login form would consits of normal buttons and a table.

Enter Name: <input type=”text”>

Enter Email: <input type=”text”>

No big deal. A simple two text boxes and a submit button. Simple?

Okay, so why not make small yet sweet changes to this code?

Through adding CSS{Cascading Style Sheets}!!!

Lets add some style on mouseover and mouseout operations.

In the style section just add the following piece of information.

Button {
background:green;
}

ButtonHover{
Background:lightgreen;
}

This would add the following functionality to our code.

Whenever the mouse is moved over the button the background is set to lightgreen and whenever removed again back to green.

Though there is no big deal here, the thing that needs to be taken care is that small useful things matter and count.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Design a site like this with WordPress.com

Get started

Original Source | Taken Source

Sridhar: Web Unplugged!!!!

Parsing prototype’s responseXML in JavaScript

Simple Ajax with YUI!!!

Web Design Tip #4: Using ToolTips Helps a LOT!!!!

Web Design Tip #3: Epicentric Design!!!

Web Full Of Colors…..whts ur color?

Web Design Tips #2: Alternate Row Colors in Resultset!!!!

Web Tip #1: Yellow Fade Technique (YFT)

Tutorial: How-To make a Tag Cloud using PHP & MySQL

How-To create Rounded Corners using RICO Library!!!

UI Designing with CSS: Example login form

Archives

Categories

Meta