#1
  1. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2003
    Location
    Oregon
    Posts
    933
    Rep Power
    116

    How do I "send to back?"


    I have links like this:
    Code:
    <a    href="dosomething.php?action=add&amp;s=A-9&PHPSESSID=cb55242c6d177734ab45f07ad821b7ad"
                   id='A-9'
                   title='A-9 status=sold'
                    >
            <img src="http://example.com/images/x.gif" height="21" width="15" border="0" ><i>A-9</i></a>
    The problem is the image overlays the element where the tooltip is so when you mouseover the image area the tooltip doesn't happen.

    I can't just move the tooltip to the image element because I have a javascript that makes the tooltips really nice looking, but it is written for links

    I've tried fooling around with the z-index, I set it really high in the style id for the div that wraps these elements hopefully to bring them in front of the images. But it didn't do what I want.

    Any suggestions?

    You guys are great! Slowly I am getting my head around this css stuff. After I'm done paying the initiation fee (much headscratching and experimenting) I'll be one of those people too who goes around not being able to explain why css is so cool, just trust me it is.
    Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];
  2. #2
  3. I have a red lunch bag
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Jan 2005
    Location
    The armpit of Niagara
    Posts
    3,125
    Rep Power
    339
    Is there a chance you can post a link?
    Web Design Tips - Posting and You

    If I've been helpful, and/or you're really nice, consider buying something from my Amazon.com wishlist.
    • There is no room for pride when trying to be the best at what you do.
    • Friends don't let friends use bad code.
    The club is dead.
  4. #3
  5. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2003
    Location
    Oregon
    Posts
    933
    Rep Power
    116

    Smile OK. here's a link 4 now...


    http://tixrus.us/test.html

    click the top test button


    Warning:
    If I am messing around with this when you try it it might be broken at any given time. But I try not to let it stay broken for very long.

    See how every little square has a custom tool tip on it? Except not the ones with the X graphic because the graphic overlays the a element with the title.

    I would like to have a custom tool tip on the boxes with the X's on them also--maybe in a different color. I have a new idea how to do this, since now both the stylesheets and the html are dynamically generated. I'm back to thinking that the z-index is probably the right direction of thinking, that my previous attempt just didn't go far enough. We'll see how it works. Dinking with presentation in yet another dimension has me a little nervious, but oh well it's only bits & byets.

    I tried to give the graphic mouseup mousedown etc handlers that displayed the tooltip of its parent. But no dice.
    Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    IE, Firefox, and Opera 8 are reporting JS errors.

    I don't see the problem in Firefox and the tooltips aren't working in Opera 8.

    The tooltip's background is missing in IE.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2003
    Location
    Oregon
    Posts
    933
    Rep Power
    116
    Originally Posted by Kravvitz
    IE, Firefox, and Opera 8 are reporting JS errors.

    I don't see the problem in Firefox and the tooltips aren't working in Opera 8.

    The tooltip's background is missing in IE.
    I thought the tooltip was easier to read in IE without a background so I removed it, tho the png would be solid if I used that. I don't have Opera 8 to test on.

    Are you saying the X's have tooltips for you in your Firefox? because they don't in mine.

    One error in IE is a little cryptic: object required. I've read that's what IE throws when you are trying to tweak the properties of some id that currently isn't anyone's id and there may be other circumstances. Also it refers to some line but it couldn't be the html.
    Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Sorry, I misunderstood the problem.

    I suspect that the problem is with the JavaScript, not the z-index.

    How is the X being positioned?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2003
    Location
    Oregon
    Posts
    933
    Rep Power
    116

    Red face


    Here is the html code for a square with an X in it. The image is a child of the "a" element. The mouse stuff was my attempt to kludge it to get the title of the parent but it doesn't work. The nicetitle javascript was written by a third party.

    Code:
    <a    href="#"
               id='A-1'
               title='A-1 status=sold price=25'
    >
      <img src="http://tixrus.us/images/x.gif"  
          border="0" onmouseover="showNiceTitle(getParent(this,'A'));" 
          onmouseout="hideNiceTitle(getParent(this,'A'));" 
          onfocus="showNiceTitle(getParent(this,'A'));" 
          onblur="hideNiceTitle(getParent(this,'A'));"  
      />
     <i>
       A-1
      </i>
    </a>
    Here is some css that corresponds:
    Code:
    #normalseat-price25 a  {
      position: absolute;
      height: 21px;
      width: 15px;
      top: 0px;
      left: 0px;
      text-decoration: none;
    }
    
    #normalseat-price25 a i { visibility: hidden;  font-size: 0.01em; }
    
    #normalseat-price25 a img { height: 21px; width: 15px; }
    and here is the css for the A-1

    a#A-1 { top:154px; left: 222px; background: url(../images/blue75.png); }

    It's kinda a pain each one has to have its own background because that property doesn't inherit.

    all the seats of that size and price are in a div with id="normalseat-price25"

    The div id="normalseat-price25" is inside of another big div id=
    "venue", with relative position, and it's bg image is the seating plan.

    If I can do this without ffing with the z-index that would be really nice.
    Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    I'm 99% sure that the problem is with the JavaScript code, not the z-index.

    The JavaScript errors are another symptom of this problem.

    In nicetitle.js change
    Code:
        if (lnk.nodeType == 3) {
            // lnk is a textnode -- ascend parents until we hit a link
            lnk = getParent(lnk,"A");
        }
    to
    Code:
        if (lnk.nodeType == 3) {
            // lnk is a textnode -- ascend parents until we hit a link
            lnk = getParent(lnk,"A");
        } else if((lnk.nodeType == 1) && (lnk.tagName.toLowerCase() != 'a')) {
            lnk = getParent(lnk,"A");
        }
    Last edited by Kravvitz; August 8th, 2005 at 05:32 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2003
    Location
    Oregon
    Posts
    933
    Rep Power
    116
    Booha! Not sure why or what it means your fix but it worked! I was just getting to the node type thing and googling for it and not getting the good links.

    After dinking with it quite a bit I was realising that the mouse
    overs were going through (making it turn yellow) just fine, so it wasn't the Z-index. I'm glad I didn't open that can of worms.

    You deserve your forty seven reputation points. I wish I could give you more.

    Originally Posted by Kravvitz
    I'm 99% sure that the problem is with the JavaScript code, not the z-index.

    The JavaScript errors are another symptom of this problem.

    In nicetitle.js change
    Code:
        if (lnk.nodeType == 3) {
            // lnk is a textnode -- ascend parents until we hit a link
            lnk = getParent(lnk,"A");
        }
    to
    Code:
        if (lnk.nodeType == 3) {
            // lnk is a textnode -- ascend parents until we hit a link
            lnk = getParent(lnk,"A");
        } else if((lnk.nodeType == 1) && (lnk.tagName.toLowerCase() != 'a')) {
            lnk = getParent(lnk,"A");
        }
    Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    It's just some DOM1 code.

    You see the function was getting called on the element that recieved the mouseover first, which was the <img>, the function really needed to find the <a> that was the <img>'s parent. So by adding that code it checks if the element is an <a> and if it's not it finds the parent <a>.

    Originally Posted by monotreme
    You deserve your forty seven reputation points. I wish I could give you more.
    47?

    Comments on this post

    • cybersaga agrees : 11 points short.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  20. #11
  21. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2003
    Location
    Oregon
    Posts
    933
    Rep Power
    116
    I am still a little fuzzy on this. Most people just quit after it works but it looks like I may be doing a bit more of this so I would like to understand it 100%. DOM I basically of get: the document is representad as a big tree and everything is hierachical. Inheritance and OOP I get more than most PHP developers from the looks of some of the "classes" I see out there.

    From what I can understand of the nice code it just took all the "a"s and stripped their normal titles and replaced with these custom title attributes.

    I understand that the images are in front of their parents which are "a" elements. The "a"'s were already doing the mouseovers that I gave them which made them turn yellow and back. I'm guessing is normal behavor for element that receivs the mouse event just automatically passes to its parent if it doesn't have a handler for it? That would make sense...

    What I don't understand is if the mouse events were already being passed to the parent, and the parent added nicehandlers to its mouse handlers wouldn't the parent just do them, because they were already setup and working on all the "a"'s???

    nodetype 1 must be a graphic. ??

    Originally Posted by Kravvitz
    It's just some DOM1 code.

    You see the function was getting called on the element that recieved the mouseover first, which was the <img>, the function really needed to find the <a> that was the <img>'s parent. So by adding that code it checks if the element is an <a> and if it's not it finds the parent <a>.


    47?


    47: ballpark figure. close enough
    Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Yes, events "bubble" up the document tree unless they are stopped. The method of stopping them depends on which event model you are using.

    nodeType 1 is an element type.

    Originally Posted by myself (Kravvitz)
    IE doesn't support the nodeType constants, so you need to use the integers.

    1 element
    3 text
    8 comment

    There are other types, but those are the ones that I've seen show up as child nodes in the element node tree.
    Originally Posted by monotreme
    What I don't understand is if the mouse events were already being passed to the parent, and the parent added nicehandlers to its mouse handlers wouldn't the parent just do them, because they were already setup and working on all the "a"'s???
    Because the function was trying to access a property on the image that didn't exist since the property only existed for the <a> elements.


    Related links:

    http://www.quirksmode.org/dom/
    http://www.quirksmode.org/js/dom.html
    http://www.brainjar.com/
    http://www.w3.org/DOM/
    http://www.mozilla.org/docs/dom/domref/dom_doc_ref.html
    http://www.mozilla.org/docs/dom/domref/
    http://www.w3schools.com/htmldom/dom_obj_document.asp
    http://www.sitepoint.com/article/rough-guide-dom

    http://www.quirksmode.org/dom/w3c_events.html
    http://www.brainjar.com/dhtml/events/
    http://www.w3.org/TR/DOM-Level-2-Events/events.html
    http://www.oreillynet.com/pub/a/java...ls.html?page=1
    http://www.quirksmode.org/js/events_advanced.html
    http://www.quirksmode.org/js/events_compinfo.html
    http://developer.apple.com/internet/...entmodels.html
    http://www.quirksmode.org/js/introevents.html
    http://www.javascriptkit.com/dhtmltu...ventp2-1.shtml
    Last edited by Kravvitz; August 9th, 2005 at 03:37 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  24. #13
  25. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2003
    Location
    Oregon
    Posts
    933
    Rep Power
    116
    Originally Posted by Kravvitz
    nodeType 1 is an element type.

    Because the function was trying to access a property on the image that didn't exist since the property only existed for the <a> elements.
    Aha! The fcn had to refer back to original caller to get the property, and I had to tell it to get the property from the parent. BINGO.

    I will study those links diligently. If you are not a teacher you would make a good one. And I will try to make this work also in the evil browser if, as you predict it doesn't work there.
    Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];

IMN logo majestic logo threadwatch logo seochat tools logo