Menu icon Foundation

My Posts

  • 1
    Reply
  • Grunt & PHP

    By Damon H

    GruntPHPbestpractices

    First time long time. So I finally made the move from compass method to the node/bower/grunt method. So I finally have everything setup and everything looks to be functioning on the SASS and JS side. I'm looking to add an old site to my project and am... (continued)

    Last Reply by Karl Ward about 5 years ago

My Comments

Damon H commented on Damon H's post over 3 years

Looks like I need to remove foundation 5 cli to get the new cli to run. http://foundation.zurb.com/sites/docs/installation.html

I'll try when I get back in the office. Would be nice to know about the errors in the manual install too as I will likely want to keep the foundation 5 cli for a while longer.

Helpful 0
Damon H commented on Damon H's post about 4 years

Finally figured out how this works after looking into the source. It is looking for the class or ID within the list element, not the list element itself. Here is a working version:

http://codepen.io/anon/pen/waNMWm

So instead of something like:

<li  class="skip_me"><a href="fullsize.jpg"><img src="thumb.jpg"/></a></li>

It should be:

<li><a href="fullsize.jpg" class="skip_me"><img src="thumb.jpg"/></a></li>

Or:

<li><a href="fullsize.jpg"><img src="thumb.jpg" class="skip_me"/></a></li>

Helpful 0
Damon H commented on Damon H's post about 4 years

Rafi,

I forked this and adjusted slightly so that you can see the red ones that it is supposed to skip. Still is either setup wrong or this functionality does not work. I also tried using the ID #cat unsuccessfully. as the skip_selector.

http://codepen.io/anon/pen/KpJdZZ

Thanks,
D

Helpful 0
Damon H commented on Damon H's post about 4 years

Actually it looks like none of the data-options work when trying to add them.

 <ul class="clearing-thumbs" data-options="skip_selector:.dog,touch_label:YODOG,close_selectors:.dogmeat" data-clearing>
            <li class="dog"><a class="th" href="../assets/img/examples/comet.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/comet-th-sm.jpg"></a></li>
            <li><a class="th" href="../assets/img/examples/earth.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/earth-th-sm.jpg"></a></li>
            <li class="dog"><a class="th" href="../assets/img/examples/launch.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/launch-th-sm.jpg"></a></li>
            <li><a class="th" href="../assets/img/examples/satelite.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum."  width="200" height="200"src="../assets/img/examples/satelite-th-sm.jpg"></a></li>
            <li><a class="th" href="../assets/img/examples/space.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/space-th-sm.jpg"></a></li>
            <li><a class="th" href="../assets/img/examples/spacewalk.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/spacewalk-th-sm.jpg"></a></li>
          </ul>

None of these values are being passed through and the default close_selectors are being used. They can only be set using javascript.

 $(document).foundation({
  clearing : {
      skip_selector : '.dog',
  }
});

Sadly this doesn't set the skipping. target.find(this.settings.skip_selector).length always returns 0.

Helpful 0
Damon H commented on Damon H's post about 4 years

Thanks for the response Rafi, but the documentation says that you can use classes and IDs. I also just now tried using a ID with no success.

   // specify the classes or IDs that will be skipped in carousel
  skip_selector : '',

I haven't had a chance to look at the source yet, but maybe I'll be able to do that this weekend.

Helpful 0
Damon H commented on ziga's post over 4 years

Hello. I'm having the same problem, but it looks like you fixed if for yourself. What did you do to get them working again?

Helpful 0
Damon H commented on Yasir's post over 4 years

Here is an example:
http://popsiclepeople.com/foundation_tooltip/

Getting error at: /js/vendor/jquery.js:14
Also have seen it at 24.

The tooltips (on this example) works fine at 100, but not at 200 and over.

Hope this helps. I'd love to get this working again.

D

Helpful 0

Posts Followed

  • 2
    Replies
  • Topbar transparency

    By Bill Sholar

    topbartransparency

    I'm trying to use Topbar in a header with an image background. How do I set the background for the links, list items, and topbar to none? (Hover and backgrounds on the dropdowns can remain...) (I did search, and found nothing that worked...) Thanks!

    Last Reply by Bill Sholar about 5 years ago

  • 6
    Replies
  • Form with multiselect invalid size

    By Alan Jackson

    forms

    This is a bit odd, as I could have sworn I had this working at one time. I have a Form with a multiselect box. The box size is being displayed as if there is only a single option, or as a tradition select box when in fact there are (3) options with the po... (continued)

    Last Reply by Andrea Mariani almost 2 years ago

  • 1
    Reply
  • Grunt & PHP

    By Damon H

    GruntPHPbestpractices

    First time long time. So I finally made the move from compass method to the node/bower/grunt method. So I finally have everything setup and everything looks to be functioning on the SASS and JS side. I'm looking to add an old site to my project and am... (continued)

    Last Reply by Karl Ward about 5 years ago

Following

    No Content

Followers

My Posts

My Comments

You commented on Damon H's post over 3 years

Looks like I need to remove foundation 5 cli to get the new cli to run. http://foundation.zurb.com/sites/docs/installation.html

I'll try when I get back in the office. Would be nice to know about the errors in the manual install too as I will likely want to keep the foundation 5 cli for a while longer.

Helpful 0
You commented on Damon H's post about 4 years

Finally figured out how this works after looking into the source. It is looking for the class or ID within the list element, not the list element itself. Here is a working version:

http://codepen.io/anon/pen/waNMWm

So instead of something like:

<li  class="skip_me"><a href="fullsize.jpg"><img src="thumb.jpg"/></a></li>

It should be:

<li><a href="fullsize.jpg" class="skip_me"><img src="thumb.jpg"/></a></li>

Or:

<li><a href="fullsize.jpg"><img src="thumb.jpg" class="skip_me"/></a></li>

Helpful 0
You commented on Damon H's post about 4 years

Rafi,

I forked this and adjusted slightly so that you can see the red ones that it is supposed to skip. Still is either setup wrong or this functionality does not work. I also tried using the ID #cat unsuccessfully. as the skip_selector.

http://codepen.io/anon/pen/KpJdZZ

Thanks,
D

Helpful 0
You commented on Damon H's post about 4 years

Actually it looks like none of the data-options work when trying to add them.

 <ul class="clearing-thumbs" data-options="skip_selector:.dog,touch_label:YODOG,close_selectors:.dogmeat" data-clearing>
            <li class="dog"><a class="th" href="../assets/img/examples/comet.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/comet-th-sm.jpg"></a></li>
            <li><a class="th" href="../assets/img/examples/earth.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/earth-th-sm.jpg"></a></li>
            <li class="dog"><a class="th" href="../assets/img/examples/launch.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/launch-th-sm.jpg"></a></li>
            <li><a class="th" href="../assets/img/examples/satelite.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum."  width="200" height="200"src="../assets/img/examples/satelite-th-sm.jpg"></a></li>
            <li><a class="th" href="../assets/img/examples/space.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/space-th-sm.jpg"></a></li>
            <li><a class="th" href="../assets/img/examples/spacewalk.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." width="200" height="200" src="../assets/img/examples/spacewalk-th-sm.jpg"></a></li>
          </ul>

None of these values are being passed through and the default close_selectors are being used. They can only be set using javascript.

 $(document).foundation({
  clearing : {
      skip_selector : '.dog',
  }
});

Sadly this doesn't set the skipping. target.find(this.settings.skip_selector).length always returns 0.

Helpful 0
You commented on Damon H's post about 4 years

Thanks for the response Rafi, but the documentation says that you can use classes and IDs. I also just now tried using a ID with no success.

   // specify the classes or IDs that will be skipped in carousel
  skip_selector : '',

I haven't had a chance to look at the source yet, but maybe I'll be able to do that this weekend.

Helpful 0
You commented on ziga's post over 4 years

Hello. I'm having the same problem, but it looks like you fixed if for yourself. What did you do to get them working again?

Helpful 0
You commented on Yasir's post over 4 years

Here is an example:
http://popsiclepeople.com/foundation_tooltip/

Getting error at: /js/vendor/jquery.js:14
Also have seen it at 24.

The tooltips (on this example) works fine at 100, but not at 200 and over.

Hope this helps. I'd love to get this working again.

D

Helpful 0

Posts Followed

Following

  • No Content

Followers

  • No Content

Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

See Upcomming Classes

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635