Menu icon Foundation

My Posts


  • 1
    Reply
  • Restart Orbit after click

    By David Titherly

    Orbit

    Orbit loads slides and they play fine. They pause when hovered, as they should. However, when a slide is clicked, Orbit stops. The slide that is clicked remains on the screen, even if I click elsewhere on the page. How do I restart the slides without re... (continued)

    Last Reply by camike 12 months ago






My Comments

David Titherly commented on David Titherly's post 10 months

In case anyone else is wondering the same thing, I'll answer my own question. This worked for me.
The breakpoint is defined in a media query in foundation.css thus:
@media screen and (max-width: 63.9375em) {
  table.stack thead {
    display: none; }
  table.stack tfoot {
    display: none; }
  table.stack tr,
  table.stack th,
  table.stack td {
    display: block; }
  table.stack td {
    border-top: 0; } }
Obviously it is not good practice to change the original foundation.css, but it is possible to define a new media query and to give the class a new name. Mine is 
@media screen and (max-width: 39.9375em) {
  table.stack-40em thead {
    display: none; }
  table.stack-40em tfoot {
    display: none; }
  table.stack-40.em tr,
  table.stack-40em th,
  table.stack-40em td {
    display: block; }
  table.stack-40em td {
    border-top: 0; } }
Put this in the header of the page, or the local (linked) css file and use stack-40em in place of stack when defining the table class.
 

David Titherly commented on David Titherly's post almost 2 years

Thanks. I'll refer that back to the W3C Markup Validation Service. Odd that they are flagging it as an 'error'.

David Titherly commented on David Titherly's post over 2 years

Although I still can't get 
data-options="disableHover:true; clickOpen:true;"
to work, Ryan Patterson has suggested 
data-disable-hover="true" data-click-open="true"
which is working fine.
The menu now opens only on click, not on hover.
Thanks Ryan

David Titherly commented on David Titherly's post over 2 years

Thank you Rafi.
I seem to be doing something wrong, though, because my menu still opens on hover.
My version is here: 
<div class="top-bar" id="main-menu">

<div class="top-bar-right">

    &lt;ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown" data-options="disableHover:true; clickOpen:true;" data-close-on-click-inside&gt;

                &lt;li&gt; ...&lt;/li&gt;

           &lt;/ul&gt;
   &lt;/div&gt;

</div>

The test page is here http://britishairshows.com/click-to-open-test
Delighted to use data-multi-expand or data-options, if the dropdown menu can be made to open only on click on medium-up screens.
Have I done something silly?
Thanks for your help and patience.

David Titherly commented on David Titherly's post over 2 years

Than you, Christian, for responding.
What I am looking for is a dropdown menu that will only open when it is clicked. By default this menu, and mine http://britishairshows.com/herne-bay-airshow.html open on hover. 

David Titherly commented on David Titherly's post over 2 years

Thank you, Christian, for responding.
I have a responsive menu based on the excellent Foundation/Site docs (mine is here http://britishairshows.com/clacton-airshow.html) but the standard menus default to open on hover. I need mine to click-to-open, click-away to close, so that the menu list does not close when the cursor is moved away from it. 
I think I just need a line of .css but, having tried the obvious, I am hoping that someone with more knowledge and experience than me can suggest the .ccs that will overwrite the default 'open-on-hover'.

Posts Followed

No Content

Following

    No Content

Followers

My Posts





My Comments

You commented on David Titherly's post 10 months

In case anyone else is wondering the same thing, I'll answer my own question. This worked for me.
The breakpoint is defined in a media query in foundation.css thus:
@media screen and (max-width: 63.9375em) {
  table.stack thead {
    display: none; }
  table.stack tfoot {
    display: none; }
  table.stack tr,
  table.stack th,
  table.stack td {
    display: block; }
  table.stack td {
    border-top: 0; } }
Obviously it is not good practice to change the original foundation.css, but it is possible to define a new media query and to give the class a new name. Mine is 
@media screen and (max-width: 39.9375em) {
  table.stack-40em thead {
    display: none; }
  table.stack-40em tfoot {
    display: none; }
  table.stack-40.em tr,
  table.stack-40em th,
  table.stack-40em td {
    display: block; }
  table.stack-40em td {
    border-top: 0; } }
Put this in the header of the page, or the local (linked) css file and use stack-40em in place of stack when defining the table class.
 

You commented on David Titherly's post almost 2 years

Thanks. I'll refer that back to the W3C Markup Validation Service. Odd that they are flagging it as an 'error'.

You commented on David Titherly's post over 2 years

Although I still can't get 
data-options="disableHover:true; clickOpen:true;"
to work, Ryan Patterson has suggested 
data-disable-hover="true" data-click-open="true"
which is working fine.
The menu now opens only on click, not on hover.
Thanks Ryan

You commented on David Titherly's post over 2 years

Thank you Rafi.
I seem to be doing something wrong, though, because my menu still opens on hover.
My version is here: 
<div class="top-bar" id="main-menu">

<div class="top-bar-right">

    &lt;ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown" data-options="disableHover:true; clickOpen:true;" data-close-on-click-inside&gt;

                &lt;li&gt; ...&lt;/li&gt;

           &lt;/ul&gt;
   &lt;/div&gt;

</div>

The test page is here http://britishairshows.com/click-to-open-test
Delighted to use data-multi-expand or data-options, if the dropdown menu can be made to open only on click on medium-up screens.
Have I done something silly?
Thanks for your help and patience.

You commented on David Titherly's post over 2 years

Than you, Christian, for responding.
What I am looking for is a dropdown menu that will only open when it is clicked. By default this menu, and mine http://britishairshows.com/herne-bay-airshow.html open on hover. 

You commented on David Titherly's post over 2 years

Thank you, Christian, for responding.
I have a responsive menu based on the excellent Foundation/Site docs (mine is here http://britishairshows.com/clacton-airshow.html) but the standard menus default to open on hover. I need mine to click-to-open, click-away to close, so that the menu list does not close when the cursor is moved away from it. 
I think I just need a line of .css but, having tried the obvious, I am hoping that someone with more knowledge and experience than me can suggest the .ccs that will overwrite the default 'open-on-hover'.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content