Menu icon Foundation

My Posts

  • NEW
  • Help with vanilla carousel problem

    By Sherry Bradford

    carousel

    Very vanilla code. Problem is carousel will not behave responsively. Doesn't matter whether I have arrows/no arrows, dots/no dots. I am only displaying one slide at a time. On small and medium devices the columns are not wrapping. I've removed the carouse... (continued)











My Comments

Sherry Bradford commented on Sherry Bradford's post about 1 month

I hate that spammers are adding comments. Very frustrating.
I removed Equalizer as I realized that I was over-engineering my content. Closing this post.

Sherry Bradford commented on Sherry Bradford's post about 1 month

I got it to work with equalizer! It isn't perfect yet - but at least I have the basic and now I can figure out the nicer details (such as the gap between columns. Right now it is huge. :-) ) 
By any chance are the old Foundation 5 building blocks still available? I'm not able to upgrade to Foundation 6, unfortunately. I believe there was an old example in those building blocks that had this idea implemented.
I tried your flex codepin and it worked except that I can only get the row to shrink and not wrap so on mobile my content looks pretty awful. I tried putting the wrap selector into the css but it didn't make any difference. It looks like in some of the older forum posts that this is just the way flex works. But I can see where flex will be helpful for some of my content. 
Thank you again for your help!

Sherry Bradford commented on Sherry Bradford's post about 1 month

Thank you so much! I'm embarrassed to say that I haven't tried flex yet and this will be a great reason/push for me to dive in. Appreciate your guidance!!

Sherry Bradford commented on Sherry Bradford's post about 2 months

I figured this out. There were two issues: a video that had a width setting, and not setting appropriate small sizes within the code. Set the width for the video to auto and put in my small sizing and now the navigation works fine. I do find that it does NOT work on the iPhone 5 unless they turn the screen horizontally. I'm sure that is likely a sizing setting. I'll hold off on tweaking that for now since we are an intranet and most people do not use phones to access. But it works fine on the iPhone 6 and above and any of the other devices that are about that size.
I figured this out by combing through Foundation documents, the forum, and Stack Overflow suggestions. So very grateful for all the folks who contribute to the forum, Foundation documentation, and the broader community of web developers out there. 

Sherry Bradford commented on Sherry Bradford's post about 2 months

Figured out what I was doing wrong. I wasn't declaring anything for the small. By adding small-12 to the sections I needed to stack, everything behaves just fine. I do find that my layout does not work vertically on an iPhone 5. It works fine if they turn the phone horizontally. My guess is that I could fix that by setting a smaller size for "small". But at this time, I'm going to focus on the rest of the coding and top-nav issues and will revisit the small sizing later. We are an intranet and the most common devices are ipad Mini, ipad, and laptops/desk tops. Very few people actually use their phone for the intranet site at this time.
I figured this out by going through posts, Stack Overview questions, and reviewing Foundation basic principles again. I am so grateful for the community and the documentation provided for Foundation. Lifesaver! 

Sherry Bradford commented on Sherry Bradford's post about 2 months

The top-nav does not show a hamburger icon on an iPhone (though it does when the code is viewed in Google emulation). But the stacking issue is the most pressing at the moment. Since our content is verbiage heavy, having a clear view of a single column of content is better than small side-by-side content. Thank you! Appreciate any hints/pointers/ideas to move me forward on getting these to stack.
 
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>PAGE TITLE</title>
<link rel="stylesheet" href="/contentFolder/styles/css/foundation.min.css"/>
<link rel="stylesheet" href="/contentFolder/styles/css/app.css"/>
<link rel="stylesheet" href="/contentFolder/styles/css/video-player.css" />
<script src="/contentFolder/styles/js/vendor/modernizr.js"></script>

<!--[if lte IE 8]>
<script src="/contentFolder/styles/js/shivs/respond.min.js"></script>
<script src="/contentFolder/styles/js/shivs/html5shiv.js"></script>
<script src="/contentFolder/styles/js/shivs/nwmatcher-1.2.5-min.js"></script>
<script src="/contentFolder/styles/js/shivs/selectivizr-1.0.3b.js"></script>
<![endif]-->
</head>
<body>
<!-- BEGIN THE TOP NAV SECTION CODE -->
<div class="fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a onClick="scLinkTrack(this)" href="/contentTopicMain.html">TITLE 1</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out word "Menu" to just have icon alone -->
<!-- <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> -->
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li><a onClick="scLinkTrack(this)" href="/contentFolder/home.html">Home</a></li>
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ resources.html">Resources</a></li>
<li class="has-dropdown">
<a href="#">Some Content</a>
<ul class="dropdown">
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic.html">FA TITLE</a></li>
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic2.html">MA TITLE</a></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Work Groups</a>
<ul class="dropdown">
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic3.html">FMT</a></li>
<li><a onClick="scLinkTrack(this)" href="/contentFolder /someContentTopic4.html">MS</a></li>
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic4..html">M RE</a></li>

        &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;

  &lt;!-- Left Nav Section 
  &lt;ul class="left"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Left Nav Button&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt; --&gt;

</section>
</nav>
</div> <!-- end fixed div class -->
<!-- END THE TOP NAV SECTION CODE-->

<div class="row">
<p><img src="/contentFolder/tabImages/maxFullSideview.png" alt="Banner - Seats"></p>
</div>

<div class="row">
<div class="large-8 columns updateStyle">
<h4>Stay Informed</h4>
<hr>
<h6>December 4, 2017 &ndash; Contract Q&amp;A Available</h6>
<p>In the "Resources" section of this page…</p>

                &lt;h6&gt;November 1, 2017 &amp;ndash; Communication&hellip; &lt;/h6&gt;
                &lt;p&gt;From time to time&hellip;&lt;/p&gt;
    &lt;/div&gt; &lt;!-- end 8 --&gt;
&lt;div class="large-4 columns"&gt;
              &lt;h4&gt;Video&lt;/h4&gt;
              &lt;hr&gt;
            &lt;div class="video-player"&gt;
               &lt;div class="video-tree"&gt;
            &lt;video id="myVideo1" poster="/contentFolder/VideoSplash.png" controls&gt;
                &lt;source src=" 20171014TFPExplainer.mp4" type="video/mp4"&gt; 
                 &lt;/video&gt;
               &lt;/div&gt; &lt;!-- end video-tree id --&gt;
             &lt;/div&gt;&lt;!-- end video-player id --&gt; 
            &lt;p&gt;&amp;nbsp;&lt;/p&gt;

                &lt;h4&gt;Resources&lt;/h4&gt;
             &lt;hr&gt;
         &lt;ul class="arrow"&gt;
           &lt;li&gt;&lt;a onClick="scLinkTrack(this)" href="javascript:OpenWindow('/contentFolder/aPage.pdf')"&gt;A Page Of Content &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a onClick="scLinkTrack(this)" href="javascript:OpenWindow('/contentFolder/anotherPage.pdf')"&gt;Q&amp;amp;A&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;a onClick="scLinkTrack(this)" href="javascript:OpenWindow('/contentFolder/someContentPage.pdf');"&gt;&lt;img style="padding-bottom:10px" src="/contentFolder/someImage.png"&gt;&lt;/a&gt;
     &lt;/div&gt; &lt;!-- end 4 columns --&gt;

</div> <!-- end row -->
<script src="/contentFolder/styles/js/vendor/jquery.js"></script>
<script src="/contentFolder/styles/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script>
var vid=document.getElementById('myVideo1');
vid.addEventListener("ended", resetVideo, false);

function resetVideo() {
  // resets the video element by resetting the source
  this.load()
}  

</script>
<script src="/contentFolder/styles/js/rem.min.js"></script>
</body>
</html>

function resetVideo() {
  // resets the video element by resetting the source
  this.load()
}  

</script>
<script src="/contentFolder/styles/js/rem.min.js"></script>
</body>
</html>

Sherry Bradford commented on Christian Cruz's post over 1 year

I ended up having to create a totally separate css file for the top-bar. My pages are buried deep behind several layers of corporate css so we always have issues with downstream impacts on foundation css. In some cases, I had to go the hellish route of putting the style right into the page. I definitely do not recommend that - but in some cases there simply was no other solution. Fortunately our total number of pages with the top-bar nav is low so it isn't as horrible as it would be in a major web environment.

Sherry Bradford commented on Sherry Bradford's post over 1 year

I found a "partial" solution. I had two versions of jquery in my code. I don't know enough about jquery to be able to troubleshoot very well, but I did work in the Chrome browser developer areas and found that one of those jquery files was behaving badly with the overall site theme (not controlled by me) and throwing an error. I removed the jquery causing the issue and that allowed the menu links to all work. It had some other minor impacts when I removed it, but all my primary foundation code worked OK (things like the accordion, sliders, etc.)
Insofar as the image, I had a "hero" style background image with an overlay of text that we change often. I tried different things with updating that area and ultimately went with just a straight banner image rather than hero and made the text part of the banner. That isn't a good solution for us but it did resolve the issue. My expectation is that, if I knew enough about jquery and javascript and CSS, I could have found a solution. I'm fair at CSS and javascript, but know nothing about jquery.
This menu is a temporary need for us so after spending two days getting it to work and deploying across multiple pages, I'm going to have to be happy with it working "as is". I suspect my question will not get other replies as it is about Foundation 5 and top-nav - and so many people have moved on to Foundation 6 and more refined nav options. But I'm grateful for the resources here and ultimately some of those helped me to find a way to work around this at least!
 

Sherry Bradford commented on Sherry Bradford's post over 1 year

Rafi - are these two statements doing the same thing?
$(document).ready(foundation)();
AND
$(document.foundation();
 
 

Sherry Bradford commented on Sherry Bradford's post about 2 years

LOL - no, we are a huge, modern airline and it is our corporate intranet for employees. There are hopes it will move off IE8 in the next year, but in the meantime this one particular "corner" of the intranet was redesigned to take advantage of whatever we could squeeze out of IE8. To add to the overall dilemma, we are built on frames as well. Foundation was a godsend in the effort to redesign this section and we get lots of compliments on usability.

Thank you for the post and I'll read up on the no.conflict mode info you provided and see if we can get past this one issue. I did learn the other day that IBM frames and IE8 have trouble with allowing links to open inside the page as you descend further into the navigation structure. The individual explaining this didn't have much detail to share, so I'm going to test out the no.conflict first. If that doesn't work, I'll investigate the nav level further.

I'm going to be so well trained on how to overcome IE8 issues that I fear I will never really get to enjoy working in a truly modern browser! Sigh.....

Posts Followed

  • 3
    Replies
  • Styling the top bar

    By Christian Cruz

    Hello everyone, I am styling the top bar and I was wondering how to change the background color of the <a> element when navigating the dropdown menu? In this case, the <a> element ("The Ceremony") has the default black background. Couldn't find ... (continued)

    Last Reply by Sherry Bradford over 1 year ago



  • 72
    Replies
  • Foundation 5 and IE8

    By James Cocker

    ie8Foundation 5usage

    Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 wi... (continued)

    Last Reply by Olivia Smith 2 months ago


Following

Followers

My Posts

My Comments

You commented on Sherry Bradford's post about 1 month

I hate that spammers are adding comments. Very frustrating.
I removed Equalizer as I realized that I was over-engineering my content. Closing this post.

You commented on Sherry Bradford's post about 1 month

I got it to work with equalizer! It isn't perfect yet - but at least I have the basic and now I can figure out the nicer details (such as the gap between columns. Right now it is huge. :-) ) 
By any chance are the old Foundation 5 building blocks still available? I'm not able to upgrade to Foundation 6, unfortunately. I believe there was an old example in those building blocks that had this idea implemented.
I tried your flex codepin and it worked except that I can only get the row to shrink and not wrap so on mobile my content looks pretty awful. I tried putting the wrap selector into the css but it didn't make any difference. It looks like in some of the older forum posts that this is just the way flex works. But I can see where flex will be helpful for some of my content. 
Thank you again for your help!

You commented on Sherry Bradford's post about 1 month

Thank you so much! I'm embarrassed to say that I haven't tried flex yet and this will be a great reason/push for me to dive in. Appreciate your guidance!!

You commented on Sherry Bradford's post about 2 months

I figured this out. There were two issues: a video that had a width setting, and not setting appropriate small sizes within the code. Set the width for the video to auto and put in my small sizing and now the navigation works fine. I do find that it does NOT work on the iPhone 5 unless they turn the screen horizontally. I'm sure that is likely a sizing setting. I'll hold off on tweaking that for now since we are an intranet and most people do not use phones to access. But it works fine on the iPhone 6 and above and any of the other devices that are about that size.
I figured this out by combing through Foundation documents, the forum, and Stack Overflow suggestions. So very grateful for all the folks who contribute to the forum, Foundation documentation, and the broader community of web developers out there. 

You commented on Sherry Bradford's post about 2 months

Figured out what I was doing wrong. I wasn't declaring anything for the small. By adding small-12 to the sections I needed to stack, everything behaves just fine. I do find that my layout does not work vertically on an iPhone 5. It works fine if they turn the phone horizontally. My guess is that I could fix that by setting a smaller size for "small". But at this time, I'm going to focus on the rest of the coding and top-nav issues and will revisit the small sizing later. We are an intranet and the most common devices are ipad Mini, ipad, and laptops/desk tops. Very few people actually use their phone for the intranet site at this time.
I figured this out by going through posts, Stack Overview questions, and reviewing Foundation basic principles again. I am so grateful for the community and the documentation provided for Foundation. Lifesaver! 

You commented on Sherry Bradford's post about 2 months

The top-nav does not show a hamburger icon on an iPhone (though it does when the code is viewed in Google emulation). But the stacking issue is the most pressing at the moment. Since our content is verbiage heavy, having a clear view of a single column of content is better than small side-by-side content. Thank you! Appreciate any hints/pointers/ideas to move me forward on getting these to stack.
 
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>PAGE TITLE</title>
<link rel="stylesheet" href="/contentFolder/styles/css/foundation.min.css"/>
<link rel="stylesheet" href="/contentFolder/styles/css/app.css"/>
<link rel="stylesheet" href="/contentFolder/styles/css/video-player.css" />
<script src="/contentFolder/styles/js/vendor/modernizr.js"></script>

<!--[if lte IE 8]>
<script src="/contentFolder/styles/js/shivs/respond.min.js"></script>
<script src="/contentFolder/styles/js/shivs/html5shiv.js"></script>
<script src="/contentFolder/styles/js/shivs/nwmatcher-1.2.5-min.js"></script>
<script src="/contentFolder/styles/js/shivs/selectivizr-1.0.3b.js"></script>
<![endif]-->
</head>
<body>
<!-- BEGIN THE TOP NAV SECTION CODE -->
<div class="fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a onClick="scLinkTrack(this)" href="/contentTopicMain.html">TITLE 1</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out word "Menu" to just have icon alone -->
<!-- <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> -->
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li><a onClick="scLinkTrack(this)" href="/contentFolder/home.html">Home</a></li>
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ resources.html">Resources</a></li>
<li class="has-dropdown">
<a href="#">Some Content</a>
<ul class="dropdown">
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic.html">FA TITLE</a></li>
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic2.html">MA TITLE</a></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Work Groups</a>
<ul class="dropdown">
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic3.html">FMT</a></li>
<li><a onClick="scLinkTrack(this)" href="/contentFolder /someContentTopic4.html">MS</a></li>
<li><a onClick="scLinkTrack(this)" href="/contentFolder/ someContentTopic4..html">M RE</a></li>

        &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;

  &lt;!-- Left Nav Section 
  &lt;ul class="left"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Left Nav Button&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt; --&gt;

</section>
</nav>
</div> <!-- end fixed div class -->
<!-- END THE TOP NAV SECTION CODE-->

<div class="row">
<p><img src="/contentFolder/tabImages/maxFullSideview.png" alt="Banner - Seats"></p>
</div>

<div class="row">
<div class="large-8 columns updateStyle">
<h4>Stay Informed</h4>
<hr>
<h6>December 4, 2017 &ndash; Contract Q&amp;A Available</h6>
<p>In the "Resources" section of this page…</p>

                &lt;h6&gt;November 1, 2017 &amp;ndash; Communication&hellip; &lt;/h6&gt;
                &lt;p&gt;From time to time&hellip;&lt;/p&gt;
    &lt;/div&gt; &lt;!-- end 8 --&gt;
&lt;div class="large-4 columns"&gt;
              &lt;h4&gt;Video&lt;/h4&gt;
              &lt;hr&gt;
            &lt;div class="video-player"&gt;
               &lt;div class="video-tree"&gt;
            &lt;video id="myVideo1" poster="/contentFolder/VideoSplash.png" controls&gt;
                &lt;source src=" 20171014TFPExplainer.mp4" type="video/mp4"&gt; 
                 &lt;/video&gt;
               &lt;/div&gt; &lt;!-- end video-tree id --&gt;
             &lt;/div&gt;&lt;!-- end video-player id --&gt; 
            &lt;p&gt;&amp;nbsp;&lt;/p&gt;

                &lt;h4&gt;Resources&lt;/h4&gt;
             &lt;hr&gt;
         &lt;ul class="arrow"&gt;
           &lt;li&gt;&lt;a onClick="scLinkTrack(this)" href="javascript:OpenWindow('/contentFolder/aPage.pdf')"&gt;A Page Of Content &lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a onClick="scLinkTrack(this)" href="javascript:OpenWindow('/contentFolder/anotherPage.pdf')"&gt;Q&amp;amp;A&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;a onClick="scLinkTrack(this)" href="javascript:OpenWindow('/contentFolder/someContentPage.pdf');"&gt;&lt;img style="padding-bottom:10px" src="/contentFolder/someImage.png"&gt;&lt;/a&gt;
     &lt;/div&gt; &lt;!-- end 4 columns --&gt;

</div> <!-- end row -->
<script src="/contentFolder/styles/js/vendor/jquery.js"></script>
<script src="/contentFolder/styles/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script>
var vid=document.getElementById('myVideo1');
vid.addEventListener("ended", resetVideo, false);

function resetVideo() {
  // resets the video element by resetting the source
  this.load()
}  

</script>
<script src="/contentFolder/styles/js/rem.min.js"></script>
</body>
</html>

function resetVideo() {
  // resets the video element by resetting the source
  this.load()
}  

</script>
<script src="/contentFolder/styles/js/rem.min.js"></script>
</body>
</html>

You commented on Christian Cruz's post over 1 year

I ended up having to create a totally separate css file for the top-bar. My pages are buried deep behind several layers of corporate css so we always have issues with downstream impacts on foundation css. In some cases, I had to go the hellish route of putting the style right into the page. I definitely do not recommend that - but in some cases there simply was no other solution. Fortunately our total number of pages with the top-bar nav is low so it isn't as horrible as it would be in a major web environment.

You commented on Sherry Bradford's post over 1 year

I found a "partial" solution. I had two versions of jquery in my code. I don't know enough about jquery to be able to troubleshoot very well, but I did work in the Chrome browser developer areas and found that one of those jquery files was behaving badly with the overall site theme (not controlled by me) and throwing an error. I removed the jquery causing the issue and that allowed the menu links to all work. It had some other minor impacts when I removed it, but all my primary foundation code worked OK (things like the accordion, sliders, etc.)
Insofar as the image, I had a "hero" style background image with an overlay of text that we change often. I tried different things with updating that area and ultimately went with just a straight banner image rather than hero and made the text part of the banner. That isn't a good solution for us but it did resolve the issue. My expectation is that, if I knew enough about jquery and javascript and CSS, I could have found a solution. I'm fair at CSS and javascript, but know nothing about jquery.
This menu is a temporary need for us so after spending two days getting it to work and deploying across multiple pages, I'm going to have to be happy with it working "as is". I suspect my question will not get other replies as it is about Foundation 5 and top-nav - and so many people have moved on to Foundation 6 and more refined nav options. But I'm grateful for the resources here and ultimately some of those helped me to find a way to work around this at least!
 

You commented on Sherry Bradford's post over 1 year

Rafi - are these two statements doing the same thing?
$(document).ready(foundation)();
AND
$(document.foundation();
 
 

You commented on Sherry Bradford's post about 2 years

LOL - no, we are a huge, modern airline and it is our corporate intranet for employees. There are hopes it will move off IE8 in the next year, but in the meantime this one particular "corner" of the intranet was redesigned to take advantage of whatever we could squeeze out of IE8. To add to the overall dilemma, we are built on frames as well. Foundation was a godsend in the effort to redesign this section and we get lots of compliments on usability.

Thank you for the post and I'll read up on the no.conflict mode info you provided and see if we can get past this one issue. I did learn the other day that IBM frames and IE8 have trouble with allowing links to open inside the page as you descend further into the navigation structure. The individual explaining this didn't have much detail to share, so I'm going to test out the no.conflict first. If that doesn't work, I'll investigate the nav level further.

I'm going to be so well trained on how to overcome IE8 issues that I fear I will never really get to enjoy working in a truly modern browser! Sigh.....

Posts Followed



Following

Followers