I followed the documentation for off-canvas use and it didn't work at all. F6 Forum returned 403 when I tried to create a post at theri forum :(.
Here is the HTML code I tried:
<!doctype html>
<html class="no-js" 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.0" />
<title>Foundation Starter Template</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="app.css"/>
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
Welcome !
</div>
</div>
<!-- Compressed JavaScript -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is only "Welcome' displayed, no off-canvas. What am I doing wrong here ? Thank you.
Are you sure there is nothing there?
It looks like you are just missing a click handler to open your off canvas content - as per the docs.
Try and adding:
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
within your
<div class="off-canvas-content" data-off-canvas-content>
Related
I'm working on Django project with Materializecss design - Built a page with floating button for example.
Why is it not working?
I started using exactly the template from the website: https://materializecss.com/getting-started.html
and updated from the CDN part in the page:
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
And added at the bottom:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Thanks a lot!
The full HTML:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
After reading some posts, I use a suggestion to add the below, and it worked:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
If someone know to explain the below, it'll be great:
Why the updated version of the files is not working?
What's the right way to install it for production?
The full HTML with the 'ADDED PART THAT MAKE IT WORK':
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
ADDED PART THAT MAKE IT WORK:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="0" class="active"></li>
<li data-target="Carousel" data-slide-to="1"></li>
<li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/Carousel/001.jpg">
</div>
<div class="item">
<img src="img/Carousel/002.jpg">
</div>
<div class="item">
<img src="img/Carousel/003.jpg">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
My bootstrap doesn't work for carousels neither does for Materialize. What could be the problem? Is the Javascript causing problem or what is it? I'm getting broken carousels. Ignore the images in the code.
The class of the <div>s around the images must be carousel-item, not just item. See the Bootstrap documentation for carousels.
I am not sure why this basic reveal modal is not working... what am I missing?
<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" />
<meta name="author">
<!-- Style Sheets -->
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/styles.css" />
<!-- HTML% shiv -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Lorem Ipsum</h2>
<p class="lead">Lorem ipsum lorem.</p>
<p>Lorem ipsum lorem ipsum lorem ipsum.</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.min.js"></script>
<script src="js/vendor/fastclick.js"></script>
<script src="js/vendor/modernizr.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
And here are the files:
Your anchor should have the attribute data-open="myModal" or data-toggle="myModal". Your close button should also be data-close.
It appears that you are using the Foundation 5 reveal, it has changed for Foundation 6.
I have reformatted your reveal codeblock below adding the data-open to your open anchor and data-close to the close button and, the reveal block to have class="reveal":
Click Me For A Modal
<div id="myModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Lorem Ipsum</h2>
<a class="close-button" data-close aria-label="Close">×</a>
</div>
Zurb Foundation 6 Reveal: http://foundation.zurb.com/sites/docs/reveal.html
I am trying to use zurb foundation 5 reveal modal. But it's not working and not open when I click on button.
I am using this html code.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="css/foundation.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<title>index</title>
</head>
<body>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a> </div>
<a class="button" href="#" data-reveal-id="myModal">Click for a modal</a>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script type="text/javascript">
$('#myModal').foundation();
</script>
</body>
</html>
Change the last script tag to this:
<script type="text/javascript">
$(document).foundation();
</script>
You also forgot to add the modal trigger:
Click Me For A Modal
See documentation here: http://foundation.zurb.com/docs/components/reveal.html
You may be running into this issue if you have called $(document).foundation(); twice on the same page.
Its works for me
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
in footer i used this snippet
<script>
jQuery(document).ready(function(){
jQuery(document).foundation();
jQuery('#dd').click(function(){
jQuery('#myModal').foundation('reveal', 'open');
});
});
</script>
I'm new to Django and was going through the Django Book for the first time. I tried just throwing some bootstrapped html into a file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<header><img src="assets/img/logo.png" alt="Test" /></header>
<div class="container" style="text-align:center;">
<br /><br />
<form class="search form-inline" action="searchresults.html">
<div class="input-append">
<input class="search-input input-xxlarge" id="appendedPrependedInput" size="16" type="text" placeholder="Type in your search"><button class="btn btn-large btn-danger" type="submit">Search</button>
</div>
<!--<input type="text" class="search-input input-xlarge" placeholder="Type in your search">
<button type="submit" class="btn btn-large btn-danger">Search</button> -->
</form>
<hr class="soften">
</div>
</body>
</html>
And rendered it with this view:
def search(request):
return render_to_response('search_page.html')
When I start a test server using python manage.py runserver I get a plain ugly html page, rather than a bootstrapped page. Why is this? (I do have the bootstrap assets in the same directory)
Your static files are probably not set up properly. Go to "View Source" and click on the CSS files & see if you get a 404.
Here's how to set up your static files directory: http://docs.djangoproject.com/en/dev/howto/static-files
I'd also recommend checking out django-bootstrap-toolkit.