We Keep Coding

(Foundation CSS) Dropdowns are not working

So dropdowns aren't working when using foundation (not even the code copy-pasted from the foundation docs).
This Html is generated using Play! Framework, and I am viewing it using chrome. This code is running on Localhost, not a foreign server. (Maybe chrome is blocking js on localhost or something?)
The following is the code I'm using. Any help would be appreciated.
JSFiddle: http://jsfiddle.net/U7CZq/
code

There are a couple things that I see here that could be causing problems.
The first major issue is you are not including foundation.topbar.js file, which is needed to implement the dropdowns.
The other issue is you should call $(document).foundation() at the bottom of the page to allow foundations javascript components to manipulate the DOM of the topbar to add the proper elements and classes need for the topbar dropdowns.

How can you use jQuery mobile's Column-Toggle without applying the mobile style to your whole page?

I'm trying to use the jQuery Mobile Column-Toggle widget in a web application that will be almost exclusively used by non-mobile users, so I really just want the Column picker functionality, without any of the other jQuery Mobile features. However, if I load the jQuery Mobile js and css, my entire site picks up the mobile style, which conflicts horribly with my existing stlying.
I've tried several mobileinit options that supposedly should suppress the mobile styling (I've tried various combinations of these settings - I'm just combining them all here for brevity):
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled = true;
$.mobile.page.prototype.options.keepNative = "select, input, a";
});
The other option I've seen is to add data-role="none" to all of the elements you don't want to style, but that has two problems:
It doesn't work for me (I'm still investigating why, and will update my question soon).
It seems like bad practice to junk up your html with a ton of suppression tags, which also increase the page size.
I've tried using the download builder to create a customer jQuery Mobile package with only the Column-Toggle (and dependency) module, but that custom package doesn't seem to work at all.
So I have two questions really:
Is there an alternative column picker for HTML tables that I can use instead of the jQuery Mobile version. I feel like I have done extensive web research, but have found nothing else.
What methods exist to prevent jQuery Mobile from applying it's style to your whole page? There are a few other SO questions about this, and I'm afraid that there just isn't any currently working method to do so.
Update: I've actually changed to using the new column selection widget in the tablesorter plugin, and scrapped jQuery Mobile.

Why are bootstrap javascript features not working?

I'm using Gantry template on Joomla! that has bootstrap integrated into it. I wanted to use the bootstrap javascript components, like lightbox, tabs. I added jQuery (no conflict) as mootools is already loaded, and then added the required code. But, it doesn't work as expected. I set up a test page at http://v2.marlownailandbeauty.co.uk/index.php?option=com_content&view=article&id=47&Itemid=127
Neither the tabs, nor the lightbox work (just below youtube vid). I can't see any JS errors, just wondering why it might not be working? Any bright ideas? :)

Looking at your code quickly, it seems to me that you load:
jQuery
JQuery no conflict
Mootools
Various other Mootools scrripts
To the best of my understanding, it's recommended to load jQuery (no conflict) after Mootools and all the other scripts have loaded: source http://docs.jquery.com/Using_jQuery_with_Other_Libraries
ie:
jQuery
Mootools
Various other Mootools scrripts
JQuery no conflict
A couple of ways to test this quickly. You could edit the template file directly and change the order, or use an extension like jQuery Easy to load the no conflict scripts.
Or a third option ... have you checked if you even need Mootools in your template? You could use an extension to disable mootools and see what happens. If you are lucky your template will still work well and your site will load faster. And it's easy enough to reverse if mootools is indeed needed.
Good luck!

jQuery UI 1.7.3 datepicker conflict with date.js causing "too much recursion"?

I'm trying to use jQuery UI 1.7.3 datepicker widget in a jQuery UI dialog. The contents of the dialog are from a page template which includes all the various imports of javascript required to make the page function. One of the things I also import is the famous date.js file.
This page that I load in the dialog also exists by itself as a standalone page. The datepicker works like a charm there. Everything breaks when I load it in the dialog. When focus is given to the date input field, the datepicker should show up. However, I get a disgusting error like so:
too much recursion
[Break on this error] return w;};Date.prototype.isDST=function...ase"z":return"";}}):this._toString();};\n
The datepicker calendar doesn't show and I get 1 error in my firebug saying that it's date.js that is puking. I've ran into similar problems like this in the past dealing with too much recursion but I am never too sure how to fix such errors.
Can someone tell me what's the matter?

I'm running jQuery UI 1.7.3 and date.js as well for a modal window and was having the same problem. I was sending all of the scripts needed for the standalone page and for the dialog all in one go, but this meant that some of the same scripts were actually duplicated from the main application window to the dialog. Removing references to the duplicated scripts (for the dialog) fixed the problem.
In essence, Date.js was being loaded twice, and fixing that fixed the problem.

I'm successfully using the datepicker in a modal jqueryui dialog, version 1.8.9. But I'm including the .js as a 'all-in-one'.
You should try to update jqueryui or use the complete package as one file for testing, and if it does not work, provide a failing test case so we can look at it.

How to get FormCheck jQuery script set up and working

I am trying to use FormCheck for MooTools to validate a basic contact form I am planning to build. The problem is I can't seem to set up the script to work at all =(
If anyone knows about FormCheck or MooTools and can add any pointers they would all be greatly recieved.
My website is here: http://ryanis.me/

You are using jquery AND mootools on the same page? Why would you do that, it's a bad practice and bad form to stuff your users for two frameworks for what is a small page without anything complex. that aside, are you using the noconflict mode in either framework (note that this is only available since mootools 1.2.3 and requires some changes in the source code of the plugins, probably better off namespacing jquery)
first of all, you have a mootools domready function then you do inline js on the body tag onLoad...
then at the bottom of the source, you try the mootools domready again...
then you embed an accordion script (something that mootools can have built in as part of mootools-more). not sure what you use jquery for but you really need to structure your page better and pick a single framework.
the error you are getting in the formcheck js implies that either this.form is undefined (at time of evaluation $("contactform") was not available or that this.form.getElements() is not a valid method, which would imply that the mootools element prototype is not working. once again, are you using the noconflict mode?
it really needs refactoring and rethinking...

If you are using jQuery you may want to check out various jQuery plugins that will do form validation for you. The validation plugin works pretty well. If you want to use jQuery and MooTools together, you probably need to make sure that you are using jQuery in noConflict mode.