How to change css padding property using javascript dynamically

Using Javascript we can change css value. Here I have written how to change the value of padding top, padding bottom, padding left, padding right differently.

var ab = 20;

//To change Padding-top value write
document.getElementById("div_Id").style.paddingTop = ab.toString()+"px"
//To change Padding-left value write
document.getElementById("div_Id").style.paddingLeft = ab.toString()+"px"
//To change Padding-right value write
document.getElementById("div_Id").style.paddingRight = ab.toString()+"px"
//To change Padding-bottom value write
document.getElementById("div_Id").style.paddingBottom = ab.toString()+"px"


How to redirect a page to a new page using javascript

To redirect a page we can use Javascript.



<script>

window.location.href="http://www.yourdomainname.com";

</script>

How to Get value of a select box in JavaScript

If you are using Id to get a select box value then it's little bit easier . If you don't have id in your select box then you need to use name attribute to select the select box. I have used name tag to get the select box value.

<script type="text/javascript">

function slectBox()

{

var aa= document.form.selectBox.selectedIndex;

var ab= document.form.selectBox.options[aa].value;

alert(ab);

}

</script>






<form action="" name="form">

<select name="selectBox">

<option value="1">one</option>

<option value="2">Two</option>

</select>

<input type="button" onclick="slectBox()" value="clickme" />

</form>




This is the example how it works.try it

one
Two

How to Count all li elements in an ul tag by javascript


<script type="text/javascript">

var ulId = document.getElementById("ulid");

var totalLi = ulId.children.length;

alert(totalLi);

</script>


The list of the li in ul tag example is

<ul id="ulid">

<li>Item1</li>

<li>Item2</li>

<li>Item3</li>

<li>Item4</li>

</ul>

      
• Item1


• Item2


• Item3


• Item4

Refresh page Using Javascript

we can Refresh a page Using Meta tag and javascript

By Meta tag

<meta http-equiv="refresh" content="600">

By Javascript

<a href="javascript:location.reload(true)">Refresh this page</a>

Click here to Refresh this page

Mouseover effect using Javascript and css

Mouse over effect can be done by css e.g(button:hover{background:red;}.But this css will not work in IE6. So it needs to use java script for mouse over effect in a button .By using Javscript it can be possible to show mouseover effect in every browser.
The demo of this script is applied in the button given below.


This effect will work in every browser.The javascript of this button is given bellow

<input style="width:113px; height:31px; border:none; background:url(button.gif);" onmouseover="this.style.background='url(buttonHover.gif)';" onmouseout="this.style.background='url(button.gif)'" type="button" value="See here" />

Show a messagebox By javascript

If you want to give a message to User thesn Simply right a javascript.Basically most of the websites uses this messagebox to show any kind of error or message to the User

To Show this Message simply write a script in header Section of your Html
I have Used this message to show when somebody clicks on a buton

This is the code you need to write in header section of your html

<script type="text\javascript">
function message(){
     alert("Type your message here");
}
</script>

Write this code into your body part

<input type="button" onclick="message();" value="click me" />

Show or hide an image by javascript

It is very easy to hide or show an image according to client's click.

simply call a js function in onclick event handler for example:-

Write this script into your header Tag

<script type="text/javascript">function showblock(){ var img=document.getElementById('image');img.style.display="block"; } function hideblock() { var img=document.getElementById('image') img.style.display="none"; } </script>

Write these code in to your body tag

<div id="image"><img src="http://img1.blogblog.com/img/navbar/icons_orange.png" /></div><input type="button" onclick="showblock();" value="Show image" /> <input type="button" onclick="hideblock();" value="Hide image" />