CODEWITHSUNDEEP
javascript
AmitChaudhary
AmitChaudhary

Reputation: 161

open div with the help of javascript

I want to open div when i take my mouse cursor on some specific link, and hide that div when i mouesout from the link.

Upvotes: 1

Views: 209

Answers (3)

Ken Redler
Ken Redler

Reputation: 23943

Old school:

<a href="#" id="foo" onmouseover="togglediv();" onmouseout="togglediv();">Toggler</a>
<div id="bar">Content</div>

And the js:

togglediv = function() {
  var mydiv = document.getElementById('bar');
  mydiv.style.display = mydiv.style.display == '' ? 'block' : '';
}

If you don't want to lard up your HTML with inline event handlers (and you shouldn't), you can go with something like this:

function setupHover(id){
  var el = document.getElementById(id);
  if (el.addEventListener) { // modern browsers
    el.addEventListener ('mouseover',togglediv,false);
    el.addEventListener ('mouseout',togglediv,false);
  } else if (el.attachEvent) { // IE
    el.attachEvent ('onmouseover',togglediv);
    el.attachEvent ('onmouseout',togglediv);
  } else { // anybody else
    el.onmouseover = togglediv;
    el.onmouseout = togglediv;
}

@idealmachine shows a nice way to encapsulate this in a listener function in his(?) answer.

Then you'd call setupHover('foo') in your onload:

window.onload = function(){
  setupHover('foo');
  // other stuff
};

Even easier, if you're using a library (jQuery, for example), you can do this while transparently abstracting away cross-browser differences:

$(document).ready( function(){ // when the DOM is loaded
  $('a#foo').hover( // listen for hovers on the <a>
    function(){ 
      $('#bar').toggle(); // and toggle visiblity directly
      // $('#bar').toggleClass('visible'); // or toggle a class to achieve same
    } 
  );
});

That's probably easiest, although you do need to include jQuery or your equivalent library of choice.

All assume your div is initially hidden:

<style type="text/css">
div#yourdiv { display: none; }
</style>

Upvotes: 1

PleaseStand
PleaseStand

Reputation: 32102

Here's a solution that does not use jQuery. jQuery makes this possible in many fewer lines of code. Just read the documentation of methods like .show and .bind and you will easily see why.

The code below uses JavaScript's ability to set dynamic CSS styles. It also attaches event handlers entirely within JavaScript to remain as unobtrusive as possible in the HTML. Here's a live link to my example so that you can see if this is what you want or not.

HTML:

<a id="myMagicLink" href="http://www.google.com/">My Magic Link</a>
<div id="openingDiv">Opens a div</div>

Example CSS:

#openingDiv {
    background-color: #ffc;
    border: 1px solid;
    padding: 0.5em;
    display: none;
    position: absolute;
    left: 100px;
    top: 100px;
}

JavaScript:

function listenForEvent(elem, eventType, handler) {
    if(elem.addEventListener) {
        elem.addEventListener(eventType, handler, false);
    }
    else {
        elem.attachEvent('on' + eventType, handler);
    }
}

listenForEvent(window, 'load', function() {
    var link = document.getElementById('myMagicLink'),
        div = document.getElementById('openingDiv');

    listenForEvent(link, 'mouseover', function() {
        div.style.display = 'block';
    });

    listenForEvent(link, 'mouseout', function() {
        div.style.display = 'none';
    });

});

Upvotes: 1

Bhanu Prakash Pandey
Bhanu Prakash Pandey

Reputation: 3785

try this

    <script type="text/javascript">
function show(divID) {
var item = document.getElementById(divID);
if (item) {
item.className='unhidden';
}
}
function hide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className='hidden';
}
}
</script>

<style type="text/css">
.hidden {
display: none;
}

.unhidden {
display: block;
}
</style>

<p><a href="javascript:void(0);" onmouseover="show('test1');" onmouseout="hide('test1')">Show/Hide</a></p>

<div id="test1" class="hidden">
testing
</div>

Upvotes: 1

Related Questions