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.
Related
I have just started a new site created with meteor and using foundation for sites and sass.
I want to create a dropdown menu, but I can't make it work.
I followed this link
dropdown menu and copied html, but it's not been showed as a dropdown menu.
I think my problem is because maybe I haven't initializated the javascript of the dopdown menu.
Can someone show me how to do it. In Zurbs site there are several examples, but loading the script in the head. But I want to know how to do it with meteor.
I might be completelly lost, so any help is really welcome.
This are the packages I have added to my meteor
zurb:foundation-sites
seba:minifiers-autoprefixer
fourseven:scss
To initialize the Foundation plugins you have to run the init code $(document).foundation();, make sure it is added after the foundation js file are included.
Also make sure that $(document).foundation(); is added after DOM has been rendered (at the bottom of html) or in window.onload event.
Took some hours once to find this out :P
I'm currently trying to adapt my currently in-development jquery-mobile web application to use the navigational structure from this mobile template called Gliders, and I'm having some issues.
http://www.enableds.com/products/gliders/
I've been following their FAQ in order to incorporate the page structure, as well as the left sidebar in an attempt to get their navigational structure working, but I keep getting the following error in tons of my scripts:
$ is not a function
This is what was happening when I kept my current version of jquery in (which is 1.11.3); and when I switched to their version (which is 1.8.2), I get this error:
$(...).sketch is not a function
Though even if I comment my sketch functions out, the left sidebar isn't showing up at all.
Does anyone have experience with using templates like this?
Looks like it was because I was using a different version of jQuery than the version that was in the application.
I currently have a simple html page that utilizes an angular script to fetch json content and arrange it into a table. nothing all that complex.
I've been asked today to have it so that it could be included as a plugin anywhere in a wordpress site. As someone that has never used wordpress before, I'm wondering if there is a simple way to do this, or indeed if it is possible at all. Answers that I have found are either unrelated to the issue that I have, or are incredibly old.
If you don't care about making it a plugin exactly but instead a snippet you drop into a page is fine then I would suggest using a page template that loads the angular js files and sets up the overall HTML and inits the app.
I am working on a project that I cannot change to Java 1.8 to take in the newest JavaFX, this may or may not be relevant to the issue at hand. I have been trying everything that I can find on the internet to override the default look and feel for a drop down selection within the web browser. I have tried Javascript solutions, pure CSS solutions, and even trying to build the functionality using lists and CSS. Nothing seems to work within the WebView/WebEngine on JavaFX 2.2, most of the solutions I have tried work perfectly fine within Firefox (I know its not the best comparison because Firefox doesn't utilize webkit under the hood).
Any ideas on how to style the dropdown part of the select feature with JavaFX 2.2 WebView?
List of techniques I have tried:
http://wellstyled.com/en/javascript-styleselect-jquery-plugin/
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
http://www.scribbletribe.com/how-to-style-the-select-dropdown/
http://cssdeck.com/labs/styling-select-box-with-css3
http://bavotasan.com/2011/style-select-box-using-only-css/
http://www.htmllion.com/default-select-dropdown-style-just-css.html
http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
I found something that works and actually improves my interface. I was searching the UX Stack Exchange and found Chosen. Original UX Stack Exchange post
I have create JavaFX app with webview (angularjs and bootstrap).
This is how the element is rendered in Chrome
This is how select element is rendered in ubuntu jar file
I have try multiple fixes but it seams that this dropdown is rendered from the browser itself (will be rendered different in linux, macos, windows) and there is no way to style it.
Mine working solution is to use plane js library as tom-select, no dependencies.
And here how select element is rendered in chrome and in jar. Success :)
I have written a little drag and drop script (HTML5/Javascript) which functions correctly in a stand-alone page. However when I integrate it into a web page it doesn't allow dragging (Black circle with diagonal stripe when attempting to drag).
I have simulated the web-page's additional javascript in the stand-alone to rule out javascript conflict. I'm just not seeing why this happens! Any help will be appreciated. Thanks in advance...
You are using two jQuery versions :
v1.3.2
v1.9.1
Remove the v1.3.2 and it will work