Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

offsetWidth

Status
Not open for further replies.
jammer1221

jammer1221

Programmer
Jul 30, 2003
352
US
Hey all,

I am having some trouble with some code I'm trying to write.
Here is a link to the page where you can see the page in action.

I am having a popup/tool tip display when you mouse over certain states. The trouble I am having is when you mouse over certain states (Ohio, Penn.,New Hampshire) they stick out well beyond 800px. My problem with that is if a person whose resolution is 800x600 views the page they won't be able to see all of the text.

So I wrote a little bit of script to calulate the total width of the DIV and if its over 750, scoot it over a little bit.

Its very hit or miss!

Here is the code in question...I have put in some window.status to kind of debug.
Code: 
if (document.getElementById("poofer").offsetWidth+document.getElementById("poofer").offsetLeft>750) {

where=document.getElementById("poofer").offsetWidth+document.getElementById("poofer").offsetLeft
totWidth=(document.getElementById("poofer").offsetWidth+document.getElementById("poofer").offsetLeft)-750

mLeft=mLeft-totWidth;
status="width: "+document.getElementById("poofer").offsetWidth+" Left: "+document.getElementById("poofer").offsetLeft+" Total "+where+" Subtraction: "+totWidth
}else {
where=document.getElementById("poofer").offsetWidth+document.getElementById("poofer").offsetLeft
status="NOT OVER width: "+document.getElementById("poofer").offsetWidth+" Left: "+document.getElementById("poofer").offsetLeft+" Total "+where+" table calc width: "+tableWidth

}

Feel free to view the page above and any help is very much appreciated!

P.S. My code gets a little sloppy especially when I get stuck somewhere, so please forgive me. I will try and explain the code as best I can.
 
Sort by date Sort by votes
As a side note - I clicked on all top-level links on your site, and not once did I see any reference to what "BSCS" stood for - not even on the "About BSCS" or "FAQ" pages. Perhaps this is something you could add - as I still have no idea!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I do not have time to go over your code and figure out what is going wrong but I have been working on similar code in the past and thought you might benefit from it.

My code will determine the current size of the screen not rely on a fixed size and it will determine the location of the page element the tip box is triggered from to determine it's placement. It prevents the tip box from reaching the left or right edge of the screen.

I was working on a version that would move the box left, right, up or down depending on proximity to the edges of the screen or if the current scroll position of the page would cause the box to appear off screen but I am having cross-browser issues getting accurate scroll information.

In any event try the code below. I have other versions around somewhere that actually move the box in from the edge where possible and expand the box size where it cannot be moved but I cannot find them at the moment.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>
  <!--
  #tipbox {position: absolute; z-index: 100;border: 1pt black solid; background: #FFFFD0; visibility: hidden; font-size:8pt; font-family: "verdana, arial"; color:#000000 }
  -->
</STYLE>
<SCRIPT type=text/JavaScript>
<!--
var tID;
var opacityID;
  function showObject(e,outtxt)
  {
    if (window.tID) clearTimeout(tID); //Clear any existing timer.
    if ( window.opacityID ) {
      clearTimeout(opacityID);
    }
    // Get the object based on browser implementation.
    if (!e) var e = window.event;
    if (e.target) var obj = e.target;
    else if (e.srcElement) var obj = e.srcElement;
    if (obj.nodeType == 3) var obj = obj.parentNode; // for Safari bug
    obj.style.cursor='pointer';
    var tipBox = document.getElementById('tipbox');
    setPosition(obj,tipBox);
    tipBox.innerHTML = outtxt;
    tipBox.style.visibility = "Visible";

    tipBox.style.opacity = '.1';
    tipFade(10);
  }

  function setPosition(obj,tipBox)
  {
    var scrWidth = document.body.scrollWidth -10;  // The -10 keeps the box from reaching the edge of the screen.
    var lftOffset = getOffset(obj, "Left");
    var boxWidth = tipBox.style.width.substring(0,tipBox.style.width.length-2); // The width set for the tipBox
    var totWidth = lftOffset + (boxWidth-0);
    if (totWidth > scrWidth) lftOffset = lftOffset - (totWidth - scrWidth); //Subtracts pixels to keep box 10px within right of window.
    if (lftOffset < 0) lftOffset = 0;
    if (document.captureEvents) {
      tipBox.style.left = lftOffset;
      tipBox.style.top = getOffset(obj, "Top");
    }
    else if ( window.event.clientX ) {
      tipBox.style.pixelLeft = lftOffset;
      tipBox.style.pixelTop = getOffset(obj, "Top");
    }
  }

  function getOffset(obj,which) { // Calculate and return the top and left position of an element relative to window.
    var amount = obj["offset"+which];
    if (which=="Top") amount+=obj.offsetHeight;
    obj = obj.offsetParent;
    while (obj!=null) {
      amount+=obj["offset"+which];
      obj = obj.offsetParent;
    }
    return amount;
  }

  function hideObject() {
    document.getElementById('tipbox').style.visibility = "hidden";
  }

  function closeTip() {
    tID = window.setTimeout("hideObject()",500);
  }

  function tipFade(opac) {
    var passed = parseInt(opac);
    var newOpac = parseInt(passed+10);
    var tipBox = document.getElementById('tipbox');
    if (newOpac < 80) {
      tipBox.style.opacity = '.'+newOpac;
      tipBox.style.filter = "alpha(opacity:"+newOpac+")";
      opacityID = window.setTimeout("tipFade('"+newOpac+"')",20);
    }
    else {
      tipBox.style.opacity = '.80';
      tipBox.style.filter = "alpha(opacity:80)";
    }
  }
//-->
</SCRIPT>
<!-- <DIV ID='tipbox' Style="width: 520"></div> -->
<DIV id=tipbox style="VISIBILITY: hidden"></DIV><B>Table cells</B><BR>
<TABLE width="100%" border=1>
  <TR>
    <TD id="one" onmouseover="showObject(event,'This is the long description for #1'); this.style.background = '#FFFFD0'" onmouseout="closeTip(); this.style.background = 'white'" align=left bgColor=#ffffff><FONT face="Verdana, Arial, Helvetica" size=1>Short description #1</FONT></TD>
    <TD id="two" onmouseover="showObject(event,'This is the long description for #2'); this.style.background = '#FFFFD0'" onmouseout="closeTip(); this.style.background = 'white'" align=left bgColor=#ffffff><FONT face="Verdana, Arial, Helvetica" size=1>Short description #2</FONT></TD>
    <TD id=three onmouseover="showObject(event,'This is the long description for #3'); this.style.background = '#FFFFD0'" onmouseout="closeTip(); this.style.background = 'white'" align=left bgColor=#ffffff><FONT face="Verdana, Arial, Helvetica" size=1>Short description #3</FONT></TD>
  </TR>
</TABLE>
<BR><BR>
<B>Text within a span tag</B>
<BR>
<SPAN onmouseover="showObject(event,'This is the long description for #1');" onmouseout=closeTip();>Short description #1</SPAN><BR><BR>
<SPAN onmouseover="showObject(event,'This is the long description for #2');" onmouseout=closeTip();>Short description #2</SPAN><BR><BR>
<SPAN onmouseover="showObject(event,'This is the long description for #3');" onmouseout=closeTip();>Short description #3</SPAN><BR><BR>
<BR><BR>
<B>Links</B><BR><A onmouseover="showObject(event,'This is the long description for #1');" onmouseout=closeTip(); href="#">Short description #1</A><BR><BR>
<A onmouseover="showObject(event,'This is the long description for #2');">Short description #2</A><BR><BR>
<A onmouseover="showObject(event,'This is the long description for #3');" onmouseout=closeTip(); href="#">Short description #3</A><BR><BR>
</BODY>
</HTML>

At my age I still learn something new every day, but I forget two others.
 
Upvote 0 Downvote
Oh, I found my newer code but it has problems I have not yet resolved involving quirks mode and issues flipping the tip box to the top of the element in FireFox.

I am going to post the code into a new post here and invite any of the pros here to take a look and see if they can suggest improvements to overcome the issues. The code may work for you as is depending on your needs though.


At my age I still learn something new every day, but I forget two others.
 
Upvote 0 Downvote
Sorry about that Dan, If you click right on "About BSCS" in the top nav, instead of clicking on one of the options in the pop-out menu, it should take you to where you need to go. But thanks for the heads up, and if you had a problem with it, imagine an average internet user. So thanks! We'll look into that.
P.S. Here’s the link for "About BSCS":
theniteowl, thank you very much for the code. I'll try and figure out what I can use in mine, and hopefully come to a solution.

I wasn't really asking for you to look over all my code, just a quick glance to see if you noticed anything blindingly obvious.

See, the code that resizes the "tool tip" is hit or miss. In other words sometimes when I mouse over a state it will resize the tool tip, but if I mouse over again in the exact same spot it won't. So it’s got to be something with my if statements.

I will try and incorporate theniteowls' code into mine and see if I can get it working, but the question is still open.

Thanks for the help everyone!

Matt
 
Upvote 0 Downvote
Sorry about that Dan, If you click right on "About BSCS" in the top nav, instead of clicking on one of the options in the pop-out menu, it should take you to where you need to go.
Click to expand...

FYI... I did click on the "About BCBS" in the top nav originally - and got to the same page you've given the link for. But there is definately no explanation on it as to what BCBS stands for.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Ok, I understand what you’re saying. Your right, we intentionally did that. First off, BSCS stands for Biological Sciences Curriculum Study, but we are trying to move away from that. When BSCS was first started it was all about Biology, now it’s more than that.

So short answer, we're trying to move away from what BSCS stands for, thus the reason you couldn't find it.

Matt
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

irbk
  • Locked
  • Question
Body offsetwidth help
Replies
1
Views
14
MOrac
MOrac

Part and Inventory Search

Sponsor

Back
Top