Get Chitika eMiniMalls

Categories


Archives


Search the website


Other Links

Get notified whenever a new tip appears here:

Design Resources of the Moment
April 7th, 2006


Aspiramedia has this useful post titled Design Resources of the Moment Open in new browser window that compiles a list of useful web designing and development learning links.


Posted in HTML, CSS Designing, JavaScript | No Comments » | del.icio.us this post

A nice Ajax based color tool
April 7th, 2006


Here’s a color tool Open in new browser window that lets you define a color scheme for your website. Well, that is what I could make of it. I always find it hard to come up with a good color scheme.


Posted in AJAX | No Comments » | del.icio.us this post

CSS caching hack
April 4th, 2006


In a post titled CSS Caching Hacks Open in new browser window Stefen Hayden explains how you can force the browser to load the latest CSS file and not the one cached by the browser. This has happened to me many times, especially when I’m working on a new layout and refreshing the browser after consecutive changes. Sometimes the latest CSS file just refuses to load.


Posted in CSS Designing | No Comments » | del.icio.us this post

AJAX activity indicators
April 4th, 2006


Here’s a nice collection of AJAX Activity Indicators Open in new browser window that I found through AJAXian Open in new browser window. I specifically found the link useful because just last Friday I was looking for such a website :-) .


Posted in AJAX | No Comments » | del.icio.us this post

My first Prototype based AJAX application
March 31st, 2006


Recently in a post titled How wrong is it to open a new window? I had talked about pros and cons of opening a new browser window. In a constant effort to improve my content delivery I decided to deliver content to my clients that not only has links opening in the current browser window, but that also has an icon that lets them open a new browser window. Since creating multiple links becomes tedious after a while, I decided to write a small PHP utility that, given the link and the title, generates the HTML of a regular link plus a link that opens in a new browser window; something like this:

My content writing services Open in new browser window

Now, the equivalent HTML for this link is:

<a href="http://www.amrithallan.com">My content writing services</a> <a style="border: none;" href="javascript: void(0);" onclick="window.open(’http://www.amrithallan.com’);"><img src="/images/new-window-icon.gif" alt="Open in new browser window" border="0" align="absmiddle" style="border: none;" /></a>

So you can imagine how much time it would take, say if one HTML document contained 10 such links!

I was creating a normal PHP file that used a regular form to accept a link and its associated title and then dumped the generated HTML upon clicking the submit button. Then I thought, why not use AJAX to show the result. For this I downloaded Prototype Open in new browser window first as it has pre-written classes to handle AJAX calls.

My exercise has two files: linkgen.php and linkgen1.php. linkgen.php contains the form and all the JavaScript that makes the AJAX calls. linkgen.php also calls prototype.js (the file is of latest version but I saved it as its original name). This is what the first file contains:

<script type="text/javascript" src="prototype.js"></script>
<script language="javascript" type="text/javascript">
function getData()
{
var url = ‘linkgen1.php’;
var paras = ‘link=’+escape($F(’link’))+’&title=’+escape($F(’title’));
var target = ’show_here’;
var AjaxVar = new Ajax.Updater(target, url, {method: ‘get’, parameters: paras});
}
</script>

The first line should be quite clear — it calls the prototype.js. Before we proceed further, let’s first see the code that makes use of the function getData().

<?php
show_form();
?>
<div id="show_here"></div>
<?php
function show_form()
{
?>
<form method="post" name="l1" >
Enter Link:<br />
<input type="text" name="link" id="link" size="40" /><br />
Enter Title:<br />
<input type="text" name="title" id="title" size="40" /><br />
<input type="button" name="s1" value="submit" onClick="getData();" />
</form>
<?php
}
?>

There is actually no need to create a separate function show_form() to display the form. I normally do this so that in case the form is to be repeated I can simply call the function. Another notable thing: instead of displaying a “Submit” button, I’ve used a normal button. Here too you can simply use the “Submit” button. This is how you can re-write the function and get the same result:

<?php
function show_form()
{
?>
<form method="post" name="l1" onSubmit="getData();">
Enter Link:<br />
<input type="text" name="link" id="link" size="40" /><br />
Enter Title:<br />
<input type="text" name="title" id="title" size="40" /><br />
<input type="submit" name="s1" value="submit" />
</form>
<?php
}
?>

OK, now the JavaScript. Here’s the part that calls linkgen1.php and then displays the result:

<script language="javascript" type="text/javascript">
function getData()
{
var url = ‘linkgen1.php’;
var paras = ‘link=’+escape($F(’link’))+’&title=’+escape($F(’title’));
var target = ’show_here’;
var AjaxVar = new Ajax.Updater(target, url, {method: ‘get’, parameters: paras});
}
</script>

As you can see, a class Updater is used finally with all the parameters it needs. I’m not going to dissect it as I’ve myself used it for the first time, but you can easily get a hang of it. The function $F() uses the ID of a form field and gets its value, something like document.l1.link.value perhaps. This is all you need to know about linkgen.php.

Now let’s move onto the file that actually gives us the processed output. If you know PHP, this is the easiest part. The code that this file contains is:

<?php
$link=htmlspecialchars($_GET[’link’]);
$title=htmlspecialchars($_GET[’title’]);
$toshow=”<a href=\”" . $link . “\”>” . $title . “</a> <a style=\”border: none;\” href=\”javascript: void(0);\” onclick=\”window.open(’” . $link . “‘);\”><img src=\”/images/new-window-icon.gif\” alt=\”Open in new browser window\” border=\”0\” align=\”absmiddle\” style=\”border: none;\” /></a>”;
echo $toshow;
?>

And here is the working demo


Posted in PHP, JavaScript, AJAX | 2 Comments » | del.icio.us this post

Web designing for wide screens
March 30th, 2006


More and more laptops are coming with wider screens these days. For web designers this means more horizontal space. In a blog post titled Preparing for Widescreen Mike talks about why it is important to design websites that look good on both wide screens and narrow screens, and how it can be achieved.


Posted in General, JavaScript | No Comments » | del.icio.us this post

Lightbox V 2.0 released
March 30th, 2006


I’ve been using the Lightbox plugin on my blog (see an example here) for a couple of months now. It was more of a psychological opening up because I normally don’t use JavaScript frills to show animations etc. on my website. Now they’ve released Lightbox V 2.0 that supports album like viewing.

Oh! yesterday I spent the entire night Ajaxing my comments but after spending good 4 hours I realized I wasn’t excited about the effect. Good that I had backed up the original header.php and comments.php.


Posted in JavaScript, AJAX | No Comments » | del.icio.us this post

A FireFox plugin to view the markup of the page
March 29th, 2006


X-Ray is a FireFox plugin developed by Stuart that let’s you view the markup of a pge without having to go through the cryptic source of the page. What’s the markup of a web page? Markup is all those <h1>, <a>, <p>, etc. tags that render look to your web page. Having it installed, you can easily view whether that highlighted text is a header tag or just a paragraph with enlarged formatting.


Posted in General | No Comments » | del.icio.us this post

How wrong is it to open a new window?
March 28th, 2006


Many years ago I used to use JavaScript <a href=”javascript: void(0);” onclick=”javascript: window.open();”>the link</a> to open new browser windows. Those were the days when people exchanged links to increase their search engine rankings (I think they still do). Then one day a person pointed out — noticing javascript: void(0) in the links — that it defeated the entire purpose of putting other people’s link on my website because Google couldn’t make sense of links generated with JavaScript. Hence, I started using the target attribute. After a year or so I got over it and I stopped using it on at least my websites because it’s bothersome when a new window pops up all of a sudden.

But some clients insist on it. There is a client that wants all the links going to other domains opening in new windows and the links belonging to his own website opening in the same window. His logic is, most of his visitors are aged people who are not very good at using the browser and they very soon lose track of the original page if there are too many links. To an extent it does make sense.

Roger in a post titled The target attribute and opening new windows presents a good reason for not using the target attribute:

The target attribute is not allowed in strict doctypes, and since you should always use a strict doctype, the target attribute is invalid. Period.

Since there can be no argument against strictly validating your doctypes, I think when people strongly oppose the opening of a new window they are expressing their opinions as web designers/developers who are totally comfortable with using computers and browsers. IE for one, doesn’t allow tab browsing. And how many people know they can right-click and then decide if they want to open a new window or not.

As Roger mentions in the end, the preferred way is to give the user choice on the page itself. It can be like, give a link without the target attribute, and then, if it is really necessary, in the bracket provide a JavaScript assisted link that opens a new window.


Posted in HTML, JavaScript | 1 Comment » | del.icio.us this post

CSS: nifty round corners without images
March 28th, 2006


A few days ago I posted an entry containing links to various tutorials that teach you how to create round corners with CSS and a few images. Now, here tutorial titled nifty corners that teaches you how to obtain round corners without using images.


Posted in CSS Designing | 1 Comment » | del.icio.us this post

« Previous Entries


My status

Recent Entries


www.flickr.com
This is a Flickr badge showing public photos from amrit_hallan. Make your own badge here.



[Valid RSS]

Valid XHTML 1.0 Transitional