Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Javascript to Show Hide Div Visibility

<html>
<head>
<title>Javascript Show Hide Div Visibility</title>

<style type="text/css">
.divStyle {
width:200px;
height:100px;
margin:0px auto;
}
</style>

<script language="javascript" type="text/javascript">
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("div1").style.visibility;
if(divstyle.toLowerCase()=="visible" || divstyle == "")
{
document.getElementById("div1").style.visibility = "hidden";
}
else
{
document.getElementById("div1").style.visibility = "visible";
}
}
</script>
</head>

<body>

<div id="div1" class="divStyle">
Show Hide Div visibility using Javascript DOM.
</div>

<center>
<input type="button" value="show hide div" onclick="showHideDiv()" />
</center>

</body>
</html>
Labels:

Javascript to Change CSS Class of Div Tag

<html>
<head>
<title>Javascript Change CSS Class of Div tag</title>

<style type="text/css">

.redText,.blueText {
width: 200px;
font-family: Arial;
}

.redText {
color : red
}

.blueText {
color : blue
}

</style>

<script language="javascript" type="text/javascript">

function changeCssClass(objDivID)
{
if(document.getElementById(objDivID).className=='redText')
{
document.getElementById(objDivID).className = 'blueText';
}
else
{
document.getElementById(objDivID).className = 'redText';
}
}

</script>

</head>
<body>

<center>
<div id="div1" class="redText">
By default text indside this HTML div tag is red.
Javascript function will change the CSS class<br />
of this Div tag and <br />
text color will change to blue dynamically.
</div>
<br />
<input type="button" value="click here" onclick="changeCssClass('div1')" />
</center>

</body>
</html>
Labels:

zavascript to Change Div Background Color Style

<html >

<head >
<title >Javascript Change Background Color Style</title >

<script language="javascript" type="text/javascript" >
function changeBackgroundColor(objDivID)
{
var backColor = new String();

backColor = document.getElementById(objDivID).style.backgroundColor;

// IE works with hex code of color e.g.: #eeeeee
// Firefox works with rgb color code e.g.: rgb(238, 238, 238)
// Thats why both types are used in If-condition below
if(backColor.toLowerCase()=='#eeeeee' || backColor.toLowerCase()=='rgb(238, 238, 238)')
{
document.getElementById(objDivID).style.backgroundColor = '#c0c0c0';
}
else
{
document.getElementById(objDivID).style.backgroundColor = '#eeeeee';
}
}
</script >

</head >
<body >

<center >
<div id="div1" style="background-color : #EEEEEE; width: 200px; height: 100px" >
Javascript will change the background color of this Div tag dynamically.
</div >

<input type="button" value="click here" onclick="changeBackgroundColor('div1')" / >
</center >

</body >
</html >
Labels:

Javascript to Change Div Background Image

<html >
<head >
<title >Javascript Change Div Background Image </title >

<style type="text/css" >

#div1 {
width:100px;
height:30px;
background-image:url(images/blue.gif);
}

p {
font-family:Verdana;
font-weight:bold;
font-size:11px
}

</style >

<script language="javascript" type="text/javascript" >
function changeDivImage()
{
var imgPath = new String();
imgPath = document.getElementById("div1").style.backgroundImage;

if(imgPath == "url(images/blue.gif)" || imgPath == "")
{
document.getElementById("div1").style.backgroundImage = "url(images/green.gif)";
}
else
{
document.getElementById("div1").style.backgroundImage = "url(images/blue.gif)";
}
}
</script >

</head >

<body >

<center >
<p >
This Javascript Example will change the background image of <br / >
HTML Div Tag onclick event.
</p >
<div id="div1" >
</div >
<br / >
<input type="button" value="Change Background Image" onclick="changeDivImage()" / >
</center >

</body >
</html >
Labels:

Javascript Code to change Div innerHTML

<html >
<head >
<title >Javascript Change Div InnerHTML </title >

<script language="javascript" type="text/javascript" >

function changeDivHTML()
{
var previousInnerHTML = new String();

previousInnerHTML = document.getElementById('div1').innerHTML;

previousInnerHTML = previousInnerHTML.concat(" <h1 >New HTML Text added to the div HTML tag. </h1 >");

previousInnerHTML = previousInnerHTML.concat(" <p align=\"center\" >Paragraph child HTML element added <br / > to the div tag dynamically. </p >");

previousInnerHTML = previousInnerHTML.concat(" <span style=\"color:#ff0000\" >Span child HTML element added to the div tag dynamically. </span >");

document.getElementById('div1').innerHTML = previousInnerHTML;
}

</script >

</head >

<body >

<div id="div1" >
<b >innerHTML </b > placed inside the <b >div </b > element of HTML. <br / >
Javascript will change the innerHTML of this HTML div element.
</div >
<center >
<input type="button" value="Change Div innerHTML" onclick="changeDivHTML()" / >
</center >
</body >
</html >
Labels: