Zurb Foundation 6: dropdown buttons and links aren't working - html

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.

Related

bootstrap class non recognized and non displayed in firebug

I am reading a book on bootstrap to learn it. I downloaded the bootstrap files and included them in my test file: test.html. The issue is that a class "navbar-toggle" is not recognized by my browser and not displayed in firebug. I tried to put the external link to access "bootstrap.min.css", I checked that this class does exist in this local and external file, but nothing works as expected. I have other issues with another class, for example with the "navbar-brand" class which is recognized in firebug but in the "_navbar.scss" file that comes from nowhere, and after having checked, this class is different from the one I should have in "navbar-brand.css". I take another example: The class "icon-bar" is not recognized and displayed in firebug. I can see in firebug that there are some css rules coming from the three files I included (bootstrap.min.css, bootstrap-grid.min.css, bootstrap-reboot.min.css) that are displayed in firebug, but not the three one I discussed above.
Here is the file test.html
<!DOCTYPE html>
<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">
<title>Bootstrap 101 Template</title>
<link href="./bootstrap-4.4.1-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet" media="all" crossorigin="anonymous">
<link href="./bootstrap-4.4.1-dist/css/bootstrap-grid.min.css" rel="stylesheet" type="text/css">
<link href="./bootstrap-4.4.1-dist/css/bootstrap-reboot.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello, world!</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Mon Logo</a>
</div>
<div class="collapse navbar-collapse" id="collapse-1">
<ul class="nav navbar-nav">
<li class="active">Lien actif</li>
<li>Lien 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Lien 3</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script src="./bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Maybe you're simply not looking at the mobile view? ctrlshift+m in FireFox if I'm correct and downsize to <768px.
Guide on mobile view
On another note, you don't need the reboot and grid included if you already have the bundle. These files are used if you only require a reboot style (similar to a reset) or if you only use the grid to give your document structure.
More info on Bootstrap grid
More info on reboot and reset
Make sure the file path's to your assets (css, js, img, ...) are correct by monitoring the network tab in your developer tools (F12 in most browsers) or similarly check the console for 404 errors.
Guide on network tab
On the scss files, I'm not entirely sure if you're watching the result on a local environment? It's a common practice to generate CSS files from SCSS and then pushing the generated files to your local environment. The browser doesn't need the SCSS files but lately is perfectly capable of handling them. In your developer tools are settings to disable sourcemaps and I believe that's what you're experiencing.
plausible duplicate question
For most of us this information comes by experience but I sense a bit this is what you need to move forward. So hopefully this is helpful to you.

Foundation framework: My code stacks vertically when I think I followed the example to make them stack horizontally

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,

CSS not working on 000webhost

I just started a simple website on 000webhost. I uploaded the following index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="description" content="Bootstrap.">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body style="margin:20px auto">
<div class="container">
<div class="row header" style="text-align:center;color:green">
<ul class="nav nav-tabs">
<li class="active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
</ul>
<p><br></p>
</div>
</div>
</body>
Locally, and what I want it to show up as, is the following:
What I want.
And then what is shows up as on webhost, is the following:
Not what I want.
It's not using the CSS/js scripts (bootstrap stuff) I added at the top of the page. Any idea why?
Check the console for errors!
You're viewing your 000webhost page on https (secure), so it's not loading the assets that you're calling hardcoded on http (insecure).
You can either view your site over http to see everything loaded: http://temptry.000webhostapp.com/
Or, more preferably, fix your references to your assets to be https-agnostic (leading with //), or point directly to https. For example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
It's your cache, clear your cache and it will work.
Or you can wait until your computer reads the new changes. It can take up to 24 hours depending on your cache settings.
To clear your cache using Chrome:
Open settings
Search for "cache"
Click "Clear browsing data"
Change the range if it is not working
Click "Clear data"
Good luck.
Demonstrate picture

Identical HTML/CSS looks differently

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

Foundation 5 - Dropdowns not working properly

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"