Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Tuesday, March 9, 2010

Dynamic table creation using JSON objects.

Hi,
Here is an example for creating dyanmic table using JSON objects.

script type="text/javascript"

// Adding the rows to tbody. From the html we will call the below function.
function displayRows(jsonString){
var tableBody = document.getElementById("QuestionBody");
// Clears the table row contents initally.
while (tableBody.firstChild) {
tableBody.removeChild(tableBody.firstChild);
}
// Fetches the size of the JSON object and creates that many rows.
for(i=0; ivar row = document.createElement('tr');
createTableData(row, jsonString[i]);
tableBody.appendChild(row);
}
document.getElementById("QuestionBody").appendChild(tableBody);
jQuery('#QuestionTable').show();
jQuery('table').Scrollable(100, 800);
}

function createTableData(rowObject, data){
createTableRowContent(rowObject, data, 'td');
}
// Adding the actuall data content to the td.
function createTableRowContent(rowObject, data, cellType){
var rowContent = document.createElement(cellType);
var cell = document.createTextNode(data);
rowContent.appendChild(cell);
rowObject.appendChild(rowContent);
}
/script

Thursday, December 17, 2009

Customized Java scripts Alerts

Here is the code through which we can override the JavaScript window.Alert() and write our own custom alerts where we can define our own title, text in the button of alert box :
Just we need to follow the below files and enjoy the customzied Javascript Alerts.

CSS Code :
just copy the below code in the "style type="text/css" " tag and "/style"

#alertBox {
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:2px solid #000;
background-color:#F2F5F6;
background-image:url(alert.png);
background-repeat:no-repeat;
background-position:20px 30px;
}
#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#78919B;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}
#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:3px;
border:2px solid #000;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#78919B;
text-decoration:none;
}

JavaScript Code :

just copy the below code in the javaScript code "
script type="text/javascript"" " tag and "/script"

var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}
function createCustomAlert(txt) {
d = document;
if(d.getElementById("modalContainer")) return;
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
mObj.style.height = d.documentElement.scrollHeight + "px";
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
alertObj.style.visiblity="visible";
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
msg = alertObj.appendChild(d.createElement("p"));
//msg.appendChild(d.createTextNode(txt));
msg.innerHTML = txt;
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
btn.focus();
btn.onclick = function() { removeCustomAlert();return false; }
alertObj.style.display = "block";
}
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}

HTML Code :
<input type="button" value = "Test the alert" onclick="alert('This is a custom alert dialog that was created by over-riding the window.alert method.');" />

Wednesday, September 9, 2009

How to get the URL parts using Javascript

Hi,
Here is the code to get the URL parts using Javascript.
1) How to get the path name
var pathname= window.location.pathname;
alert( " Pathname "+ pathname );
2) How to get the hostname
var hostname = window.location.host;
alert( hostname);
3) How to get the complete URL
var URL = window.location;
alert("URL "+URL);
4) How to get the URL with out parameters
var URLWithOutPrameters = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
alert(URLWithOutPrameters );
5) How to get the Protocal in the URL.
var protocal = window.location.protocol;
alert( " protocal "+ protocal);
5) How to get the parameters in the URL
var name = "tagName"; // We can place any name , the name should contain in the URL.
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results != null )
alert( results[1]); // will display the value of the name (key value pair) ,
}