I have been trying to use MateralizeCSS; only designed and created by Google; as an alternative for Bootstrap as a test and to see the differences by myself. However there is something that is weird with Materalize. The HTML Setup stated on their official website is simple, but when I try to resize the window and press the hamburger icon nothing happens. This means that the JavaScript is not loaded correctly, but it's actually included in my HTML file. First I tried to use the CDNs and it's not working. So I decided to download the files and link them in the file, but it's still not working.
My HTML:
<!DOCTYPE html>
<html lang="en-US" class="gr__materializecss_com">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="materialize/css/materialize.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> -->
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<!-- Import jQuery before materialize.js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
-->
</body>
</html>
I opened the Inspector to see the Starter Template structure for the navbar and it's the same as mine. I can't figure out the problem. So any logical explanation is appreciated.
You just need to initialize the jQuery plugin for the sideNav method to work. Hope this helps!
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script>
$(".button-collapse").sideNav();
</script>
</body>
</html>
Related
I've recently been playing around with Materialize-css trying to get use to building websites. However, I noticed that when I try to add JavaScript features it does not seem to work. I've double checked to make sure I have all the right folders in place - js, css, & fonts, and the correct script loading as well. Here is a sample of my jQuery & index.html file:
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
As you can see I'm trying to add a Parallax, and a drop down menu button to my website. In order to do this I've been instructed to add the jQuery '$('.parallax').parallax();', and '$('.dropdown-trigger').dropdown();', in the $(document).ready(function()) in the materialize.js file. See the documentation here: https://materializecss.com/parallax.html, & https://materializecss.com/dropdown.html.
Here is a picture of what I'm getting when I run this code:
The Downloads drop down button should be displaying one, two, three, etc., when I click it, and there should be a background image using the Parallax. Does anyone notice something I'm missing?
I think your library placing is wrong. Please check it with below changes. Now I am not getting any error
$(document).ready(function(){
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
});
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<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.98.1/js/materialize.min.js'></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">enter code here
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
</body>
</html>
I figured it out.
Apparently the JQuery is supposed to be added to this function:
(function($){
$(function(){
$('.sidenav').sidenav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery);
I followed all the instructions from a tutorial that I watched but the responsive menu is not expanding? Even the dropdown is not working. When I click the button nothing's happening, it's only changing its color. What could I be doing wrong?
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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title></title>
<!-- Bootstrap -->
<link href="view/css/bootstrap.min.css" rel="stylesheet">
<link href="view/css/styles.css" rel="stylesheet">
<script src="js/respond.js"></script>
<script src="view/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"><img src="view/images/logo.png">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
The Institution <b class="caret"></b>
<ul class="dropdown-menu">
<li>About the Institute</li>
<li>Research & Programs</li>
<li>Board of Advisers</li>
<li>Educational Quality Team</li>
</ul>
</li>
<li>The Center</li>
<li>Opportunity</li>
<li>Get In Touch</li>
</ul>
</div>
</div></div>
JS
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
It's working now I just edited this part
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
and also deleted everything except for this
<script src="js/respond.js"></script>
thanks to everyone who answered! :)
You have bootstrap.js included twice, once before jQuery is loaded. Remove
<script src="view/js/bootstrap.min.js"></script>
in your head section
I would like my site to have a menu with tabs like the one shown
in Twitter Bootstrap website.
I have downloaded jquery 1.11.2 in the js/ folder and placed the following
in the head section:
<link rel="stylesheet" href="css/bootstrap.css">
<!--- Google fonts-->
<!-- javascript libraries -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--- personal styles should always be below bootstrap -->
<link rel="stylesheet" href="css/theme.css">
Next to get the Navs menu I copied and paste the code from the Bootstrap component page ( I just changed the text to display)
<div class="row">
<div class="col-md-12 site-menu">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Projects</li>
<li role="presentation">About</li>
</ul>
</div>
The navs however do not look the way I expected, the links are shown as a bulletted list.
What am I doing wrong? How can I get to display Navs Tabs ans Navs pills?
I guess you haven't linked the CSS files properly, try with the latest version CDN links,
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
<!--- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!--- personal styles should always be below Bootstrap Core CSS -->
<!--<link rel="stylesheet" href="css/theme.css">-->
<!--- Google fonts-->
<div class="row">
<div class="col-md-12 site-menu">
<ul id="myTab" class="nav nav-tabs">
<li role="presentation" class="active">Home
</li>
<li role="presentation">Projects
</li>
<li role="presentation">About
</li>
</ul>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
The general outline of the html file should look like this:
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap Core CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,700|Amatic+SC:400,700" rel="stylesheet">
<!-- My Theme style -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--lots of html-->
<!--lots of html-->
<!--lots of html-->
<!-- jQuery 2.0.2 -->
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!-- Bootstrap Core JS -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script>
<!-- some JS Function -->
</script>
</body>
</html>
This is how I "rents" with boostrap with sass and this is how when I click on my drop down menu which I add to the menu so it will not "come" down in other words showcase itself.
I have done so here at the menu.
<li class="dropdown">
Opret <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
at the bottom of the page, I add the new version of jquery and the old version which comes with the package when I collect Bootstrap to my visual studio Express 2013
<script src="../Scripts/jquery-2.1.3.js"></script>
<script src="../javascripts/js/lightbox.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
EDIT
<script src="../javascripts/js/lightbox.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
EDIT 2
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Instruktor Panel</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../stylesheets/StyleSheet.css" rel="stylesheet" />
<link href="../stylesheets/css/lightbox.css" rel="stylesheet" />
</head>
EDIT 3 - Problem I found located here:
<script src="../javascripts/bootstrap.min.js"></script>
It was me who had written that it was in js but it is all in javascript
There are two versions jquery js file. Remove one of them, and then try again.
<script src="../Scripts/jquery-2.1.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
I just copied your html code and added jquery and bootstrap js files. It works in FIDDLE
Here is the HTML code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by User86745458</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>
<body>
<li class="dropdown">
Opret <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Other javascript plugins or your own javascript is recommended to be placed on the <head>
<head>
<script src="../javascripts/js/lightbox.js"></script>
</head>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<!DOCTYPE html>
<!-- saved from url=(0073)http://tutsme-webdesign.info/tutorials/navs/pills_stacked_panesright.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Bootstrap 3 Navs Tabs Pills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap core CSS -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-stacked" data-toggle="collapse">
<li class="dropdown">
<span class="glyphicon glyphicon-tree-deciduous"> Nachbarschaft </span><b class="caret"></b>
<ul class="dropdown-menu">
<li role="presentation">Profil</li>
<li role="presentation">Nachbarn</li>
</ul>
</li>
<li role="presentation"><span class="glyphicon glyphicon-tasks"> Aufgaben</span></li>
</ul>
</div><!-- end of container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
How can I make the dropdown of the first pill make the lower pills move down? So when I click the dropdown, I can still see the lower pill "Aufgaben"?
JSFiddle Example: http://jsfiddle.net/o0xutq34/
(based on http://tutsme-webdesign.info/tutorials/navs/pills_stacked_panesright.html)
Thanks in advance!
You would need to make dropdown div statically positioned (not absolutely) and also remove float from it:
.container .dropdown-menu {
position: static;
float: none;
}
Demo: http://jsfiddle.net/o0xutq34/1/