Menu icon Foundation

Designer | NJ

Passionate digital adviser!

My Posts







  • NEW
  • Long drop down truncated

    By Robert Brown

    Drop Down Menumega menu

    I need to offer a few ways to search for the same thing. To do that I need to test a new menu structure. I was hoping for something like a mega menu but that's currently not possible. I would prefer to keep the Dance Classes as one item vs. multipl... (continued)



  • 4
    Replies
  • Content shifted

    By Robert Brown

    gridlayout

    I started playing with Foundation last night - my first responsive framework. I created a folder on my machine I cut and pasted the elements form the templates and examples pages into Notepad++ Saved as an HTML file to my Foundation folder on my loca... (continued)

    Last Reply by Robert Brown about 5 years ago


My Comments

Robert Brown commented on Robert Brown's post about 5 years

The file "app.js" isn't in the 5.0.3 zip download - see added image above. What is that?

Robert Brown commented on Robert Brown's post about 5 years

Yep, was on 5.0.2 and moved up to 5.0.3 to fix the missing pancake.

 ```<div id="nav">
<div class="fixed">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
    <li class="name">

    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
  <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Classes</a>
          <ul class="dropdown">
            <li><label>Find classes:</label></li>
        <li class="has-dropdown">
      <a href="#" class="">By Dance Style</a>
      <ul class="dropdown">
        <li><a href="Ballet.php">Ballet</a></li>
        <li><a href="Boys.php">Boys</a></li>  
        <li><a href="Contemporay.php">Contemporary</a></li>
        <li><a href="EarlyChildhood.php">Early Childhood</a></li>
        <li><a href="Gymnastics.php">Gymnastics</a></li>    
        <li><a href="HipHop.php">Hip Hop</a></li>      
        <li><a href="Jazz.php">Jazz</a></li>    
        <li><a href="Lyrical.php">Lyrical</a></li>
        <li><a href="MusicalTheater.php">Musical Theater</a></li>      
        <li><a href="Tap.php">Tap</a></li>
        <li><a href="Zumba.php">Zumba</a></li>
      </ul>
            <li class="divider"></li>
            <li class="has-dropdown">
      <a href="#" class="">By Age</a>
      <ul class="dropdown">
        <li><a href="2.php">2 Year Olds</a></li>
        <li><a href="3.php">3 Year Olds</a></li>
        <li><a href="4.php">4 Year Olds</a></li>
        <li><a href="5.php">5 Year Olds</a></li>
        <li><a href="6to7.php">6-7 Year Olds</a></li>
        <li><a href="8to10.php">8-10 Year Olds</a></li>
        <li><a href="11plus.php">11+ Year Olds</a></li>
        <li><a href="Adult.php">Adults</a></li>
      </ul>
            <li class="divider"></li>
      <li class="has-dropdown">
        <a href="#" class="">By Season</a>
          <ul class="dropdown">
            <li><a href="Fall.php">Fall</a></li>
            <li><a href="Winter.php">Winter</a></li>
            <li><a href="Spring.php">Spring</a></li>
            <li><a href="Summer.php">Summer</a></li>
          </ul>  
      <li class="divider"></li>
      <li><a href="Schedule.php">Full Schedule</a></li>
      </ul>
      </li>
        <li class="divider"></li>
        <li><a href="#">Schedule</a></li>
        <li class="divider"></li>
        <li><a href="#">About JCDA</a></li>
    <li class="divider"></li>
    <li><a href="#">Contact Us</a></li>
    <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">(201) 435-8943</a>
          <ul class="dropdown">
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all ?</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>
</div>
</div> <!-- end #nav -->

Robert Brown commented on Robert Brown's post about 5 years

Thanks Rafi

Robert Brown commented on Robert Brown's post about 5 years

Karl,

Thanks for the reply.

The ideal state would be for the image and text to expand to the full width of the container. In my case Desktop = 12 columns
- nested 9 columns (sub - nested 3 columns (pic) & 6 columns (text))
- nested 3 columns (side bar)

If I move to mobile then I get why the pic is smaller since it's only 3 columns. but the text is 6 columns so why is it the same width as the pic? Did I mess up the nesting so the 6 columns of text are sub nested inside the 3 columns for the pic?


The item that you say was partially fixed is actually broken. It's supposed to be text bound inside a panel section.
HTML
<!-- Testimonial -->
<div class="row">
<div class="panel">
<h3>Serena B.</h3>
<p>JCDA makes movement magic.</p>
<p>"ipso lorem ZSKLjfSDkg;fjnS;fjnS;fklNSdv;lKSNvl;SKDvf:LSDKvn:SLDkvfn:SdlvknSkl;vnDSF;vlkNSDF;vlDNFSv;"</p>
</div>
</div>

Robert Brown commented on Jeffrey Lee's post about 5 years

http://test.limspec.com requires a log in

Robert Brown commented on Robert Brown's post about 5 years

I figured it out. I had the modal within a column DIV so was controlled by the column size. I pulled it out and left the html trigger so now works as expected.

Robert Brown commented on Robert Brown's post about 5 years

I really appreciate the help. I'm feeling rather stupid. I thought that maybe I had missed a DIV or something so I started from scratch and tried again to fail. I pulled out all the content and just added the Modal code on a small column and it seems the modal is being controlled by the column. Here is a live site: http://jerseycitydanceacademy.com/New/Boys.html

Here is the code form the page.

<!-- Logo -->
<div class="row">
    <div class="large-12 columns">
      <div class="large-3 columns">
      <img src="img/Logo Color.jpg">
      </div>
      <hr />
    </div>
</div>

<div class="row">        

 <!--Model -->      
  <div class="large-6 columns">
  </div>
  <div class="large-3 columns">
      <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
      <div id="myModal" class="reveal-modal" data-reveal>
      <h2>Awesome. I have it.</h2>
      <p class="lead">Your couch.  It is mine.</p>
        <form>
  <div class="row">
    <div class="large-3 columns">
      <label><b>Name</B></label>
      <input type="text" placeholder="First & Last Name" />
    </div>
  </div>
  <div class="row">
    <div class="large-3 columns">
      <label><b>Email Address</b></label>
      <input type="text" placeholder="emal address" />
    </div>
  </div>
  <div class="row">
    <div class="large-3 columns">
      <label><b>Phone Number</b></label>
      <input type="text" placeholder="(xxx) xxx-xxxx" />
    </div>
  </div>
  <div class="row">
    <div class="large-3 columns">
      <label><b>Subject</b></label>
      <select>
        <option value="Early Childhood classes (ages 2 - 5)">Early Childhood classes (ages 2 - 5)</option>
        <option value="Childhood classes (ages 6 - 11)">Childhood classes (ages 6 - 11)</option>
        <option value="Tween/Teen classses (ages 11+)">Tween/Teen classses (ages 11+)</option>
        <option value="Adult classes">Adult classes</option>
    <option value="Dance Team">Dance Team</option>
    <option value="Other">Other</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="large- columns">
      <label><b>Comments</b></label>
      <textarea placeholder="Please enter your comments or questions here"></textarea>
    </div>
  </div>
</form>
      <a class="close-reveal-modal">&#215;</a>
  </div>
  </div>
 <!-- Social Media -->    
  <div class="large-3 columns">
    <div class="panel">
      <h3>Connect with us</h3>
      <a href="https://www.facebook.com/JerseyCityDanceAcademy"><img src="img/webicons-master/webicons/webicon-facebook-m.PNG"></a>
      <a href="http://www.flickr.com/photos/jerseycitydanceacademy"><img src="img/webicons-master/webicons/webicon-flickr-m.PNG"></a>
      <a href="https://foursquare.com/v/jersey-city-dance-academy/4ba2a574f964a520480c38e3"><img src="img/webicons-master/webicons/webicon-foursquare-m.PNG"></a>
      <a href="https://plus.google.com/107257154559168080360/about"><img src="img/webicons-master/webicons/webicon-googleplus-m.PNG"></a>
      <a href="http://instagram.com/jerseycitydanceacademy"><img src="img/webicons-master/webicons/webicon-instagram-m.PNG"></a>
      <a href="myfile.htm"><img src="img/webicons-master/webicons/webicon-mail-m.PNG"></a>
      <a href="https://twitter.com/JerseyCityDance"><img src="img/webicons-master/webicons/webicon-twitter-m.PNG"></a>
      <a href="http://www.yelp.com/biz/jersey-city-dance-academy-jersey-city"><img src="img/webicons-master/webicons/webicon-yelp-m.PNG"></a>
      <a href="http://www.youtube.com/user/JerseyCityDance"><img src="img/webicons-master/webicons/webicon-youtube-m.PNG"></a>

    </div>
  </div>
</div>
 <!-- Footer -->  
  <footer class="row">
    <div class="large-12 columns">
      <hr>
      <div class="row">
        <div class="large-8 columns">
          <p>Jersey City Dance Academy 107 Westside ave. Jersey City, NJ 07305</p>
        </div>
        <div class="large-4 columns">
          <ul class="inline-list right">
            <li><a href="#">Terms of use</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Site Map</a></li>
          </ul>
        </div>
      </div>
    </div>
  <div class="large-12 columns">
  <div class="row">
        <div class="large-8 columns">
          <p>(201) 435-8943    <a mailto="Info@JerseyCityDanceAcademy.com">Info@JerseyCityDanceAcademy.com</a></p>
        </div>
      </div>
  </div>
  </footer>
  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>

 <script src="js/foundation.min.js"></script>
  <!--

  <script src="js/foundation/foundation.js"></script>

  <script src="js/foundation/foundation.alerts.js"></script>

  <script src="js/foundation/foundation.clearing.js"></script>

  <script src="js/foundation/foundation.cookie.js"></script>

  <script src="js/foundation/foundation.dropdown.js"></script>

  <script src="js/foundation/foundation.forms.js"></script>

  <script src="js/foundation/foundation.joyride.js"></script>

  <script src="js/foundation/foundation.magellan.js"></script>

  <script src="js/foundation/foundation.orbit.js"></script>

  <script src="js/foundation/foundation.reveal.js"></script>

  <script src="js/foundation/foundation.section.js"></script>

  <script src="js/foundation/foundation.tooltips.js"></script>

  <script src="js/foundation/foundation.topbar.js"></script>

  <script src="js/foundation/foundation.interchange.js"></script>

  <script src="js/foundation/foundation.placeholder.js"></script>

  <script src="js/foundation/foundation.abide.js"></script>

  -->

  <script>
    $(document).foundation();
  </script>
</body>

Robert Brown commented on Robert Brown's post about 5 years

Never mind - I figured it out. I was missing a div. Thank you for your help.

Robert Brown commented on Robert Brown's post about 5 years

Rafi,

Thank you for taking the time to help. I cut and pasted your code into a new page and it did the same thing. Then I compared your code to mine. I noticed you added
&

However, the content sections seem to be the same - this seems to be where the problem lies. Am I missing another container/div to hold them in place?

Thanks,

Robert

Posts Followed


Following

    No Content

Followers

My Posts







My Comments

You commented on Robert Brown's post about 5 years

The file "app.js" isn't in the 5.0.3 zip download - see added image above. What is that?

You commented on Robert Brown's post about 5 years

Yep, was on 5.0.2 and moved up to 5.0.3 to fix the missing pancake.

 ```<div id="nav">
<div class="fixed">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
    <li class="name">

    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
  <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Classes</a>
          <ul class="dropdown">
            <li><label>Find classes:</label></li>
        <li class="has-dropdown">
      <a href="#" class="">By Dance Style</a>
      <ul class="dropdown">
        <li><a href="Ballet.php">Ballet</a></li>
        <li><a href="Boys.php">Boys</a></li>  
        <li><a href="Contemporay.php">Contemporary</a></li>
        <li><a href="EarlyChildhood.php">Early Childhood</a></li>
        <li><a href="Gymnastics.php">Gymnastics</a></li>    
        <li><a href="HipHop.php">Hip Hop</a></li>      
        <li><a href="Jazz.php">Jazz</a></li>    
        <li><a href="Lyrical.php">Lyrical</a></li>
        <li><a href="MusicalTheater.php">Musical Theater</a></li>      
        <li><a href="Tap.php">Tap</a></li>
        <li><a href="Zumba.php">Zumba</a></li>
      </ul>
            <li class="divider"></li>
            <li class="has-dropdown">
      <a href="#" class="">By Age</a>
      <ul class="dropdown">
        <li><a href="2.php">2 Year Olds</a></li>
        <li><a href="3.php">3 Year Olds</a></li>
        <li><a href="4.php">4 Year Olds</a></li>
        <li><a href="5.php">5 Year Olds</a></li>
        <li><a href="6to7.php">6-7 Year Olds</a></li>
        <li><a href="8to10.php">8-10 Year Olds</a></li>
        <li><a href="11plus.php">11+ Year Olds</a></li>
        <li><a href="Adult.php">Adults</a></li>
      </ul>
            <li class="divider"></li>
      <li class="has-dropdown">
        <a href="#" class="">By Season</a>
          <ul class="dropdown">
            <li><a href="Fall.php">Fall</a></li>
            <li><a href="Winter.php">Winter</a></li>
            <li><a href="Spring.php">Spring</a></li>
            <li><a href="Summer.php">Summer</a></li>
          </ul>  
      <li class="divider"></li>
      <li><a href="Schedule.php">Full Schedule</a></li>
      </ul>
      </li>
        <li class="divider"></li>
        <li><a href="#">Schedule</a></li>
        <li class="divider"></li>
        <li><a href="#">About JCDA</a></li>
    <li class="divider"></li>
    <li><a href="#">Contact Us</a></li>
    <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">(201) 435-8943</a>
          <ul class="dropdown">
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all ?</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>
</div>
</div> <!-- end #nav -->

You commented on Robert Brown's post about 5 years

Thanks Rafi

You commented on Robert Brown's post about 5 years

Karl,

Thanks for the reply.

The ideal state would be for the image and text to expand to the full width of the container. In my case Desktop = 12 columns
- nested 9 columns (sub - nested 3 columns (pic) & 6 columns (text))
- nested 3 columns (side bar)

If I move to mobile then I get why the pic is smaller since it's only 3 columns. but the text is 6 columns so why is it the same width as the pic? Did I mess up the nesting so the 6 columns of text are sub nested inside the 3 columns for the pic?


The item that you say was partially fixed is actually broken. It's supposed to be text bound inside a panel section.
HTML
<!-- Testimonial -->
<div class="row">
<div class="panel">
<h3>Serena B.</h3>
<p>JCDA makes movement magic.</p>
<p>"ipso lorem ZSKLjfSDkg;fjnS;fjnS;fklNSdv;lKSNvl;SKDvf:LSDKvn:SLDkvfn:SdlvknSkl;vnDSF;vlkNSDF;vlDNFSv;"</p>
</div>
</div>

You commented on Jeffrey Lee's post about 5 years

http://test.limspec.com requires a log in

You commented on Robert Brown's post about 5 years

I figured it out. I had the modal within a column DIV so was controlled by the column size. I pulled it out and left the html trigger so now works as expected.

You commented on Robert Brown's post about 5 years

I really appreciate the help. I'm feeling rather stupid. I thought that maybe I had missed a DIV or something so I started from scratch and tried again to fail. I pulled out all the content and just added the Modal code on a small column and it seems the modal is being controlled by the column. Here is a live site: http://jerseycitydanceacademy.com/New/Boys.html

Here is the code form the page.

<!-- Logo -->
<div class="row">
    <div class="large-12 columns">
      <div class="large-3 columns">
      <img src="img/Logo Color.jpg">
      </div>
      <hr />
    </div>
</div>

<div class="row">        

 <!--Model -->      
  <div class="large-6 columns">
  </div>
  <div class="large-3 columns">
      <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
      <div id="myModal" class="reveal-modal" data-reveal>
      <h2>Awesome. I have it.</h2>
      <p class="lead">Your couch.  It is mine.</p>
        <form>
  <div class="row">
    <div class="large-3 columns">
      <label><b>Name</B></label>
      <input type="text" placeholder="First & Last Name" />
    </div>
  </div>
  <div class="row">
    <div class="large-3 columns">
      <label><b>Email Address</b></label>
      <input type="text" placeholder="emal address" />
    </div>
  </div>
  <div class="row">
    <div class="large-3 columns">
      <label><b>Phone Number</b></label>
      <input type="text" placeholder="(xxx) xxx-xxxx" />
    </div>
  </div>
  <div class="row">
    <div class="large-3 columns">
      <label><b>Subject</b></label>
      <select>
        <option value="Early Childhood classes (ages 2 - 5)">Early Childhood classes (ages 2 - 5)</option>
        <option value="Childhood classes (ages 6 - 11)">Childhood classes (ages 6 - 11)</option>
        <option value="Tween/Teen classses (ages 11+)">Tween/Teen classses (ages 11+)</option>
        <option value="Adult classes">Adult classes</option>
    <option value="Dance Team">Dance Team</option>
    <option value="Other">Other</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="large- columns">
      <label><b>Comments</b></label>
      <textarea placeholder="Please enter your comments or questions here"></textarea>
    </div>
  </div>
</form>
      <a class="close-reveal-modal">&#215;</a>
  </div>
  </div>
 <!-- Social Media -->    
  <div class="large-3 columns">
    <div class="panel">
      <h3>Connect with us</h3>
      <a href="https://www.facebook.com/JerseyCityDanceAcademy"><img src="img/webicons-master/webicons/webicon-facebook-m.PNG"></a>
      <a href="http://www.flickr.com/photos/jerseycitydanceacademy"><img src="img/webicons-master/webicons/webicon-flickr-m.PNG"></a>
      <a href="https://foursquare.com/v/jersey-city-dance-academy/4ba2a574f964a520480c38e3"><img src="img/webicons-master/webicons/webicon-foursquare-m.PNG"></a>
      <a href="https://plus.google.com/107257154559168080360/about"><img src="img/webicons-master/webicons/webicon-googleplus-m.PNG"></a>
      <a href="http://instagram.com/jerseycitydanceacademy"><img src="img/webicons-master/webicons/webicon-instagram-m.PNG"></a>
      <a href="myfile.htm"><img src="img/webicons-master/webicons/webicon-mail-m.PNG"></a>
      <a href="https://twitter.com/JerseyCityDance"><img src="img/webicons-master/webicons/webicon-twitter-m.PNG"></a>
      <a href="http://www.yelp.com/biz/jersey-city-dance-academy-jersey-city"><img src="img/webicons-master/webicons/webicon-yelp-m.PNG"></a>
      <a href="http://www.youtube.com/user/JerseyCityDance"><img src="img/webicons-master/webicons/webicon-youtube-m.PNG"></a>

    </div>
  </div>
</div>
 <!-- Footer -->  
  <footer class="row">
    <div class="large-12 columns">
      <hr>
      <div class="row">
        <div class="large-8 columns">
          <p>Jersey City Dance Academy 107 Westside ave. Jersey City, NJ 07305</p>
        </div>
        <div class="large-4 columns">
          <ul class="inline-list right">
            <li><a href="#">Terms of use</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Site Map</a></li>
          </ul>
        </div>
      </div>
    </div>
  <div class="large-12 columns">
  <div class="row">
        <div class="large-8 columns">
          <p>(201) 435-8943    <a mailto="Info@JerseyCityDanceAcademy.com">Info@JerseyCityDanceAcademy.com</a></p>
        </div>
      </div>
  </div>
  </footer>
  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>

 <script src="js/foundation.min.js"></script>
  <!--

  <script src="js/foundation/foundation.js"></script>

  <script src="js/foundation/foundation.alerts.js"></script>

  <script src="js/foundation/foundation.clearing.js"></script>

  <script src="js/foundation/foundation.cookie.js"></script>

  <script src="js/foundation/foundation.dropdown.js"></script>

  <script src="js/foundation/foundation.forms.js"></script>

  <script src="js/foundation/foundation.joyride.js"></script>

  <script src="js/foundation/foundation.magellan.js"></script>

  <script src="js/foundation/foundation.orbit.js"></script>

  <script src="js/foundation/foundation.reveal.js"></script>

  <script src="js/foundation/foundation.section.js"></script>

  <script src="js/foundation/foundation.tooltips.js"></script>

  <script src="js/foundation/foundation.topbar.js"></script>

  <script src="js/foundation/foundation.interchange.js"></script>

  <script src="js/foundation/foundation.placeholder.js"></script>

  <script src="js/foundation/foundation.abide.js"></script>

  -->

  <script>
    $(document).foundation();
  </script>
</body>

You commented on Robert Brown's post about 5 years

Never mind - I figured it out. I was missing a div. Thank you for your help.

You commented on Robert Brown's post about 5 years

Rafi,

Thank you for taking the time to help. I cut and pasted your code into a new page and it did the same thing. Then I compared your code to mine. I noticed you added
&

However, the content sections seem to be the same - this seems to be where the problem lies. Am I missing another container/div to hold them in place?

Thanks,

Robert

Posts Followed

Following

  • No Content

Followers

  • No Content