Im new to React.js and im using jQuery in my react project to identify mouse and click event, based on that cloning the navigation <li> list of <a> tags and displaying in targeted div id, everything working fine, but clicking on the newly generated link loading the whole page rather than small part of the screen, i know newly cloned jquery code has href and but react wanted <Link> and here is my minified version of code to understand the problem
// minified code
class Sidebar extends Component {
componentDidMount() {
$(".navigation").on("mouseenter click", ".navigation-menu > li", function() {
generateLinks($(this))
});
function generateLinks(e) {
var links = e.find("li");
var generatedMenuLinks = links.clone().appendTo("#targetDiv");
// rest of the code
}
}
render() {
return(
<div className="navigation">
<ul className="navigation-menu">
<li class="menu1">
<Link to="/menu1/data1">Menu1Data1</Link>
<Link to="/menu1/data2">Menu1Data2</Link>
<Link to="/menu1/data3">Menu1Data3</Link>
</li>
<li class="menu2">
<Link to="/menu2/data1">Menu2Data1</Link>
<Link to="/menu2/data2">Menu2Data2</Link>
<Link to="/menu2/data3">Menu2Data3</Link>
</li>
<li class="menu3">
<Link to="/menu3/data1">Menu3Data1</Link>
<Link to="/menu3/data2">Menu3Data2</Link>
<Link to="/menu3/data3">Menu3Data3</Link>
</li>
</ul>
</div>
);
}
}
Thank you in advance
class Sidebar extends Component {
render() {
return(
<div className="navigation" onClick={() => {
/*
DO WHAT EVER YOU WANT HERE YOU CAN
USE .map() ON AN ARRAY THAT HAS YOUR
DATA AND RETURN <li> WITH WHAT EVER YOU
WANT. MAKE SURE TO USE CURLY BRACES
ANY WHERE YOU WANT TO INCLUDE JAVASCRIPT!
*/
}}>
<ul className="navigation-menu">
<li class="menu1">
<Link to="/menu1/data1">Menu1Data1</Link>
<Link to="/menu1/data2">Menu1Data2</Link>
<Link to="/menu1/data3">Menu1Data3</Link>
</li>
<li class="menu2">
<Link to="/menu2/data1">Menu2Data1</Link>
<Link to="/menu2/data2">Menu2Data2</Link>
<Link to="/menu2/data3">Menu2Data3</Link>
</li>
<li class="menu3">
<Link to="/menu3/data1">Menu3Data1</Link>
<Link to="/menu3/data2">Menu3Data2</Link>
<Link to="/menu3/data3">Menu3Data3</Link>
</li>
</ul>
</div>
);
}
}
Try something like what I dropped in there. Read the comment in the arrow function. I hope that helps. Like Boy With Silver Wings said React doesn't play well with jQuery. It uses JSX.
Suerte
Related
I am kinda new to website development, so I am asking for some help on the matter. I have the following snippet of html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS Styles -->
<link rel="stylesheet" href="../assets/css/styles.css"/>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder"></div>
<!--end of Navigation bar-->
</body>
<script src="../assets/js/navigation_bar.js" type="text/javascript", locator="about"></script>
</html>
It calls the navigation_bar.js script provided here
locator = document.currentScript.getAttribute('locator');
function changeActiveElement(element_id){
console.log("Called");
nav_element = document.getElementById("navigation");
for (i = 0; i < nav_element.length; i++) {
console.log(nav_element[i].id)
if(nav_element[i].id == element_id) document.getElementById(element_id).className = "active-nav-link";
else document.getElementById(element_id).className = "nav-link";
}
}
$(function()
{$("#nav-placeholder").load("/assets/html/nav.html", function(){
changeActiveElement(locator);
});}
);
whereas the nav.html file is here:
<nav>
<h1>Some name</h1>
<ul id="navigation" class="navigation">
<li><a id="about" href="/pages/about.html" class="nav-link">About</a></li>
<li><a id="compt" href="#compt" class="nav-link">Competences</a></li>
<li><a id="projects" href="#projects" class="nav-link">Projects</a></li>
<li><a id="contact" href="#contact" class="nav-link">Contact</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>
</button>
</nav>
The scope of the snippet is to change the class of the a tags listed in the navigation element. The navigation bar is correctly loaded via $("#nav-placeholder").load("/assets/html/nav.html"), yet changeActiveElement function is never executed via the callback.
Can someone explain me this behaviour?
I tested your code and everything is working except that nav_element is not a list and therefore nav_element.length throws an error. You could use document.querySelectorAll("#navigation"); instead, which returns a node list of all selected elements. Although, I would not recommend doing a for loop on elements by id. Use classes to select the elements. Id is only for one element.
So I'm trying to make an API call to fetch images and their titles but got suck shortly afterward.
I am trying to use forEach loop to loop through the API and find the URL of the images and their titles. I will then use CSS and HTML to display on my HTML page. How can I achieve this with my following code?
My Javascript file ( need help implementing/ refactoring)
let pictures = document.getElementById("container");
function getPhoto() {}
if (pictures) {
let URL = "https://jsonplaceholder.typicode.com/albums/2/photos";
fetch(URL)
.then((data) => data.json())
.then((photos) => {
photos.forEach((photo) => {
return `<div><img src ="${photo.url}" width="200px" height="200px/></div>`;
});
document.getElementById(
"item-count"
).innerHTML = `There are ${photos.length} photo(s) being shown`;
});
}
Here is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/index.css">
<link rel="stylesheet" type="text/css" href="../css/signup.css">
<link rel="stylesheet" type="text/css" href="../css/home.css">
<script defer src="../js/homeScript.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<nav class="nav-content">
<h1 class="nav-title">Shop<span>yee</span></h1>
<li class="nav-post">
Home
</li>
<li class="nav-post">
Post
</li>
<li class="nav-post">
View
</li>
<li>
Sign up
</li>
<li>
Login In
</li>
</nav>
<h1 id="item-count"></h1>
<div class="grid-container" id="container">
</div>
</div>
</body>
</html>
Here is my CSS using the grid system:
.grid-container{
display:grid;
grid-template-rows: repeat(4,1fr);
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
gap:.25rem;
margin:4px;
width:100%
}
I cannot really get where are you exactly stuck, so if you could elaborate on what your problem is.
Also for refactoring:
I see you have opened and closed the getPhotos() function. You can write your fetch API call logic inside the function. Also, the logic to have UI should be put in another function and call getPhotos(). This could help in managing your code, by making it more modular and keeping everything inside specific functions to do a specific task.
We are using MDC menu component. I am looking for a way to not close the menu when clicked on the first item in the menu.
I tried applying a class to mdc-list-item and specifying cursor as auto, but it is not working.
.menu-do-not-close {
cursor: auto !important;
}
below is the example fiddle
https://jsfiddle.net/phani25485/Lt6q2gxa/2/
Could you provide some direction on how to achieve this.
You can stop the menu from closing after a specific item is selected by calling event.stopPropagation() on the mdc-list-item click event when the event target has a specific class assigned. You will need to add some additional code to handle the list item click event since this prevents the normal MDC menu click handling.
const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
document.querySelector('.mdc-button').addEventListener('click', () => {
menu.open = !menu.open;
});
//Prevent menu close when option with 'prevent-menu-close' class clicked
for (const option of document.querySelectorAll('.mdc-list-item')) {
option.addEventListener('click', (event) => {
const prevent = event.currentTarget.classList.contains('prevent-menu-close');
if (prevent) {
event.stopPropagation();
// handle 'prevent-menu-close' list item click event
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Select</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>
<div class="mdc-menu-surface--anchor">
<button class="mdc-button">
<span class="mdc-button__label">Open Menu</span>
</button>
<div class="mdc-menu mdc-menu-surface">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
<li class="mdc-list-item prevent-menu-close" role="menuitem">
<span class="mdc-list-item__text">Prevent Close</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text">Another Menu Item</span>
</li>
</ul>
</div>
</div>
</body>
</html>
I am trying to get the sidenav to work for the Materializecss framework.
MATERIALIZECSS http://next.materializecss.com/getting-started.html
SIDENAV DEMO http://next.materializecss.com/sidenav.html
MY CODEPEN https://codepen.io/gregoryksanders/pen/RxoyqB
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/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>
<ul id="slide-out" class="sidenav">
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<i class="material-icons">menu</i>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>
</body>
3 Days trying to figure this out :/ so any help is welcomed.
The problem is that you should initialize the side-nav in Javascript code like this
var elem = document.querySelector('.sidenav');
var instance = new M.Sidenav(elem);
// with jquery
$(document).ready(function(){
$('.sidenav').sidenav();
});
now your code will work perfect
var elem = document.querySelector('.sidenav');
var instance = new M.Sidenav(elem);
// Initialize collapsible (uncomment the lines below if you use the dropdown variation)
// var collapsibleElem = document.querySelector('.collapsible');
// var collapsibleInstance = new M.Collapsible(collapsibleElem, options);
// Or with jQuery
$(document).ready(function(){
$('.sidenav').sidenav();
});
<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/1.0.0-alpha.2/js/materialize.min.js"></script>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/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>
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div></li>
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<i class="material-icons">menu</i>
<!-- Compiled and minified JavaScript -->
</body>
On the materialize website, this code is given to initialize Sidenav bar
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, options);
});
but You modify This code and remove option in var instance and now code look like and you should paste this code in your script tag or your javascript file
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
Now I explain what is the problem in upper code that given on the materialize website
in code, variable instances give 2 arguments 1st argument is elems and 2nd argument is the option that is not defined in your code so you remove the option argument in this code to solve this problem
Initialization is the most important thing when using materialize.js, for example i want to initialize a carousel.
// Javascript
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.carousel').carousel();
});
Trying to understand how Javascript and HTML5 work. I have a nav and when you press Part One I'm trying to show Content 1, when you press Part Two..etc. I have tried a couple things, and I am clearly not understand the .next properly, but I can only get it to show the first element, but when I press Part Two, Content Two doesn't show. I guess I am visualizing it wrong, instead of .first(), .next made sense to me since I feel like that would just get the next element. Anyways, here's some code, thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 6 | jQuery Usability </title>
<link rel="stylesheet" href="stylesheet.css">
<!-- This matches the CSS width to the device width, and prevents forced overview without disabling zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Helpful for older Blackberries -->
<meta name="HandheldFriendly" content="True">
<!-- Helpful for older IE mobile -->
<meta name="MobileOptimized" content="320">
<!-- Apple iOS-specific -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- enforce CSS3 media queries in IE 8 and older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Note: this won't work when testing locally; you'll need to upload your files to a server to test it in IE -->
<!-- HTML5shiv, for IE 6, 7 and 8 -->
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('ul').hide();
$('a.btnDown').click(function() {
$('nav>ul').fadeIn(200);
}); //closes a.btnDown
$('a.contentDown').click(function() {
$('body>aside>ul').first().fadeIn(200);
}); //closes contentDown
}); //closes .ready()
</script>
</head>
<body>
<nav>
<h1><a class="btnDown" href="#"> Main Menu </a></h1>
<ul>
<li><a class="contentDown" href="#"> Part One </a></li>
<li><a class="contentDown" href="#"> Part Two </a></li>
<li><a class="contentDown" href="#"> Part Three </a></li>
<li><a class="contentDown" href="#"> Student Notes 1 </a></li>
<li><a class="contentDown" href="#"> Student Notes 2 </a></li>
<li><a class="contentDown" href="#"> Student Notes 3</a></li>
</ul>
</nav>
<aside>
<ul>
<li> Content 1 </li>
</ul>
<ul>
<li> Content 2 </li>
</ul>
<ul>
<li> Content 3 </li>
</ul>
<ul>
<li> Content 4 </li>
</ul>
<ul>
<li> Content 5 </li>
</ul>
<ul>
<li> Content 6 </li>
</ul>
</aside>
<figure>
<!-- PUT TV IMAGE HERE -->
</figure>
</body>
</html>
With the given markup, the easiest solution is to work with the index of the elements as shown below
$(document).ready(function () {
$('ul').hide();
$('a.btnDown').click(function () {
$('nav>ul').fadeIn(200);
return false;
}); //closes a.btnDown
//all the content elements
var $suls = $('body>aside>ul');
var $as = $('a.contentDown').click(function () {
//hide visible content item
$suls.filter(':visible').hide();
//display the content item in the same position as the clicked contentDown
$suls.eq($as.index(this)).fadeIn(200);
}); //closes contentDown
}); //closes .ready()
Demo: Fiddle
You can use:
$('ul').hide();
$('a.btnDown').click(function () {
$('nav>ul').fadeIn(200);
});
$('a.contentDown').click(function () {
var idx = $(this).index('.contentDown');
$('body>aside>ul:eq(' + idx + ')').fadeIn(200).siblings('ul').hide();
});
Fiddle Demo