I am working on some code for a portfolio where the projects are shown on the left-hand side.
The active class is supposed to be added to the classes of the line left div for any list item, however, when I mouse over any other of the project-title list items it only works for the first one, I am not sure why this is? Here is the code:
HTML:
<ul class="project">
<li class=project-title>
<div class="line-left"></div>
<p class="project-paragraph">Project title</p>
</li>
<li class=project-title>
<div class="line-left"></div>
<p class="project-paragraph">Project title</p>
</li>
<li class=project-title>
<div class="line-left"></div>
<p class="project-paragraph">Project title</p>
</li>
<li class=project-title>
<div class="line-left"></div>
<p class="project-paragraph">Project title</p>
</li>
<li class=project-title>
<div class="line-left"></div>
<p class="project-paragraph">Project title</p>
</li>
<li class=project-title>
<div class="line-left"></div>
<p class="project-paragraph">
Project title</p>
</li>
</ul>
CSS:
.project {
width: 170px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #949394;
}
.project-title {
list-style: none;
cursor: pointer;
}
.project-paragraph {
display: inline-block;
}
.line-left {
border-top: 1px solid #2b2b2b;
width: 20px;
margin-top: 7px;
visibility: hidden;
display: inline-block;
margin-right: 10px;
padding-bottom: 4px;
}
.active {
visibility: visible;
}
JAVASCRIPT:
document.querySelector('.project-title').addEventListener('mouseover', function() {
document.querySelector('.project-title .line-left').classList.add('active');
});
Here is the jsfiddle as well: https://jsfiddle.net/andylyell/ynb7wxk2/
I would love to have only 1 active class present on a line left, anytime but I am unsure how to do this. Any help would be greatly appreciated - Thank you!
You have to subscribe each element that have "project-title" class.
Here is modified js for you solution:
var activeClassName = 'active';
var elements = document.querySelectorAll('.project-title');
for (var i = 0; i < elements.length; i++) {
subscribeEvent(elements[i]);
}
function subscribeEvent(el) {
el.addEventListener('mouseover', function(e) {
var target = e.currentTarget;
if (containsClass(target.querySelector('.line-left'), activeClassName)) {
return;
}
setActiveEl(target);
}, false);
}
function setActiveEl(activeEl) {
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element != activeEl) {
removeClass(element.querySelector('.line-left'), activeClassName);
}
}
addClass(activeEl.querySelector('.line-left'), activeClassName);
}
function addClass(el, className) {
el && el.classList.add(className);
}
function removeClass(el, className) {
el && el.classList.remove(className);
}
function containsClass(el, className) {
return el && el.classList.contains(className);
}
use--
document.querySelectorAll('.project-title').addEventListener('mouseover',
function() {
document.querySelectorAll('.project-title .line-
left').classList.add('active');
});
Then you will be able to add that class to all the elements having that class
Related
I created three active links using CSS and javascript. I have three data sets in forms of image that I want to show based on which link is active. The images will be below the link in form of swiper slides. How I do this? My reference for this is the active slide on new balances website
.active-link {
position: relative;
display: flex;
top: 12rem;
/*position for active link */
justify-content: center;
}
.button {
padding: 0 40px 10px 40px;
cursor: pointer;
display: inline-block;
font-weight: 500;
border-bottom: 2px solid black;
}
.button:active,
.active {
color: red;
border-bottom: 5px solid red;
padding-bottom: 7px;
}
.slide-container {
position: relative;
// I'm not sure what you're looking for visually so I just used a top position greater than what you're already using on the buttons.
top: 14rem;
display: none;
}
.slide-container.active {
display: block;
}
<div class="active-link" id="active-link">
<li>
<a class="button">Him</a>
</li>
<li>
<a class="button active">2</a>
</li>
<li>
<a class="button">Her</a>
</li>
</div>
<div class="slide-containers">
<div id="slide-container-1" class="slide-container">
Slide Container 1
</div>
<div id="slide-container-2" class="slide-container">
Slide Container 2
</div>
<div id="slide-container-3" class="slide-container">
Slide Container 3
</div>
</div>
<script>
var btnContainer = document.getElementById("active-link");
var btns = btnContainer.getElementsByClassName("button");
function removeClass(elems, className) {
[].forEach.call(document.querySelectorAll(elems), function(el) {
el.classList.remove(className);
});
}
const resetSlideContainers = () => {
[...document.querySelectorAll('.slide-container')].forEach((slide) =>
slide.classList.remove('active'));
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
resetSlideContainers();
document.getElementById(this.getAttribute('data-slide')).classList.add('active');
})
}
</script>
I created three active links using CSS and javascript. I have three data sets in forms of image that I want to show based on which link is active. The images will be below the link in form of swiper slides. How I do this? My reference for this is the active slide on new balances website
var btnContainer = document.getElementById("active-link");
var btns = btnContainer.getElementsByClassName("button");
function removeClass(elems, className) {
[].forEach.call(document.querySelectorAll(elems), function(el) {
el.classList.remove(className);
});
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
})
}
.active-link {
position: relative;
display: flex;
top: 12rem;
justify-content: center;
}
.button {
padding: 0 40px 10px 40px;
cursor: pointer;
display: inline-block;
font-weight: 500;
border-bottom: 2px solid black;
}
.button:active,
.active {
color: red;
border-bottom: 5px solid blue;
padding-bottom: 7px;
}
<div class="active-link" id="active-link">
<li>
<a class="button">1</a>
</li>
<li>
<a class="button active">2</a>
</li>
<li>
<a class="button">3</a>
</li>
</div>
I would create a container to hold the contents of each slide and link buttons to a slide using a data attribute. When a button is clicked, you can remove the active class of the previous slide and add a new one for the current slide. Here is the relevant code that I added with a Codepen link at the bottom.
<div class="active-link" id="active-link">
<li>
<a class="button" data-slide="slide-container-1">1</a>
</li>
<li>
<a class="button active" data-slide="slide-container-2">2</a>
</li>
<li>
<a class="button" data-slide="slide-container-3">3</a>
</li>
</div>
<div class="slide-containers">
<div id="slide-container-1" class="slide-container">
Slide Container 1
</div>
<div id="slide-container-2" class="slide-container">
Slide Container 2
</div>
<div id="slide-container-3" class="slide-container">
Slide Container 3
</div>
</div>
.slide-container {
position: relative;
// I'm not sure what you're looking for visually so I just used a top position greater than what you're already using on the buttons.
top: 14rem;
display: none;
}
.slide-container.active {
display: block;
}
const resetSlideContainers = () => {
[ ...document.querySelectorAll('.slide-container') ].forEach((slide) => slide.classList.remove('active'));
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
resetSlideContainers();
document.getElementById(this.getAttribute('data-slide')).classList.add('active');
})
}
Here is a working example.
What I am trying to do is, when I click on green element I want the purple one with the same id be removed. Now my problem is I can not loop through purple element's id and find the one which match with green one and then remove it from the DOM. I tried to use querySelectorAll but it doesn't work with addEventListener and when I use querySelector it just returns always the first element.So the goal is to remove both elements green and purple that has the same id.
if you see in HTML code inside the ul tag there is another one with the id container actually this is the problem the first ul tag with id main is the original one and the one inside it with id container it will be generated automatically with jQuery plugin if I set any new attribute to class main the class container will copy it. my goal is to click on green one and delete two elements from DOM. The one which I am clicking and another with same id. is there any way for that?
Has anyone solution for that how to remove simultaneously another element with the same id of clicked element?
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("ul").addEventListener("click", getItem)
})
function getItem(e) {
let li = e.target.closest(".visible")
let span = e.target
let getID = span.attributes.id.value
console.log("This is visible element", getID)
if (li) {
li.remove()
}
}
#main {
background-color: skyblue;
}
.hidden {
border: solid 2px black;
list-style: none;
margin: 2px;
background-color: #7d34eb;
}
#container {
background-color: #3483eb;
margin-top: 15px
}
.visible {
border: solid 2px black;
list-style: none;
margin: 2px;
background-color: #12a370;
}
span {
position: relative;
left: 1rem;
padding: 50%;
color: red;
cursor: pointer;
}
<div class="content">
<ul id="main">
<li class="hidden">
<span id="1">A</span>
</li>
<li class="hidden">
<span id="2">B</span>
</li>
<li class="hidden">
<span id="3">C</span>
</li>
<ul id="container">
<li class="visible">
<span id="1">A</span>
</li>
<li class="visible">
<span id="2">B</span>
</li>
<li class="visible">
<span id="3">C</span>
</li>
</ul>
</ul>
</div>
I changed all your spans to div to fill up the LI element. I also changed all id to data-id, because id should be a unique.
EDIT: Based on the comment. In your original post, you added a click listener on the first UL that querySelector returns, which is #main. I made that more clear in the code. As the comment, in my answer, suggest, it's better to add a click listener to ul#container instead.
EDIT 2: Based on another comment. :P I added code for looping through and removing all elements with matching data-id.
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("ul#main").addEventListener("click", getItem);
})
function getItem(e) {
let divEl = e.target;
let dataset = divEl.dataset;
let visibleLi = divEl.parentElement;
let isVisibleElement = visibleLi.classList.contains('visible');
let matchingDatasetDivs = document.querySelectorAll(`[data-id="${dataset.id}"]`);
if (isVisibleElement)
console.log("This is visible element", dataset.id);
if (isVisibleElement && matchingDatasetDivs.length) {
for (let i = 0; i < matchingDatasetDivs.length; i++) {
let containerLi = matchingDatasetDivs[i].parentElement;
containerLi.remove();
}
}
}
#main {
background-color: skyblue;
}
.hidden, .visible {
border: solid 2px black;
list-style: none;
margin: 2px;
background-color: #7d34eb;
}
.visible {
background-color: #12a370;
}
#container {
background-color: #3483eb;
margin-top: 15px
}
li > div {
position: relative;
left: 1rem;
/* padding: 50%; */
color: red;
cursor: pointer;
text-align: center; /* ADDED */
}
<div class="content">
<ul id="main">
<li class="hidden">
<div data-id="1">A</div>
</li>
<li class="hidden">
<div data-id="2">B</div>
</li>
<li class="hidden">
<div data-id="3">C</div>
</li>
<ul id="container">
<li class="visible">
<div data-id="1">A</div>
</li>
<li class="visible">
<div data-id="2">B</div>
</li>
<li class="visible">
<div data-id="3">C</div>
</li>
</ul>
</ul>
</div>
I got the code from w3scgool and modified it. The dropdown menu opens but when I click inside of it - submenu, then it closes. Here is the pure JavaScript code.
var dropdown = document.getElementsByClassName('dropdown-btn');
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener('click', function() {
this.classList.toggle('active');
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none';
} else {
dropdownContent.style.display = 'block';
}
});
}
nav.side-nav {
order: 0;
display: flex;
flex: 1 1;
flex-direction: column;
align-self: stretch;
margin-bottom: 0.67rem;
}
nav.side-nav ul {
margin: 0;
}
nav.side-nav li {
border-bottom: 1px solid #d9dadc;
border-left: 1px solid #d9dadc;
border-right: 1px solid #d9dadc;
list-style: none;
padding: 5px 15px;
font-size: 17px;
line-height: 24px;
}
nav.side-nav li:first-child {
background: #092a31;
color: white;
border: none;
font-size: 20px;
padding: 15px;
line-height: 1.1;
}
nav.side-nav li:not(:first-child):hover {
background: #cda600;
color: white;
cursor: pointer;
}
/*dropdown menu*/
.dropdown-container {
display: none;
background-color: #ffffff;
padding-left: 8px;
}
<html>
<nav class="side-nav">
<ul>
<li style="text-align:left;">some1</li>
<li href="#">some1</li>
<li href="#">some1</li>
<li href="#">some1</li>
<li id="navDrop" class="dropdown-btn">
Menu</li>
<div class="dropdown-container">
<form>
<a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br>
<a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br>
<a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br>
<a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>
</form>
</div>
<li href="#">Menu</li>
</ul>
</nav>
</html>
I am new to JS. Could someone navigate/show how to edit the code to prevent dropdown from closing when click on its submenu.
Update: took out the onclick feature. Took from my code too.
Any suggestions about the code because it stays the same. In this case I am using just JS without jquery library.
After making the modifications suggested by #Heretic Monkey and #Ganesh chaitanya, you can simplify your code by using map() instead of a for loop, and again classList.toggle() instead of else if.
just modify your css a little with a new class that you add to your div. Like that
var dropdown = document.getElementsByClassName("dropdown-btn");
// here dropdown.map() don't work, use
Array.prototype.map.call(dropdown, function(drop) {
drop.addEventListener("click", function() {
drop.classList.toggle("active");
var dropdownContent = drop.nextElementSibling;
//use classList.toggle with the new class added at the div
dropdownContent.classList.toggle("disp-container");
});
});
nav.side-nav li:not(:first-child):hover {
background: #cda600;
color: white;
cursor: pointer;
}
/*dropdown menu*/
/*remove display here*/
.dropdown-container {
background-color: #ffffff;
padding-left: 8px;
}
/*create a new class and add display here*/
.disp-container {
display: none;
}
<nav class="side-nav">
<ul>
<li style="text-align:left;">some1</li>
<li href="#">some1</li>
<li href="#">some1</li>
<li href="#">some1</li>
<li id="navDrop" class="dropdown-btn">
Menu
</li>
<!-- add your new class here -->
<div class="disp-container dropdown-container">
<form>
<a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br />
<a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br />
<a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br />
<a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>
</form>
</div>
<li id="navDrop2" class="dropdown-btn">
Menu
</li>
<!-- add your new class here -->
<div class="disp-container dropdown-container">
<form>
<a class="dropdown-container-link" id="navItem1" href="#">Submenu1</a><br />
<a class="dropdown-container-link" id="navItem2" href="#">Submenu2</a><br />
<a class="dropdown-container-link" id="navItem3" href="#">Submenu3</a><br />
<a class="dropdown-container-link" id="navItem4" href="#">Submenu4</a>
</form>
</div>
</ul>
</nav>
I have jquery live search and when I type something I see result but when I clicked result I want to see value in my input..and after I clicked out of the input result must be display:none; but like autocomplete I tried something but I couldn't apply it.
I don't use autocomplete plugin because I must show image in my result.
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Try these, I made 2 options for you to try based on your code. I hope they help you achieve what you want.
Single select:
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
$('.commentlist li a').click(function(){
$('.commentlist').fadeOut();
$("#srehberText").val($(this).text())
})
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Multi select:
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
var clicked = false;
$('.commentlist li a').click(function() {
var val = $("#srehberText").val();
if (!clicked) {
val = "";
clicked = true;
$("#srehberText").val($(this).text())
} else {
$("#srehberText").val(val + " " + $(this).text())
}
})
$(document).click(function(event) {
if (!$(event.target).closest('.commentlist, #srehberText').length) {
if ($('.commentlist').is(":visible")) {
$('.commentlist').hide();
}
}
})
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
The code below checks where you click and if it's not .commentlist, #srehberText then it will hide the ol
$(document).click(function(event) {
if (!$(event.target).closest('.commentlist, #srehberText').length) {
if ($('.commentlist').is(":visible")) {
$('.commentlist').hide();
}
}
})
Hope this would do.
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
$(".commentlist li a").click(function() {
var val = $(this).text();
$("#srehberText").val(val);
$('.commentlist li').fadeOut();
});
});
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$(document).ready(function() {
$(".commentlist li").click(function(){
$("#srehberText").val($(this).text());
// you have input box. that is why only text is inputed in side.
// you will need to place small image control beside input to show image
});
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
you can also use select check it here
to make list invisible on clicking somewhere else:
<input type="text" onblur="listHide()">
<script>
var molist = false; //mouse-over list
// make events mouseover and mouse leve to change molist value
function listHide() {
if (molist = false) { //hide list}
}
</script>
I dont know how to approach this. I would like to be able to do the following: I have a icon for a folder that links to another page. When the user clicks on the icon, instead of going to the page, a subfolder(s) appears below the folder icon and when the user clicks on one of these folders, then it directs the user to the page.
Below is what I did orignally:
<h4>
<a href="CalMediConnect_DMgmt.cfm">
<img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left">
Disease Management
</a>
</h4>
<br /><br />
UPDATE
I have tried the following and it appears to not be working:
The following is the script:
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++) {
tree[i].addEventListener('click', function(e) {
var parent = e.target.parentElement;
var classList = parent.classList;
if(classList.contains("open")) {
classList.remove('open');
var opensubs = parent.querySelectorAll(':scope .open');
for(var i = 0; i < opensubs.length; i++) {
opensubs[i].classList.remove('open');
}
} else {
classList.add('open');
}
});
}
The following is the CSS:
ul.tree li {
list-style-type: none;
position: relative;
}
ul.tree li ul {
display: none;
}
ul.tree li.open > ul {
display: block;
}
ul.tree li a {
color: #4284B0;
text-decoration: none;
}
ul.tree li a:before {
height: 1em;
padding: .1em;
font-size: .8em;
display: block;
position: absolute;
left: -1.3em;
top: .2em;
}
.margin-left {
margin-left: -15px;
}
And the HTML:
<ul class="tree margin-left">
<li>
<h4>
<a href="#">
<img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left">
Disease Management
</a>
</h4>
<ul>
<li>
<h5>
<a href="CalMediConnect_DMgmt.cfm">
<img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left">
Disease Management
</a>
</h5>
</li>
</ul>
</li>
</ul>
Any help would be appreciated.
Here is a very basic example built with jQuery...
https://jsfiddle.net/kennethcss/8b4e6o42/
$('.folder').on('click', function(e) {
var folder = $(this).find('.sub-folder');
if (e.target !== this) return;
if(folder.hasClass('hidden')) {
folder.removeClass('hidden');
} else {
folder.addClass('hidden');
}
});
.folder {
cursor: pointer;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul class="container">
<li class="folder">Primary
<ul class="sub-folder hidden">
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul>
</li>
<li class="folder">Primary
<ul class="sub-folder hidden">
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul>
</li>
<li class="folder">Primary
<ul class="sub-folder hidden">
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul>
</li>
</ul>
Of course, you can style however you'd like; this example merely demonstrates how you might structure your HTML, CSS and JS to create a simple, folder like structure.
Gist
https://gist.github.com/kennethcss/8db1dc3326917c77846e84d263beb67d