ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing larger versions of images.
ModalBox is built with pure JavaScript and is based on Sam Stephenson’s excellent Prototype JavaScript Framework, script.aculo.us and valid XHTML/CSS. ModalBox uses AJAX to load content.
more @ wildBit.com
Using the javascript library MooTools with some other free libraries, this tutorial series teaches how to increase user experience with some simple javascript. Using a fictional "blog" as the test site, subscribers will learn how to enhance the blog with modern web techniques such as:
- LightBox type photo gallery
- Expanding sub-menus
- AJAX loaded pages
- Sliding image menus
- Reflecting images without having to touch Photoshop
- Condensing a web page with Fx.Styles and Sliding Tabs
- ...and more
Save the code as HTML file and enjoy :).
<html><head>
<script type= "text/javascript">
var strArr = ['http://www.thinkdigit.com/forum/external.php?type=RSS','http://www.snapfiles.com/feeds/sf20fw.xml',
'http://www.download.com/3410-2001-0-10.xml','http://www.download.com/3412-2001-0-10.xml',
'http://www.download.com/3412-2003-0-25.xml','http://www.videohelp.com/rss/tools',
'http://www.videohelp.com/rss/forum','http://www.pcstats.com/rss/rss.xml'
];
var newArr = [];
var isXml = true;
var isSet = 0;
var XMLHttpRequestObject=false;
function togleTab(obj){
var currStyleClass = obj.className;
var applyStyleClass = "tabActive"
for(i=0; i < obj.parentNode.cells.length; i++){
obj.parentNode.cells[i].className = 'tabInactive';
}
obj.parentNode.cells[obj.cellIndex].className=applyStyleClass;
}
function loadXml(){
var index = Math.floor(Math.random()*strArr.length);
getData(strArr[index]);
}
//loadXml();
function processXmlData() {
var divObj = document.getElementById('targetDiv');
if(XMLHttpRequestObject.readyState!=4 ) {
divObj.innerHTML = "Loading ...";
} else if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
var response = XMLHttpRequestObject.responseXML;
var _link = response.getElementsByTagName('link')[0].firstChild.nodeValue;
// var _title = "<a href='"+_link+"'>"+XMLHttpRequestObject.responseXML.getElementsByTagName('title')[0].firstChild.nodeValue+"</a>";
var _title = response.getElementsByTagName('title')[0].firstChild.nodeValue;
var _desc = response.getElementsByTagName('description')[0].firstChild.nodeValue;
var items = response.getElementsByTagName('item');
var info = "<Table width='100%' style='font-size:12px;font-weight:normal;'><tr style='background:#dddddd;'><td width='30%'><b>"+_title+"</b></td><td width='70%'>"+_desc+"</td></tr>";
var colorCounter = 0;
for(var i=0;i<items.length;i++){
colorCounter++;
var link = items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
var tr = "<tr style='background:#fafafa;'>";
if(colorCounter%2==0){
tr = "<tr style='background:#E9D2BC;'>";
}
var title = tr+"<td width='40%'><Font color='#000000' style='size:100px;'><a href='"+ link+"'>" + items[i].getElementsByTagName("title")[0].firstChild.nodeValue+"</a></Font></td>";
var desc = "<td width = '60%'>"+items[i].getElementsByTagName("description")[0].firstChild.nodeValue +"</td></tr>";
info += title+desc ;
}
var dataToShow = info+"</Table>";
//newArr[isSet]= dataToShow;
alert(dataToShow);
divObj.innerHTML = dataToShow;
isSet++;
} else if(XMLHttpRequestObject.status==204 ||XMLHttpRequestObject.status==404 ||XMLHttpRequestObject.status==400 ||XMLHttpRequestObject.status==415 || XMLHttpRequestObject.status==505 ){
obj.innerHTML = "error";
}
}
function getData(dataSource) {
if (!XMLHttpRequestObject && typeof XMLHttpRequest !='undefined') {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
XMLHttpRequestObject = new XMLHttpRequest();
XMLHttpRequestObject.overrideMimeType('text/xml');
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");
}
XMLHttpRequestObject.open("GET", dataSource,true);
var func = processXmlData;
XMLHttpRequestObject.onreadystatechange = func;
XMLHttpRequestObject.send(null);
}
function cleartDiv(divId){
var obj = document.getElementById(divId);
if(obj){
//obj.style.display = 'none';
obj.innerText="";
}
}
</script>
</head>
<body>
<select onchange="if(this.options[this.selectedIndex].value!=0)
{getData(this.options[this.selectedIndex].value);}
else{cleartDiv('targetDiv');}" size="1" style="width:25%;">
<option value='0' selected="selected">Please Select</option>
<option value='http://www.thinkdigit.com/forum/external.php?type=RSS'>ThinkDigit.com</option>
<option value='http://www.snapfiles.com/feeds/sf20fw.xml'>SnapFiles.com</option>
<option value='http://www.articlecity.com/xml/main.xml'>ArticleCity.com</option>
<option value='http://www.download.com/3410-2001-0-10.xml'>Download.com populars</option>
<option value='http://www.download.com/3412-2001-0-10.xml'>Download.com New</option>
<option value='http://www.download.com/3412-2003-0-25.xml'>Download.com 25 New Titles</option>
<option value='http://techdudes.blogspot.com/feeds/posts/default'>TechDudes</option>
<option value='http://funngyan.com/feed/'>fungyan</option>
</select>
<div id="linkDiv" style="width:98%;height:25px;overflow:auto;"></div>
<div id="targetDiv" style="border:dashed 1px;background:#fafafa;width:70%;height:450px;overflow:auto;font-family:verdana;font-size:10px;"></div>
</body>
</html>
