Menu icon Foundation

Designer | Colchester, Essex, UK

My Posts


  • 7
    Replies
  • Firefox and Orbit

    By Chris

    firefoxOrbitsliderimage

    Hi all I'm having an issue with Firefox and my orbit slider on a site I have created. When you view the site on Firefox it looks fine but the moment you click on the navigation arrow to go to the next slide and then the left navigation arrow to go back... (continued)

    Last Reply by Vernist 10 months ago






My Comments

Chris commented on Chris's post almost 5 years

Hi Jacob

Apologies for the late reply. Thanks for this although when i move the the jquery and foundation to the head it seems to stop the whole menu stack from dropping down.

Chris commented on Chris's post almost 5 years

Hi thanks for replying. Although this didn't seem to work. :C

Chris commented on Chris's post about 5 years

I think i have addressed this issue by making the bullets class z-index:10;

Chris commented on Chris's post about 5 years

Brilliant thanks the only problem i have now is that the bullets are covered up and show when the slide is in transitation.

Chris commented on Chris's post about 5 years

Hi Adam

Yes its the correct file as it seems to let me do some of the other changes but not the timer.

Chris commented on Chris's post about 5 years

Hi Droideka

I really appreciate the help, like i said I'm new to this:

I have added a video to show you that it doesn't work.

https://www.youtube.com/watch?v=W0iDD_dNaAg&feature=youtu.be

Chris commented on Chris's post about 5 years

Thanks guys

i'm new to this so the answer might be simple but I cant seem to get it to work. I seem to have all the links to the correct JS and css files but for some reason when you click the third sliders right hand arrow you don't seem to go to back to the first slide and you cant click any slider after that. It just seems to break.

Really pulling my hair out now.

Here is my url: www.trebuchettest.co.uk

:S

Chris commented on Chris's post about 5 years

Hi Droideka

I just added this to my site and it didn't seem to work :(

I have attached my code below:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lombard Shipping: Air, land or sea, we always deliver</title>
    <link rel="stylesheet" href="css/framework.css" />
    <link rel="stylesheet" href="css/topbar.css" />
    <link rel="stylesheet" href="css/panels.css" />
    <link rel="stylesheet" href="css/slider.css" />
    <link rel="stylesheet" href="css/visability.css" />
    <link rel="stylesheet" href="css/media.css" />
    <link rel="stylesheet" href="css/typograpghy.css" />

<script src="js/vendor/modernizr.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700,900,400italic' rel='stylesheet' type='text/css'>

<style  type="text/css"> .gradient{    
background: #0d2647; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F5F5F5'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */} 
</style>
  </head>


<body>
  <div class="row"><!-- main row -->  

    <div class="breakline"></div>
      <div id="container" class="small-12"><!-- container -->

        <div class="row"><!--row for top bar-->
          <section id="nav" class="medium-11 columns medium-centered columns large-11 columns large-centered columns">  
            <nav class="top-bar" data-topbar>
              <ul class="title-area">
                <li class="name"><a href="index.html"><img src="img/lombard_logo.svg"></a></li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              </ul>
                <div id="calltoaction" class="show-for-medium-up"> 
                  <strong style="color:#E98300; text-decoration:none;">E:
                  </strong>enquiries@lombardshipping.com&nbsp;&nbsp;
                  <strong style="color:#E98300; text-decoration:none;">T:
                  </strong> +44 (0)1473 243800
                </div>

                  <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="right">
                      <li class="">
                        <a href=".html">About</a>
                      </li>
                      <li class="">
                        <a href=".html">Locations</a>
                      </li>
                      <li class="">
                        <a href=".html">Imports</a>
                      </li>
                      <li class="">
                        <a href=".html">Exports</a>
                      </li>
                      <li class="">
                        <a href=".html">UK Logistics</a>
                      </li>
                      <li class="">
                        <a href=".html">Irish Logistics</a>
                      </li>
                      <li class="has-dropdown">
                        <a href=".html">News</a>
                        <ul class="dropdown">
                          <li><a href="#">First link in dropdown</a></li>
                        </ul>
                      </li>
                      <li class="">
                        <a href="contact.html">Contact</a>
                      </li>
                    </ul>
                  </section>
            </nav>
          </section>
        </div><!--row for top bar-->


<!-- slider -->
<div class="row"><!-- row for slider -->
<div class="medium-11 columns medium-centered columns large-11 large-centered columns show-for-medium-up"><!-- container for slider -->
  <ul class="example-orbit-content" data-orbit data-options="animation:slide;pause_on_hover:true;animation_speed:500;navigation_arrows:true;bullets:true;timer_speed: 3000;"><!-- slider listing -->

    <li data-orbit-slide=""><!-- slider 1 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/sliderone.jpg"></div>
            <div id="hero-desc" class="medium-6 columns large-6 small-6 small-push-6 columns">
            <p class="slidegrey">Our promise</p>
            <h1>Air, land or sea,<br/>we always deliver</h1>
            <p class="slideorange">Providing both domestic and international logistics, we work in partnership with clients to offer a range of solutions.</p>
          </div>
        </div>
      </div>
    </li><!-- slider 1 -->

    <li data-orbit-slide=""><!-- slider 2 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/slidertwo.jpg"></div>
            <div id="hero-desc" class="medium-6 large-6 small-6 small-push-6 columns"> 
            <p class="slidegrey">Industry Knowledge</p>
            <h1>International logistics, Shipping and Forwarding</h1>
            <p class="slideorange">With a heritage in shipping going back over a quarter of a century,  Lombard Shipping plc continues to be at the forefront of service and quality. </p>
          </div>
        </div>
      </div><!-- slider 2 -->
    </li>   


    <li data-orbit-slide=""><!-- slider 3 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/sliderthree.jpg"></div>
            <div id="hero-desc" class="medium-6 large-6 small-6 small-push-6 columns">
            <p class="slidegrey">Distribution Network</p>
            <h1>Part of leading  pallet network</h1>
            <p class="slideorange">As members of the Fortec Distribution Network, Lombard Shipping collects and delivers goods of all sizes.</p>
            <img src="img/fortec.svg">
          </div>
        </div>
      </div>
    </li> <!-- slider 3 -->   

    </ul><!-- slider listing -->

      <div class="breakline"></div><!-- orange underline -->  
</div><!-- container for slider -->

    <!-- small screen hero -->
    <div class="small-12 columns show-for-small-only">
    <img src="img/small-medium-screen.png">
  <div id="herotextpanel" class="small-12">
  <div class="heroline"> 
  <p class="slidegrey">Our promise</p>
  <h1>Air, land or sea,<br/>we always deliver</h1>
  <p class="slideorange">Providing both domestic and international logistics, we work in partnership with clients to offer a range of solutions.</p>
  </div>
  </div>
  </div>
  <!-- small screen hero -->

</div><!-- row for slider -->
<!-- slider -->

      </div>
  </div><!-- container -->
</div><!-- main row -->

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


Chris commented on Chris's post about 5 years

Brilliant thank you Droideka

Chris commented on Chris's post about 5 years

Hi Chris

I changes the nav menu to show at @media only screen and (min-width: 64.063em) so do I need to replicate the menu items to show at this size also?

Many thanks

Chris

Posts Followed


  • 7
    Replies
  • Firefox and Orbit

    By Chris

    firefoxOrbitsliderimage

    Hi all I'm having an issue with Firefox and my orbit slider on a site I have created. When you view the site on Firefox it looks fine but the moment you click on the navigation arrow to go to the next slide and then the left navigation arrow to go back... (continued)

    Last Reply by Vernist 10 months ago





Following

  • Step by Step list

    Hey there people, I made what I call a "Step by Step list" that I want to share with you guys. Better than a long description of what it is, here comes an image so you see what it looks like : Read More

    View More Posts by Lyn

  • Reporting error dropdown into top-bar

    I just want to report an error with Foundation 5.3, the topbar and dropdown. This is a dropdown from : http://foundation.zurb.com/docs/components/dropdown.html Read More

    View More Posts by Droideka

  • Compiling javascript in the Gruntfile

    Hey, Could someone point me in the right direction regarding using the Gruntfile to cut down the Javascript file size? By default, the foundation.js file is 100kb. However, I'm not using most of the components. I figured it would be as easy as uncom... (continued) Read More

    View More Posts by Chris M

Followers

My Posts

My Comments

You commented on Chris's post almost 5 years

Hi Jacob

Apologies for the late reply. Thanks for this although when i move the the jquery and foundation to the head it seems to stop the whole menu stack from dropping down.

You commented on Chris's post almost 5 years

Hi thanks for replying. Although this didn't seem to work. :C

You commented on Chris's post about 5 years

I think i have addressed this issue by making the bullets class z-index:10;

You commented on Chris's post about 5 years

Brilliant thanks the only problem i have now is that the bullets are covered up and show when the slide is in transitation.

You commented on Chris's post about 5 years

Hi Adam

Yes its the correct file as it seems to let me do some of the other changes but not the timer.

You commented on Chris's post about 5 years

Hi Droideka

I really appreciate the help, like i said I'm new to this:

I have added a video to show you that it doesn't work.

https://www.youtube.com/watch?v=W0iDD_dNaAg&feature=youtu.be

You commented on Chris's post about 5 years

Thanks guys

i'm new to this so the answer might be simple but I cant seem to get it to work. I seem to have all the links to the correct JS and css files but for some reason when you click the third sliders right hand arrow you don't seem to go to back to the first slide and you cant click any slider after that. It just seems to break.

Really pulling my hair out now.

Here is my url: www.trebuchettest.co.uk

:S

You commented on Chris's post about 5 years

Hi Droideka

I just added this to my site and it didn't seem to work :(

I have attached my code below:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lombard Shipping: Air, land or sea, we always deliver</title>
    <link rel="stylesheet" href="css/framework.css" />
    <link rel="stylesheet" href="css/topbar.css" />
    <link rel="stylesheet" href="css/panels.css" />
    <link rel="stylesheet" href="css/slider.css" />
    <link rel="stylesheet" href="css/visability.css" />
    <link rel="stylesheet" href="css/media.css" />
    <link rel="stylesheet" href="css/typograpghy.css" />

<script src="js/vendor/modernizr.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700,900,400italic' rel='stylesheet' type='text/css'>

<style  type="text/css"> .gradient{    
background: #0d2647; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F5F5F5'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */} 
</style>
  </head>


<body>
  <div class="row"><!-- main row -->  

    <div class="breakline"></div>
      <div id="container" class="small-12"><!-- container -->

        <div class="row"><!--row for top bar-->
          <section id="nav" class="medium-11 columns medium-centered columns large-11 columns large-centered columns">  
            <nav class="top-bar" data-topbar>
              <ul class="title-area">
                <li class="name"><a href="index.html"><img src="img/lombard_logo.svg"></a></li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              </ul>
                <div id="calltoaction" class="show-for-medium-up"> 
                  <strong style="color:#E98300; text-decoration:none;">E:
                  </strong>enquiries@lombardshipping.com&nbsp;&nbsp;
                  <strong style="color:#E98300; text-decoration:none;">T:
                  </strong> +44 (0)1473 243800
                </div>

                  <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="right">
                      <li class="">
                        <a href=".html">About</a>
                      </li>
                      <li class="">
                        <a href=".html">Locations</a>
                      </li>
                      <li class="">
                        <a href=".html">Imports</a>
                      </li>
                      <li class="">
                        <a href=".html">Exports</a>
                      </li>
                      <li class="">
                        <a href=".html">UK Logistics</a>
                      </li>
                      <li class="">
                        <a href=".html">Irish Logistics</a>
                      </li>
                      <li class="has-dropdown">
                        <a href=".html">News</a>
                        <ul class="dropdown">
                          <li><a href="#">First link in dropdown</a></li>
                        </ul>
                      </li>
                      <li class="">
                        <a href="contact.html">Contact</a>
                      </li>
                    </ul>
                  </section>
            </nav>
          </section>
        </div><!--row for top bar-->


<!-- slider -->
<div class="row"><!-- row for slider -->
<div class="medium-11 columns medium-centered columns large-11 large-centered columns show-for-medium-up"><!-- container for slider -->
  <ul class="example-orbit-content" data-orbit data-options="animation:slide;pause_on_hover:true;animation_speed:500;navigation_arrows:true;bullets:true;timer_speed: 3000;"><!-- slider listing -->

    <li data-orbit-slide=""><!-- slider 1 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/sliderone.jpg"></div>
            <div id="hero-desc" class="medium-6 columns large-6 small-6 small-push-6 columns">
            <p class="slidegrey">Our promise</p>
            <h1>Air, land or sea,<br/>we always deliver</h1>
            <p class="slideorange">Providing both domestic and international logistics, we work in partnership with clients to offer a range of solutions.</p>
          </div>
        </div>
      </div>
    </li><!-- slider 1 -->

    <li data-orbit-slide=""><!-- slider 2 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/slidertwo.jpg"></div>
            <div id="hero-desc" class="medium-6 large-6 small-6 small-push-6 columns"> 
            <p class="slidegrey">Industry Knowledge</p>
            <h1>International logistics, Shipping and Forwarding</h1>
            <p class="slideorange">With a heritage in shipping going back over a quarter of a century,  Lombard Shipping plc continues to be at the forefront of service and quality. </p>
          </div>
        </div>
      </div><!-- slider 2 -->
    </li>   


    <li data-orbit-slide=""><!-- slider 3 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/sliderthree.jpg"></div>
            <div id="hero-desc" class="medium-6 large-6 small-6 small-push-6 columns">
            <p class="slidegrey">Distribution Network</p>
            <h1>Part of leading  pallet network</h1>
            <p class="slideorange">As members of the Fortec Distribution Network, Lombard Shipping collects and delivers goods of all sizes.</p>
            <img src="img/fortec.svg">
          </div>
        </div>
      </div>
    </li> <!-- slider 3 -->   

    </ul><!-- slider listing -->

      <div class="breakline"></div><!-- orange underline -->  
</div><!-- container for slider -->

    <!-- small screen hero -->
    <div class="small-12 columns show-for-small-only">
    <img src="img/small-medium-screen.png">
  <div id="herotextpanel" class="small-12">
  <div class="heroline"> 
  <p class="slidegrey">Our promise</p>
  <h1>Air, land or sea,<br/>we always deliver</h1>
  <p class="slideorange">Providing both domestic and international logistics, we work in partnership with clients to offer a range of solutions.</p>
  </div>
  </div>
  </div>
  <!-- small screen hero -->

</div><!-- row for slider -->
<!-- slider -->

      </div>
  </div><!-- container -->
</div><!-- main row -->

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


You commented on Chris's post about 5 years

Brilliant thank you Droideka

You commented on Chris's post about 5 years

Hi Chris

I changes the nav menu to show at @media only screen and (min-width: 64.063em) so do I need to replicate the menu items to show at this size also?

Many thanks

Chris

Posts Followed

Following

  • Step by Step list

    Hey there people, I made what I call a "Step by Step list" that I want to share with you guys. Better than a long description of what it is, here comes an image so you see what it looks like : Read More

    View More Posts by Lyn

    Reporting error dropdown into top-bar

    I just want to report an error with Foundation 5.3, the topbar and dropdown. This is a dropdown from : http://foundation.zurb.com/docs/components/dropdown.html Read More

    View More Posts by Droideka

    Compiling javascript in the Gruntfile

    Hey, Could someone point me in the right direction regarding using the Gruntfile to cut down the Javascript file size? By default, the foundation.js file is 100kb. However, I'm not using most of the components. I figured it would be as easy as uncom... (continued) Read More

    View More Posts by Chris M

Followers

  • No Content