PDA

View Full Version : hintboxes inside a div tag

mrNewt
04-18-2006, 10:40 PM
Hi guys,

I have a simple html page with a lot of content. and some words I have something like a "hint box" - when you roll-over the word, a box next to your cursor will appear with more informations.

Now, I have put that whole page inside a div tag - this way I won't have to scroll the whole page down to the bottom and then the whole page up to the top ... . I just have to make that div tag scroll.

But when I do that, my "hint boxes" are getting screwed up. as soon as I start to scroll down, my hint boxes are getting farther and farther away down on the page. Is like they are not forced to be limited to the div tag size.

Does anyone know how to fix this? Or is there even a fix to this?
mrNewt
04-19-2006, 10:28 PM
no one? :( ... huh ...
tg
04-20-2006, 07:37 PM
since i dont know how you have implemented either the hint box or the div scrolling, all i can do is guess at one possible solution. that would be to target each and every 'hintbox' id, and then capture the scroll event and loop thru on scroll and move each 'hintbox' in the appropriate direction.... not ideal. but dont know what you currently have.
mrNewt
04-20-2006, 08:39 PM
For the hint boxes I used javascript. I will have this thing on top - on the <head> tag:

<script type="text/javascript">
var horizontal_offset="10px"
var vertical_offset="15px"
var ie=document.all
var ns6=document.getElementById&&!document.all
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWid th-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWi dth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeig ht-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}
function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}
function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}
function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}
if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox
</script>

and for each word that I want to put a hint box, I would use something like this:

<a href="#" onMouseover="showhint('Bla bla bla ... some hint text')">Roll Over Here for hint</a>


Now ... imagine you have a full scrolling page with ... 20-30 words that are having hint boxes. I don't want to run from an end to another all the time. I want to put them into a div tag with a nice scrolling bar. for the div tag I would use something like this:


<div style="BORDER-TOP: 0px; OVERFLOW: auto; WIDTH: 100%; HEIGHT: 414px">All the content from the page with the hint boxes is going here</div>


Now let's say that I scroll the div tag all the way to the bottom and go roll-over one of the words with a hint box ... as soon as I do that, the hint box will apear all the way down on the page - off the div tag. Is as that hint box somehow "thinks" there is no div tag and display in the same position as the original page.

I don't really know how to explain it, and hopefully I made myself clear - and hope someone will put a light for me at the end of this tunnel :).