Menu icon Foundation

My Posts

  • 4
    Replies
  • Orbit Slider

    By mkli

    Orbitslider

    Hello I am trying in installing the orbit slider, I have added the files that is said under the DOCS-ORBIT section but it is not working. Do I miss anything? Do I have to add and other files? Thanks for your time. Regards Marina

    Last Reply by mkli over 5 years ago


  • 2
    Replies
  • From Foundation 3 to Foundation 5

    By mkli

    css

    Hello all I used to create web sites with foundation 3 and now I would like to move on to foundation 5. My main difficulty is the editing of the css , in foundation 3 there was file app.css where you could add or edit the elements. In 5 version does no... (continued)

    Last Reply by mkli over 5 years ago


My Comments

mkli commented on mkli's post over 5 years

Hello all and thank you for your replies
I have managed to create the site everything is working fine on PC browser but when I preview the site with my tablet or mobile the menu and orbit slideshow are not working.
Here is the link of the site so you could have a look.
http://www.designpandorabox.eu/
Thank you very much for your time you spend
Kind Regards
Marina

mkli commented on mkli's post over 5 years

Thank you ever so much for your replies but I think I found the solution.
Here is the code if you would like to check.
"
```HTML
<!doctype html>




Foundation | Welcome



<div class="row">
  <div class="large-12 columns">
    <h1>Welcome to Foundation</h1>
  </div>
</div>

<div class="row">
  <div class="large-12 columns">

    <ul class="orbit-container" data-orbit
data-options="animation:fade;
              animation_speed:1500;
              pause_on_hover:true;
              navigation_arrows:true;

              bullets:true;"> 
    <li> <img src="images/captions.jpg" alt="slide 1" /> <div class="orbit-caption"> Caption One. </div> </li> 
    <li> <img src="images/coffee.jpg" alt="slide 2" /> <div class="orbit-caption"> Caption Two. </div> </li> 
    <li> <img src="images/features.jpg" alt="slide 3" /> <div class="orbit-caption"> Caption Three. </div> </li> </ul>
      <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
    </div>
        <div class="large-4 medium-4 columns">
          <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
        </div>
        <div class="large-4 medium-4 columns">
          <p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
        </div>        
      </div>
    </div>
  </div>

<div class="row">
  <div class="large-8 medium-8 columns">
    <h5>Here&rsquo;s your basic grid:</h5>
    <!-- Grid Example -->

    <div class="row">
      <div class="large-12 columns">
        <div class="callout panel">
          <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-6 medium-6 columns">
        <div class="callout panel">
          <p>Six columns</p>
        </div>
      </div>
      <div class="large-6 medium-6 columns">
        <div class="callout panel">
          <p>Six columns</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-4 medium-4 small-4 columns">
        <div class="callout panel">
          <p>Four columns</p>
        </div>
      </div>
      <div class="large-4 medium-4 small-4 columns">
        <div class="callout panel">
          <p>Four columns</p>
        </div>
      </div>
      <div class="large-4 medium-4 small-4 columns">
        <div class="callout panel">
          <p>Four columns</p>
        </div>
      </div>
    </div>

    <hr />

    <h5>We bet you&rsquo;ll need a form somewhere:</h5>
    <form>
      <div class="row">
        <div class="large-12 columns">
          <label>Input Label</label>
          <input type="text" placeholder="large-12.columns" />
        </div>
      </div>
      <div class="row">
        <div class="large-4 medium-4 columns">
          <label>Input Label</label>
          <input type="text" placeholder="large-4.columns" />
        </div>
        <div class="large-4 medium-4 columns">
          <label>Input Label</label>
          <input type="text" placeholder="large-4.columns" />
        </div>
        <div class="large-4 medium-4 columns">
          <div class="row collapse">
            <label>Input Label</label>
            <div class="small-9 columns">
              <input type="text" placeholder="small-9.columns" />
            </div>
            <div class="small-3 columns">
              <span class="postfix">.com</span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <label>Select Box</label>
          <select>
            <option value="husker">Husker</option>
            <option value="starbuck">Starbuck</option>
            <option value="hotdog">Hot Dog</option>
            <option value="apollo">Apollo</option>
          </select>
        </div>
      </div>
      <div class="row">
        <div class="large-6 medium-6 columns">
          <label>Choose Your Favorite</label>
          <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
          <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
        </div>
        <div class="large-6 medium-6 columns">
          <label>Check these out</label>
          <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
          <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <label>Textarea Label</label>
          <textarea placeholder="small-12.columns"></textarea>
        </div>
      </div>
    </form>
  </div>     

  <div class="large-4 medium-4 columns">
    <h5>Try one of these buttons:</h5>
    <p><a href="#" class="small button">Simple Button</a><br/>
    <a href="#" class="small radius button">Radius Button</a><br/>
    <a href="#" class="small round button">Round Button</a><br/>            
    <a href="#" class="medium success button">Success Btn</a><br/>
    <a href="#" class="medium alert button">Alert Btn</a><br/>
    <a href="#" class="medium secondary button">Secondary Btn</a></p>           
    <div class="panel">
      <h5>So many components, girl!</h5>
      <p>A whole kitchen sink of goodies comes with Foundation. Checkout the docs to see them all, along with details on making them your own.</p>
      <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>          
    </div>
  </div>
</div>

<!-- or individually -->

<!-- ... -->


$(document).foundation({
orbit: {
animation: 'fade',

pause_on_hover: true,
animation_speed: 700,

navigation_arrows: true,
bullets: true

}
});

mkli commented on mkli's post over 5 years

Dear Rafi thank you very much for your help.
Regards
Marina

Posts Followed

No Content

Following

    No Content

Followers

My Posts



My Comments

You commented on mkli's post over 5 years

Hello all and thank you for your replies
I have managed to create the site everything is working fine on PC browser but when I preview the site with my tablet or mobile the menu and orbit slideshow are not working.
Here is the link of the site so you could have a look.
http://www.designpandorabox.eu/
Thank you very much for your time you spend
Kind Regards
Marina

You commented on mkli's post over 5 years

Thank you ever so much for your replies but I think I found the solution.
Here is the code if you would like to check.
"
```HTML
<!doctype html>




Foundation | Welcome



<div class="row">
  <div class="large-12 columns">
    <h1>Welcome to Foundation</h1>
  </div>
</div>

<div class="row">
  <div class="large-12 columns">

    <ul class="orbit-container" data-orbit
data-options="animation:fade;
              animation_speed:1500;
              pause_on_hover:true;
              navigation_arrows:true;

              bullets:true;"> 
    <li> <img src="images/captions.jpg" alt="slide 1" /> <div class="orbit-caption"> Caption One. </div> </li> 
    <li> <img src="images/coffee.jpg" alt="slide 2" /> <div class="orbit-caption"> Caption Two. </div> </li> 
    <li> <img src="images/features.jpg" alt="slide 3" /> <div class="orbit-caption"> Caption Three. </div> </li> </ul>
      <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
    </div>
        <div class="large-4 medium-4 columns">
          <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
        </div>
        <div class="large-4 medium-4 columns">
          <p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
        </div>        
      </div>
    </div>
  </div>

<div class="row">
  <div class="large-8 medium-8 columns">
    <h5>Here&rsquo;s your basic grid:</h5>
    <!-- Grid Example -->

    <div class="row">
      <div class="large-12 columns">
        <div class="callout panel">
          <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-6 medium-6 columns">
        <div class="callout panel">
          <p>Six columns</p>
        </div>
      </div>
      <div class="large-6 medium-6 columns">
        <div class="callout panel">
          <p>Six columns</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-4 medium-4 small-4 columns">
        <div class="callout panel">
          <p>Four columns</p>
        </div>
      </div>
      <div class="large-4 medium-4 small-4 columns">
        <div class="callout panel">
          <p>Four columns</p>
        </div>
      </div>
      <div class="large-4 medium-4 small-4 columns">
        <div class="callout panel">
          <p>Four columns</p>
        </div>
      </div>
    </div>

    <hr />

    <h5>We bet you&rsquo;ll need a form somewhere:</h5>
    <form>
      <div class="row">
        <div class="large-12 columns">
          <label>Input Label</label>
          <input type="text" placeholder="large-12.columns" />
        </div>
      </div>
      <div class="row">
        <div class="large-4 medium-4 columns">
          <label>Input Label</label>
          <input type="text" placeholder="large-4.columns" />
        </div>
        <div class="large-4 medium-4 columns">
          <label>Input Label</label>
          <input type="text" placeholder="large-4.columns" />
        </div>
        <div class="large-4 medium-4 columns">
          <div class="row collapse">
            <label>Input Label</label>
            <div class="small-9 columns">
              <input type="text" placeholder="small-9.columns" />
            </div>
            <div class="small-3 columns">
              <span class="postfix">.com</span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <label>Select Box</label>
          <select>
            <option value="husker">Husker</option>
            <option value="starbuck">Starbuck</option>
            <option value="hotdog">Hot Dog</option>
            <option value="apollo">Apollo</option>
          </select>
        </div>
      </div>
      <div class="row">
        <div class="large-6 medium-6 columns">
          <label>Choose Your Favorite</label>
          <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
          <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
        </div>
        <div class="large-6 medium-6 columns">
          <label>Check these out</label>
          <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
          <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <label>Textarea Label</label>
          <textarea placeholder="small-12.columns"></textarea>
        </div>
      </div>
    </form>
  </div>     

  <div class="large-4 medium-4 columns">
    <h5>Try one of these buttons:</h5>
    <p><a href="#" class="small button">Simple Button</a><br/>
    <a href="#" class="small radius button">Radius Button</a><br/>
    <a href="#" class="small round button">Round Button</a><br/>            
    <a href="#" class="medium success button">Success Btn</a><br/>
    <a href="#" class="medium alert button">Alert Btn</a><br/>
    <a href="#" class="medium secondary button">Secondary Btn</a></p>           
    <div class="panel">
      <h5>So many components, girl!</h5>
      <p>A whole kitchen sink of goodies comes with Foundation. Checkout the docs to see them all, along with details on making them your own.</p>
      <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>          
    </div>
  </div>
</div>

<!-- or individually -->

<!-- ... -->


$(document).foundation({
orbit: {
animation: 'fade',

pause_on_hover: true,
animation_speed: 700,

navigation_arrows: true,
bullets: true

}
});

You commented on mkli's post over 5 years

Dear Rafi thank you very much for your help.
Regards
Marina

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content