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 3 months ago






My Comments

David Titherly commented on David Titherly's post about 1 month

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 about 1 year

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 almost 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 almost 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 almost 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 almost 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 about 1 month

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 about 1 year

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 almost 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 almost 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 almost 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 almost 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