dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Margin property and script conflict

  1. #1
    Join Date
    Apr 2011
    Posts
    15

    resolved [RESOLVED] Margin property and script conflict

    I've encountered a problem with two scripts while working on a site.

    There's a list in one of the containers :

    HTML Code:
    <ol class="album-playlist">
      <li><a href="#">Track 1</a><span class="hide"><a href="#" class="tip_trigger"><span class="tip">Edit</span></a></li>
      <li><a href="#">Track 2</a><span class="hide"><a href="#" class="tip_trigger"><span class="tip">Edit</span></a></li>
    </ol>
    Each element (track 1, track 2 etc.) has a link - an icon, which is hidden and made visible on mousover with the following:
    HTML Code:
     $('.album-playlist li').mouseover(function() {
                         $('.icons', this).removeClass('hide');
                     });
    
                     $('.album-playlist li').mouseout(function() {
                         $('.icons', this).addClass('hide');
                     });
    The icons also have tooltips ;

    HTML Code:
    $(document).ready(function() {
        //Tooltips
        $(".tip_trigger").hover(function(){
            tip = $(this).find('.tip');
            tip.show(); //Show tooltip
        }, function() {
            tip.hide(); //Hide tooltip
        }).mousemove(function(e) {
            var mousex = e.pageX + 20; //Get X coodrinates
            var mousey = e.pageY + 20; //Get Y coordinates
            var tipWidth = tip.width(); //Find width of tooltip
            var tipHeight = tip.height(); //Find height of tooltip
    
            //Distance of element from the right edge of viewport
            var tipVisX = $(window).width() - (mousex + tipWidth);
            //Distance of element from the bottom of viewport
            var tipVisY = $(window).height() - (mousey + tipHeight);
    
            if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                mousex = e.pageX - tipWidth - 20;
            } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                mousey = e.pageY - tipHeight - 20;
            }
            //Absolute position the tooltip according to mouse position
            tip.css({  top: mousey, left: mousex });
        });
    });
    Now it all worked fine...until I introduced the custom scrollbar from there :
    http://plugins.jquery.com/project/jScrollPane into the same div. When I did, the tooltip appeared "corrupted" - it didn't appear anymore or it did but for a split second.


    And after debugging I've managed to find the culprit :

    It's the following class, used to center the layout :

    .container { width:960px; margin:auto; }

    The tooltip+scrollbar started to work properly after I removed the margin:auto from that class. Changing margin into anything else (e.g. 15%) causes the same problem.

    Maybe it has something to do with the inheritance of margin property?
    Any solutions/workarounds?

  2. #2
    Join Date
    Apr 2011
    Posts
    15
    Problem solved.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles