Examples on using Material Components for Web CDNs for front-end design are not that helpful.
I found this demo of a modal drawer but it doesn't seem to use the published CSS and JavaScript CDNs.
Demo: Modal drawer demo
How to implement a modal drawer using Material Components' CDNs?
It is a bit difficult to get going with MDC using unpkg bundles instead of consuming individual components via webpack. The Getting Started documentation helps a bit but it can still be difficult to translate the docs for use with various components. Trickiest part is figuring out how to instantiate the various components (because there is not a one size fits all approach). Here is a quick example of the modal drawer component using unpkg to get you going.
const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Modal Drawer Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" tabindex="0" aria-current="page">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item" href="#" tabindex="0">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#" tabindex="0">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
</div>
</header>
<main class="mdc-top-app-bar--fixed-adjust">Content</main>
</div>
</body>
</html>
The current chosen answer does not work on version v10 or higher due to a change in the codebase. In fact currently there is no "working" implementation of MDCList, which is what the drawer uses to show lists, currently you can either use mdc-evolution-list (which doesn't seem to work on CDN), or go back to the old one with mdc-evolution-deprecated. Therefore the above code snippet should actually be:
const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Modal Drawer Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-deprecated-list-item mdc-deprecated-list-item--activated" href="#" tabindex="0" aria-current="page">
<i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-deprecated-list-item__text">Inbox</span>
</a>
<a class="mdc-deprecated-list-item" href="#" tabindex="0">
<i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-deprecated-list-item__text">Outgoing</span>
</a>
<a class="mdc-deprecated-list-item" href="#" tabindex="0">
<i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-deprecated-list-item__text">Drafts</span>
</a>
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
</div>
</header>
<main class="mdc-top-app-bar--fixed-adjust">
Content
</main>
</div>
</body>
</html>
If you are using webpack or compiling SCSS yourself, you can import the new list using:
#use "#material/list/evolution-mixins"as list-evolution-mixins;
#include list-evolution-mixins.core-styles();
You can find more informations on the related Github Issue https://github.com/material-components/material-components-web/issues/7013
Related
This code is more likely referenced to the yt i watched since im still a newbie in web developing(front-end). I am building a sidebar but my js returns the message from the title I mentioned "Uncaught TypeError: Cannot set properties of null (setting 'onclick')".
const sidenavbtn_menu = document.querySelector('sidenavbtn_menu');
const sidebar = document.querySelector('sidebar');
sidenavbtn_menu.onclick = function() {
sidebar.classList.toggle('open')
}
<!doctype html>
<html lang="en">
<head>
<title>wRBMS</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!---CSS Link-->
<link rel="stylesheet" href="home_dashboard.css" type="text/css">
<!---MATERIAL CDN Google-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="sidebar" id="">
<div class="logo-contents">
<div class="logo">
<img href="#">
<div class="logo-name">w<span>RBMS</span></div>
</div>
<span class="material-symbols-sharp" id="sidenavbtn_menu">menu</span>
</div>
<ul class="sidenav-list">
<li>
<a href="#">
<i class="material-symbols-sharp">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="material-symbols-sharp">monitoring</i>
<span>MFO</span>
</a>
</li>
</ul>
</div>
</div>
[enter image description here][1]
</body>
</html>
The issue lies in the following lines:
const sidenavbtn_menu = document.querySelector('sidenavbtn_menu');
const sidebar = document.querySelector('sidebar');
document.querySelector() needs a css-like selector-string. If you want the Selector to match the ID-Field, you need to add # at the beginning. document.querySelector('#sidenavbtn_menu')
If you want to match the class field document.querySelector('.CLASS_VALUE')
More Information are found here:
CSS-Selectors
But i would suggest to use the method document.getElementById('sidenavbtn_menu') as it is more optimized for this scenario.
You need to specify if it is a class or id using . for class and # for id.
const sidenavbtn_menu = document.querySelector('#sidenavbtn_menu');
const sidebar = document.querySelector('.sidebar');
sidenavbtn_menu.onclick = function() {
sidebar.classList.toggle('open')
}
<!doctype html>
<html lang="en">
<head>
<title>wRBMS</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!---CSS Link-->
<link rel="stylesheet" href="home_dashboard.css" type="text/css">
<!---MATERIAL CDN Google-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="sidebar" id="">
<div class="logo-contents">
<div class="logo">
<img href="#">
<div class="logo-name">w<span>RBMS</span></div>
</div>
<span class="material-symbols-sharp" id="sidenavbtn_menu">menu</span>
</div>
<ul class="sidenav-list">
<li>
<a href="#">
<i class="material-symbols-sharp">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="material-symbols-sharp">monitoring</i>
<span>MFO</span>
</a>
</li>
</ul>
</div>
</div>
[enter image description here][1]
</body>
</html>
If you want to use document.querySelector you have to specify if it's an id, class or else. Ex : document.querySelector('#sidenavbtn_menu');, you could also use document.getElementById('sidenavbtn_menu');
document.querySelector('.sidebar'); will return the first element of the array of elements having .sidebar. If you want to select all elements with a class you could do document.querySelectorAll(".someClass").forEach((e) => {e.doSomething();});
I can't get my Flickity JS to work can I get some help. This is my HTML and JS. Please help I've watched 2 youtube videos and can't seem to get it working even though I do it exactly the same. The first part is my HTML and the second is my JS. I've tried removing my css to see if it affected it and it didn't. I'm trying to make it so it shows the images and the information on the list in a carousel using Flickity JS
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlowTow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css" type="text/css">
<link rel="stylesheet" href="css/flickity.css">
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<script src="./js/main.js" type=module defer></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/flickity.js/"> </script>
<script scr="js/flickity1.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="main-carousel">
<div class="ten-recent">
<ul id=fan1>
<header class="user">SiddharthToCool</header>
<li><img src=images/fantasy1.jpg alt="fantasy1"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span>
</li>
<li>New Concept</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
<div class="ten-recent">
<ul id=fan2>
<header class="user">LonJon</header>
<li><img src=images/fantasy2.jpg alt="fantasy2"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span>
</li>
<li>Quick sketch xD</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
<div class="ten-recent">
<ul id=fan3>
<header class="user">DrawnToLife</header>
<li><img src=images/fantasy3.jpg alt="fantasy3"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span>
</li>
<li>Wish this was my house :c</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
</div>
</body>
</html>
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
// options
cellAlign: 'left',
contain: true
});
I followed the documentation and it works perfectly. You are probably importing the library wrong, I leave you the same code that you did using cdn
codesandbox-example
Note: I see a problem with codesandbox and you have to reload 2 times for flickity to work
I've written a couple lines of Javascript to animate the burger menu on my website however it has stopped working. I'm not sure why this is as it was previously working. I've changed the names of some folders, however I can't find any typos.
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.typekit.net/ofz7hfa.css">
<link href="CSS/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<nav>
<div class="logo">
<img src ="Images/Logo.png" alt=" logo" class ="logo">
</div>
<ul class="nav-links">
<li> HOME </li>
<li> ABOUT</li>
<li>PROJECTS </li>
<li> BLOG</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script> src='javascript/personal.js'</script>
</body>
</html>
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click',() => {
nav.classList.toggle('nav-active');
});
}
navSlide();
I'm trying to transfer an image element, which is hosted on the cloud, from one file to another but it's not working.
I tried to insert the image in the HTML when it loads but it's telling me that the image variable is null.
MY FIRST HTML FILE(source file)
<div class="card">
<img src="https://res.cloudinary.com/mo1/image/upload/v1564584621/kobe_lq48jt.jpg" id="mentorPicOne" alt="">
<strong><p>Kobe Bryant </p></strong>
<div class="mentor-info">
<input type="checkbox" id="check_id">
<label for="check_id"></label>
<ul>
<li><strong>Bio: </strong> A 44-year old husband and father of 2.</li><br>
<li><strong>Occupation: </strong> Retired professional basketball player</li><br>
<li><strong>Expertise: </strong> 5 years</li><br>
<button class="reach-btn" onclick="openPage()"> Reach Out</button>
</ul>
</div>
</div>
MY SECOND HTML FILE (destination file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="../images/accusoft.png">
<link rel="stylesheet" href="../assets/css/all.css">
<link rel="stylesheet" href="../css/my_mentor.css">
<title>Free Mentors | My Mentor </title>
</head>
<body onload="onload()">
<div class="main-container">
<header class="header">
<a class="logo" href="/">
<span id="logo-icon">
<i class="fab fa-accusoft"></i>
</span>
<h3>Free<span id="free-mentors">Mentors</span></h3>
</a>
<div class="register-buttons">
<button class="button">Back</button>
<button class="button" id="admin-dash">Log Out</button>
</div>
</header>
<h2>My Mentor</h2>
<main class="content-container">
<div class="selected-mentor">
</div>
</main>
<footer class="footer">
<p>© Free Mentors 2019</p>
</footer>
</div>
</body>
<script src="../js/my_mentor.js" type="text/javascript"></script>
</html>
JavaScript File (my_mentor.js)
const mentorPicOne = document.getElementById('mentorPicOne'); ;
const selectedMentor = document.querySelector('.selected-mentor')
console.log('The selected', mentorPicOne)
openPage = async ()=>{
window.location.assign('./my_mentor.html');
}
function onload(){
selectedMentor.innerHTML = mentorPicOne;
}
I want to be able to click the React Out button, hence executing the openPage function, and then go the my_mentor page having the image inside of it.
I'd really appreciate your help. Thanks.
what do you mean by transferring from one file to other? its just a url, it can be placed in both pages. the image is not really on the page, its requesting it from your url and showing it in your html.
Code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My God Man Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/Content/IE9FixScripts"></script>
;
<![endif]-->
</head>
<body>
<div id="wrap">
<div class="container">
<!-- Main content any sections which need to be filld in and then body -->
<div class="container">
<div class="jumbotron">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h3>Home Page.</h3>
<h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4>
</hgroup>
</div>
</section>
<!-- footer section here needs customisation.-->
<div id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right">Back to top</li>
<li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li>
<li>Tool Tip Right</li>
<li>Tool Tip Bottom</li>
<li>Tool Tip Top</li>
<li>PopOver</li>
<li>PopOver2</li>
</ul>
</div>
</div>
</footer>
</div>
<!-- footer ends-->
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$.ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
</script>
</body>
</html>
Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]
did what it says but ain't working.
what is the mistake what i am making.
am i forgetting to add a reference to something?
or my JQuery verion is not good should i go back?
Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. and it works there.
but not for me. Strange. it may be some thing really small. but cant seem to get it.
Any help is appreciated.
I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/
For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. That said, you were missing 'document' in your $.ready declaration. Without it the tooltips never appeared.
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well.