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
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'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();
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
This is my html for a dropdown menu. Initially, in CSS the menu is on display: none; .
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
<!-- Load the CDN first -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- If CDN fails to load, serve up the local version -->
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.js"><\/script>');</script>
<script src="js/script.js"></script>
</body>
</html>
And this is my jQuery script:
// script.js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
The above jQuery does not work. However, if, inside the div I add a <p> tag with id= menuButton, it works perfectly fine. Could anyone please help me with this? I have been struggling for a while.
check this fiddle, I have corrected some issues in your markup such as making
Home</a>
to
Home
Your code work fine otherwise
There are a few problems in your code:
1. Wait for DOM
The problem is that your script is probably executed before the DOM is ready. You should trigger the script only once document is ready - i.e.:
$(document).ready(function() {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
Otherwise you are trying to add a click handler to a not-yet-existing #menuButton.
2. Fix the <a> tags
The following line of code
Home</a>
Should become:
Home
Do the same fix for other anchor tags as well.
Other than the markup issues in HTML, your code runs just fine as I have checked it via Jsfiddle https://jsfiddle.net/bryomckim/pmw7xjwf/
js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
css
#dropdown {
display: none;
}
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<!-- Load the CDN first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
</body>
</html>
I'm trying to combine the tree display library jstree and a re-sizable plane splitter, Splitter.js library and am having problems.
The splitter library is at http://methvin.com/splitter/ . jstree is available from http://www.jstree.com/
I'm aiming for the tree to appear on the left and the content to appear on the right.
Both libraries work on their own but when I can't figure out how to combine them. The way each positions elements seems to conflict.
What I currently have is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../styles/splitterStyle.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOPs jsTree</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/splitter.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<script>
jQuery(function($) {
$('#elContainer').jstree({core : { animation : 50 }});
// Breaks if this is added
// $("#MySplitter").splitter();
});
</script>
<script>
$().ready(function() {
// Also breaks if this is added
// $("#MySplitter").splitter();
});
</script>
</head>
<body>
<div id="MySplitter">
<div id="elContainer">
<ul>
<li id="phtml_1">treeRoot
<ul>
<li id="phtml_2">leaf node</li>
<ul>
<li id="phtml_3">another leaf</li>
</ul>
</ul>
</li>
</ul>
</div>
<div id="content">
Some content
</div>
</div>
</body>
</html>
It looks like there is a problem with splitter and later versions of jquery.
This question discusses the issue:
Splitter.js won't work with new versions of jQuery
The answer from SpYk3HH refers to using jquery layout. This works. The code below shows an example.
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="_lib/jquery-ui-latest.js"></script>
<script type="text/javascript" src="_lib/jquery.layout-latest.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('body').layout({ applyDemoStyles: true });
$('#elContainer').jstree({core : { animation : 50 }});
});
</script>
<script type="text/javascript">
jQuery(function($) {
$('#elContainer').jstree({core : { animation : 50 }});
});
</script>
</head>
<body>
<div class="ui-layout-center">Center content.</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-west">
<div id="elContainer">
<ul>
<li id="phtml_1">treeRoot
<ul>
<li id="phtml_2">leaf node</li>
<ul>
<li id="phtml_3">another leaf</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>