Menu icon Foundation

My Posts




  • 2
    Replies
  • Size of Icon bar and Sliding bar

    By merlin goulet

    width

    Hello everyone, I'm trying to make an Icon bar at the right of the screen (here no problem) but I need to add another Icon bar when click on one icon on the first bar. I want that when the second bar is add the first one slide to the right for the seco... (continued)

    Last Reply by merlin goulet almost 4 years ago


  • 5
    Replies
  • Select in a Modal

    By merlin goulet

    modalselectSize problem

    Hello Everyone, today I've to use a select place in a Modal frame, but the size attribut of the select isn't well render in the modal. In fact, I've test the select outside of the modal and it works, but in the modal the max size semme to be two. So,... (continued)

    Last Reply by Rafi Benkual about 4 years ago


  • 3
    Replies
  • Closable Tabs

    By merlin goulet

    tabsclosebutton

    Hello everyone, like the title say, i'm using tabs and I've implement a feature to open tabs when clicking in a link but I also what to close my tabs. To do this, I've think of a button in the header of the tabs, but don't know how to add it. If I'm n... (continued)

    Last Reply by Bob Sawyer about 4 years ago


My Comments

merlin goulet commented on merlin goulet's post about 3 years

That would be a great thing, I mean this bar is exactly what I want for my App. Another good thing to do is to create a "building project" part for Foundation for App, or do I miss it ?If there is not, I assume it's a choice of yours but that seems strange to me, why would you do that ?

merlin goulet commented on merlin goulet's post almost 4 years

If you're talking about my javaScript function, then here it is :

 var infoBarWidth = $("#infoBar").width();

 $("#Information").click(function()
  {
    if(!isClick)
    {
      $("#infoBar").css("display","block");
      $("#IconBarre").animate({marginLeft: infoBarWidth}, 300);
    }
    else
    {
      $("#infoBar").css("display","none");
      $("#IconBarre").animate({marginLeft: 0}, 300);
    }
    isClick = !isClick;
  });

The isClick variable is made to know if the second bar is already display or not.

And I've in mind that maybe the Foundation team use another function or another variable for this, not sure how it work inside.

merlin goulet commented on merlin goulet's post about 4 years

Well, it's true that rendrer better like this but what I need is a full open select (showing all the option I mean).

How to do that in a modal ?

PS : thank you for the codepen

merlin goulet commented on merlin goulet's post about 4 years

Sorry, the app is quite big and when I write code in codepen it doesn't show anything, so I'll just write it here.

<div id="fenModel" class="reveal-modal" data-reveal aria-labelledby="Enregistrer un utilisateur" aria-hidden="true" role="dialog">
  <div class="Kokurenbo">
    <div class="small-6 columns">
      <label>Format support&eacute;
        <select size="5" id="formatSelect">
          <option value="xxl">xxl</option>
          <option value="xsl">xsl</option>
          <option value="wxl">wxl</option>
          <option value="cxl">cxl</option>
          <option value="wcl">wcl</option>
        </select>
      </label>
    </div>
    <div class="small-6 columns">
      <label>Format utilis&eacute;
        <select size="5" id="formatUnselect">
        </select>
      </label>
    </div>
    <a class="button" id="OkFormatTache">OK</a>
  </div>
</div>
 $(document).foundation();
$(document).ready(function() {
  $("#fenModel").foundation('reveal', 'open');
});

Something like this, if you want more just let me know.

merlin goulet commented on merlin goulet's post about 4 years

Thank's for that, the cross will be very useful. But, for me, the tabs doesn't close at all, he just show me a header in two part, one with the name and one with the cross.

And I use the tabs to build a onglet system, like the one in your browser, so the tabs have to be closable.

Do you know a way to move the cross ahead of the header ? Or maybe to the right of him ? I can handle the close function in jQuery.

Posts Followed


  • 5
    Replies
  • Select in a Modal

    By merlin goulet

    modalselectSize problem

    Hello Everyone, today I've to use a select place in a Modal frame, but the size attribut of the select isn't well render in the modal. In fact, I've test the select outside of the modal and it works, but in the modal the max size semme to be two. So,... (continued)

    Last Reply by Rafi Benkual about 4 years ago


  • 3
    Replies
  • Closable Tabs

    By merlin goulet

    tabsclosebutton

    Hello everyone, like the title say, i'm using tabs and I've implement a feature to open tabs when clicking in a link but I also what to close my tabs. To do this, I've think of a button in the header of the tabs, but don't know how to add it. If I'm n... (continued)

    Last Reply by Bob Sawyer about 4 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on merlin goulet's post about 3 years

That would be a great thing, I mean this bar is exactly what I want for my App. Another good thing to do is to create a "building project" part for Foundation for App, or do I miss it ?If there is not, I assume it's a choice of yours but that seems strange to me, why would you do that ?

You commented on merlin goulet's post almost 4 years

If you're talking about my javaScript function, then here it is :

 var infoBarWidth = $("#infoBar").width();

 $("#Information").click(function()
  {
    if(!isClick)
    {
      $("#infoBar").css("display","block");
      $("#IconBarre").animate({marginLeft: infoBarWidth}, 300);
    }
    else
    {
      $("#infoBar").css("display","none");
      $("#IconBarre").animate({marginLeft: 0}, 300);
    }
    isClick = !isClick;
  });

The isClick variable is made to know if the second bar is already display or not.

And I've in mind that maybe the Foundation team use another function or another variable for this, not sure how it work inside.

You commented on merlin goulet's post about 4 years

Well, it's true that rendrer better like this but what I need is a full open select (showing all the option I mean).

How to do that in a modal ?

PS : thank you for the codepen

You commented on merlin goulet's post about 4 years

Sorry, the app is quite big and when I write code in codepen it doesn't show anything, so I'll just write it here.

<div id="fenModel" class="reveal-modal" data-reveal aria-labelledby="Enregistrer un utilisateur" aria-hidden="true" role="dialog">
  <div class="Kokurenbo">
    <div class="small-6 columns">
      <label>Format support&eacute;
        <select size="5" id="formatSelect">
          <option value="xxl">xxl</option>
          <option value="xsl">xsl</option>
          <option value="wxl">wxl</option>
          <option value="cxl">cxl</option>
          <option value="wcl">wcl</option>
        </select>
      </label>
    </div>
    <div class="small-6 columns">
      <label>Format utilis&eacute;
        <select size="5" id="formatUnselect">
        </select>
      </label>
    </div>
    <a class="button" id="OkFormatTache">OK</a>
  </div>
</div>
 $(document).foundation();
$(document).ready(function() {
  $("#fenModel").foundation('reveal', 'open');
});

Something like this, if you want more just let me know.

You commented on merlin goulet's post about 4 years

Thank's for that, the cross will be very useful. But, for me, the tabs doesn't close at all, he just show me a header in two part, one with the name and one with the cross.

And I use the tabs to build a onglet system, like the one in your browser, so the tabs have to be closable.

Do you know a way to move the cross ahead of the header ? Or maybe to the right of him ? I can handle the close function in jQuery.

Posts Followed



Following

  • No Content

Followers