Menu icon Foundation

Designer

My Posts

  • NEW
  • How do I toggle z-index of tabs?

    By annearchy

    tabsz-indexshadows

    Hey I asked this question over on StackO but it's sitting over there unanswered so I thought I would give it a try here since I'm using foundation to make my site. I want to re-arrange the z-index of my tabs based upon which tab is clicked like my imag... (continued)







My Comments

annearchy commented on annearchy's post almost 5 years

I removed "id="right-label" from the select box and now the dropdown is working fine (crosses fingers!)

annearchy commented on annearchy's post almost 5 years

I just discovered something else too Rafi-

I have a select box further down in my page. I removed the select box and now the button group dropdown that you posted (first button dropdown only) works!

However, if I put the select box back in, then the dropdown disappears again! Why are they clashing?

  <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="stylesheets/app.css" />
    <link rel="stylesheet" href="scss/_settings.scss">
   <script src="bower_components/modernizr/modernizr.js"></script>
   <script src="js/app.js"></script>
  </head>
  <body>


  <ul class="button-group">
<li><a href="#" data-dropdown="drop1" data-options="is_hover:true" class="button dropdown">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
  <li><a href="#" class="button">Dropdown Button</a></li>
</ul>


<ul id="drop1" data-dropdown-content class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>




                      <div class="small-9 small-centered custom-row-class-centered  medium-6 medium-uncentered large-6 columns">
                            <select name="category" id="right-label" autocomplete="off" > 
<option selected="selected"> 
    Select Category
    </option> 
    <option value="search.html"> 
    Animals
    </option> 
      <option value="search.html"> 
    Children
    </option> 
       <option value="search.html"> 
    Humanitarian
    </option> 
      <option value="search.html"> 
    Medical
    </option> 
      <option value="search.html"> 
    Memorial
    </option> 
</select> 

                    </div>

            </div>
         </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>
  </body>
</html>

annearchy commented on annearchy's post almost 5 years

First of all, go away spammer.

Thanks Rafi. I only have 1 menu item (the first button) with a dropdown so if I take the code you posted and take the dropdowns off the next two it works for me by itself like this -

<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="stylesheets/app.css" />
    <link rel="stylesheet" href="scss/_settings.scss">
   <script src="bower_components/modernizr/modernizr.js"></script>
   <script src="js/app.js"></script>
  </head>
  <body>


  <ul class="button-group">
<li><a href="#" data-dropdown="drop1" data-options="is_hover:true" class="button dropdown">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
  <li><a href="#" class="button">Dropdown Button</a></li>
</ul>


<ul id="drop1" data-dropdown-content class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
</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>
  </body>
</html>



But then, as soon as I add in content beneath the button group, the problem happens again!
I will keep checking thanks for looking into it!

annearchy commented on annearchy's post almost 5 years

Sorry something was off it's fixed now thank you Lyn!

annearchy commented on annearchy's post almost 5 years

Hi Lyn,

I added in" data-options="deep_linking: true"> but when refreshing the second and third it still goes back to the main tab.

Do I need to add javascript? I tried something like this (with changed id's) and it wouldn't work either :(.

http://foundation.zurb.com/forum/posts/11356-foundation-tabs-when-i-refresh.

Otherwise the tabs are functioning normally.

annearchy commented on annearchy's post about 5 years

Hey lyn,

Thank you for your answer and HTML suggestions too.

So when you viewed this small there was no gap is what you are saying?

I will run through my CSS again if that is the case.

-annearchy

annearchy commented on annearchy's post about 5 years

Hi Wing and thanks for answering back so soon! Really appreciate it after googling this forever....

small-2, small-6, small-(blank), small-4 = 12

medium-2, medium-6, medium-1, medium-3 = 12

large-2, large-5, large-2, large-3= 12

I have after all 4 lines like this-

Here is the full code. Sorry if it's a bit of a mess but I'm still learning!

      <div class="small-2 medium-2 large-2 columns">
    <img src="images/guyhospital.png" style="float:left;" align="center" width="117" height="101"/></div>
    <div class="small-6 medium-6 large-5 columns" id="title">

    <h2>John Doe,Toronto ON </h2>
      <h3>Medical Expenses</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut adipisicing elit, sed db. </p>
   </div>
    <div class="hide-for-small medium-1 large-2 columns">
        <h4>70%</h4>

      <h5>of goal reached</h5> 
      </div>


     <div class="small-4 medium-3 large-3 columns" id="goal">


   <h6>Goal $5,000</h6>

<canvas id="weeklyGoal" height="57" width="57" ></canvas>
    <h6>Days Left: 5 <i> <font color="red">Ending Soon</i></font></h6>

annearchy commented on annearchy's post about 5 years

Ah much simpler Karl. Sorry I am a NOOB!

annearchy commented on annearchy's post about 5 years

I think I found an answer that works for now -- My problem was figuring out the .tabs a part.

Thanks Smartpixels!

.tabs a{
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

annearchy commented on annearchy's post about 5 years

Your answer worked but now the tabs are too rounded, even if I make the radius 1px. Here is a pic of what I am trying to achieve -

http://s30.postimg.org/n1u1we5u9/panel.jpg

I read on css tricks to just make an image and use that as a bg but isn't there a way to achieve this with css/scss and wouldn't it be more responsive?

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on annearchy's post almost 5 years

I removed "id="right-label" from the select box and now the dropdown is working fine (crosses fingers!)

You commented on annearchy's post almost 5 years

I just discovered something else too Rafi-

I have a select box further down in my page. I removed the select box and now the button group dropdown that you posted (first button dropdown only) works!

However, if I put the select box back in, then the dropdown disappears again! Why are they clashing?

  <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="stylesheets/app.css" />
    <link rel="stylesheet" href="scss/_settings.scss">
   <script src="bower_components/modernizr/modernizr.js"></script>
   <script src="js/app.js"></script>
  </head>
  <body>


  <ul class="button-group">
<li><a href="#" data-dropdown="drop1" data-options="is_hover:true" class="button dropdown">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
  <li><a href="#" class="button">Dropdown Button</a></li>
</ul>


<ul id="drop1" data-dropdown-content class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>




                      <div class="small-9 small-centered custom-row-class-centered  medium-6 medium-uncentered large-6 columns">
                            <select name="category" id="right-label" autocomplete="off" > 
<option selected="selected"> 
    Select Category
    </option> 
    <option value="search.html"> 
    Animals
    </option> 
      <option value="search.html"> 
    Children
    </option> 
       <option value="search.html"> 
    Humanitarian
    </option> 
      <option value="search.html"> 
    Medical
    </option> 
      <option value="search.html"> 
    Memorial
    </option> 
</select> 

                    </div>

            </div>
         </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>
  </body>
</html>

You commented on annearchy's post almost 5 years

First of all, go away spammer.

Thanks Rafi. I only have 1 menu item (the first button) with a dropdown so if I take the code you posted and take the dropdowns off the next two it works for me by itself like this -

<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="stylesheets/app.css" />
    <link rel="stylesheet" href="scss/_settings.scss">
   <script src="bower_components/modernizr/modernizr.js"></script>
   <script src="js/app.js"></script>
  </head>
  <body>


  <ul class="button-group">
<li><a href="#" data-dropdown="drop1" data-options="is_hover:true" class="button dropdown">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
<li><a href="#" class="button">Dropdown Button</a></li>
  <li><a href="#" class="button">Dropdown Button</a></li>
</ul>


<ul id="drop1" data-dropdown-content class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
</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>
  </body>
</html>



But then, as soon as I add in content beneath the button group, the problem happens again!
I will keep checking thanks for looking into it!

You commented on annearchy's post almost 5 years

Sorry something was off it's fixed now thank you Lyn!

You commented on annearchy's post almost 5 years

Hi Lyn,

I added in" data-options="deep_linking: true"> but when refreshing the second and third it still goes back to the main tab.

Do I need to add javascript? I tried something like this (with changed id's) and it wouldn't work either :(.

http://foundation.zurb.com/forum/posts/11356-foundation-tabs-when-i-refresh.

Otherwise the tabs are functioning normally.

You commented on annearchy's post about 5 years

Hey lyn,

Thank you for your answer and HTML suggestions too.

So when you viewed this small there was no gap is what you are saying?

I will run through my CSS again if that is the case.

-annearchy

You commented on annearchy's post about 5 years

Hi Wing and thanks for answering back so soon! Really appreciate it after googling this forever....

small-2, small-6, small-(blank), small-4 = 12

medium-2, medium-6, medium-1, medium-3 = 12

large-2, large-5, large-2, large-3= 12

I have after all 4 lines like this-

Here is the full code. Sorry if it's a bit of a mess but I'm still learning!

      <div class="small-2 medium-2 large-2 columns">
    <img src="images/guyhospital.png" style="float:left;" align="center" width="117" height="101"/></div>
    <div class="small-6 medium-6 large-5 columns" id="title">

    <h2>John Doe,Toronto ON </h2>
      <h3>Medical Expenses</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut adipisicing elit, sed db. </p>
   </div>
    <div class="hide-for-small medium-1 large-2 columns">
        <h4>70%</h4>

      <h5>of goal reached</h5> 
      </div>


     <div class="small-4 medium-3 large-3 columns" id="goal">


   <h6>Goal $5,000</h6>

<canvas id="weeklyGoal" height="57" width="57" ></canvas>
    <h6>Days Left: 5 <i> <font color="red">Ending Soon</i></font></h6>

You commented on annearchy's post about 5 years

Ah much simpler Karl. Sorry I am a NOOB!

You commented on annearchy's post about 5 years

I think I found an answer that works for now -- My problem was figuring out the .tabs a part.

Thanks Smartpixels!

.tabs a{
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

You commented on annearchy's post about 5 years

Your answer worked but now the tabs are too rounded, even if I make the radius 1px. Here is a pic of what I am trying to achieve -

http://s30.postimg.org/n1u1we5u9/panel.jpg

I read on css tricks to just make an image and use that as a bg but isn't there a way to achieve this with css/scss and wouldn't it be more responsive?

Posts Followed

No Content

Following

  • No Content

Followers