August 4, 2007
More ways to skin ajax
Today I learned that there is more than one way to implement Ajax, namely:
- using a hidden frame
- using a hidden iFrame
- calling
ActiveXObject()for IE6 or earlier - calling
XMLHttpRequest()for all other browsers - using a third party library like zXML or DWR
- creating dynamic images by using
new Image()on the fly - dynamic script loading by using
document.createElement("script")
The book I am reading is called Professional Ajax.
Posted at 5:36 PM | Permalink | Comments (0)
December 13, 2005
Random sized links
So I decided to be clever again, but this time around in an unusual javascript kind of way.
Do you see all of those links down the left and right columns? Well, if you have javascript enabled in your browser, then you should see a bunch of messed-up looking links which are randomly sized, some bold, some italic and others just plain old normal.
For those lucky enough to be knowledgeable in the fine art of Dynamic HTML, I will reveal my secret.
Here it is:
<script type="text/javascript">
// Creates random fontsize, bold, italic or normal for links.
function resize_menu_links(class_name, h2_names, min, max) {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (typeof(divs[i].className) == 'string' && divs[i].className == class_name) {
var h2s = divs[i].getElementsByTagName('h2');
if (h2s && is_in_array(h2_names, h2s[0].innerHTML)) {
var a_links = divs[i].getElementsByTagName('a');
for (var j = 0; j < a_links.length; j++) {
var fs = min + Math.floor(Math.random()*(max-min+1));
a_links[j].style.fontSize = fs+'px';
var rx = Math.floor(Math.random()*4);
if (rx == 1) { // bold
a_links[j].style.fontWeight = 'bold';
} else if (rx == 2) { // italic
a_links[j].style.fontStyle = 'italic';
} else if (rx == 3) { // both
a_links[j].style.fontWeight = 'bold';
a_links[j].style.fontStyle = 'italic';
}
}
}
}
}
}
The function is_in_array checks to see if a given string matches one of the elements of the array, returning true or false.
function is_in_array(the_array, what) {
for (var i = 0; i < the_array.length; i++) {
if (the_array[i] == what) return true;
}
return false;
}
Finally, I use the standard setTimeout function to make sure that the changes are made once the page has been loaded, waiting 50 milliseconds before firing off the function resize_menu_links , passing the array of allowed section strings as well as the range of font sizes, in this example 9-17px.
// Only for titles given in 2nd array parameter.
setTimeout("resize_menu_links('menu_subsection', ['Categories', 'More links', 'Archives', 'More entries'], 9, 17)", 50);
</script>
Do you have javascript enabled?
The answer is:
Posted at 12:31 PM | Permalink | Comments (2) | TrackBack
August 11, 2004
Shake me
Posted at 8:50 PM | Permalink | Comments (0)
April 26, 2004
Are you an expert
So you thought that you knew everything there was to good old javascript did you? Well then, check out the slayeroffice web site first and then ask yourself again whether or not you are such a big shot afterall.
Personally, I found the Mouseover DOM Inspector the most impressive of all.
Posted at 9:10 PM | Permalink | Comments (3)
October 3, 2003
Break it up
Don't you just hate it when you include some external piece of (javascript) code from another site, and it breaks up the layout of your web page?
This is the problem I've been having with Blogsnob. The kind folks there provide a free service for members of the blogging community, enabling you to increase your blog's exposure via simple text-based ads.
All you have to do is insert the following code somewhere and hope everything works out okay:
<script src="http://blogsnob.idya.net/ad.php?id=n" type="text/javascript"></script>
I have placed this at the very bottom of my right-hand margin. This margin is set to a width of around 160 pixels and it is meant to stay that way.
The only problem with inserting this piece of code is that you do not know ahead of time how much text and/or images might be thrown into your site. Now I trust the service for what it is, and most of the time it seems to be working alright. However, sometimes I get really long words containing say 50 characters in a row. This breaks up my layout. In order to accommodate this exceptionally long word, the poor 160 pixel wide margin is expanded so that a much larger vertical bar appears. You see, HTML has no character wrapping, only word wrapping at the white-space borders. My main content area is covered up on the right side and shifted to the left. Bummer, man.
So what's a poor soul like myself going to do? Well, I have chosen to solve this using good old Javascript based on the DOM-interface. Here is what I do. First of all, I bracket the inserted code above like this:
<div id="blogsnob"> <script src="http://blogsnob.idya.net/ad.php?id=n" type="text/javascript"></script> </div>
Note that I have wrapped the ill-behaved section of code with another div-tag and I have labeled it "blogsnob" accordingly.
Then just right after the spot where I have inserted the code above, I add the following function call:
<script language="javascript" type="text/javascript">
<!--
mxw("blogsnob");
//-->
</script>
Alright, so what does this magical function called mxw() really do? Well, it looks within the div-tag that I labeled as "blogsnob", recursively parses through the nodes and child-nodes, and grabs each TEXT-element. If it then finds any words which are longer than a pre-defined maximum length, say 20 characters (mxw_max = 20;), then it will truncate this bugger to this given length. Pretty neat, huh?
Just in case you were curious what this function looks like, and assuming that you not only have a good knowledge of Javascript, but also at least some limited experience with that thing called DOM, then here it is:
<script language="javascript" type="text/javascript">
<!--
// Maximum allowed length of text words.
var mxw_max = 20;
//
// mxw(id)
//
// Wrapper function which checks that certain DOM
// is supported before calling recursive mxw2().
//
function mxw(id)
{
if (!document.getElementById) return;
var n = document.getElementById(id);
if (!n || !n.nodeType) return;
mxw2(n);
}
//
// mxw2(id)
//
// Checks all text of given node and all its
// descendant nodes, truncating each word that
// is longer than allowed length mxw_max. This
// is an extra safety valve preventing unwanted
// overrun, e.g. of sidebars and/or margins.
function mxw2(n)
{
if (n.nodeType == 3 /*Node.TEXT_NODE*/)
{
var flag = 0;
var words = n.data.split(" ");
for (var i = 0; i < words.length; i++)
{
if (words[i].length > mxw_max)
{
flag++;
words[i] = words[i].substr(0, mxw_max-2) + ". ";
}
}
if (flag > 0) n.data = words.join(" ");
}
var children = n.childNodes;
for (var i = 0; i < children.length; i++) mxw2(children[i]);
}
//-->
</script>
Hope you like it and find it useful for your own web pages somewhere. You're welcome.
Posted at 9:53 AM | Permalink | Comments (5)
September 3, 2003
Now you see me
Here's some more javascript stuff which you too can use in order to achieve yet another truly amazing affect. Boggle the minds of your readers and make new friends. Just click on the following button to find out for yourself:
Posted at 10:44 AM | Permalink | Comments (3)
August 29, 2003
Something silly with Javascript
Alright, so I get kind of bored once in awhile, so what? Everyone has those periods when all you feel like doing is doing nothing at all. Nothing at all like a good old bout with some amazing Javascript, that is.
Here is something I created this morning, something quite silly but still entertaining nonetheless. And to think that I did it all with some simple Javascript. Try it out please.
Kind of reminds me of that program called Life, remember it? A simulation of living objects based on the population, available food and number of neighbors and other predators. I guess I could enhance this simple creation to include some kind of intelligence, but that will have to wait until another day (sorry).
If worse comes to worse, I can always find a job somewhere as a Javascript programmer. Want to hire me?
Hope this made your day. It did mine.
Posted at 11:52 AM | Permalink | Comments (5)
November 20, 2002
Spam-bots beware
Alright, so I finally have gotten so overly fed up with those droves of spam emails the flood my in-box everyday that it is time to do something about them. After having read the article Spam-Proofing Your Website, I have taken some of their suggestions at heart and have begun to cloak all email addresses displayed on my homepage and blog. You see, there are millions of so-called spam harvesters crawling all over the Internet, consuming page after page and extracting all the discovered emails. To be used for junk email, those jerks. I am curious if I will now be getting less junk email (about 60 per day and growing).
<script language="javascript" type="text/javascript">
<!--
// Try and spoof those nasty spambots!
document.write('<a href="' + 'ma' + 'ilto:k');
document.write('iffin' + '@' + 'cyber-gi');
document.write('sh.com' + '">' + 'kiffin (at) ');
document.write('cyber-gish' + '</a>');
//-->
</script>
And this is what all that mumbo-jumbo code (hopefully) looks like after it has been parsed by your internet browser and presented in readable form: [ ]
Now be honest. If you were a spam-bot, would you be able to figure out what this is? I've heard that they are getting pretty smart lately, even able to scan Javascript code and understanding it, but I doubt very much if this can ever be understood.
Here is an email encoder site which you might find useful, or you can also try out this anti-spam obfuscator.
Posted at 2:24 PM | Permalink | Comments (2)
October 3, 2002
Ordered books
Since my birthday is coming up soon, I decided to order two more books from Amazon in the hopes that my shipment will arrive in time for the big event. They've got less than nine days, but so far I have never had to wait more than a week. Now I will tell you which two books I ordered if you promise not to make fun of me. The titles are:
- The Java Programming Language by Ken Arnold et al.
- Effective Java by Josh Bloch.
I figured that I have pretty much learned enough about HTML, Javascript, XML, CSS, Perl and CGI that it is time to take the next jump into the most obvious domain about which I need (would like) to be more knowledgeable. I have heard so much about the wonderful world of Java and at the same time know so very little about it. Time to expand my knowledge another slight click. Is this a sign of getting senile, crazy, too old for this stuff or am I simply a born techie guru type at heart? Take your pick. Any way, the books will add a pleasant counterweight to whatever it is I am planning to do in the not so near future.
Posted at 12:55 PM | Permalink | Comments (2)
February 23, 2002
Infinite knowledge
Right now I am reading a bunch of books simultaneously in my never-ending attempt to acquire infinite knowledge. Nine books all in a row, to be more precise. Depending on my mood at a given instant, I will jump from the one book to the other. Sometimes smack dab in the middle of a chapter, I will close the book I am currently reading and open up another book. Some reading sessions consist of switching books five or six times an hour. I suffer from an insecure feeling that perhaps I am not increasing my knowledge as productively as I should. That what I am reading at the moment is not valuable enough in the sense that I am suffering an acute shortage by not improving my life sufficiently and quickly enough! This can be very frustrating. The innocent pleasures of reading suffer in that regard which is ironic to say the least. There is this endless source of interesting information out there, and there is absolutely no way I can absorb it all in the limited span of my lifetime. By nature I have an addictive tendency, a proclivity which bends me in fixations. Especially when it is in any way remotely related to the esoteric acquisition of knowledge. So why bother in the first place? Infinite knowledge is preferable, of course. Unfortunately one cannot attain this by reading, even if one could have enough time to read every single book in every possible language that has ever been written in the history of civilization. In order to give my readers a hint of how far along this reading adventure I have come, here is a list of books that currently lie on the reading table next to my bedside. The order is from bottom to top, or since I am by nature symetrical and neat, from the widest (usually the thickest, but now always) in decreasing order:
- Programming Perl, Third Edition by Larry Wall et al.
- Javascript, The Definitive Guide by David Flanagan.
- The 7 Habits of Highly Effective People by Stephen R. Covey.
- Essential CSS & DHTML for Web Professionals by Dan Livingston.
- Web Design in a Nutshell by Jennifer Niederst.
- Cascading Style Sheets 2.0 Programmer's Reference by Eric A. Meyer.
- A Beautiful Mind by Sylvia Nasar.
- The Power of Now by Eckhart Tolle.
- Caesar by Colleen McCullough.
As you can see from the list I am pretty much obsessed with Web-related stuff at the moment. However, I try my best to balance this with other non-Web stuff. Reading one book at a time would probably be much more efficient, but I am too impatient. For the sake of simplicity, let's just say that I am about half-way along the pursuit of infinite knowledge.
Posted at 12:08 PM | Permalink | Comments (6)
February 8, 2002
Activate your web pages
When I arrived home I was so very excited to receive my latest order from amazon.co.uk that my heart started beating wildly. I ripped open the box and let out a gleeful shout. The reason:
Javascript, The Definitive Guide by David Flanagan.
Yes, yes, yes. As if there is still even more to learn. Haven't I learned enough? This weekend I plan to saw through the exciting thickness and learn as much as I can about javascript this wonderful programming language for the web.
At heart I guess I remain quite an Internet geek.
Posted at 4:33 PM | Permalink | Comments (0)
