Menu icon Foundation

Designer | Atlanta

Front-end web design/development. You know - HTML, CSS, jQuery, that sort of thing.

My Posts









  • 1
    Reply
  • Forum Issues

    By Bob Sawyer

    zurbFoundationforum

    Anyone else having issues with the forum here lately? Aside from all the Reddit spam that's been popping up lately, this morning I'm getting only 4 posts per page, comprising 2 articles and 2 duplicates with different attributes. See attached screenshot. ... (continued)

    Last Reply by Rafi Benkual over 2 years ago


  • NEW
  • Joyride Issues

    By Bob Sawyer

    joyridecookiestemplate

    PARTIAL SOLUTION: I got the cookie issue solved, but had to go all over the place searching for answers, and finally found this on StackOverflow. First of all, the Joyride docs are woefully incomplete. They do not mention anywhere that: 1. You must ... (continued)


My Comments

Bob Sawyer commented on Bob Sawyer's post 3 months

Aannnnnd, not so fast -- it worked for a bit, and then I started getting this:
Uncaught TypeError: $ is not a function
at HTMLDocument.<anonymous> (scripts.js?ver=e248643…:29)
at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
at Object.trigger (jquery.js?ver=1.12.4:3)
at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
at y (jquery.js?ver=1.12.4:4)
at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)
Now I'm thoroughly frustrated. I'm specifically passing ($) in the function call. If I remove that, it reverts to the original error. 
Anyone? Help, please?

Bob Sawyer commented on Bob Sawyer's post 3 months

Solved it, even if I don't understand why it's solved. Following the note here (https://github.com/zurb/foundation-sites/issues/8482#issuecomment-206819207) I changed 
jQuery( document ).ajaxComplete( function() {
to
jQuery( document ).ajaxComplete( function($) {
and that fixed the issue, and the accordion now works. And all is right with the world.

Bob Sawyer commented on Bob Sawyer's post 3 months

After digging around I found this on another post re: Equalizer not working with Ajax-generated content, and tried:
jQuery( document ).ajaxComplete( function() {
jQuery( this ).foundation( 'accordion', 'reflow' );
});
With no luck. And then I checked the Console:
foundation.min.js?ver=6.2.3:1 Uncaught ReferenceError: We're sorry, 'accordion' is not an available method for this element.
at a.fn.init.a as foundation
at HTMLDocument.<anonymous> ((index):369)
at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
at Object.trigger (jquery.js?ver=1.12.4:3)
at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
at y (jquery.js?ver=1.12.4:4)
at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)
which seems a bit odd, as accordion is included. Hmmm...

Bob Sawyer commented on Dario Bilenchi's post over 1 year

Ahh... sorry, I missed the "keyboard" part of your original post.

Well, you're going to have to add a .keyup or .keypress (not as widely supported) function, check for the key pressed, and if it's equal to the arrow keys, fire the appropriate "next" or "prev" action on the Orbit slider. I would mock that up for you but I'm "pressed" for time at the moment... :)

Bob Sawyer commented on Stephanie Fuda's post over 1 year

I'm of the opinion that it's bad UI to add a video directly to a slider. If it were me, I would add a screenshot of the video's opening image, preferably with the "play" button overlay so folks know it's a video, but when they click it, they're taken to another page where the video plays, or, at the very least, it opens a modal window containing the video.

Bob Sawyer commented on Dario Bilenchi's post over 1 year

I'm not understanding your request. So, instead of advancing or regressing the slider blocks, you want to swap out the image in the current block instead?

Bob Sawyer commented on Maco acero's post over 1 year

In your Orbit container, where you have other data-xxxx attributes, add in one for data-options:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false" data-options="autoplay:false;>

Bob Sawyer commented on Hristina Mortensen's post over 1 year

We've run into that situation as well. It doesn't seem to create any issues if you remove the !important from the declaration. I say go for it.

Bob Sawyer commented on Benjamin Coury's post over 1 year

Following for answers. I need this, too.

Bob Sawyer commented on jinch's post over 1 year

Ah, yes - I goofed. The second script should be:

 if (window.location.search) {
     var showModal = getQueryVariable('showModal');
     if (showModal == 'yes') {
          $('#myModal').foundation('reveal', 'open');
     }
}

That does indeed work:

http://codepen.io/bobsawyer/full/YyNmMj/?showModal=yes

Posts Followed






  • 1
    Reply
  • By Meg McGowan

    I want to add a border to the bottom of my sticky navigation bar, but I only want the border to show up after the scroll. Basically when you first see the navigation there is no border, but after you scroll and it fixes itself to the top there is a border on the bottom

    Last Reply by Bob Sawyer over 1 year ago





Following

Followers

My Posts

My Comments

You commented on Bob Sawyer's post 3 months

Aannnnnd, not so fast -- it worked for a bit, and then I started getting this:
Uncaught TypeError: $ is not a function
at HTMLDocument.<anonymous> (scripts.js?ver=e248643…:29)
at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
at Object.trigger (jquery.js?ver=1.12.4:3)
at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
at y (jquery.js?ver=1.12.4:4)
at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)
Now I'm thoroughly frustrated. I'm specifically passing ($) in the function call. If I remove that, it reverts to the original error. 
Anyone? Help, please?

You commented on Bob Sawyer's post 3 months

Solved it, even if I don't understand why it's solved. Following the note here (https://github.com/zurb/foundation-sites/issues/8482#issuecomment-206819207) I changed 
jQuery( document ).ajaxComplete( function() {
to
jQuery( document ).ajaxComplete( function($) {
and that fixed the issue, and the accordion now works. And all is right with the world.

You commented on Bob Sawyer's post 3 months

After digging around I found this on another post re: Equalizer not working with Ajax-generated content, and tried:
jQuery( document ).ajaxComplete( function() {
jQuery( this ).foundation( 'accordion', 'reflow' );
});
With no luck. And then I checked the Console:
foundation.min.js?ver=6.2.3:1 Uncaught ReferenceError: We're sorry, 'accordion' is not an available method for this element.
at a.fn.init.a as foundation
at HTMLDocument.<anonymous> ((index):369)
at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
at Object.trigger (jquery.js?ver=1.12.4:3)
at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
at y (jquery.js?ver=1.12.4:4)
at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)
which seems a bit odd, as accordion is included. Hmmm...

You commented on Dario Bilenchi's post over 1 year

Ahh... sorry, I missed the "keyboard" part of your original post.

Well, you're going to have to add a .keyup or .keypress (not as widely supported) function, check for the key pressed, and if it's equal to the arrow keys, fire the appropriate "next" or "prev" action on the Orbit slider. I would mock that up for you but I'm "pressed" for time at the moment... :)

You commented on Stephanie Fuda's post over 1 year

I'm of the opinion that it's bad UI to add a video directly to a slider. If it were me, I would add a screenshot of the video's opening image, preferably with the "play" button overlay so folks know it's a video, but when they click it, they're taken to another page where the video plays, or, at the very least, it opens a modal window containing the video.

You commented on Dario Bilenchi's post over 1 year

I'm not understanding your request. So, instead of advancing or regressing the slider blocks, you want to swap out the image in the current block instead?

You commented on Maco acero's post over 1 year

In your Orbit container, where you have other data-xxxx attributes, add in one for data-options:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false" data-options="autoplay:false;>

You commented on Hristina Mortensen's post over 1 year

We've run into that situation as well. It doesn't seem to create any issues if you remove the !important from the declaration. I say go for it.

You commented on Benjamin Coury's post over 1 year

Following for answers. I need this, too.

You commented on jinch's post over 1 year

Ah, yes - I goofed. The second script should be:

 if (window.location.search) {
     var showModal = getQueryVariable('showModal');
     if (showModal == 'yes') {
          $('#myModal').foundation('reveal', 'open');
     }
}

That does indeed work:

http://codepen.io/bobsawyer/full/YyNmMj/?showModal=yes

Posts Followed






Following

Followers