Menu icon Foundation

Designer | Ottawa, ON & Worldwide

My Posts






  • 5
    Replies
  • Dropdown Hover Overlap Issue

    By Adam D

    dropdownhover

    I am using a dropdown instead of a tooltip to have some extra info pop up when a user hovers over an item in a list (so I've also added the 'data-options="is_hover:true"' parameter to the dropdown item). My issue is that since the dropdown remains open wh... (continued)

    Last Reply by Felicyia McClelland almost 4 years ago


  • 1
    Reply
  • Tooltip width/overflow issue

    By Adam D

    tooltipFoundation 5

    I am using tooltips on my site but am having some issues when dealing with the tooltip width. When adding a tooltip with a large browser, if there is a fair amount of text in the tooltip (which is the case for me) the tooltip extends to the width of th... (continued)

    Last Reply by Rafi Benkual about 5 years ago



My Comments

Adam D commented on Adam D's post almost 5 years

Thanks Wing-Hou! I guess I should have done a bit more research before posting... ;)

Adam D commented on Adam D's post almost 5 years

Anyone? :(

Adam D commented on Adam D's post about 5 years

Thanks for the update Rafi!

Adam D commented on Adam D's post about 5 years

Thanks for the reply Jordi. I've tried the method you suggested as well as the following:

 $(document).foundation({
  magellan : {
    threshold: 200
  }
});

But neither work for me. I've never actually been able to get the JS configuration parameters to work even after upgrading to the latest version of Foundation. Sigh...

Adam D commented on Adam D's post about 5 years

Thanks Rafi. However, I can't seem to get the destination offset to work.

 $(document).foundation({
  magellan : {
    destination_threshold: 100
  }
});

Also, I was using 'data-magellan-top-offset=' on my menu and that no longer seems to be working... :(

Adam D commented on Adam D's post about 5 years

Hi Charlie. There are a handful of jQuery plugins that you could use to add the smooth scroll but I simply added this bit of code to my JS:

 // Scroll to
$(document).ready(function() {
  function scrollToAnchor(aid){
    var aTag = $("div[id='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow'); // If you want to offset the destination, you can add + or - and the pixel value next to "top"
  }
  $(".magellan-menu a").click(function() { // Make sure you replace the selector with whatever you're using
    var href = $(this).attr('href').replace('#', '');
    scrollToAnchor(href);
  });
});

Hope this helps.

Adam D commented on Adam D's post about 5 years

Thanks Rafi. I'm assuming I have to do this because my one row eventually turns into two rows..?? Weird that this wasn't an issue before I upgraded. Also, the documentation on using the Grid doesn't mention anything about having to have columns adding up to 12 when using the "centered" feature. Odd...

http://foundation.zurb.com/docs/components/grid.html

Adam D commented on Adam D's post about 5 years

Thanks for the reply Rafi (and apologies for the delay). I have tried setting up a demo on JSFiddle to post on here but can't seem to recreate the issue.

I actually came up with a quick and dirty way to get around my problem with JS. Probably not the cleanest solution but it does the job.

 $('.item-with-dropdown-link').mouseout(
  function(evt) {
    evt.stopImmediatePropagation();
    evt.preventDefault();
    $('.f-dropdown').removeClass('open').css('left', '-99999px');
  }
);
$('.f-dropdown').mouseover(
  function(evt) {
    evt.stopImmediatePropagation();
    evt.preventDefault();
    $(this).removeClass('open').css('left', '-99999px');
  }
);

Adam D commented on Adam D's post about 5 years

Wow! You guys are awesome. I've been wracking my head over this for a while now. That seems to do the trick!

One thing though—what if I want the link to bring me to the destination and have it offset by a handful of pixels? I have some whitespace above my section heading so it would be nice if I could add a bit of a buffer when the menu takes users to that section. I guess an easy workaround for this is to add padding to the top of my heading but I'd prefer to avoid taking that approach.

Any ideas? Not sure if there is some secret magellan parameter I can add to achieve this... ;)

Adam D commented on Adam D's post over 5 years

Thanks for the replies guys. For the time being, I figure I should be able to manually fix the magellan destination issue (thanks @Ryan—I'll give ZeptoScroll a try). But yeah, no idea what is happening when the menu items are being highlighted at the wrong times (or being skipped as mentioned). Definitely open to any suggestions.

Posts Followed





  • 1
    Reply
  • Tooltip width/overflow issue

    By Adam D

    tooltipFoundation 5

    I am using tooltips on my site but am having some issues when dealing with the tooltip width. When adding a tooltip with a large browser, if there is a fair amount of text in the tooltip (which is the case for me) the tooltip extends to the width of th... (continued)

    Last Reply by Rafi Benkual about 5 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Adam D's post almost 5 years

Thanks Wing-Hou! I guess I should have done a bit more research before posting... ;)

You commented on Adam D's post almost 5 years

Anyone? :(

You commented on Adam D's post about 5 years

Thanks for the update Rafi!

You commented on Adam D's post about 5 years

Thanks for the reply Jordi. I've tried the method you suggested as well as the following:

 $(document).foundation({
  magellan : {
    threshold: 200
  }
});

But neither work for me. I've never actually been able to get the JS configuration parameters to work even after upgrading to the latest version of Foundation. Sigh...

You commented on Adam D's post about 5 years

Thanks Rafi. However, I can't seem to get the destination offset to work.

 $(document).foundation({
  magellan : {
    destination_threshold: 100
  }
});

Also, I was using 'data-magellan-top-offset=' on my menu and that no longer seems to be working... :(

You commented on Adam D's post about 5 years

Hi Charlie. There are a handful of jQuery plugins that you could use to add the smooth scroll but I simply added this bit of code to my JS:

 // Scroll to
$(document).ready(function() {
  function scrollToAnchor(aid){
    var aTag = $("div[id='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow'); // If you want to offset the destination, you can add + or - and the pixel value next to "top"
  }
  $(".magellan-menu a").click(function() { // Make sure you replace the selector with whatever you're using
    var href = $(this).attr('href').replace('#', '');
    scrollToAnchor(href);
  });
});

Hope this helps.

You commented on Adam D's post about 5 years

Thanks Rafi. I'm assuming I have to do this because my one row eventually turns into two rows..?? Weird that this wasn't an issue before I upgraded. Also, the documentation on using the Grid doesn't mention anything about having to have columns adding up to 12 when using the "centered" feature. Odd...

http://foundation.zurb.com/docs/components/grid.html

You commented on Adam D's post about 5 years

Thanks for the reply Rafi (and apologies for the delay). I have tried setting up a demo on JSFiddle to post on here but can't seem to recreate the issue.

I actually came up with a quick and dirty way to get around my problem with JS. Probably not the cleanest solution but it does the job.

 $('.item-with-dropdown-link').mouseout(
  function(evt) {
    evt.stopImmediatePropagation();
    evt.preventDefault();
    $('.f-dropdown').removeClass('open').css('left', '-99999px');
  }
);
$('.f-dropdown').mouseover(
  function(evt) {
    evt.stopImmediatePropagation();
    evt.preventDefault();
    $(this).removeClass('open').css('left', '-99999px');
  }
);

You commented on Adam D's post about 5 years

Wow! You guys are awesome. I've been wracking my head over this for a while now. That seems to do the trick!

One thing though—what if I want the link to bring me to the destination and have it offset by a handful of pixels? I have some whitespace above my section heading so it would be nice if I could add a bit of a buffer when the menu takes users to that section. I guess an easy workaround for this is to add padding to the top of my heading but I'd prefer to avoid taking that approach.

Any ideas? Not sure if there is some secret magellan parameter I can add to achieve this... ;)

You commented on Adam D's post over 5 years

Thanks for the replies guys. For the time being, I figure I should be able to manually fix the magellan destination issue (thanks @Ryan—I'll give ZeptoScroll a try). But yeah, no idea what is happening when the menu items are being highlighted at the wrong times (or being skipped as mentioned). Definitely open to any suggestions.

Posts Followed

Following

  • No Content

Followers

  • No Content