Menu icon Foundation

Developer | Clarksville, IN

I am finding that it is good that I am not yet working on a paying project :) The more I use Foundation and learning more and more, I am going back over what I have written and am fixing my mistakes. Really like Foundation at this point. I am not one to write a lot of JS, finding with Foundation I don't have to which is a very good selling point for me. Scaling from large to mobile screens is very easy with Foundation another added bonus for me

My Posts




  • 1
    Reply
  • Content out of content block

    By Mike Parks

    content

    I am building a site in Codeigniter and using Foundation. I have a offCanvas menu in the admin and it works. But my oncanvas content is not quite right. I have a form on a page but is not filling in correctly. It is going outside of it's box area. I have ... (continued)

    Last Reply by Mike Parks almost 4 years ago


My Comments

Mike Parks commented on Mike Parks's post almost 4 years

Thanks Brian
I stripped it down and rewrote this and it seems to work other than I have another really strange issue with the input box??? I can't just click on it and change the value??? I have to tab to it to change the value? Really weird if I click on the lower right corner of the input box then I change the value???? idk but it works

<div class='large-2 columns callout'>
<img src='./images/home/thumbs/0524151208_thumb.jpg'><br /><br /><form action="./admin/jumbotron/update" method="post" accept-charset="utf-8">

<input type="hidden" name="idjumbotron" value="4" />
<div class='large-5 columns'>
<input type="text" name="order" value="0"  onblur="this.form.submit()" onfocus="this.select();" size="4" />
</div>
<div class='align-middle switch tiny'>
<input type="checkbox" name="active" value="1" checked="checked"  class="switch-input" id="active4" onchange="this.form.submit()" />
<label class='switch-paddle text-right' for='active4'>
<span class='show-for-sr'></span>
<span class='switch-active' aria-hidden='true'>Yes</span>
<span class='switch-inactive' aria-hidden='true'>No</span>
</label></div></form></div>

Mike Parks commented on Mike Parks's post almost 4 years

I have it!!! But not with zurb. Maybe this can go in the next rev. ?

<table id="edit_table">
          <thead>
            <tr>
              <th>header 1</th>
              <th>header 2</th>
              <th>header 3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>cell1</td>
              <td>cell2</td>
              <td>cell3</td>
            </tr>
            <tr>
              <td colspan="3">I am
                hidden until the accordion opens me</td>
            </tr>
            <tr>
              <td>cell1</td>
              <td>cell2</td>
              <td>cell3</td>
            </tr>
            <tr>
              <td colspan="3">I am
                hidden until the accordion opens me</td>
            </tr>
          </tbody>
        </table>

And the jquery

 (function($){
    $.fn.jExpand = function(){
        var element = this;
        $(element).find("tr:odd").addClass("odd");
        $(element).find("tr:not(.odd)").hide();
        $(element).find("tr:first-child").show();
        $(element).find("tr.odd").click(function() {
            $(this).next("tr").toggle();
        });       
    }   
})(jQuery);

$('#edit_table').jExpand();

Mike Parks commented on Mike Parks's post almost 4 years

And another iteration with this code
HTML
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
</thead>
<tbody class="accordion" data-accordion
data-allow-all-closed='true'>
<tr class="accordion-item">
<td href="#" class="accordion-title">cell1</a></td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td colspan="3" class="accordion-content" data-tab-content>I am
hidden until the accordion opens me</td>
</tr>
</tbody>
</table>

Mike Parks commented on Mike Parks's post almost 4 years

Thanks Brian

I have built a test table. So far what I have works except for displaying the alternate row
HTML
<table class="accordion" data-accordion role="tablist">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
</thead>
<tbody class="accordion-item is-active">
<tr>
<td><a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">cell1</a></td><td>cell2</td><td>cell3</td>
</tr>
<tr>
<td colspan="3" id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">I am hidden until the accordion opens me</td>
</tr>
</tbody>
</table>

If I put the ' id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading"' on the tr it does not hide the alternate row. But putting that on the td I cannot get it to show when I click 'cell1' And the same if I put ' href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d"' on the tr for the displaying row it does not hide the intended alternate row. I can put that on the td and it will have the same result as using the anchor tag.

Mike Parks commented on Mike Parks's post almost 4 years

Ok I have found the problem after completely rebuilding the form. It has to do with the grids I guess?

From what I see, if you are building a form say 10 grids wide, and you are setting inputs 3 grids or 6 grids wide, you have to add an empty div that takes up the remaining grids in the row. This corrected my field alignment and is filling in the content div correctly.

<div class='row'>
  <div class='large-6 medium-6 small-6 columns'>
    <label> Email: <input type="text" name="email" value=""  maxlength="255" size="75" />
    </label>
  </div>
  <div class='large-4 medium-4 small-4 columns'>
  </div>
</div>

Posts Followed


  • 1
    Reply
  • Content out of content block

    By Mike Parks

    content

    I am building a site in Codeigniter and using Foundation. I have a offCanvas menu in the admin and it works. But my oncanvas content is not quite right. I have a form on a page but is not filling in correctly. It is going outside of it's box area. I have ... (continued)

    Last Reply by Mike Parks almost 4 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Mike Parks's post almost 4 years

Thanks Brian
I stripped it down and rewrote this and it seems to work other than I have another really strange issue with the input box??? I can't just click on it and change the value??? I have to tab to it to change the value? Really weird if I click on the lower right corner of the input box then I change the value???? idk but it works

<div class='large-2 columns callout'>
<img src='./images/home/thumbs/0524151208_thumb.jpg'><br /><br /><form action="./admin/jumbotron/update" method="post" accept-charset="utf-8">

<input type="hidden" name="idjumbotron" value="4" />
<div class='large-5 columns'>
<input type="text" name="order" value="0"  onblur="this.form.submit()" onfocus="this.select();" size="4" />
</div>
<div class='align-middle switch tiny'>
<input type="checkbox" name="active" value="1" checked="checked"  class="switch-input" id="active4" onchange="this.form.submit()" />
<label class='switch-paddle text-right' for='active4'>
<span class='show-for-sr'></span>
<span class='switch-active' aria-hidden='true'>Yes</span>
<span class='switch-inactive' aria-hidden='true'>No</span>
</label></div></form></div>

You commented on Mike Parks's post almost 4 years

I have it!!! But not with zurb. Maybe this can go in the next rev. ?

<table id="edit_table">
          <thead>
            <tr>
              <th>header 1</th>
              <th>header 2</th>
              <th>header 3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>cell1</td>
              <td>cell2</td>
              <td>cell3</td>
            </tr>
            <tr>
              <td colspan="3">I am
                hidden until the accordion opens me</td>
            </tr>
            <tr>
              <td>cell1</td>
              <td>cell2</td>
              <td>cell3</td>
            </tr>
            <tr>
              <td colspan="3">I am
                hidden until the accordion opens me</td>
            </tr>
          </tbody>
        </table>

And the jquery

 (function($){
    $.fn.jExpand = function(){
        var element = this;
        $(element).find("tr:odd").addClass("odd");
        $(element).find("tr:not(.odd)").hide();
        $(element).find("tr:first-child").show();
        $(element).find("tr.odd").click(function() {
            $(this).next("tr").toggle();
        });       
    }   
})(jQuery);

$('#edit_table').jExpand();

You commented on Mike Parks's post almost 4 years

And another iteration with this code
HTML
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
</thead>
<tbody class="accordion" data-accordion
data-allow-all-closed='true'>
<tr class="accordion-item">
<td href="#" class="accordion-title">cell1</a></td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td colspan="3" class="accordion-content" data-tab-content>I am
hidden until the accordion opens me</td>
</tr>
</tbody>
</table>

You commented on Mike Parks's post almost 4 years

Thanks Brian

I have built a test table. So far what I have works except for displaying the alternate row
HTML
<table class="accordion" data-accordion role="tablist">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
</tr>
</thead>
<tbody class="accordion-item is-active">
<tr>
<td><a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">cell1</a></td><td>cell2</td><td>cell3</td>
</tr>
<tr>
<td colspan="3" id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">I am hidden until the accordion opens me</td>
</tr>
</tbody>
</table>

If I put the ' id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading"' on the tr it does not hide the alternate row. But putting that on the td I cannot get it to show when I click 'cell1' And the same if I put ' href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d"' on the tr for the displaying row it does not hide the intended alternate row. I can put that on the td and it will have the same result as using the anchor tag.

You commented on Mike Parks's post almost 4 years

Ok I have found the problem after completely rebuilding the form. It has to do with the grids I guess?

From what I see, if you are building a form say 10 grids wide, and you are setting inputs 3 grids or 6 grids wide, you have to add an empty div that takes up the remaining grids in the row. This corrected my field alignment and is filling in the content div correctly.

<div class='row'>
  <div class='large-6 medium-6 small-6 columns'>
    <label> Email: <input type="text" name="email" value=""  maxlength="255" size="75" />
    </label>
  </div>
  <div class='large-4 medium-4 small-4 columns'>
  </div>
</div>

Posts Followed



Following

  • No Content

Followers

  • No Content