I am new to javascript, forgive me asking the simple question.
Is there anyone could guide me how to use javascript to dynamically list different things when clicking different button.
For example: Like this link:
when I click the Brand development, ecommerce development, it will list all related items.
I create an example on jsFiddle, please check from here
The HTML content is like:
<ul class='product-catlogs'>
<li><a class='product'>All</a>
</li>
<li><a class='books'>Books</a>
</li>
<li><a class='mobiles'>Mobiles</a>
</li>
<li><a class='cars'>Cars</a>
</li>
<ul class='product-list'>
<li>
<div class='product books'>book1</div>
</li>
<li>
<div class='product books'>book2</div>
</li>
<li>
<div class='product books'>book3</div>
</li>
<li>
<div class='product mobiles'>Iphone</div>
</li>
<li>
<div class='product mobiles'>Sumsang</div>
</li>
<li>
<div class='product cars'>Mercedes</div>
</li>
<li>
<div class='product cars'>Toyota</div>
</li>
<li>
<div class='product cars'>Ford</div>
</li>
The js code is like:
$('.product-catlogs a').click(function (e) {
var tag = this.className;
$('ul li .' + tag).parent().show();
$('ul li div').not('.' + tag).parent().hide();
})
Related
I am trying to make a sidebar that stores the last click link into the local storage and still opens the collapse links after the page reloads.
$(".clickedLink").parent().parent().css('background-color', 'green');
Could someone help me how to select elements?
Example: If I click the "PHP Advanced" link it will select the #5 & #6, also the #1 & #2. But not selecting the #3 & #4...
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>
I would appreciate it if anyone can help me out
You can do something like this. call parents('.collapse') to get all parents with given class. Then call prev() to get the links.
$('a').click(function() {
var parents = $(this).parents('.collapse');
parents.css('border-top', '1px solid red');
parents.prev().css('border-top', '1px solid blue');
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>
I've made a navigation bar with 4 elements(HOME, ABOUT, PROJECTS, CONTACT). Each element is an anchor tag with self id. I want by clicking on element to go on respectively section but I don't want my url to be like this #about or #contact
This is my code:
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
You can't do this in pure HTML, but you can implement something similar in Javascript.
Something like this that just scrolls the sections into view:
<ul>
<li>
Home
</li>
<li>
<a onclick="document.getElementById('about').scrollIntoView()">About</a>
</li>
<li>
<a onclick="document.getElementById('services').scrollIntoView()">Services</a>
</li>
<li>
<a onclick="document.getElementById('contact').scrollIntoView()">Contact</a>
</li>
</ul>
Or it might be better to define one function that you can call quickly like this:
<ul>
<li>
Home
</li>
<li>
<a onclick="scrollforme('about')">About</a>
</li>
<li>
<a onclick="scrollforme('services')">Services</a>
</li>
<li>
<a onclick="scrollforme('contact')">Contact</a>
</li>
</ul>
<script>
function scrollforme(sectionid){
document.getElementById(sectionid).scrollIntoView();
}
</script>
I'm trying to console log a variable that should contain an array. However, in Codepen, it returns an empty array. I'm expecting it to return contents of the list item.
Here's the Codepen along w/ some snippet code:
This is a React project, btw, which is why I'm using className instead of class.
HTML
<ul className="nav">
<li>
<a>Products</a>
<div className="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
<li>
<a>About</a>
<div className="subnav-block">
<ul>
<li>
<a>About Us</a>
</li>
<li>
<a>Press</a>
</li>
</ul>
</div>
</li>
</ul>
JS
const nav = document.querySelectorAll('.nav > li');
console.log(nav)
Codepen is returning:
[Object NodeList] {Length: 0}
Because className isn't how you add a HTML class - it's simply class.
const nav = document.querySelectorAll(".nav > li");
console.log(nav);
<ul class="nav">
<li>
<a>Products</a>
<div class="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
<li>
<a>About</a>
<div class="subnav-block">
<ul>
<li>
<a>About Us</a>
</li>
<li>
<a>Press</a>
</li>
</ul>
</div>
</li>
</ul>
To keep using className, use an attribute selector:
const nav = document.querySelectorAll("[className='nav'] > li");
console.log(nav);
<ul className="nav">
<li>
<a>Products</a>
<div className="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
<li>
<a>About</a>
<div className="subnav-block">
<ul>
<li>
<a>About Us</a>
</li>
<li>
<a>Press</a>
</li>
</ul>
</div>
</li>
</ul>
If this is in a react app make sure you are calling the code in the correct place so that the dom has actually been updated with your markup before the query is being called. If you are using a class component move your code inside componentDidMount
componentDidMount() {
const nav = document.querySelectorAll(".nav > li");
console.log(nav);
}
If you are using hooks place it inside useEffect
useEffect(() => {
const nav = document.querySelectorAll('.nav > li')
console.log(nav)
}, [])
here is a working example using hooks: https://codesandbox.io/s/currying-monad-t6104?fontsize=14
I am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});
First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/
I've a HTML list and want to add a simple pagination with the jQuery Plugin Pajinate. That works fine, but I would like Pajinate to ignore the hidden list-items.
For testing, here is the codesnippet on jsfiddl.net (same as below). The last two list-items should not be displayed and the the num of pages should be 3 instead of 4.
And ideas how to fix it? Thanks in advance!
<script>
$(function () {
$('#paging_container3').pajinate({
items_per_page: 5,
item_container_id: '.alt_content',
nav_panel_id: '.alt_page_navigation',
nav_label_first: '<<',
nav_label_last: '>>',
nav_label_prev: '<',
nav_label_next: '>'
});
});
</script>
<div id="paging_container3" class="container">
<h2>Custom List Size</h2>
<div class="alt_page_navigation"></div>
<ul class="alt_content">
<li>
<p>One</p>
</li>
<li>
<p>Two</p>
</li>
<li>
<p>Three</p>
</li>
<li>
<p>Four</p>
</li>
<li>
<p>Five</p>
</li>
<li>
<p>Six</p>
</li>
<li>
<p>Seven</p>
</li>
<li>
<p>Eight</p>
</li>
<li>
<p>Nine</p>
</li>
<li>
<p>Ten</p>
</li>
<li>
<p>Eleven</p>
</li>
<li>
<p>Twelve</p>
</li>
<li>
<p>Thirteen</p>
</li>
<li>
<p>Fourteen</p>
</li>
<li style="display: none">
<p>Fifteen (ignore me)</p>
</li>
<li style="display: none">
<p>Sixteen (ignore me)</p>
</li>
</ul>
</div>