Menu icon Foundation

My Posts

  • NEW
  • Putting MPTT Menu into Dropdown

    By Andrew Walker

    dropdownMPTT

      Hello , I am trying to put a MPTT into a dropdown menu. Here is an array example: This is the code I am using at the moment: function array2ul($array) { $out = '<ul class="dropdown menu" data-dropdown-menu>'; foreach ($array as ... (continued)


  • 1
    Reply
  • Change Grid Columns on Hide

    By Andrew Walker

    gridcolumnscss

    Hiya,   I have run into a problem which I hope someone can help with.  Doing a responsive site I have a filter on the left for desktops and tablets, but I want the filter to be removed on phones.  So for this I use hide-for-small-only. B... (continued)

    Last Reply by Rafi Benkual over 3 years ago





  • 1
    Reply
  • Modal Confirm Callback

    By Andrew Walker

    modalcallback

    How do I go about having a callback, with what was pressed within a callback modal. Trying to make a confirm callback modal that can be reused. So I have too buttons, Confirm, Cancel. This is called by a click of a foundation-icon. I would like wh... (continued)

    Last Reply by Andrew Walker almost 5 years ago


  • 2
    Replies
  • Tabs to cover full length of Div

    By Andrew Walker

    tabscss

    Is it possible to have tabs, so they cover the full length of a div, and then divide each tab equally, so they are the same size? I have a large-8 column, and I would like to add 3 tabs, but it looks a little odd having three with a large space. Not l... (continued)

    Last Reply by Andrew Walker almost 5 years ago



My Comments

Andrew Walker commented on Andrew Walker's post almost 4 years

Okay, it was because I did not add the $(document).foundation(); even though it was in the App.js which was included, but that was because I had it at the top, rather than bottom.

Sorted now.

Thanks Brian.

Andrew Walker commented on Andrew Walker's post almost 4 years

Hi Brian,

Yes, they are included in the headers.

Here is the code for the headers:

    <!-- Foundation 6 -->
    <link rel="stylesheet" href="<?php echo HOME; ?>/css/foundation.css" />
    <link rel="stylesheet" href="<?php echo HOME; ?>/css/app.css" />

    <script src="<?php echo HOME; ?>/js/vendor/jquery.min.js"></script>
    <script src="<?php echo HOME; ?>/js/foundation.js"></script>
    <script src="<?php echo HOME; ?>/js/app.js"></script>

I can see from looking at the debug in the browser it is loading. But just incase I added them to the file itself, but still not working.

<!-- Foundation 6 -->
<link rel="stylesheet" href="<?php echo HOME; ?>/css/foundation.css" />
<link rel="stylesheet" href="<?php echo HOME; ?>/css/app.css" />
<script src="<?php echo HOME; ?>/js/vendor/jquery.min.js"></script>
<script src="<?php echo HOME; ?>/js/foundation.js"></script>
<script src="<?php echo HOME; ?>/js/app.js"></script>

<header>
    <div class="title-bar" data-responsive-toggle="ex-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar">
        <div class="top-bar-left" style="padding-left: 25px">
            <a href="<?php echo HOME; ?>/index.php">
                <img style="vertical-align: middle" src="<?php echo HOME; ?>/images/site/logo.png" />
            </a>
        </div>
        <div class="top-bar-right" id="ex-menu">
            <ul class="menu" style="padding-top:25px">
                <li <?php echo $page_title=="Home" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/index.php">Home</a>
                </li>
                <li <?php echo $page_title=="About" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/about.php">About Us</a>
                </li>
                <li <?php echo $page_title=="Our Capabilities" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/capabilities.php">Our Capabilities</a>
                </li>
                <li <?php echo $page_title=="Contact" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/contact.php">Contact Us</a>
                </li>
                <li <?php echo $page_title=="Products" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/cart/products.php">Products</a>
                </li>
                <li <?php echo $page_title=="Cart" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/cart/cart.php">
                        <!-- count products in cart -->
                        <?php $cart_count=count($_SESSION['cart_items']); ?>
                        Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>

But still no joy ?

Andrew Walker commented on Andrew Walker's post over 4 years

This is what is causing it. If I add this, this is when the image behaves as described above?

.frontResultBox {
     background-color: #008CBA;
     opacity: 0.7;
     margin-top: 10px;
     margin-right: 10px;
     float: right;
     width: 250px;
     min-height: 250px;
     border: #007ba4 thick solid;
 }

Andrew Walker commented on Andrew Walker's post over 4 years

I have looked at this and changed the image to the one I a, using. It works as it should on codepen. But on the site it does not and rather than shrinking it jumps and zooms in making the content jump into different positions :(

I cannot make the site public yet to show anyone, but any ideas what to look for ?

Andrew Walker commented on Andrew Walker's post almost 5 years
Andrew Walker commented on Andrew Walker's post almost 5 years

Perfect. Thank you for that. I just had to take this line from F3 css:

.tabs.three-up dt, .tabs.three-up dd, .tabs.three-up li { width: 33.33%; }

And it worked a treat.

Thanks again.

Posts Followed

No Content

Following

    No Content

Followers

My Posts






My Comments

You commented on Andrew Walker's post almost 4 years

Okay, it was because I did not add the $(document).foundation(); even though it was in the App.js which was included, but that was because I had it at the top, rather than bottom.

Sorted now.

Thanks Brian.

You commented on Andrew Walker's post almost 4 years

Hi Brian,

Yes, they are included in the headers.

Here is the code for the headers:

    <!-- Foundation 6 -->
    <link rel="stylesheet" href="<?php echo HOME; ?>/css/foundation.css" />
    <link rel="stylesheet" href="<?php echo HOME; ?>/css/app.css" />

    <script src="<?php echo HOME; ?>/js/vendor/jquery.min.js"></script>
    <script src="<?php echo HOME; ?>/js/foundation.js"></script>
    <script src="<?php echo HOME; ?>/js/app.js"></script>

I can see from looking at the debug in the browser it is loading. But just incase I added them to the file itself, but still not working.

<!-- Foundation 6 -->
<link rel="stylesheet" href="<?php echo HOME; ?>/css/foundation.css" />
<link rel="stylesheet" href="<?php echo HOME; ?>/css/app.css" />
<script src="<?php echo HOME; ?>/js/vendor/jquery.min.js"></script>
<script src="<?php echo HOME; ?>/js/foundation.js"></script>
<script src="<?php echo HOME; ?>/js/app.js"></script>

<header>
    <div class="title-bar" data-responsive-toggle="ex-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar">
        <div class="top-bar-left" style="padding-left: 25px">
            <a href="<?php echo HOME; ?>/index.php">
                <img style="vertical-align: middle" src="<?php echo HOME; ?>/images/site/logo.png" />
            </a>
        </div>
        <div class="top-bar-right" id="ex-menu">
            <ul class="menu" style="padding-top:25px">
                <li <?php echo $page_title=="Home" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/index.php">Home</a>
                </li>
                <li <?php echo $page_title=="About" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/about.php">About Us</a>
                </li>
                <li <?php echo $page_title=="Our Capabilities" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/capabilities.php">Our Capabilities</a>
                </li>
                <li <?php echo $page_title=="Contact" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/contact.php">Contact Us</a>
                </li>
                <li <?php echo $page_title=="Products" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/cart/products.php">Products</a>
                </li>
                <li <?php echo $page_title=="Cart" ? "class='menuactive'" : ""; ?> >
                    <a href="<?php echo HOME; ?>/cart/cart.php">
                        <!-- count products in cart -->
                        <?php $cart_count=count($_SESSION['cart_items']); ?>
                        Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>

But still no joy ?

You commented on Andrew Walker's post over 4 years

This is what is causing it. If I add this, this is when the image behaves as described above?

.frontResultBox {
     background-color: #008CBA;
     opacity: 0.7;
     margin-top: 10px;
     margin-right: 10px;
     float: right;
     width: 250px;
     min-height: 250px;
     border: #007ba4 thick solid;
 }

You commented on Andrew Walker's post over 4 years

I have looked at this and changed the image to the one I a, using. It works as it should on codepen. But on the site it does not and rather than shrinking it jumps and zooms in making the content jump into different positions :(

I cannot make the site public yet to show anyone, but any ideas what to look for ?

You commented on Andrew Walker's post almost 5 years
You commented on Andrew Walker's post almost 5 years

Perfect. Thank you for that. I just had to take this line from F3 css:

.tabs.three-up dt, .tabs.three-up dd, .tabs.three-up li { width: 33.33%; }

And it worked a treat.

Thanks again.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content