We Keep Coding

foundation 5.2.2 topbar dropdown not working for mobile device

I am trying to develop my site with foundation dropdown. when i see reponsive size from pc browser it's working
(not 1st time:
click first time url will be ..../index.html#
again reload with this then it works. 2nd time it's working). when i load url in mobile and try to test it's not working.
Here is my code in header.html:
<div class="menuSet" style="background-image: url('img/image67.JPG');">
<nav class="top-bar row changedWmiddle" data-topbar style="background-image: url('img/image67.JPG');height:44px;">
<ul class="title-area setMenu">
<li class="name">
<h1> </h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon setMenu2">
<span>Menu</span>
</li>
</ul>
<div class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left row" style="width:98%;">
<li class="setMenu3" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image68.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image69.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image70.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image71.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image72.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image73.JPG"></li>
</ul>
</div>
</nav>
I included header.html in my index.html and linked script like.
at starting of the page:
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/modernizr.js"></script>
at bottom:(before tag)
<script src="js/foundation/foundation.js"></script>
<script src="js//foundation/foundation.topbar.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Here is the link of my url
http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website%28without_comment%29/index.html
Please help. Thanks in advance.

foundation.min.js includes all the foundation js.
You need to use either "foundation.min.js" or "foundation.js, foundation.topbar.js, etc".
Reference: http://foundation.zurb.com/docs/javascript.html
<script src="/js/foundation.min.js"></script>
<!-- or individually -->
<script src="/js/foundation.js"></script>
<script src="/js/foundation.alert.js"></script>
<!-- ... -->
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>
The trouble you're experiencing could be coming from having both js files loaded.
Try just having one set loaded.

I found the problem is with modernizr.js, to test it you can remove foundation will work as expected.

Cannot attach click handler to anchor class

I've got the following html code:
<div id="menuItems" class="hidden">
<ul>
<li><a class="fgMenuItem" href="#">MenuItem #1</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #2</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #1</a></li>
<li><a class="fgMenuItem" href="#">SubItem #2</a></li>
</ul>
</li>
<li><a class="fgMenuItem" href="#">MenuItem #3</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #4</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #3</a></li>
<li><a class="fgMenuItem" href="#">SubItem #4</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$(".fgMenuItem").bind("click",function() {
alert('test');
});
});
</script>
I'm using Filament Group's iPod menu and the menus are working fine, but my jQuery code is not working. I'm trying to make it so that when an item is clicked, it executes my alert('test');.
I suspect the problem may be that Filament Group is overriding my click event handler, but I'm not sure how to fix it. I tried going into their javascript file and changing all the .click(function() { to .bind("click", function() {, but this didn't seem to make any difference. Any suggestions would be great!

Just tested and all working fine for me, you are including jQuery at the top of your document right?
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
</head>
$(function() {
$(".fgMenuItem").on("click",function() {
alert('test');
});
});
JSFiddle: http://jsfiddle.net/jv584/
EDIT: If you're able to set up a fiddle or provide more code (working demo page perhaps?) then I'll take another look and see if I can spot the problem

tb dropdown doesn't work on smartphone

I've now tried several things and googled a lot, but so far to no avail.
I've been working on a project with twitter bootstrap and made ​​a dropdown in the navigation. Everything works on the desktop but einwadnfrei on the smartphone I have extreme problems and can click a link in the dropdown. The menu includes with every click.
This one i have write in the index
<div class="nav-collapse collapse">
<ul class="nav">
<li class="index">tpno</li>
<li class="diensten dropdown">
DIENSTEN <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Interim Management</li>
<li>Case Management</li>
<li>Conflictbemiddeling</li>
</ul>
</li>
<li class="profile">Profiel</li>
<li class="contact">Contact</li>
</ul></div>
And this is what i include
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script>
jQuery(function($) {
$('.dropdown-toggle').dropdown()
});
</script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/js/bootstrap-dropdown.js"></script>
But it doesnt work on smartphone. I have forgotten something or done wrong? would be grateful for your help.

Dynamically adding list to a nested list in jQuery mobile

I am trying to add a list to a <li> after a user clicks on the li. The list is being added but the list is not opening on a new page. See the nested list example on jQuery mobile site. When you click on a list node, the sub list is opening in a new page (kind of). I want the same functionality while dynamically adding list.
Here is my code http://jsfiddle.net/f869z/. When you click on a <li> its adding the new list but not in the same fashion as shown in the jQuery mobile site.
How can I achieve this functionality? Otherwise what is the preferred way to add nested list dynamically.
EDIT: This problem has been solved by refreshing the list view. Now I am adding a listview inside collapsible dynamically. But inside that list, when I am clicking a <li>, pageinit event is getting fired instead of click event. The click event is getting fired when we click the same li second time.
Updated code: http://jsfiddle.net/5zJC5/

I have updated your jsfiddle example so that it works. Check the jsFiddle example here
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Nested List</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('click', '#list li', function() {
$(this).append("<ul><li>Subcategory 1 <ul> <li data-role=\"list-divider\">Sub category</li> <li data-icon=\"false\">Test 1</li> <li data-icon=\"false\">Test 2</li> </ul> </li> <li>Subcategory 2 <ul> <li data-role=\"list-divider\">Sub category</li> <li data-icon=\"false\">Test 1</li> <li data-icon=\"false\">Test 2</li> </ul> </li></ul>").parent().listview('refresh');
});
</script>
</head>
<body>
<div id="list-page" data-role="page">
<div data-role="header">
<h1>Nested List Page</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div data-role="collapsible">
<h3 data-position="inline">Filtered list<h3>
<ul data-role="listview" data-divider-theme="d" id="list">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I hope this helps

Bootstrap JS and Navbar Button

I normally use Ruby on rails to develop my work with sublime text as my text editor, but today I am using just using notepad and creating a site locally. Now normally all my js and css is rendered perfectly via the asset pipeline in rails but I am having trouble getting the js to work, in particular the dropdown button in the navbar.
i am calling Jquery within the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
And I am calling my bootstrap.js file
<script src="js/bootstrap.js" type="text/javascript"></script>
The css for the navbar is as follows
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Am i missing something blindly obvious because the button is not responding?
Any help appreciated

Have you included the required bootstrap.css stylesheet?
<link href="css/bootstrap.min.css" rel="stylesheet">
Edit 1:
Here's a jsBin with your HTML/bootstrap. If you aren't seeing the same output then something is indeed wrong. If you're expecting some behavior when one of the navbar buttons gets clicked, then it isn't actually an error: there is no js behavior attached to the click of the navbar.
Bootstrap will provide you with a "prettified" navbar, it changes the aesthetics but not the behavior, you still need to connect to the individual clicks and define your own behavior for them.
Edit 2:
To connect to the clicks you have to get your menu items and use jQuery to define onclick behaviors. An example would be to define unique ids for each navbar item
<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About Us</a></li>
And then retrieve them with jQuery's selectors and attach click handlers:
$("#home").click(function() {
alert('home clicked');
});
$("#about").click(function() {
alert('about clicked');
});
I've edited the jsbin to add this example.

The CDN wasnt pulling the jquery so i have hosted the file locally now and it works fine