Geek Answers Handbook

How to bind a div to another element

I am creating a voting system. When the user clicks on the link with the class "vote", the voting field appears only on the link with a click. At the moment, it looks like this:

enter image description here

My problem is that if the page scrolls, then the voting field is not located correctly. I want it to always appear just below the link and stick to the link even when scrolling through the page.

My container looks like this:

#vote_container { position: fixed; height: 82px; min-height: 83px; background-color: #e7edf3; border: 3px solid #d3d6d8; border-radius: 10px; left: 40%; margin-top: 6px; padding: 10px; text-align: left; top: 60%; z-index: 199; }

And this is the code that I use to place the container:

 var pos = $(this).offset(); var width = $(this).width(); $("#vote_container").css({ "left": (pos.left - 16) + "px", "top": (pos.top + 28) + "px" });

Ive even created a simplified example in jsFiddle.

+4
source share
4 answers

Does #vote_container alter the absolute solution to your problem? http://jsfiddle.net/xkNqG/9/

EDIT: Also, in css, I added display:none to the added function $ ('# vote_container'). Show ()

+6
source

#vote_container should not be "position: fixed" since ngen says instead it should be "position: absolute" here is my fiddle I simplified your css (for temporary purposes) to help get to the root of the problem and add more text, so that the script actually demonstrates a problem with scrolling.

+1
source

If you want a clean css solution try to do this.

CSS

 .tipLink{ color:#33f; cursor:pointer; position:relative; } .tip{ position:absolute; display:none; top:80%; left:110%; background-color:#dddddd; border:1px solid black; width:100px; color:black; z-index:20; padding:3px; -webkit-border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; text-align:center; } .tipLink:hover .tip{ display:block; }

HTML

 <span class="tipLink"> Mouse Over Me <span class="tip">Hello World</span> </span>

You will need to put the internal span tag in the design you need, but this should work.

0
source

Why don't you use the jQuery tooltip plugin, http://bassistance.de/jquery-plugins/jquery-plugin-tooltip and improve it by putting it the way you want. It already processes positioning and may contain text or markup.

0
source

More articles:


All Articles