Menu icon Foundation

My Posts

  • 2
    Replies
  • Top Bar Dropdown Question

    By Ryan

    top bartopbar

    What would be the best way to edit the JS file to change the automated "Back" link from the first, to the last link in a dropdown list? On a side note, I cannot seem to get the data-options for Top Bar working (Foundation 5.5). Could someone show me a ... (continued)

    Last Reply by Ryan over 3 years ago




  • 8
    Replies
  • Missing Menu Icon (Fn 5.2.3 Bug?)

    By Ryan

    Okay, I was just using Foundation 5.2.1 and my topbar worked perfectly on mobile, I then updated to 5.2.3 and now the menu icon is missing, which I remember plagued earlier 5.0.x versions. Is it just me or is it happening again? Is there a fix? Thanks in ... (continued)

    Last Reply by Cheyne about 4 years ago


My Comments

Ryan commented on Ryan's post over 3 years

Sorry for the late reply! Long holiday season.

Anyways, thank you for your help, but as I was browsing through your example in codepen, it seemed to have the same issue plaguing my site. Maybe I am not understanding this correctly? My understanding is that if custom_back_text is set to true and you have back_text set to, say, "Previous" then the text in the mobile menu that normally says "Back" will in be changed to "Previous", and that if mobile_show_parent_link is set to false, that the Dropdown title will not show in the mobile menu? If my understanding is correct, then the code is not working properly (even in your example with mobile_show_parent_link). Is this a bug or did I completely miss something?

I do not see how I can change the positioning of the Back text from the point you stated. Let me see if I can be more specific in my question:
Normally you have the Back text as the first link in the drop down menu. I would like to edit that so it is the last link in the drop down menu. I believe I would need to edit the JS file for that since that is where the Back link is created (but I am not positive).

Ryan commented on Ryan's post almost 4 years

Darek Wędrychowski, thank you. Added the bower directory and everything works perfectly now. Cannot believe I didn't see that. Thanks again.

Ryan commented on Ryan's post about 4 years

reenan arbitrario,

Thank you for your download links, I was unaware that I could use bower for the ui installation.

Wing-Hou Chan,

May I ask why I should remove the $(document).ready() ? After installing the ui everything works fine with and without it. Should I not be using it at all in foundation?

Ryan commented on Ryan's post about 4 years

reenan arbitrario and Wing-Hou Chan,

Thank you for your responses. I skimmed through the jQuery folder and assumed the UI was included since they seemed to have everything else...

I will download the UI and post back here later tonight when I have access to my computer again (posting from my mobile).

Thank you again.

Ryan commented on Ryan's post about 4 years

Karl Ward,

It is currently in the same html file loaded after all other scripts. I have tried placing it in the separate app.js file, and neither have worked.

I have attached the html file I am working on. I realize the code is sloppy, but this is only a test file that was meant to take 2 minutes, not two days. Is there something wrong with my jQuery?

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  <style>
    #container {
      position:relative;
      top:35%;
      left:25%;
    }

    #one, #two, #three {
      height:150px;
      width:150px;
      display:inline-block;
      margin-left:2em;
      border:2px solid black;
      -webkit-border-radius: 45px;
      -moz-border-radius: 45px;
      border-radius: 45px;
    }

    #one {background-color:red;}

    #two {background-color:green;}

    #three {background-color:blue;}
  </style>
  </head>
  <body>
  <div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  <script>
    $(document).ready(function() {
      $('#one').click(function() {
        $(this).effect('explode');
      });

      $('#two').click(function() {
        $(this).effect('bounce', {times:3}, 500);
      });

      $('#three').click(function() {
        $(this).effect('slide');
      });
    });
  </script>
  </body>
</html>

Ryan commented on Ryan's post about 4 years

I should check this more often, sorry for the late reply.

I just upgraded to foundation 5.3.0 and it still hasn't been fixed apparently. So I guess the manual hack is in order...

Thank you for the update!

Ryan commented on Ryan's post over 4 years

Thank you Chan, I did see that but wasn't sure if it was the same issue (saw 5.2.2). Thank you for the confirmation.

Ryan commented on Samuel Kelemen's post over 4 years

This is a forum for helping with Foundation websites, not just any code. Try checking out stackoverflow.com for help with your code.

Ryan commented on steve's post over 4 years

In addition to what Chan said, you also need to add the js scripts for your plugins (ie: foundation.offcanvas.js, foundation.orbit.js, etc) and make sure you included the needed css as well.

Posts Followed

  • 8
    Replies
  • Missing Menu Icon (Fn 5.2.3 Bug?)

    By Ryan

    Okay, I was just using Foundation 5.2.1 and my topbar worked perfectly on mobile, I then updated to 5.2.3 and now the menu icon is missing, which I remember plagued earlier 5.0.x versions. Is it just me or is it happening again? Is there a fix? Thanks in ... (continued)

    Last Reply by Cheyne about 4 years ago


Following

    No Content

Followers

My Posts




My Comments

You commented on Ryan's post over 3 years

Sorry for the late reply! Long holiday season.

Anyways, thank you for your help, but as I was browsing through your example in codepen, it seemed to have the same issue plaguing my site. Maybe I am not understanding this correctly? My understanding is that if custom_back_text is set to true and you have back_text set to, say, "Previous" then the text in the mobile menu that normally says "Back" will in be changed to "Previous", and that if mobile_show_parent_link is set to false, that the Dropdown title will not show in the mobile menu? If my understanding is correct, then the code is not working properly (even in your example with mobile_show_parent_link). Is this a bug or did I completely miss something?

I do not see how I can change the positioning of the Back text from the point you stated. Let me see if I can be more specific in my question:
Normally you have the Back text as the first link in the drop down menu. I would like to edit that so it is the last link in the drop down menu. I believe I would need to edit the JS file for that since that is where the Back link is created (but I am not positive).

You commented on Ryan's post almost 4 years

Darek Wędrychowski, thank you. Added the bower directory and everything works perfectly now. Cannot believe I didn't see that. Thanks again.

You commented on Ryan's post about 4 years

reenan arbitrario,

Thank you for your download links, I was unaware that I could use bower for the ui installation.

Wing-Hou Chan,

May I ask why I should remove the $(document).ready() ? After installing the ui everything works fine with and without it. Should I not be using it at all in foundation?

You commented on Ryan's post about 4 years

reenan arbitrario and Wing-Hou Chan,

Thank you for your responses. I skimmed through the jQuery folder and assumed the UI was included since they seemed to have everything else...

I will download the UI and post back here later tonight when I have access to my computer again (posting from my mobile).

Thank you again.

You commented on Ryan's post about 4 years

Karl Ward,

It is currently in the same html file loaded after all other scripts. I have tried placing it in the separate app.js file, and neither have worked.

I have attached the html file I am working on. I realize the code is sloppy, but this is only a test file that was meant to take 2 minutes, not two days. Is there something wrong with my jQuery?

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  <style>
    #container {
      position:relative;
      top:35%;
      left:25%;
    }

    #one, #two, #three {
      height:150px;
      width:150px;
      display:inline-block;
      margin-left:2em;
      border:2px solid black;
      -webkit-border-radius: 45px;
      -moz-border-radius: 45px;
      border-radius: 45px;
    }

    #one {background-color:red;}

    #two {background-color:green;}

    #three {background-color:blue;}
  </style>
  </head>
  <body>
  <div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  <script>
    $(document).ready(function() {
      $('#one').click(function() {
        $(this).effect('explode');
      });

      $('#two').click(function() {
        $(this).effect('bounce', {times:3}, 500);
      });

      $('#three').click(function() {
        $(this).effect('slide');
      });
    });
  </script>
  </body>
</html>

You commented on Ryan's post about 4 years

I should check this more often, sorry for the late reply.

I just upgraded to foundation 5.3.0 and it still hasn't been fixed apparently. So I guess the manual hack is in order...

Thank you for the update!

You commented on Ryan's post over 4 years

Thank you Chan, I did see that but wasn't sure if it was the same issue (saw 5.2.2). Thank you for the confirmation.

You commented on Samuel Kelemen's post over 4 years

This is a forum for helping with Foundation websites, not just any code. Try checking out stackoverflow.com for help with your code.

You commented on steve's post over 4 years

In addition to what Chan said, you also need to add the js scripts for your plugins (ie: foundation.offcanvas.js, foundation.orbit.js, etc) and make sure you included the needed css as well.

Posts Followed


Following

  • No Content

Followers