R1-Desk: 3/1/10

Change the class name or content using innerhtml javascript

Using the innerhtml, we can define the content. Here i am showing how we can replace the content.
Use the changeit() into onload or you can use for any event.


<script type="text/javascript">
function changeit(){
var oldHTML = document.getElementById('column1').innerHTML;
var newHTML = "<div class='classname'>this is the new content</div>";
document.getElementById('column1').innerHTML = newHTML;
}

I feel this is the cool way...
If not let me know ... thanks.

It's a quite simple toggling script

I feel this would be a better way to hide and show the content. Go through the following script.

Here,
sm is the id which one you want hide and show.

call the function "togglesm()".


function togglesm() {
  var state = document.getElementById('sm').style.display;
   if (state == 'block') {
    document.getElementById('sm').style.display = 'none';
   } else {
    document.getElementById('sm').style.display = 'block';
    
   }
  }

You can suggest or feedback ... thanks

Very simple Tab javascript

I've used three tabs for example. You can add any number of tabs by changing "i" value.


<script type="text/javascript">
function changeit(a) {
for(i=1; i<=3; i++) {
if(i==a) {
document.getElementById("block"+i).style.display="block";
document.getElementById("t"+i).className="tab";
} else {
document.getElementById("block"+i).style.display="none";
document.getElementById("t"+i).className="";
}
}
}
</script>

Into the body tag


<a href="#" id="t1" onClick="changeit(1)" class="tab">tab1</a>
<a href="#" id="t2" onClick="changeit(2)">tab2</a>
<a href="#" id="t3" onClick="changeit(3)">tab3</a>
<div id="block1">test blcok1</div>
<div id="block2" style="display:none;">test block2</div>
<div id="block3" style="display:none;">test block3</div>

Any doubts reply me ! thanks

Fading out javascript after page loading

Below is the script i used. If you want to fadeout any image after page was loaded, you can use this code. It is working ...

HTML part

<body onLoad="settime()">
<img id="click" src="refine.gif" />

Add below script into your <head> tag.


<script type="text/javascript">
function settime()
{
setTimeout("slowly.fade('click')",3000);
}
var opacity = 96;
var slowly = {
 fade : function (id) {
  this.fadeLoop(id, opacity);
 },
 fadeLoop : function (id, opacity) {
  var o = document.getElementById(id);
  if (opacity >= 30) {
   slowly.setOpacity(o, opacity);
   opacity -= 4;
   window.setTimeout("slowly.fadeLoop('" + id + "', " + opacity + ")", 150);
  } else {
   o.style.display = "none";
  }
 },
 setOpacity : function (o, opacity) {
  o.style.filter = "alpha(style=0,opacity:" + opacity + ")"; // IE
  o.style.KHTMLOpacity = opacity / 100;    // Konqueror
  o.style.MozOpacity = opacity / 100;     // Mozilla (old)
  o.style.opacity = opacity / 100;     // Mozilla (new)
 }
}
</script>

Guys if you find any better way to do this best revert me ... thanks

Wednesday, March 31, 2010

Change the class name or content using innerhtml javascript

It's a quite simple toggling script

Very simple Tab javascript

Fading out javascript after page loading

Below is the script i used. If you want to fadeout any image after page was loaded, you can use this code. It is working ...