The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Margin property and script conflict

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #32684

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

    There’s a list in one of the containers :

    1. Track 1Edit

    2. Track 2Edit

    3. Each element (track 1, track 2 etc.) has a link - an icon, which is hidden and made visible on mousover with the following:

       $('.album-playlist li').mouseover(function() {
      $('.icons', this).removeClass('hide');

      $('.album-playlist li').mouseout(function() {
      $('.icons', this).addClass('hide');

      The icons also have tooltips :

      $(document).ready(function() {
      tip = $(this).find('.tip');; //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 : 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?

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.