Wednesday, 5 June 2013

show/hide div tag scrollbar in

I'm here giving a simple way to show or hide a given content in a HTML file using JavaScript dynamically. Here, I'm showing a way to hide a scrollbar by click calling div tag.

The code is this.

<style type="text/css">


{overflow: hidden;


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


<script type="text/javascript">

function ItemMouseOver() {

document.getElementById('DataDiv').style.overflow = 'auto';

}function ItemMouseOut() {

document.getElementById('DataDiv').style.overflow = '';

<div id="test" class="div" onmouseover="ItemMouseOver();" onmouseout="ItemMouseOut();"/>

What is given above is one JavaScript method called showHide(divId) a divtag to test and the div tag to be tested. See, I've given an unique ID to the div tag and kept 'style' empty. calling the div will change the scroll to style.overflow="auto" it enable the scroll bar. You can test this pasting the code in to a HTML file and opening it.  Each time you of opening the page.

This can be used to show/hide any thing in a given page such as tables, paragraphs, divisions etc. For, tags except div, just put them inside a div tag and do as said above.

No comments:

Post a Comment