Menu icon Foundation

My Posts

  • NEW
  • Joyride: getting id of target element

    By Jesse Matlock

    joyride

    Hello, I've been using Foundation for quite a while but have just now had an implementation to use Joyride in - what a slick component! So, what I'm trying to accomplish, without editing the core JS files, is to get the ID of the target element. ... (continued)


My Comments

Jesse Matlock commented on Dani Castaños's post almost 5 years

All good.. 5.4.7 resolved the pip (and multiple positioning classes) issue.

Thanks!!

Jesse Matlock commented on Dani Castaños's post almost 5 years

I just pulled latest and am still fighting with Dropdown placement.. though now, it seems that ALL the dropdown classes are applied if you do not specify right,left or top ! Bottom, as the default position, is no longer applied!

Ive tried specifying the 'bottom' alignment as well as omitting the daya-options all together:
HTML
<a href="javascript:void(0);" class="playlist-button" data-options="align:bottom" data-dropdown="linked-event-list"><i class="fa fa-link"></i> Linked Events</a>

<a href="javascript:void(0);" class="playlist-button" data-dropdown="linked-event-list"><i class="fa fa-link"></i> Linked Events</a>

Unfortunately, all I get is my dropdown having ALL the classes applied:

class="f-dropdown drop-top drop-right drop-left open"

Which not only ruins the placement of the dropdown itself, but also of the pip.

Here are some screenshots from my inspector, etc.
https://www.dropbox.com/s/6pxyh43t0nd04uk/dropdown-position.png?dl=0
https://www.dropbox.com/s/xlgg7uun8dvo7u2/dropdown-classes.png?dl=0
https://www.dropbox.com/s/j3tyv353j55tzd0/dropdown-inspector.png?dl=0

Any help is greatly appreciated.

Jesse Matlock commented on Laurent P's post over 5 years

You can use this as an example, obviously swapping out the specific ID for class and targeting the dropdown from within your JS, but this gives you an idea of how to close it programmatically:

  Foundation.libs.dropdown.close($('#id_of_dropdown_list'));

Jesse Matlock commented on Peter Graff's post over 5 years

Check your visibility classes.. looks like you might want to use hide-for-small-only and/or show-for-medium-up or down..

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

Right now, you're using a deprecated visibility class ;O

Jesse Matlock commented on Aria Rajasa's post over 5 years

Also, if you just want to close a specific dropdown with a click from another element (inside of or outside of the dropdown).. you can do this:

 Foundation.libs.dropdown.close($('#id_of_dropdown_list'));

Jesse Matlock commented on Rafi Benkual's post over 5 years

I had this same issue, it was due to the parent container that I had my Clearing in was set to position: relative.. and the menu I used was set to a higher z-index than that parent.. also needed.. so, with some changes to the z-index of the menu and the parent of the Clearing section.. we got it sorted out.

Jesse Matlock commented on Lynda Spangler's post over 5 years

As an update, I've posted an issue on github:
https://github.com/zurb/foundation/issues/4278

Jesse Matlock commented on Lynda Spangler's post over 5 years

Same here.. just downloaded F5.0.3 and cannot get the Reveal modal to open - the reveal-bg DOES show, covering the content.. just no modal atop of that.

Same error as @Lynda posted above.

Any headway into this?

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Dani Castaños's post almost 5 years

All good.. 5.4.7 resolved the pip (and multiple positioning classes) issue.

Thanks!!

You commented on Dani Castaños's post almost 5 years

I just pulled latest and am still fighting with Dropdown placement.. though now, it seems that ALL the dropdown classes are applied if you do not specify right,left or top ! Bottom, as the default position, is no longer applied!

Ive tried specifying the 'bottom' alignment as well as omitting the daya-options all together:
HTML
<a href="javascript:void(0);" class="playlist-button" data-options="align:bottom" data-dropdown="linked-event-list"><i class="fa fa-link"></i> Linked Events</a>

<a href="javascript:void(0);" class="playlist-button" data-dropdown="linked-event-list"><i class="fa fa-link"></i> Linked Events</a>

Unfortunately, all I get is my dropdown having ALL the classes applied:

class="f-dropdown drop-top drop-right drop-left open"

Which not only ruins the placement of the dropdown itself, but also of the pip.

Here are some screenshots from my inspector, etc.
https://www.dropbox.com/s/6pxyh43t0nd04uk/dropdown-position.png?dl=0
https://www.dropbox.com/s/xlgg7uun8dvo7u2/dropdown-classes.png?dl=0
https://www.dropbox.com/s/j3tyv353j55tzd0/dropdown-inspector.png?dl=0

Any help is greatly appreciated.

You commented on Laurent P's post over 5 years

You can use this as an example, obviously swapping out the specific ID for class and targeting the dropdown from within your JS, but this gives you an idea of how to close it programmatically:

  Foundation.libs.dropdown.close($('#id_of_dropdown_list'));

You commented on Peter Graff's post over 5 years

Check your visibility classes.. looks like you might want to use hide-for-small-only and/or show-for-medium-up or down..

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

Right now, you're using a deprecated visibility class ;O

You commented on Aria Rajasa's post over 5 years

Also, if you just want to close a specific dropdown with a click from another element (inside of or outside of the dropdown).. you can do this:

 Foundation.libs.dropdown.close($('#id_of_dropdown_list'));

You commented on Rafi Benkual's post over 5 years

I had this same issue, it was due to the parent container that I had my Clearing in was set to position: relative.. and the menu I used was set to a higher z-index than that parent.. also needed.. so, with some changes to the z-index of the menu and the parent of the Clearing section.. we got it sorted out.

You commented on Lynda Spangler's post over 5 years

As an update, I've posted an issue on github:
https://github.com/zurb/foundation/issues/4278

You commented on Lynda Spangler's post over 5 years

Same here.. just downloaded F5.0.3 and cannot get the Reveal modal to open - the reveal-bg DOES show, covering the content.. just no modal atop of that.

Same error as @Lynda posted above.

Any headway into this?

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content