Menu icon Foundation

My Posts




  • 1
    Reply
  • Top-bar common issues?

    By Eileen Schmidtke

    top barnav icon

    This may be a dumb question but hopefully easy to answer. When I download Foundation 5 form the website, how do I know exactly what version it is? Apart from Foundation 5, is it 5.2.X? 5.3? Second, I am having an issue with top bar (which is why I am c... (continued)

    Last Reply by Adam Ransome about 5 years ago


  • 1
    Reply
  • tabs not working

    By Eileen Schmidtke

    tabsFoundation 5

    sorry… post got messed up so need to repost: hello, I can't get the tabs to work. I just downloaded a fresh version of Foundation-5 and tried a fresh new page with the tab mark-up pasted directly from the docs page. At first the tabs worked fine (as... (continued)

    Last Reply by Samuel Kelemen about 5 years ago







My Comments

Eileen Schmidtke commented on Eileen Schmidtke's post over 3 years

Hi!
Honestly it was so long ago I don't remember this specific issue. I was a beginner and experienced so many hang ups using foundation features that I changed to jQuery UI widgets instead. They always seem to work for me.  I also gave up on orbit slider as it was deprecated at one point anyway. Haven't tried F6 yet I'm hoping they bring back the custom download because I really love the grid system. Sorry to not be of much help! Good luck!

Eileen Schmidtke commented on Eileen Schmidtke's post almost 5 years

Hi Bit,
Thanks for the advice. Sorry I had to divert my attention to something else past couple of weeks. I would still like to get this working though. Were you able to make any progress with your tabs?
-Eileen

Eileen Schmidtke commented on Andrew Teo's post almost 5 years

Hi Andrew, Were you able to resolve this? I am trying to accomplish the same thing and have the same issue.

Eileen Schmidtke commented on Eileen Schmidtke's post almost 5 years

I got it! Thanks again Swaranan. The problem was my use of visibility classes in the nav sections. Appreciate your effort on this. Thanks again.

Eileen Schmidtke commented on Eileen Schmidtke's post almost 5 years

Thanks Swaranan, I tried that. I wrapped the mobile css in @media only screen and (max-width: 40.063em) and the regular screen css in @media only screen and (min-width: 40.063em). It doesn't seem to affect the page at all. I did this in the foundation.css file. All go the other foundations styles are fine so I know the css files have been enqued correctly. But it appears to be ignoring the media queries.

I tried removing any possible conflicting css files. Im pulling my hair out. any other ideas?

Eileen Schmidtke commented on Eileen Schmidtke's post almost 5 years

Your code works! Thank you. The equalizer action is bit jumpy though because the equalizer affect doesn't work simultaneously with the accordion affect, it jumps into place after the accordion has finished opening or closing. Any way to smooth that out?

I really appreciate you persistence with my question. I have another question on this same website I was hoping you could help me with. Do I need to post it new on the forum?

Eileen Schmidtke commented on Eileen Schmidtke's post almost 5 years

Hi Wing-Hou, thanks for getting back to me and sorry for the delay. I had been working locally and just uploaded the site so you could take a look. I really appreciate your help with this. Belos is a page which incorporates the accordion which overlaps the footer when it opens. Thanks again.

http://www.corpakms.net/corflo-nasoenteric/corflo-ngni-feeding-tubes/

Eileen Schmidtke commented on Eileen Schmidtke's post almost 5 years

Wing-Hou,
Could the issue be that my center column is a template_part? Below is the actual page code:

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package Awesome Theme
 */

get_header(); ?>

<div class="category-section">
    <div class="row">


      <div class="columns small-12">

        <?php
        if ( is_page( 'cortrak' )) { 
           get_template_part( 'partials/content', 'cortrak-intro' );
           // cortrak page
        } elseif ( in_category( 'naso' ) ) {
          get_template_part( 'partials/content', 'naso-intro' );
          // naso page
        } elseif ( in_category( 'gastro' ) ) {
          get_template_part( 'partials/content', 'gastro-intro' );
          // gastro page
        } elseif ( is_page( 'navigator' ) ) {
          get_template_part( 'partials/content', 'navigator-intro' );
          // nav page
        } elseif ( is_page( 'farrell-valve' ) ) {
          get_template_part( 'partials/content', 'farrell-intro' );
          // farrell page
        } else {
          //everyting else
        }

        ?>

      </div>
    </div>
  </div>

  <div class="row" data-equalizer><!-- Foundation .row start -->

    <div class="large-3 medium-3 columns sidebar-sup" data-equalizer-watch><!-- Foundation .columns start -->
      <div class="menu">  

      <?php

        if ( in_category( 'naso' )) { 
          wp_nav_menu( array('menu' => 'Naso Menu' ));


        } elseif ( in_category( 'gastro' ) ) {
          wp_nav_menu( array('menu' => 'Gastro Menu' ));


        } else {
          if ( has_post_thumbnail() ) {
          the_post_thumbnail('full');
          }
        }
      ?>

      </div><!-- menu end -->
    </div><!-- Foundation .columns end -->

    <div class="large-6 medium-4 columns" data-equalizer-watch><!-- Foundation .columns start -->

      <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

          <?php while ( have_posts() ) : the_post(); ?>

            <?php get_template_part( 'content', 'page' ); ?>

          <?php endwhile; // end of the loop. ?>

        </main><!-- #main -->
      </div><!-- #primary -->

    </div><!-- Foundation .columns end -->

    <div class="large-3 medium-4 columns sidebar" data-equalizer-watch><!-- Foundation .columns start -->

      <?php

        if ( is_page ( array ('clog-zapper-naso', 'clog-zapper-gastro')) ) { //the 2 duplicate clog zapper sidebars for naso and gastro category
          get_sidebar('clogzapper');

        } elseif ( is_page ( array ('tubeclear-naso', 'tubeclear-gastro')) ) { //the 2 duplicate tubeclear sidebars for naso and gastro category
          get_sidebar('tubeclear');

        } elseif ( is_page ( array ('farrell-valve')) ) { //the 2 duplicate tubeclear sidebars for naso and gastro category
          get_sidebar('farrell');


        } else {

          get_sidebar();

        }
      ?>


    </div><!-- Foundation .columns end -->

  </div><!-- Foundation .row end -->

<?php get_footer(); ?>

Eileen Schmidtke commented on Eileen Schmidtke's post almost 5 years

Thanks for the suggestionWing-Hou. Your code-pen works beautifully but for some reason it is not working on my page. The center column with the accordion is still overlapping the footer instead of pushing it down. Im not super jQuery savvy so maybe something is conflicting with my ease effect snippet I picked up? This is my code from my javascript file:

jQuery(document).ready(function($) {
  $(document).foundation();
});
/*
 * accordion ease affect
 */
jQuery(document).ready(function($) {
  $('.accordion').on('click', 'dd', function () {
    $('dd.active').find('.content').slideUp('slow');
    if(!$(this).hasClass('active')) {
      $(this).find('.content').slideToggle('slow');
    }
  });
/*
 * accordion reflow
 */  
  $('.accordion').on('toggled', function (event, accordion) {
  $(document).foundation('equalizer', 'reflow');
  });
});

Does the code look correct to you?

Eileen Schmidtke commented on Eileen Schmidtke's post about 5 years

Just a follow up in case someone is experiencing random JQuery issues as described. It appears to be tied to Firefox. I noticed when it stops working it seems ok in Safari.

Posts Followed


  • 1
    Reply
  • Orbit within Tabs

    By Tim Digger

    orbit vertical tabs

    Is there a trick to adding an Orbit Slider within Vertical Tabs? I've got Orbit working fine outside of Tabs, but once I add the same code into Vertical Tabs the issues are as attached screenshot; 1) does not slide 2) partial image only 3) navigation ... (continued)

    Last Reply by neil kanth about 5 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Eileen Schmidtke's post over 3 years

Hi!
Honestly it was so long ago I don't remember this specific issue. I was a beginner and experienced so many hang ups using foundation features that I changed to jQuery UI widgets instead. They always seem to work for me.  I also gave up on orbit slider as it was deprecated at one point anyway. Haven't tried F6 yet I'm hoping they bring back the custom download because I really love the grid system. Sorry to not be of much help! Good luck!

You commented on Eileen Schmidtke's post almost 5 years

Hi Bit,
Thanks for the advice. Sorry I had to divert my attention to something else past couple of weeks. I would still like to get this working though. Were you able to make any progress with your tabs?
-Eileen

You commented on Andrew Teo's post almost 5 years

Hi Andrew, Were you able to resolve this? I am trying to accomplish the same thing and have the same issue.

You commented on Eileen Schmidtke's post almost 5 years

I got it! Thanks again Swaranan. The problem was my use of visibility classes in the nav sections. Appreciate your effort on this. Thanks again.

You commented on Eileen Schmidtke's post almost 5 years

Thanks Swaranan, I tried that. I wrapped the mobile css in @media only screen and (max-width: 40.063em) and the regular screen css in @media only screen and (min-width: 40.063em). It doesn't seem to affect the page at all. I did this in the foundation.css file. All go the other foundations styles are fine so I know the css files have been enqued correctly. But it appears to be ignoring the media queries.

I tried removing any possible conflicting css files. Im pulling my hair out. any other ideas?

You commented on Eileen Schmidtke's post almost 5 years

Your code works! Thank you. The equalizer action is bit jumpy though because the equalizer affect doesn't work simultaneously with the accordion affect, it jumps into place after the accordion has finished opening or closing. Any way to smooth that out?

I really appreciate you persistence with my question. I have another question on this same website I was hoping you could help me with. Do I need to post it new on the forum?

You commented on Eileen Schmidtke's post almost 5 years

Hi Wing-Hou, thanks for getting back to me and sorry for the delay. I had been working locally and just uploaded the site so you could take a look. I really appreciate your help with this. Belos is a page which incorporates the accordion which overlaps the footer when it opens. Thanks again.

http://www.corpakms.net/corflo-nasoenteric/corflo-ngni-feeding-tubes/

You commented on Eileen Schmidtke's post almost 5 years

Wing-Hou,
Could the issue be that my center column is a template_part? Below is the actual page code:

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package Awesome Theme
 */

get_header(); ?>

<div class="category-section">
    <div class="row">


      <div class="columns small-12">

        <?php
        if ( is_page( 'cortrak' )) { 
           get_template_part( 'partials/content', 'cortrak-intro' );
           // cortrak page
        } elseif ( in_category( 'naso' ) ) {
          get_template_part( 'partials/content', 'naso-intro' );
          // naso page
        } elseif ( in_category( 'gastro' ) ) {
          get_template_part( 'partials/content', 'gastro-intro' );
          // gastro page
        } elseif ( is_page( 'navigator' ) ) {
          get_template_part( 'partials/content', 'navigator-intro' );
          // nav page
        } elseif ( is_page( 'farrell-valve' ) ) {
          get_template_part( 'partials/content', 'farrell-intro' );
          // farrell page
        } else {
          //everyting else
        }

        ?>

      </div>
    </div>
  </div>

  <div class="row" data-equalizer><!-- Foundation .row start -->

    <div class="large-3 medium-3 columns sidebar-sup" data-equalizer-watch><!-- Foundation .columns start -->
      <div class="menu">  

      <?php

        if ( in_category( 'naso' )) { 
          wp_nav_menu( array('menu' => 'Naso Menu' ));


        } elseif ( in_category( 'gastro' ) ) {
          wp_nav_menu( array('menu' => 'Gastro Menu' ));


        } else {
          if ( has_post_thumbnail() ) {
          the_post_thumbnail('full');
          }
        }
      ?>

      </div><!-- menu end -->
    </div><!-- Foundation .columns end -->

    <div class="large-6 medium-4 columns" data-equalizer-watch><!-- Foundation .columns start -->

      <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

          <?php while ( have_posts() ) : the_post(); ?>

            <?php get_template_part( 'content', 'page' ); ?>

          <?php endwhile; // end of the loop. ?>

        </main><!-- #main -->
      </div><!-- #primary -->

    </div><!-- Foundation .columns end -->

    <div class="large-3 medium-4 columns sidebar" data-equalizer-watch><!-- Foundation .columns start -->

      <?php

        if ( is_page ( array ('clog-zapper-naso', 'clog-zapper-gastro')) ) { //the 2 duplicate clog zapper sidebars for naso and gastro category
          get_sidebar('clogzapper');

        } elseif ( is_page ( array ('tubeclear-naso', 'tubeclear-gastro')) ) { //the 2 duplicate tubeclear sidebars for naso and gastro category
          get_sidebar('tubeclear');

        } elseif ( is_page ( array ('farrell-valve')) ) { //the 2 duplicate tubeclear sidebars for naso and gastro category
          get_sidebar('farrell');


        } else {

          get_sidebar();

        }
      ?>


    </div><!-- Foundation .columns end -->

  </div><!-- Foundation .row end -->

<?php get_footer(); ?>

You commented on Eileen Schmidtke's post almost 5 years

Thanks for the suggestionWing-Hou. Your code-pen works beautifully but for some reason it is not working on my page. The center column with the accordion is still overlapping the footer instead of pushing it down. Im not super jQuery savvy so maybe something is conflicting with my ease effect snippet I picked up? This is my code from my javascript file:

jQuery(document).ready(function($) {
  $(document).foundation();
});
/*
 * accordion ease affect
 */
jQuery(document).ready(function($) {
  $('.accordion').on('click', 'dd', function () {
    $('dd.active').find('.content').slideUp('slow');
    if(!$(this).hasClass('active')) {
      $(this).find('.content').slideToggle('slow');
    }
  });
/*
 * accordion reflow
 */  
  $('.accordion').on('toggled', function (event, accordion) {
  $(document).foundation('equalizer', 'reflow');
  });
});

Does the code look correct to you?

You commented on Eileen Schmidtke's post about 5 years

Just a follow up in case someone is experiencing random JQuery issues as described. It appears to be tied to Firefox. I noticed when it stops working it seems ok in Safari.

Posts Followed

Following

  • No Content

Followers

  • No Content