SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE issue with tooltip

    Hi,

    Take a loop at this page:

    http://babiesinthecity.co.uk/freebaby/

    If you hover over the "New to Freebaby" box, you will see a nice red tooltip effect, this only works in firefox?

    Can anyone help me find out why it does not work in IE? This is the JavaScript:

    PHP Code:
         <script type="text/javascript">  
         $(
    document).ready(function() {  
       
         
    //Select all anchor tag with rel set to tooltip  
         
    $('a[rel=tooltip]').mouseover(function(e) {  
               
             
    //Grab the title attribute's value and assign it to a variable  
             
    var tip = $(this).attr('title');      
               
             
    //Remove the title attribute's to avoid the native tooltip from the browser  
             
    $(this).attr('title','');  
               
             
    //Append the tooltip template and its value  
             
    $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' tip '</div><div class="tipFooter"></div></div>');       
               
             
    //Set the X and Y axis of the tooltip  
             
    $('#tooltip').css('top'e.pageY 10 );  
             $(
    '#tooltip').css('left'e.pageX 20 );  
               
             
    //Show the tooltip with faceIn effect  
             
    $('#tooltip').fadeIn('500');  
             $(
    '#tooltip').fadeTo('10',0.8);  
               
         }).
    mousemove(function(e) {  
           
             
    //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse  
             
    $('#tooltip').css('top'e.pageY 10 );  
             $(
    '#tooltip').css('left'e.pageX 20 );  
               
         }).
    mouseout(function() {  
           
             
    //Put back the title attribute's value  
             
    $(this).attr('title',$('.tipBody').html());  
           
             
    //Remove the appended tooltip template  
             
    $(this).children('div#tooltip').remove();  
               
         });  
       
     });  
     
    </script> 
    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Location
    Perundurai, Tamilnadu, India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are few javascript errors, if you fix those errors. Some problem in DOCTYPE line also. After fixing those problems, i think your problem will automatically solved.

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, what Doctype errors can you see?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Location
    Perundurai, Tamilnadu, India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you goto Error Console in Firefox, you will see three errors and few warnings. Fix those three errors and check it out.

  5. #5
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok i've totally changed the javascript, but am having a problem in IE.. yet again..

    http://www.babiesinthecity.co.uk/freebaby/

    This is the JS:

    http://www.nuyuu.com/js/tooltip.js
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you download firefox and install web developer you can literally see where the errors are coming from.

    1:
    Error: syntax error
    Source File: http://www.babiesinthecity.co.uk/fre...ct_modified.js
    Line: 2
    Source Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Seems you have a new line before the doctype. Check if you're doing something wrong in that area.

    2.

    Error: swfobject is not defined
    Source File: http://www.babiesinthecity.co.uk/freebaby/
    Line: 136
    When you did define the swfobject variable? (ie var swfobject = 'example';)

    3.

    Error: elem is null
    Source File: http://www.babiesinthecity.co.uk/js/validation.js
    Line: 16
    In your validation.js you are trying to get an element by using "this.textboxId". Which references a node. The problem is that your page has not yet loaded so it cannot find that specific node.

    You need to wrap it in the $(document).ready(function() {});

    I don't understand why you have loaded jquery twice.
    Follow me @YaderHernandez

  7. #7
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off topic:

    I looked at your hover. The problem with it is that I can't read all the text. The button's at the edge of the window, and I have to manipulate horizontal scrolling to see part of it.

    Perhaps you need a different way of displaying that info.

    Here's a screenshot of my best effort to read it.

    By the way, I'm on a netbook (small screen) running Chrome on Linux.
    Attached Images Attached Images

  8. #8
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    If you take a look now,

    http://babiesinthecity.co.uk/freebaby/

    And place your mouse over it works both in IE, and Firefox. But i need to apply a margin top or something to push it down but it doesn't seem to work.. Otherwise you can't really view it..

    Any ideas?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you position container inwards instead of outwards.
    Follow me @YaderHernandez

  10. #10
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry how do you mean?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  11. #11
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're container is going off the entire design upwards. Why don't you make the tool tip show up going downwards and going INTO the design?
    Follow me @YaderHernandez

  12. #12
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Cerium View Post
    You're container is going off the entire design upwards. Why don't you make the tool tip show up going downwards and going INTO the design?
    Actually, billy_111, it shouldn't unconditionally go downwards. It should check the available space, and if there's space to make it go downwards, then fine. Else, make it go upwards. Because if your image is located low on the user's screen (quite possible on netbooks), then the rollover will be mostly hidden and users will be confused about how to see it all (I watch users, and I know how easily they get confused).

    Think of how popup mennus (right-click menus) work. They adjust their position so that they never run off the screen. Your rollover needs to do the same.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •