CODEWITHSUNDEEP
javascripthtmlcss
Deep 3015
Deep 3015

Reputation: 10075

Issue in displaying pop-up div over target element

I am trying to display a popup div onMouseHover on the image. Currently, the pop is displayed under the scroll bar. I need to display this a floating popup type over the scroll bar of the div instead of hidding beneath the scroll bar.

Thanks in advance!

Sample Code:

CSS

.popBox {
        margin: -50px 50px 0px 50px;
        z-index: 2;
        width: 60px;
        padding: 0.3em;
        border: 1px solid gray;
    }
.images {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
div.scroll {
    background-color: #00FFFF;
    width:80px;
    height: 200px;
    overflow: scroll;
}
</style>

JavaScript

<script>
  function showBox(text, obj) {
        helpNode = document.createElement('div');
        helpNode.id = 'popBox';
        helpNode.setAttribute('class','popBox');
        helpNode.innerHTML = text;
        obj.appendChild(helpNode);
  }

  function hideBox() {
        node = document.getElementById('popBox');
        node.parentNode.removeChild(node);
  }
</script>

HTML

<body>

<div class="scroll" style="margin:0px auto">
 <b onMouseOver="showBox('<b>Foo1</b><br /> Bar1', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo2</b><br /> Bar2', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo3</b><br /> Bar3', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo4</b><br /> Bar4', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></b></br>

</div>

</body>
</html>

Upvotes: 1

Views: 310

Answers (3)

Malcolm
Malcolm

Reputation: 784

Try adding position: absolute; to .popBox

CSS

.popBox {
    margin: -50px 50px 0px 50px;
    z-index: 2;
    width: 60px;
    padding: 0.3em;
    border: 1px solid gray;
    position: absolute;
    }
.images {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    }
div.scroll {
    background-color: #00FFFF;
    width:80px;
    height: 200px;
    overflow: scroll;
    }

JavaScript

  function showBox(text, obj) {
        helpNode = document.createElement('div');
        helpNode.id = 'popBox';
        helpNode.setAttribute('class','popBox');
        helpNode.innerHTML = text;
        obj.appendChild(helpNode);
  }

  function hideBox() {
        node = document.getElementById('popBox');
        node.parentNode.removeChild(node);
  }

HTML

<div class="scroll" style="margin:0px auto">
    <b onMouseOver="showBox('<b>Foo1</b><br /> Bar1', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo2</b><br /> Bar2', this)" onmouseout="hideBox()" ><input type="image" class="images"  src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo3</b><br /> Bar3', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></b></br>
    <b onMouseOver="showBox('<b>Foo4</b><br /> Bar4', this)" onmouseout="hideBox()" ><input type="image" class="images"   src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></b></br>
</div>

DEMO

Upvotes: 1

bronzehedwick
bronzehedwick

Reputation: 3013

You will have to append the nodes outside of the element that has overflow: scroll applied to it. By it's nature, overflow: scroll will make your popups need scrolling to see.

You'll probably want to add another wrapper div around the element, and give it position: relative, append your popups to that new wrapper div, and position them with position: absolute (the position: relative on the new wrapper div makes the absolutely positioned children positioned absolutely relative to that element.)

Upvotes: 0

Devin
Devin

Reputation: 7720

I tried your code in fiddle and it doesn't work for me, so something must be missing, but to handle your CSS issues, you need to add a position to the z-index'd elements. So, in your case would be like this:

div.scroll {
background-color: #00FFFF;
width:180px;
height: 200px;
overflow: scroll;
position:relative;
z-index:-1
}

This way, that pop out will be over the scrollbar.

Also, as we're at it, replace </br> by <br/> or simply add .images{display:block}

Upvotes: 0

Related Questions