I'm using Materialize for my design. The dropdown and the sidenav doesn't work. The console doesn't give any errors and I did initialize the scripts after jQuery just like the materializecss.js.
Here's the code:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Initialize Materialize Scripts -->
<script>$(".button-collapse").sideNav();</script>
<script>$(document).ready(function(){
$('.parallax').parallax();
});</script>
<script>
$(".dropdown-button").dropdown({
hover: false
});
</script>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li><a class="fakelink">Lite</a></li>
<li><a class="fakelink">Standard</a></li>
<li><a class="fakelink">Essential</a></li>
<li class="divider"></li>
<li><a class="fakelink">Enterprise</a></li>
</ul>
<nav role="navigation" class="red">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
<ul class="right hide-on-med-and-down">
<li><a class="fakelink">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink">Other Services</a></li>
<li><a class="fakelink">About</a></li>
</ul>
<ul id="nav-mobile" class="side-nav" style="left:-250px;">
<li><a class="fakelink truncate">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink truncate">Other Services</a></li>
<li><a class="fakelink truncate">About</a></li>
</ul>
<a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
</div>
</nav>
You need to make sure the document has loaded before setting the side nav and dropdown. Just move that code inside your document.ready function
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Initialize Materialize Scripts -->
<script>$(document).ready(function(){
$(".button-collapse").sideNav();
$('.parallax').parallax();
$(".dropdown-button").dropdown({
hover: false
});
});</script>
<body>
<ul id="dropdown1" class="dropdown-content">
<li><a class="fakelink">Lite</a></li>
<li><a class="fakelink">Standard</a></li>
<li><a class="fakelink">Essential</a></li>
<li class="divider"></li>
<li><a class="fakelink">Enterprise</a></li>
</ul>
<nav role="navigation" class="red">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
<ul class="right hide-on-med-and-down">
<li><a class="fakelink">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink">Other Services</a></li>
<li><a class="fakelink">About</a></li>
</ul>
<ul id="nav-mobile" class="side-nav" style="left:-250px;">
<li><a class="fakelink truncate">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink truncate">Other Services</a></li>
<li><a class="fakelink truncate">About</a></li>
</ul>
<a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
</div>
</nav>
Have you tried putting script at the END OF BODY ELEMENT? It works for me.
<script>$(document).ready(function(){
$(".button-collapse").sideNav();
$('.parallax').parallax();
$(".dropdown-button").dropdown({
hover: false
});
});
</script>
This code worked for me!! You can find the entire explanation in here: http://materializecss.com/side-nav.html
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<ul id='dropdown1' class='dropdown-content'>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</ul>
<i class="mdi-navigation-menu"></i>
Related
I'm making an web with materializecss but links I add on the side nav doesn't work what can I do with it,
When I click the link the side-nav close
code:
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>
<div class="userView">
<div class="background">
<img src="<?php echo $srcurl; ?>/cover.png">
</div>
<img class="circle" src="<?php echo $srcurl; ?>/logo.png">
<span class="black-text name">DIGINEWS</span>
</div>
</li>
<li><center>MENU</center></li>
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<script> $(".button-collapse").sideNav(); </script>
</div>
</nav>
</div>
Wrap your JS code for sideNav within documentReady event, and set parameter closeOnClick as true.
Bring your side menu (ul element with class"side-nav") at the same level of div with class navbar-fixed . This is to avoid known issues with overlay. See this stackoverflow question and accepted answer
$( document ).ready(function(){
$('.button-collapse').sideNav({
closeOnClick: true
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="#">Home</a></li>
<li><a class="waves-effect" href="#">About us</a></li>
</ul>
</div>
</nav>
</div>
<ul class="side-nav" id="mobile-demo">
<li><center>MENU</center></li>
<li><a class="waves-effect" href="#!">Home</a></li>
<li><a class="waves-effect" href="#!">About us</a></li>
</ul>
simply code below....
you need to add CDN of materialize sc,js and jquery js
Here is your fix nav bar
<div class="navbar-fixed">
<nav class="nav-wrapper">
<div class="container">
Picnic.lk
<a href="" class="sidenav-trigger" data-target="mobile-menu">
<i class="material-icons">menu</i>
</a>
<ul class="hide-on-med-and-down right">
<li>Photos</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</div>
</nav>
</div>
your mobile nav bar (side nav)
<ul class="sidenav grey lighten-2" id="mobile-menu">
<li><a class="sidenav-close" href="#photos">Photos</a></li>
<li><a class="sidenav-close" href="#services">Services</a></li>
<li><a class="sidenav-close" href="#contact">Contacts</a></li>
</ul>
Add below js code
<script>
$(document).ready(function(){
//side navigation
$('.sidenav').sidenav({
//your additional code goes here
});
});
I have a jQuery question.
I have a multiple groups of images which show / hide by clicking some corresponding links. The markup looks like this:
<div class="feature-wrap">
<!-- my menu -->
<div class="item-select-list-wrap">
<ul class="item-select-list">
<li><a class="feature-link" data-category="feature01" href="#">Item 1</a></li>
<li><a class="feature-link" data-category="feature02" href="#">Item 2</a></li>
</ul>
</div>
<!-- images for toggling -->
<ul class="item-select-image">
<li class="fadeitem feature-slide feature01"><img src="myimage.jpg"/></li>
<li class="fadeitem feature-slide feature02"><img src="myimage.jpg"/></li>
</ul>
</div>
There's some CSS to hide things by default:
.item-select-image li {display: none;}
.item-select-image li:last-child {display: block;}
And here's the jQuery:
$('.feature-link').click(function(event) {
event.preventDefault();
var feature = $(this).data('category');
$('.fadeitem').hide();
$('.' + feature).fadeIn(500);
$('.feature-link').removeClass('current');
$('.feature-link.' + feature).addClass('current');
});
This works fine, until I add another block:
<div class="feature-wrap">Another set of this</div>
because the all the 'fadeitem's on the page will disappear. My question: how can I best target only the items within this group?
Here's a pen: http://codepen.io/regmtait/pen/NdLqvP
You should use the current object this to target the parent feature-wrap, check the snippet below.
Hope this helps.
$('.feature-link').click(function(event) {
event.preventDefault();
var feature = $(this).data('category');
var parent = $(this).closest('.feature-wrap');
$('.fadeitem', parent).hide();
$('.' + feature).fadeIn(500);
$('.feature-link', parent).removeClass('current');
$('.feature-link.' + feature, parent).addClass('current');
});
.item-select-image li {display: none;}
.item-select-image li:last-child {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-wrap">
<h2>First set of images</h2>
<!-- my menu -->
<div class="item-select-list-wrap">
<ul class="item-select-list">
<li><a class="feature-link" data-category="feature01" href="#">Item 1</a></li>
<li><a class="feature-link" data-category="feature02" href="#">Item 2</a></li>
<li><a class="feature-link" data-category="feature03" href="#">Item 3</a></li>
</ul>
</div>
<!-- images for toggling -->
<ul class="item-select-image">
<li class="fadeitem feature-slide feature01"><img src="http://placehold.it/200x100/00ff00"/></li>
<li class="fadeitem feature-slide feature02"><img src="http://placehold.it/200x100/ffff00"/></li>
<li class="fadeitem feature-slide feature03"><img src="http://placehold.it/200x100/ff00ff"/></li>
</ul>
</div>
<div class="feature-wrap">
<h2>Second set of images</h2>
<!-- my menu -->
<div class="item-select-list-wrap">
<ul class="item-select-list">
<li><a class="feature-link" data-category="feature04" href="#">Item 4</a></li>
<li><a class="feature-link" data-category="feature05" href="#">Item 5</a></li>
<li><a class="feature-link" data-category="feature06" href="#">Item 6</a></li>
</ul>
</div>
<!-- images for toggling -->
<ul class="item-select-image">
<li class="fadeitem feature-slide feature04"><img src="http://placehold.it/200x100/00ff00"/></li>
<li class="fadeitem feature-slide feature05"><img src="http://placehold.it/200x100/ffff00"/></li>
<li class="fadeitem feature-slide feature06"><img src="http://placehold.it/200x100/ff00ff"/></li>
</ul>
</div>
I am trying to do the Sidenav, when i have a full screen, the menu displays but when i minimize the browser the menu button shows but when i click it, it doesn't display anything. I don't know why. I am using Materialize css. http://jsfiddle.net/xdrL9e83/8/. When i run it in Jsfiddle it shows the Toggle icon being outside Navbar. I don't know why
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
The Javascript
<script>
$(".button-collapse").sideNav();
</script>
Your DIV is closed in the wrong place. It needs to close after the content of your Nav.
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="mdi-navigation-menu"></i>
<ul class="right hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</div>
</nav>
http://jsfiddle.net/aaronfranco/xdrL9e83/14/
Put the menu toggle icon (mdi-navigation-menu) at the top..
<nav>
<i class="mdi-navigation-menu"></i>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</nav>
Demo: http://codeply.com/go/mMvlUnsNRT
I'm new in asp and I'm having trouble using navbar collapse. It works fine in homepage(AnonymousTemplate), but when I logged in navbar collapsed is not working(not expanding when clicked).
Here's is my code. I'm new here so please be gentle. Sorry for the question.
Thanks for anyone who will answer, it will be greatly appreciated.
In here it works.
In here it doesn't work.
Here are my script and html.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/jquery.isotope.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/wow.min.js" type="text/javascript"></script>
<nav class="navbar navbar-inverse" role="banner">
<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="Default.aspx"><asp:Image ID="Image1" runat="server" ImageUrl="~/images/service/logo.png"></asp:Image></a>
</div>
<div runat="server" class="collapse navbar-collapse navbar-right">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a href="HowItWorks.aspx" >How it works?</a></li>
<li>Contact us</li>
<li class="dropdown">
About us <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav">
<li>My profile</li>
<li><a href="AdvancedBooking.aspx" >Advanced Booking</a></li>
<li>Transaction History</li>
<li class="dropdown">
About us<i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
<li><asp:LoginStatus runat="server" /></li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</nav>
Try to use an unique name to the other dropdown menu and link the other data-toggle to it like this:
<AnonymousTemplate>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a href="HowItWorks.aspx" >How it works?</a></li>
<li>Contact us</li>
<li class="dropdown">
About us <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav">
<li>My profile</li>
<li><a href="AdvancedBooking.aspx" >Advanced Booking</a></li>
<li>Transaction History</li>
<li class="dropdown2">
About us<i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
<li><asp:LoginStatus runat="server" /></li>
</ul>
</LoggedInTemplate>
OK, after many tests I finally got my answer. I changed:
<script src="js/bootstrap.min.js" type="text/javascript"></script>
to:
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
Add "/" at the start to locate it at the root folder. Sorry if this one is a silly mistake. I only started 1 month in asp.net. I am posting this answer for anyone who will face this issue too.
-RobM
Okay so I'm trying to save this function using cookies, and I can't seem to get the cookies to interact with the function.
var backImage = new Array();
backImage[0] = "dotPattern.png";
backImage[1] = "stripesPattern.png";
backImage[2] = "boxPattern.png";
backImage[3] = "";
function changeBGImage(whichImage){
document.body.background = backImage[whichImage];
}
Can you let me know what I'm doing wrong or what else I have to do. I've got the image files and the html all in the same folder. Let me know if you need anything else and I can put it up here too.
Thank you very much for any help you're able to offer
Here is the page the cookies are meant to be used on:
<DOCTYPE! html>
<html>
<head>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<script src="customise.js"></script>
<title>Vitalita - My Profile</title>
<div id="Logo">
<img id="logo" src="LogoSmall.png" height=125px border="0" alt="Image not found"></img>
</div>
<body>
<header>
<nav id="top">
<ul id="menu">
<li><a class="nav" id="about" href="#">about</a>
<ul class="submenu">
<li><a class="aboutMenu" href="aboutus.html">about us</a></li>
<li><a class="aboutMenu" href="contactus.html">contact us</a></li>
</ul>
</li>
<li><a class="nav" id="health" href="#">health</a>
<ul class="submenu">
<li><a class="healthMenu" href="#">information</a></li>
<li><a class="healthMenu" href="#">exercise</a></li>
<li><a class="healthMenu" href="recipes.html">recipes</a></li>
</ul>
</li>
<li><a class="nav" id="media" href="#">media</a>
<ul class="submenu">
<li><a class="mediaMenu" href="articles.html">articles</a></li>
<li><a class="mediaMenu" href="#">videos</a></li>
</ul>
</li>
<li><a class="nav" id="tools" href="#">tools</a>
<ul class="submenu">
<li><a class="toolMenu" href="BMI.html">BMI calculator</a></li>
<li><a class="toolMenu" href="#">measurements</a></li>
<li><a class="toolMenu" href="#">exercise generator</a></li>
</ul>
</li>
<li><a class="nav" id="social" href="#">social</a>
<ul class="submenu">
<li><a class="socialMenu" href="social.html">social media</a></li>
<li><a class="socialMenu" href="#">games</a></li>
</ul>
</li>
<li><a class="nav" id="account" href="registration.html">account</a>
<img src="icon.png" height=19px id="icon"></img>
<ul class="submenu">
<li><a class="accountMenu" href="#">my profile</a></li>
<li><a class="accountMenu" href="#">my progress</a></li>
<li><a class="accountMenu" href="#">my favourites</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<img id=insta src="insta.png" height=50px></img>
<img id=fb src="fb.png" height=50px></img>
<img id=twit src="twit.png" height=50px></img>
<section id="feature">
Dot Pattern
Stripes Pattern
Box Pattern
Default
</section>
<hr id="first">
<footer>
<div class="Foot">
<div id="footHome">
<bold>Home</bold>
<ul class="sitemap">
<li><a class="links" href="home.html">Home Page</a>
</ul>
</div>
<div id="footAbout">
<bold>About</bold>
<ul class="sitemap">
<li><a class="links" href="aboutus.html">About Us</a>
<ul class="sitemap">
<li><a class="links" href="">Style Guide</a>
<li><a class="links" href="">Evaluation Plan</a>
</ul>
<li><a class="links" href="contactus.html">Contact Us</a>
<li><a class="links" href="feedbackform.html">Feedback</a>
<li><a class="links" href="helpdesk.html">FAQ</a>
<li><a class="links" href="privacy.html">Privacy Policy</a>
</ul>
</div>
<div id="footHealth">
<bold>Health</bold>
<ul class="sitemap">
<li><a class="links" href="#">Information</a>
<li><a class="links" href="#">Exercise</a>
<li><a class="links" href="recipes.html">Recipes</a>
</ul>
</div>
<div id="footMedia">
<bold>Media</bold>
<ul class="sitemap">
<li><a class="links" href="#">Articles</a>
<li><a class="links" href="#">Videos</a>
<li><a class="links" href="#">Games</a>
</ul>
</div>
<div id="footTools">
<bold>Tools</bold>
<ul class="sitemap">
<li><a class="links" href="BMI.html">BMI calculator</a>
<li><a class="links" href="#">Measurements</a>
<li><a class="links" href="#">Exercise generator</a>
</ul>
</div>
<div id="footSocial">
<bold>Social</bold>
<ul class="sitemap">
<li><a class="links" href="social.html">Social Media</a>
<li><a class="links" href="#">Games</a>
</ul>
</div>
<div id="footAccount">
<bold>Account</bold>
<ul class="sitemap">
<li><a class="links" href="#">My Profile</a>
<li><a class="links" href="#">My Progress</a>
<li><a class="links" href="#">My Favourites</a>
</ul>
</div>
</div>
<hr id="second">
</footer>
<div id="copy">
Copyright © Vitalita 2014. All Rights Reserved.
<div>
</body>
</html>
To use cookies you need to save and load them explicitly. You can find how to do this in javascript in this question.