I am making a basic online editing outline for coursework. I want to include a tree-view functionality, that expands and collapses the parent node with one click. However, I can seem to get it to work.
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<style>
.caret {
cursor: pointer;
user-select: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true"></div>
<ul class="newUl">
"header"
<li class="newLI">textContent</li>
<ul>
<li class="newLi">okay</li>
<ul>
<li class="newLi">yes</li>
</ul>
<li class="newLi">no</li>
</ul>
</ul>
</div>
<script>
let toggler = document.getElementsByClassName("newLi");
let i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".newUl").classList.toggle("active");
this.classList.toggle("newLi-down");
});
}
</script>
</body>
</html>
Related
I made a script that when I click on the container it hides a list. However, what I have been trying to do is that the list should hide when clicking outside the container and not inside. I have been looking for answers but nothing really worked for me as I use classes. Does someone know a solution?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Hiding the list</title>
</head>
<body>
<h1>Hiding the list</h1>
<div class="list">Hide the list by clicking outside
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</div>
<div class="list">Hide the list by clicking outside
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</div>
</body>
</html>
<style>
.list {
width: 50%;
height: 100%;
background-color: #f2f2f2;
}
li {
}
</style>
<script>
function hide_list() {
var children = this.children;
for (let i = 0; i < children.length; i++) {
children[i].style.display = "none";
}
}
document.querySelectorAll(".list").forEach(function (elem) {
elem.addEventListener("click", hide_list);
});
</script>
i have a searchbox with a dropdown menu that filters items from the list when you enter letters. My problem is that when i click the X button, it clears the searchbox like expected but it doesn't reset the list of items under the box. Example : if i type javascript we will see javascript under the box but when i click the X button, it will still be written javascript and not the initial list.
So is there any possible way that i can reset it to the initial list using javascript ? ( NOTE : i cannot use jquery or any frameworks)
Thanks a lot.
function filter() {
var value, myList, name;
value = document.getElementById("value").value.toUpperCase();
myList = document.querySelectorAll(".myList > li");
Array.prototype.forEach.call(myList, function(element){
name = element.innerHTML;
element.style.display = name.toUpperCase().indexOf(value) > -1 ? 'list-item' : 'none';
});
}
document.getElementById('value').addEventListener('keyup', filter);
function myFunction() {
document.querySelector('.clearable').value = '';
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
input[type="button"] {
margin-left: -30px;
border: none;
background-color: transparent;
outline: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="searchbox">
<input class="clearable" type="text" id="value" placeholder="Search" />
<input type="button" onclick="myFunction()" value="X">
<ul class="myList">
<li class="name">Javascript</li>
<li class="name">Java</li>
<li class="name">CSS</li>
<li class="name">Python</li>
<li class="name">C++</li>
</ul>
</div>
<script src="search.js"></script>
</body>
</html>
You could just reuse the code you have, loop over all of the li elements and re-show them on the myFunction call:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
input[type="button"] {
margin-left: -30px;
border: none;
background-color: transparent;
outline: none;
}
</style>
</head>
<body>
<div class="searchbox">
<input class="clearable" type="text" id="value" placeholder="Search" />
<input type="button" onclick="myFunction()" value="X">
<ul class="myList">
<li class="name">Javascript</li>
<li class="name">Java</li>
<li class="name">CSS</li>
<li class="name">Python</li>
<li class="name">C++</li>
</ul>
</div>
<script>
function filter() {
var value, myList, name;
value = document.getElementById("value").value.toUpperCase();
myList = document.querySelectorAll(".myList > li");
Array.prototype.forEach.call(myList, function(element){
name = element.innerHTML;
element.style.display = name.toUpperCase().indexOf(value) > -1 ? 'list-item' : 'none';
});
}
document.getElementById('value').addEventListener('keyup', filter);
function myFunction() {
var myList;
document.querySelector('.clearable').value = '';
myList = document.querySelectorAll(".myList li");
Array.prototype.forEach.call(myList, function(element){
element.style.display = 'list-item';
});
}
</script>
</body>
</html>
I am trying to change the src= image of a parent in a nested ul li when I click on a link. Below is my code. I know how to change the src= with javascript, but I don't know how many tiers I need to navigate up to change the src= image. Example: I want to change src="test.png" when I click on Question1.Answer1.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
function deleteLine(what) {
$(what).parent().children().remove();
}
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder"><img src="test.png">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"><li onClick="deleteLine(this)"> Questoin1.Answer1</li></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
object with style property display or visibility: if hidden so no user-action-events possible.
Remove an object == remove from HTML DOM, so no user-action-events possible.
Add an object to HTML DOM so document must be new render. Same if object.style.display was changed.
display changes HTML DOM.
$("#" + what).append('URL to uploaded document'); this changes HTML DOM.
NOT same if object.style.visibility was changed: Visibility must have an exist object in HTML DOM.
please use
so, var imgPointer=document.getElementById("imgID");
put this pointer in an event handler to change imgPointer.src .
imgPointer (value if ID) is a pointer (value) relative to document an not to .
inside of addLine() change imgPointer.src .
This question already has an answer here:
Is there a way to combine $(this) with :nth-child?
(1 answer)
Closed 8 years ago.
My html code is as follows: (info on bottom)
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link type='text/css' rel='stylesheet' href='style/style1.css'></link>
<script type='text/javascript' src='scripts/jquery-2.0.0.min.js'></script>
<script type='text/javascript' src='scripts/script1.js'></script>
</head>
<body>
<div id="title">
<h1>Welcome to My Site</h1>
</div>
<div id='menu_Bar'>
<div id='home' class='selector'>
<div class='back'>
<ul class='empty'>
<li>Home</li>
<div style='display: none'>
<li><a href=''>option 1</a></li>
<li><a href=''>option 2</a></li>
<li><a href=''>option 3</a></li>
<li><a href=''>option 4</a></li>
<li><a href=''>option 5</a></li>
</div>
</ul>
</div>
</div>
</div>
</body>
</html>
My jQuery is:
$(document).ready(function() {
$('.selector').mouseenter(function (){
$(this.'div ul div').slideToggle('slow');
});
Now I know the last part won't work (because I would be asking if it did). But I'm sure you see what I'm trying to do. I'm trying to make it so when the selector is hovered over it will open its set of links. I almost was going to use .options for the second part, but realized it would change (or effect) all in same class, which won't allow for similar buttons to be placed on the sides. So how would someone use the parent to affect the child of the parent?
The css:
div {
border: 1px solid black;
}
.empty {
list-style: none;
}
.options {
display: none;
background-color: lightblue;
}
.selector {
background-color: transparent;
}
It shoud be
$(document).ready(function() {
$('.selector').mouseenter(function (){
$(this).find('> div > ul > div').slideToggle('slow');
});
});
Demo: Fiddle
I have a grid with an template column and in that column I have text and icon,
on icon mousehover (on mode) and mousehoverout (off mode) I am changing the icon.
Now when the user click on icon it opens a popup and the icon must be in "On" mode but if the user without closing clicks another row's icon then previous must be in off and current should be in on mode.
So for that I have written this:
<DataItemTemplate>
<div class="floatLeft titleBlock">
<a href="<%# Eval("Link") %>" class="ellipsesTooltip"><span>
<%# Container.Text%></span><%# Container.Text%></a></div>
<div class="floatRight">
<a onclick="GridValueCatcherMoreLike(this, '<%# Eval("ResearchNoteId").ToString()%>');">
<img alt="+/- 30 days matching Author, Industry, Theme" src="../Image/Research/MoreByOff.gif" onClick="check(this,'../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOn.gif');"
onmouseover="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOff.gif');"
onmouseout="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOff.gif', '../Image/Research/MoreByOff.gif');" />
</a>
</div>
function check(sender, onImg, offImg) {
debugger;
for(var i=0;i<activeImgList.length;i++)
{
if(sender!=activeImgList[i])
activeImgList[i].scr = offImage;
else
activeImgList[i].scr = onImg;
}
return true;
}
function ToggleAuthorMoreLikeImage(sender, popupname, imageurl, offImageurl)
{
var win = ResearchPopup.GetWindowByName(popupname);
if (!ResearchPopup.IsWindowVisible(win))
{
sender.src=imageurl;
activeImgList[arrayIndex]=sender;
arrayIndex = arrayIndex + 1;
}
else
{
activeImgList[arrayIndex] = sender;
arrayIndex = arrayIndex + 1;
return;
}
}
Why not take a step back and use something like jQuery.toggleClass() or jQuery.hover() on the client side?
.hover()
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>
.toggleClass()
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>