I'm just getting started with Foundation and trying to create a title bar with a search box. I want the search box to fill all available space in the title bar. However, nothing I've tried has quite worked:
1) I tried setting a 50% width but at small screen sizes it pushed the other buttons off the top row
2) I tried to implement this solution but couldn't get it working (see commented css)
Dynamic width for input text box (HTML)
I've set up a jsfiddle here:
http://jsfiddle.net/B7nS8/1/
Thanks for your help!
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Site</title>
<meta name="description" content="Desc." />
<link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css" />
<script src="http://foundation.zurb.com/assets/js/modernizr.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<style type="text/css">
.row { max-width: 1200px; }
/* .searchParent div { overflow: hidden; }
.searchText { width: 100%; }
.searchButton { float: right; }
*/
</style>
</head>
<body>
<!-- Navigation -->
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
My Site
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<form>
<ul class="left">
<li class="has-form">
<div class="row collapse searchParent">
<div class="large-8 small-9 columns searchText">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-4 small-3 columns searchButton">
Search
</div>
</div>
</li>
</ul>
</form>
<ul class="right">
<li class="divider"></li>
<li>Login</li>
<li class="divider"></li>
<li>Register</li>
<li class="divider"></li>
</ul>
</section>
</nav>
<!-- End Top Bar -->
<div class="row">
<div class="large-12 columns">
<div class="row">
</div><!-- End Thumbnails -->
</div>
</div>
<!-- End Content -->
<!-- Footer -->
<footer class="row">
<div class="large-12 columns"><hr>
<div class="row">
<div class="large-6 columns">
<p>© Copyright no one at all. Go to town.</p>
</div>
<div class="large-6 small-12 columns">
<ul class="inline-list right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<script>
document.write('<script src=js/vendor/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<!-- End Footer -->
<script src="http://foundation.zurb.com/assets/js/jquery.js"></script>
<script src="http://foundation.zurb.com/assets/js/templates/foundation.js"></script>
</body>
</html>
You should look at foundations docs for topbar.js and form inputs, they're easy to follow and have given examples which do almost exactly what you are trying to do.
You shouldn't really need to write any css, that's what foundations is for.
I'd suggest something like this:
<nav class="top-bar" data-topbar="">
<!-- Title -->
<ul class="title-area">
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<!-- Top Bar Section -->
<div class="row">
<div class="large-12 columns">
<div class="row collapse">
<div class="small-10 columns">
<input type="text" placeholder="Search">
</div>
<div class="small-2 columns"> Go </div>
</div>
</div>
</div>
</nav>
Make sure you also remember to include a reference to topbar.js after foundation.min.js
Edit: Added an alternate approach
<nav class="top-bar" data-topbar="">
<ul class="title-area" style="width: 100%">
<li class="name has-form">
<div class="large-12 medium-12 small-11 columns">
<input type="text" placeholder="Find Stuff">
</div>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
</nav>
Related
For my page I have headings with a class of "head". When I click on them they are supposed to show the ul class of "content" under them, and when a new header is clicked, the list currently showing disappears and the new list for the new header appears. I have that down, but say I click header 1 and it shows list one. When I click it again, I need the list to slide back up, but I can't get it to be like that. This is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FV Runners</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="styles/normalize.css" rel="stylesheet" />
<link href="styles/my_style.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$(".head").on("click", function(){
$(".content").hide();
$(this).next(".content").slideToggle();
})
})
</script>
</head>
<body>
<div id="header">
<h1>Fox Valley Runners Club</h1>
</div> <!-- End of 'header' div-->
<div id="main">
</div> <!-- End of 'main' div-->
<div id="pics">
<div class="race_box">
<img src="images/run1.jpg" /><br />
<figcaption>5k/10k Events</figcaption>
<div class=".races" id="5k">
<h3>5k/10 Events</h3>
<div>
<h4 class="head">Mini Sprint</h4>
<ul class="content">
<li>10/30/20<br>Memorial Park<br>Appleton</li>
</ul>
<h4 class="head">Iron Horse</h4>
<ul class="content">
<li>11/06/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Twilight Trail</h4>
<ul class="content">
<li>11/13/20<br>>River's Edge Park<br>Wrightstown</li>
</ul>
</div>
</div><!-- End of '5k' div-->
</div> <!-- End of 'run1' div-->
<div class="race_box">
<img src="images/run2.jpg" /><br />
<figcaption>Half Marathon Events</figcaption>
<div class=".races" id="half">
<h3>Half Marathon Events</h3>
<div>
<h4 class="head">Fox River Marathon</h4>
<ul class="content">
<li>10/15/20<br>Pierce Park<br>Appleton</li>
</ul>
<h4 class="head">N.E.W. Half Marathon</h4>
<ul class="content">
<li>10/29/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Winnebago Run</h4>
<ul class="content">
<li>11/27/20<br>Menominee Park<br>>Oshkosh</li>
</ul>
</div>
</div> <!-- End of 'half' div-->
</div><!-- End of 'run2' div-->
<div class="race_box">
<img src="images/run3.jpg" /><br />
<figcaption>Full Marathon Events</figcaption>
<div class=".races "id="full">
<h3>Full Marathon Events</h3>
<div>
<h4 class="head">Cheesehead Marathon</h4>
<ul class="content">
<li>9/24/20<br>Pamperin Park<br>Green Bay</li>
</ul>
<h4 class="head">Chain O'Lakes Marathon</h4>
<ul class="content">
<li>10/29/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Fox Cities Marathon</h4>
<ul class="content">
<li>11/12/20<br>Menominee Park<br>>Oshkosh</li>
</ul>
</div>
</div> <!-- End of 'full' div-->
</div> <!-- End of 'run3' div-->
</div> <!-- End of 'pics' div-->
</body>
</html>
I need help with getting the list for the header it is under to slide up when I click the same header.
You simply need to exclude the current item form the selection you call hide on. The not method works well for this.
$(document).ready(function() {
$(".head").on("click", function() {
let $list = $(this).next(".content");
$(".content").not($list).hide();
$list.slideToggle();
})
})
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="head">Mini Sprint</h4>
<ul class="content">
<li>10/30/20<br>Memorial Park<br>Appleton</li>
</ul>
<h4 class="head">Iron Horse</h4>
<ul class="content">
<li>11/06/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Twilight Trail</h4>
<ul class="content">
<li>11/13/20<br>>River's Edge Park<br>Wrightstown</li>
</ul>
I have a question in regards to creating a grid in HTML, CSS and Javascript which can be sorted from highest to lowest and vice versa. You should also be able to filter.
Right now i am doing a grid using bootstrap. When googling i can see that many use unordered lists ul in order to do so. My question is, can you make a grid which is actually a ul?
This is the code i have made to begin with:
<body>
<div class="container-fluid">
<div class="filter">
<h1>Boliger</h1>
<button>Pris, Faldende</button>
<button>Pris, Stigende</button>
</div>
<div class="properties">
<ul>
<div class="row">
<li>
<div class="col-sm-6">
<div class="property" data-id="01">
<img
class="property__image image-fluid"
src="assets/01.jpg"
alt=""
/>
<h2 class="property__title">Lige ud til vejen</h2>
<p class="property__address">
Dommervænget 6a, 2. th, 4000 Roskilde
</p>
<ul class="property__info">
<li class="property__price">1.000.000,-</li>
<li class="property__type">Villa</li>
<li class="property__rooms">4 Rum</li>
<li class="property__size">120 m2</li>
</ul>
</div>
</div>
</li>
<li><div class="col-sm-6">
<div class="property" data-id="02">
<img class="property__image" src="assets/02.jpg" alt="" />
<h2 class="property__title">Rustikt og lækkert</h2>
<p class="property__address">
Enghavevej 8, 1. th, 1674 København V
</p>
<ul class="property__info">
<li class="property__price">2.500.000,-</li>
<li class="property__type">Ejerlejlighed</li>
<li class="property__rooms">2 Rum</li>
<li class="property__size">80 m2</li>
</ul>
</div>
</div>
</li>
Try this out, if you want to see it with snippet for sure, make full screen as you were setting .col-sm-6
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="filter">
<h1>Boliger</h1>
<button>Pris, Faldende</button>
<button>Pris, Stigende</button>
</div>
<div class="properties">
<ul class="row">
<li class="col-sm-6">
<div class="property" data-id="01">
<img
class="property__image image-fluid"
src="assets/01.jpg"
alt=""
/>
<h2 class="property__title">Lige ud til vejen</h2>
<p class="property__address">
Dommervænget 6a, 2. th, 4000 Roskilde
</p>
<ul class="property__info">
<li class="property__price">1.000.000,-</li>
<li class="property__type">Villa</li>
<li class="property__rooms">4 Rum</li>
<li class="property__size">120 m2</li>
</ul>
</div>
</li>
<li class="col-sm-6">
<div class="property" data-id="02">
<img class="property__image" src="assets/02.jpg" alt="" />
<h2 class="property__title">Rustikt og lækkert</h2>
<p class="property__address">
Enghavevej 8, 1. th, 1674 København V
</p>
<ul class="property__info">
<li class="property__price">2.500.000,-</li>
<li class="property__type">Ejerlejlighed</li>
<li class="property__rooms">2 Rum</li>
<li class="property__size">80 m2</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
You can use CSS Flexbox Layout to display the grid, as its name suggests its flexible
and we can control the flow of the grid contents efficiently.
I suggest you to learn/use vue.js unless you want to code everything- sorting, then displaying the result, aquiring/updating data etc. in vanilla js. Also by browsing through these topics - css flexbox, css-grid, vue.js (generally single page app development), atleast you will gain some insight into solving the above mentioned problem.
I made a dropdown menu when users are on iphone 6plus and lower and the drop down menu works fine but, when you click like "jobs or contact" it opens up but the drop down menu stays there. How do I make it "hide" after a list item is clicked in the iPhone 6plus width and lower. I have the drop down menu set with a toggle function so that might help understand it better.
Demo :
http://codepen.io/anon/pen/VpyNwa
Html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!-- Section for Jobs Popup -->
<div id="top-bar">
<a id="burger-nav"></a>
<ul id="nav-menu" class="blah">
<li id="job" class="testAgain">Job</li>
<li id="contact" class="testAgain">Contact</li>
<li id="press" class="testAgain">Press</li>
<li id="legal" class="testAgain">Legal</li>
<li id="support" class="testAgain">Support</li>
</ul>
<!--<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div> -->
</div>
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
Any help is appreciated
</html>
Try adding this in your JS:
$('.testAgain').click(function(){ $('.blah').removeClass('open') })
I've been trying to make the DataTables plugin work but I can't manage it. Here is the entire html code of my page. The apache server shows no error about not finding the css or js files. Here is my entire html code and the relevant js code since I have not really a clue where the problem might be.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap extra CSS -->
<link href="DataTables/datatables.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/tutorial.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<script src="assets/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<div class="navbar">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">ASDB</h3>
<nav>
<ul class="nav masthead-nav">
<li>Home</li>
<li>Background</li>
<li class="dropdown active">
Database access<span class="caret"></span>
<ul class="dropdown-menu">
<li>Input Form</li>
<li class="divider"></li>
<li class="active">Query the database</li>
<li class="divider"></li>
<li>Tutorial</li>
<li>References</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="group">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a data-toggle="collapse" href="#dq" data-parent="#group">
Database queries
</a>
</li>
<li>
<a data-toggle="collapse" href="#im" data-parent="#group">
IMs
</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<!-- <div class="row"> -->
<div class="accordion-group">
<div class="collapse in" id="dq">
<h1>Database queries</h1>
<p>Have fun!!</p>
</div>
<div class="collapse" id="im">
<h1>IMs</h1>
<table id="ind-table" class="display"><thead><tr><th>IMs</th><th>Number of studies</th></tr></thead><tbody>
<tr><td>First IM</td>
<td>100</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="first_im"></label>
</div>
</td>
</tr>
<tr><td>Second IM</td>
<td>12</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="second_im"></label>
</div>
</td>
</tr>
<tr><td>Third IM</td>
<td>153</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="third_im"></label>
</div>
</td>
</tr>
</tbody></table>
<h3><button class="btn btn-default"><b>Visualize</b></button></h3>
<ul>
<li>First IM: Wikipedia Link</li>
<li>Second IM: Wikipedia Link</li>
<li>Third IM: Wikipedia Link</li>
</ul>
</div>
</div>
Toggle Menu
<!-- </div> -->
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<script src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/datatables.js"></script>
<script src="js/query.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The code on query.js is
$(document).ready(function() {
$('#ind-table').dataTable( {
"order": [[ 2, "desc" ]]
} );
} );
After running this code my table is not getting any of the formatting that is supposed to come with DataTables. Am I missing something?
You need to put three <th></th> tags in the <thead> section. Then the problem will be solved
<thead>
<tr>
<th>IMs</th>
<th>Number of studies</th>
<th> </th>
</tr>
</thead>
I'm not sure as to why my implementation is not working. I have followed the documentation on the foundation 4 site but can not figure out why it's not working. All that shows up are the cursor dots that change the position of the pictures in the Orbit. Also, I have the correct css/html/js folder paths.
Here's what my mark up looks like:
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title> Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation-4/css/normalize.css" />
<link rel="stylesheet" href="foundation-4/css/foundation.css" />
<script src="foundation-4/js/vendor/custom.modernizr.js"></script>
</head>
<body>
<!-- body content here -->
<nav class="top-bar">
<ul class="left">
<li class="name"><font color="white">Va</font></li>
</ul>
<ul class="right">
<li class="name"><font color="white">Home</font></li>
</ul>
</nav>
<br>
<!-- ======================== ORBIT===================== -->
<div class="orbit-container">
<ul data-orbit="" class="orbit-slides-container">
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li class="active">
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
<li>
<img src="2.jpg">
<div class="orbit-caption">IMAGE 2</div>
</li>
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li>
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
</ul>
<!-- Prev/Next Arrows -->
Prev<span></span>
Next<span></span>
<!-- Slide Numbers -->
<div class="orbit-slide-number">
<span>1</span> of <span>3</span>
</div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
</div>
</div>
<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
<!-- =======ORBIT END======= -->
<script>
document.write('<script src=foundation-4/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'foundation-4/js/vendor/zepto' : 'foundation-4/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.orbit.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.placeholder.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>
$(document).foundation();
</script>
</body>
</html>
Also, here is a screen shot of the errors I am getting in google chrome.
http://s1228.photobucket.com/user/Ebadly/media/random/ScreenShot2013-11-15at112428AM_zpsdfc35907.png.html
EDIT: THE FOUNDATION DOUMENTATION CONTAINS
<ul data-orbit="" class="orbit-slides-container">
REMOVE: ="" class="orbit-slides-container" It did the TRICK FOR ME: SO it becomes:
<ul data-orbit>
"Uncaught TypeError: Object # this is because jQuery has not loaded. Download jQuery from here http://jquery.com/download/
Link this jQuery file to your website
Even if the jQuery file is linked properly make sure it is loaded in the
<head></head> tags before loading the foundation javascript files
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title> Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation-4/css/normalize.css" />
<link rel="stylesheet" href="foundation-4/css/foundation.css" />
<script src="LINKTO JQUERY JS FILE"></script>
<script src="foundation-4/js/vendor/custom.modernizr.js"></script>
</head>
EDIT:
<div class="row">
<div class="orbit-container">
<ul data-orbit="" class="orbit-slides-container">
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li class="active">
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
<li>
<img src="2.jpg">
<div class="orbit-caption">IMAGE 2</div>
</li>
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li>
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
</ul>
</div>
</div>
EDIT: TRY THIS
<div class="large-12 columns">
<div class="orbit-container">
<ul data-orbit>
<li data-orbit-slide="headline-1">
<h2>Headline 1</h2>
<h3>Subheadline</h3>
<p>Pellentesque habitant morbi tristique senectus.</p>
</li>
<li data-orbit-slide="headline-2">
<h2>Headline 2</h2>
<h3>Subheadline</h3>
<p>Pellentesque habitant morbi tristique senectus.</p>
</li>
</ul>
</div>
</div>
It's not going to work because there are AJAX calls being made to get the scripts. You're going to have to use something like USBWebServer if you're going to develop/test locally.