Menu icon Foundation

Designer

My Posts


My Comments

Chris Davis commented on James Watkin's post over 1 year

Hmm... that seems short sighted. 

Chris Davis commented on James Watkin's post over 1 year

I was able to do a couple of quick tests involving clicking around on tabs/accordions and resizing in-between to try and replicate the error I was experiencing yesterday and it appears that you are correct, the smudge attributes seem to be the culprit in this issue.
I can use "data-deeplink" and "data-update-history" attributes and not get the console errors and breaking behavior I described yesterday.
Just in case anyone wants to research any further, I am on Win10/Chrome62 using Foundation v6.4.1 pre-compiled CSS version (I also confirmed this is an issue using a custom build of v6.4.2, was unable to download v6.4.3 from the zurb website to see if it was fixed in that version as claimed)

Chris Davis commented on James Watkin's post over 1 year

Reposting my previous comments from yesterday just for continuity sake...
 
I was getting a very similar error to the one you reported in GitHub but after playing around a bit the error reported in the console now looks like this...
(firewall won't let me upload screen-shot so copy/pasting console error)
foundation.min.js:3 TypeError: url.indexOf is not a function    at jQuery.fn.init.jQuery.fn.load (jquery.js:9823)    at e._checkDeepLink (foundation.min.js:1)    at e.value (foundation.min.js:1)    at e.value (foundation.min.js:1)    at e.t (foundation.min.js:1)    at new e (foundation.min.js:1)    at e.value (foundation.min.js:4)    at e.value (foundation.min.js:4)    at e.value (foundation.min.js:4)    at e.t (foundation.min.js:1)(anonymous) @ foundation.min.js:3each @ jquery.js:362each @ jquery.js:157(anonymous) @ foundation.min.js:3each @ jquery.js:362reflow @ foundation.min.js:3e @ foundation.min.js:3(anonymous) @ app.js:1
...not only does it cause accordion to cease functioning but it also seems to break my responsive top-bar sticky nav menu. Oddly enough, tabs work fine at desktop viewports. It only seems to happen if I use data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" --- data-deep-link="true" by itself does not seem to cause any issues

Chris Davis commented on James Watkin's post over 1 year

I was getting a very similar error to the one you reported in GitHub but after playing around a bit the error reported in the console now looks like this...
(firewall won't let me upload screen-shot so copy/pasting console error)
foundation.min.js:3
TypeError: url.indexOf is not a function
    at jQuery.fn.init.jQuery.fn.load (jquery.js:9823)
    at e._checkDeepLink (foundation.min.js:1)
    at e.value (foundation.min.js:1)
    at e.value (foundation.min.js:1)
    at e.t (foundation.min.js:1)
    at new e (foundation.min.js:1)
    at e.value (foundation.min.js:4)
    at e.value (foundation.min.js:4)
    at e.value (foundation.min.js:4)
    at e.t (foundation.min.js:1)
(anonymous) @ foundation.min.js:3
each @ jquery.js:362
each @ jquery.js:157
(anonymous) @ foundation.min.js:3
each @ jquery.js:362
reflow @ foundation.min.js:3
e @ foundation.min.js:3
(anonymous) @ app.js:1
...not only does it cause accordion to cease functioning but it also seems to break my responsive top-bar sticky nav menu. Oddly enough, tabs work fine at desktop viewports. It only seems to happen if I use data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" --- data-deep-link="true" by itself does not seem to cause any issues

Chris Davis commented on Chris Davis's post about 3 years

After wrestling with this issue for a couple of days I decided to use a little jquery to remove the style attribute but then came to the realization that I may be jousting at windmills. By removing the inline style attribute for the height of the #menu-container div and setting the .sticky-container div to position:relative I was able to make the menu slide down and push the page content down as needed to accomodate the height of the expanded menu, but I noticed two things, 1.) the desired behavior only worked if the user had not scrolled down the page at all, otherwise the menu still covered the page content which makes sense considering the DOM flow, 2.) removing the height attribute from #menu-container div caused the top-bar to have a 1REM top-margin that would appear as the user scrolled from the bottom back to the top of the page and 3.) considering the effect described in points #1 and #2, it was probably better from a user-experience/consistency-sake for the menu to always slide out to cover the page content. So for now I've decided to not fight against the framework and use the default behavior.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on James Watkin's post over 1 year

Hmm... that seems short sighted. 

You commented on James Watkin's post over 1 year

I was able to do a couple of quick tests involving clicking around on tabs/accordions and resizing in-between to try and replicate the error I was experiencing yesterday and it appears that you are correct, the smudge attributes seem to be the culprit in this issue.
I can use "data-deeplink" and "data-update-history" attributes and not get the console errors and breaking behavior I described yesterday.
Just in case anyone wants to research any further, I am on Win10/Chrome62 using Foundation v6.4.1 pre-compiled CSS version (I also confirmed this is an issue using a custom build of v6.4.2, was unable to download v6.4.3 from the zurb website to see if it was fixed in that version as claimed)

You commented on James Watkin's post over 1 year

Reposting my previous comments from yesterday just for continuity sake...
 
I was getting a very similar error to the one you reported in GitHub but after playing around a bit the error reported in the console now looks like this...
(firewall won't let me upload screen-shot so copy/pasting console error)
foundation.min.js:3 TypeError: url.indexOf is not a function    at jQuery.fn.init.jQuery.fn.load (jquery.js:9823)    at e._checkDeepLink (foundation.min.js:1)    at e.value (foundation.min.js:1)    at e.value (foundation.min.js:1)    at e.t (foundation.min.js:1)    at new e (foundation.min.js:1)    at e.value (foundation.min.js:4)    at e.value (foundation.min.js:4)    at e.value (foundation.min.js:4)    at e.t (foundation.min.js:1)(anonymous) @ foundation.min.js:3each @ jquery.js:362each @ jquery.js:157(anonymous) @ foundation.min.js:3each @ jquery.js:362reflow @ foundation.min.js:3e @ foundation.min.js:3(anonymous) @ app.js:1
...not only does it cause accordion to cease functioning but it also seems to break my responsive top-bar sticky nav menu. Oddly enough, tabs work fine at desktop viewports. It only seems to happen if I use data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" --- data-deep-link="true" by itself does not seem to cause any issues

You commented on James Watkin's post over 1 year

I was getting a very similar error to the one you reported in GitHub but after playing around a bit the error reported in the console now looks like this...
(firewall won't let me upload screen-shot so copy/pasting console error)
foundation.min.js:3
TypeError: url.indexOf is not a function
    at jQuery.fn.init.jQuery.fn.load (jquery.js:9823)
    at e._checkDeepLink (foundation.min.js:1)
    at e.value (foundation.min.js:1)
    at e.value (foundation.min.js:1)
    at e.t (foundation.min.js:1)
    at new e (foundation.min.js:1)
    at e.value (foundation.min.js:4)
    at e.value (foundation.min.js:4)
    at e.value (foundation.min.js:4)
    at e.t (foundation.min.js:1)
(anonymous) @ foundation.min.js:3
each @ jquery.js:362
each @ jquery.js:157
(anonymous) @ foundation.min.js:3
each @ jquery.js:362
reflow @ foundation.min.js:3
e @ foundation.min.js:3
(anonymous) @ app.js:1
...not only does it cause accordion to cease functioning but it also seems to break my responsive top-bar sticky nav menu. Oddly enough, tabs work fine at desktop viewports. It only seems to happen if I use data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" --- data-deep-link="true" by itself does not seem to cause any issues

You commented on Chris Davis's post about 3 years

After wrestling with this issue for a couple of days I decided to use a little jquery to remove the style attribute but then came to the realization that I may be jousting at windmills. By removing the inline style attribute for the height of the #menu-container div and setting the .sticky-container div to position:relative I was able to make the menu slide down and push the page content down as needed to accomodate the height of the expanded menu, but I noticed two things, 1.) the desired behavior only worked if the user had not scrolled down the page at all, otherwise the menu still covered the page content which makes sense considering the DOM flow, 2.) removing the height attribute from #menu-container div caused the top-bar to have a 1REM top-margin that would appear as the user scrolled from the bottom back to the top of the page and 3.) considering the effect described in points #1 and #2, it was probably better from a user-experience/consistency-sake for the menu to always slide out to cover the page content. So for now I've decided to not fight against the framework and use the default behavior.

Posts Followed

Following

  • No Content

Followers

  • No Content