html tutorial,learn html,oneanall tutorial

To make hide and show the layer of div using javasceipt and css.

Please follow the following step

1) Create style under head section

<style>

#sec1 {

position: absolute;

top: 300px;

left:225px;

visibility:hidden;

z-index: 100;

background-color:Khaki;

}

</style>

2) now write the javascript

<script>

ns4 = (document.layers) ? true:false

ie4 = (document.all) ? true:false

ng5 = (document.getElementById) ? true:false

function showSec(n)

{

hideSec();

if (ng5) document.getElementById(‘sec’ + n).style.visibility = “visible”;

else if (ns4) document.layers["sec" + n].visibility = “show”;

else if (ie4) document.all["sec" + n].style.visibility = “visible”;

//alert(n);

}

function hideSec()

{

if (ng5) document.getElementById(‘sec5′).style.visibility = “hidden”

else if (ns4) document.sec5.visibility = “hide”

else if (ie4) sec5.style.visibility =”hidden”

}

</script>

3) Now in html use following html code

<a href=”#” onMouseOver=”showSec(5);” onMouseout=”hideSec(5);”>Show Hide on mouse Over </a>

<div id=”sec5″>This is layer which will show on mouse over and hide on mouse out.</div>

Thanks

mrphpguru

No Comments

how to place div at bottom of browser without scroll

When an HTML page contains a small amount of content,and you want footer always at the bottom of the webpage and footer comes in the center just below the contains   leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately obvious how this can be done.

you can place div at bottom of browser without scroll in the browser use following css and html formate of div..

The HTML div structure

<div id=”container”>
<div id=”header”></div>
<div id=”body”></div>
<div id=”footer”></div>
</div>

The CSS

html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}

and for ie less than 6

#container {
height:100%;
}

try and enjoy..

thanks

mrphpguru

No Comments

onclick open popup window

Open popup window with open.window method we can use javascript to open the window on click on a tag or button

Suppose you want to open new popup window in the middle of the screen we should know the size of a window and resolution of the screen. On the basis of these data, we will calculate values for the top-left corner.

see the javascript function to open the poup window in the middle of the window  .

javascript function

<script type=”text/javascript”>
<!–
function popup(url)
{
var width = 500;
var height = 500;
var left = (screen.width – width)/2;
var top = (screen.height – height)/2;
var params = ‘width=’+width+’, height=’+height;
params += ‘, top=’+top+’, left=’+left;
params += ‘, directories=no’;
params += ‘, location=no’;
params += ‘, menubar=no’;
params += ‘, resizable=no’;
params += ‘, scrollbars=no’;
params += ‘, status=no’;
params += ‘, toolbar=no’;
newwin=window.open(url,’windowname5′, params);
if (window.focus) {newwin.focus()}
return false;
}
// –>
</script>

The above javascript function will open a popup window in the middle of the browser on click.

u can use like this

<a href=”javascript: void(0)” onclick=”popup(‘addcomment.php?id=<?=$complaintData[id]?>’)”><?=$complaintData[name]?></a>

Thanks

mrphpguru

1 Comment