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>
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>
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>
I have the following question/problem:
I want to "build" a templating system where I can aggregte the page to be shown from a couple of different *.html files. For example I have a layout.html with basic page structure and I want to fill it with content from header.html, content.html and footer.html.
I tried it using the Thymeleaf fragment mechanism but that always failed when it comes to aggregate the head definitions (css, js) from the different input files.
I Also tried the Thymeleaf layout dialect mechanism that aggregates the head definitions correctly but it seems only capable of working with one layout and one content file using the layout:decorate directive. Am I right?
The following code snippets are simple and straighforward ... I just want to include header.html, column1.html, column2.html and footer.html into layout.html as described above. Problem is that I only can include the according content sections using ThymeLeafs replace/fragment mechanism. But how can I process the head and script sections to include them into the layout?
layout.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thyme Fiddling</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" th:href="#{/styles/main.css}"/>
<link rel="stylesheet" type="text/css" th:href="#{/styles/layout.css}"/>
<script type="text/javascript" th:src="#{/scripts/jquery-3.1.0.js}"></script>
</head>
<body>
<div id="layout">
<div id="headerWrapper">
<div th:replace="~{header :: content}">placeholder for header</div>
</div>
<div id="contentWrapper">
<div id="column1Wrapper">
<div th:replace="~{column1 :: content}">placeholder for column1</div>
</div>
<div id="column2Wrapper">
<div th:replace="~{column2 :: content}">placeholder for column2</div>
</div>
</div>
<div id="footerWrapper">
<div th:replace="~{footer :: content}">placeholder for footer</div>
</div>
</div>
</body>
header.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/header.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Header !!!</div>
</div>
column1.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/column1.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Column1 !!!</div>
</div>
column2.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/column2.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Column2 !!!</div>
</div>
footer.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/styles/footer.css}"/>
</head>
<script type="text/javascript">
$(document).ready(function() {});
</script>
<div th:fragment="content">
<div class="center">Footer !!!</div>
</div>
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'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.