My Notes

Posts

Using javascript to Include a html file inside another html file

When there is no server side functionality needed we create the whole site in plain html. Usually these sites have left/right side menu, top header, footer etc.. If the site grows in to 20, 30 pages, it will be a headache to do a simple change like changing footer text. We will have to change each page. If we were using a server side technology like PHP, JSP, etc.., we will have the chance to keep the common areas in the site in different pages and include these parts in each page using a “include” statements. We can do the same thing with the plain old html and javascript. But how? First you need to create the site main layout using divs and give them unique ids. <html> <title>HTML Includes</title> <script language="javascript" src="js/main.js"></script> <script src="js/prototype.js" type="text/javascript"></script> <script language="javascript" xml:space="preserve"> // <...

Useful method to find the next list node in an unordered list from javascript

If we try to use object.nextSibling to get the next list object of an unordered list, it is not always returning a list object. The following method can be use to get the next list object of an unordered list. function getNextLi(the_li) { var next_li = false; if (the_li.nextSibling != null && the_li.nextSibling.nodeName == "LI") next_li = the_li.nextSibling; return next_li; }

WSO2 is giving control back to software architects and developers to build and manage an SOA

SOA is a popular approach to enterprise architecture because it can improve IT flexibility, allowing a business to quickly adapt to changes. However, many specifications and implementations of "SOA solutions" are available making it somewhat difficult to figure what you really need (and what you don't) to build and manage an SOA. WSO2 is giving control back to software architects and developers, with a unified SOA middleware platform that allows you to seamlessly add product capabilities as your implementation grows. This modular platform is WSO2 Carbon. The design of WSO2 Carbon focuses on separating key functionality of the SOA platform into separate components that can be mixed and matched, like customizable building blocks. http://wso2.org/projects/carbon

Essential steps for cross browser compatible Javascript

Working with javascript opens up a whole set of possibilities for web developers. But at the same time, web developers have to deal with bunch of new issues when dealing with several browsers. The main reason behind this is because, each vendor has implemented the DOM in each browser differently. Some follows W3C standard while others don't. MS IE is the big bully in the block. IE usually doesn't respect W3C standards. So developers must put little extra effort from the very beginning of there development. Always use a cross browser compatible javascript library for your DOM methods. - YUI ( http://developer.yahoo.com/yui/event/ ) - JQuery ( http://jquery.com/ ) Separate the view of the application (HTML) from its behavior (JavaScript). Always be extra careful when dealing with dynamic event handlers. Ex: (YUI is used in the following example and it outlines a practice example of the above three) The html file (test.html) <html> <head> ...

Converting Javascript XML Object to String

I recently ran through a problem of XMLSerializer object. This is not working with IE. Fortunately IE support this simple method to convert an XML Objet to a String."XMLObject.xml". The following function will convert an XML Object in both browsers. function xmlToString(xmlObj) { if (navigator.appName == "Netscape") { return (new XMLSerializer()).serializeToString(xmlObj); } if (navigator.appName == "Microsoft Internet Explorer") { return xmlObj.xml; } }

Projecting HTML Elements on a circle using Javascript

Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted. My solution has 5 files prototype.js This is a handy javascript framework. You can download the latest version from there website ( www.prototypejs.org/download ). I am using this to simply handle the onload event in the page. circle.html script.js node-main-left.gif node-sub-left.gif The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”. This is how the html file looks(circle.html). <html> <head> <script src="prototype.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> <script language="javascript" xml:space...

How to design a website - layout using free tools

There are many web development tools available on the market. Some of them ships with basic features and some contains very advanced features. What if you are unable to use any commercial tool available and still you want to design a pretty complex design, slice it, and convert it to html/css. How do I know this? I know this since once I ran in to this situation by myself. What I did first was to download Inkscape , which is a free vector graphic program. Creating a design in Inkscape is same as other vector graphic applications. But unfortunately there is no straight forward way of slicing the design and exporting. This is what I did as a workaround. I simply add a new layer to the project and named it as “slicing”. I made sure to keep the “slicing” layer above from the rest of the layers and locked all the other layers below it. I drew a rectangle surrounding the area I wanted to export. If the rectangle has stroke or fill it was critical to disable them since I wanted to export onl...