having some more issues with Foundation 5.
the dropdown menus: http://foundation.zurb.com/docs/components/dropdown.html
even when using there download and copy pasting the code from their site, the drop down bar when refreshing the page or first load, shows the content already dropped down, and only disappears when you spam click it a few times and move the mouse away. is something broken with it, i assumed it was supposed to have the drop down content hidden on initial load.
code is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="large-12 columns">
Link Dropdown ยป
<ul id="drop" class="[tiny small medium large content]f-dropdown" data-dropdown-content>
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
I have tried using the scripts at the top and bottom of the page, same thing.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
also is it possible instead of clicking to have it just display on mouse hover?
Thanks.
I know this is a super-old question, but I got here via Google and wanted to answer it in case anyone else does.
At least one of your problems is this line
class="[tiny small medium large content]f-dropdown"
You're not supposed to literally put [tiny small medium large content]. You're supposed to choose one of those options (if desired). Like this:
class="tiny f-dropdown"
Related
I wrote the following for a page in Foundation. I relocated some of the standard files and folders, hence the amended file paths.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="../css/foundation.css">
<link rel="stylesheet" href="../css/app.css">
</head>
<body>
<!--
<div class="row">
<ul class="pagination" role="navigation">
<li class="menu-text">Understood</li>
<li class="disabled">First</li>
<li class="disabled">Previous</li>
<li class="disabled">Next</li>
<li class="disabled">Last</li>
</ul>
</div>
-->
<div class="row">
<div class="large-4 columns">
<!--
<ul class="menu vertical">
<li><button class="button">Home</button></li>
<li><button class="button">Map</button></li>
<li><button class="button">1. Prehistory</button></li>
<li><button class="button">2. Ancient</button></li>
<li><button class="button">3. Classical</button></li>
</ul>
-->
<p>First Bunch</p>
</div>
<div class="large-8 columns">
<p>Text</p>
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/vendor/what-input.js"></script>
<script src="../js/vendor/foundation.js"></script>
<script src="../js/app.js"></script>
</body>
</html>
I've left in some comments because, when I rendered the code in the comments, except for the stuff that is supposed to render columns, it works. However, I'm slowly building up to trying to learn how to make menu bars, and the row containing columns was supposed to be a first attempt at it--so I want the first <div class="large-4 columns"> to contain the menu bar on the left, and the second div to contain the page body. However, as it is now, this renders as just
First bunch
Text
rather than placing them in a left column and right column. As far as I can tell I'm following these instructions correctly:
https://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html
I'm also doing this on my desktop computer so I don't think it should be regarding the screen size as anything but large. I'm using the latest version of Firefox on a Linux machine to view it, and the developer console shows no errors.
it seems like your css file is not loading, try this <link rel="stylesheet" href="css/foundation.css" /> and delete the ../ part.
i hope it will work :-)
best regards, georg
Your code seems correct compared with foundation documentation and I haven't been able to find different documentation about the grid implementation for the Foundation version you seem to be using.
What I can think is if you're sure using the same version of foundation than the link you shared (5.5.3). The latest version docs says Foundation 6 comes with the layout grid disabled by default. It also recommends to use the XY grid, if you don't need to support IE 10.
That would look like this:
<div class="grid-x">
<div class="cell large-4">First element</div>
<div class="cell large-6">Next element</div>
</div>
Cheers,
I have downloaded the foundation 6, the zipped folder comes with foundation.js, foundation.min.js jquery.js, foundations.css, foundation.min.css. I try to implement dropdown buttons, but, they're not working and i don't know why.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Home</title>
<link rel="stylesheet" href="../css/foundation.css"/>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/vendor/foundation.js"></script>
</head>
<body>
<script>$(document).foundation();</script>
<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Dropdown Button</button><br>
<ul id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</body>
</html>
I really don't know why this not work. Please, help me!
(note: the dropdown code above was extract from the oficial documentation site http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown_buttons.html)
You are using code relevant to foundation 5.5.3, but on the foundation 6 core files. check this link for reference: http://foundation.zurb.com/sites/docs/button.html
Also check your developer tools if foundation.min.js is loading and no errors in console.
I've made two identical pages, one calls another by clicking a link.
However, my top menubar changes significantly. What could be the reason?
HTML/CSS are absolutely same
<html> <head>
<link rel="stylesheet" href="css/index.css">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body> <div class="wrapper">
<div id="topmenu" class="navigator">
<ul class="nav">
<li>(logo)</li>
<li>FAQ</li>
<li>ABOUT</li>
<li class="search">
<input type="text" placeholder="Search...">
</li>
<li class="right">Log In/Sign Up</li>
</ul>
</div>
</div>
</body>
</html>
and my CSS I will put to jfiddle not to overload the page.
http://jsfiddle.net/wg54d8az/
I am using same CSS file for both pages.
I've read some guides, however I was not able to fix the problem. HTML validator shown following mistake:
"Line 4, Column 42: Attribute content not allowed on element meta at this point.
"
However, I cant clearly get what the problem is.
Well the difference is that on FAQ page your links inside topmenu don't have font-size:18 like they do on the index page.
The problem is in the meta tag before css link on the FAQ page. Change
<meta content="text/html; charset="utf-8">
to
<meta content="text/html" charset="utf-8" >
and then page will properly load index.css
I guess they way you specify page content now it doesn't recognize UTF-8 as encoding format. That leads to problems with above attribute font-size:18 (notice you only wrote number without measure unit - pixels). Other way to fix your problem is to use:
font-size:18px;
inside your index.css
I'm probably thinking about this 'oldschool' but what am I missing?
I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.
I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.
In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.
My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:
<div data-role="page">
<div data-role="header">
<h1>MyApp</h1>
</div>
<div data-role="content">
<center>
<p>This is page 2. Click me</p>
</center>
</div>
</div>
Here is my demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function handlePageLoaded() {
$('#loadPage2').on("click",function(){
$.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
// Tried these as well:
//$.mobile.loadPage("pages/page2.php");
//$('#main_content').load("pages/page2.php");
alert ("#loadPage2.onClick()");
return false;
});
};
$(document).ready(handlePageLoaded);
</script>
<title>MyApp</title>
</head>
<body>
<div data-role="page" id="application">
<div data-role="panel" id="menu" data-display="overlay">
<center>
Close<br />
<a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
</center>
</div><!-- /panel -->
<div data-role="header">
<h1>MyApp</h1>
Me
</div>
<div id="main_content" data-role="content">
<center>
<p>This is the landing page.</p>
</center>
</div>
<div data-role="footer"><span class="ui-title" /></div>
</div>
</body>
</html>
I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.
So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?
you can use $.get to get common header
$.get('header.html', {}, function(response){
$('div#nav').append(response);
});
it will load common header in this div
<div id="nav" class="navcontain">
</div
I am building a web page that uses the tag to navigate the page -
Menu
...
<nav id="mymenutag">
<ul>
<li class="first">Index</li>
<li>Happy</li>
<li class="last">Nowhere</li>
</ul>
/nav>
This generally works fine, except when I also include the script reference-
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
Then, the navigation no longer functions. There are a number of other jquery mobile scripts being loaded as well, but this is the one that breaks the navigation. There are some other ID Selectors that still work, but I think they are processed through jquery mobile. This one is not; it just navigates to a new location on the same page.
I set up a working example on github which can be found here:
https://github.com/hypnoboy/jqmobile_breaks_html5_navt
The behavior can be observed by clicking through the pages. As a bonus and to make it easier to see, I added a jpg photo of my favorite "WTF" software installation moment.
Here is a complete sample web page in which the problem can occur:
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<!--begin entries for jquerymobile-->
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="libs/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--end entries for jquerymobile-->
</head>
<body>
<!-- start of navigation -->
Menu
<!-- end of navigation -->
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<!-- causes href navigation in the page to fail -->
<header><div class=main_heading>
<h1>Sad Test App (jquery.mobile-1.3.1.min.js is running)</h1></div>
</header>
<p>This is some sample text
</p>
Menu
Menu
<img id="front" src="WP_000241.jpg"/>
<!--start of navigation-->
<nav id="mymenutag">
<ul>
<li class="first">Index</li>
<li>Happy</li>
<li class="last">Nowhere</li>
</ul>
</nav>
<!-- /end of navigation -->
<script src="js/vendor/jquery-2.0.2.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/main.js"></script>
<script src="libs/app.js" type="text/javascript"></script>
<script src="pages.js" type="text/javascript"></script>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</body>
</html>
Any assistance appreciated.
One of JQuery Mobile traits is loading 2 pages at once into the DOM and showing just one. It is part of the JQM ajax functionality. If you have used an ID in a master page or part that is loaded into more than 1 of your pages you will probably find that upon inspecting your source at runtime you have duplicate IDs
Turning off the ajax functionality and having it do postbacks is a workaround, or use classes
Image showing the issue (image from pluralsight course video)