I made collapsible html <ul> list using <details> <summary>.
However, if I try to reference to bookmark it does not open automatically. In below example, I would love to call url page with #Q0A0 to see page automatically open Q0 node and Q0A subnode to make Q0A0 visible:
e.g.: list.html#Q0A0
<!DOCTYPE html>
<html lang="en">
<head>
<title>Details/summary opened with anchor via javascript</title>
</head>
<body>
<ul>
<li><details id="Q0"><summary>Q0</summary>
<ul>
<li><details id="Q0A"><summary>Q0A</summary>
<ul>
<li><details id="Q0A0"><summary>Q0A0</summary>Answer to Q0A0</details></li>
<li><details id="Q0A1"><summary>Q0A1</summary>Answer to Q0A1</details></li>
<li><details id="Q0A2"><summary>Q0A2</summary>Answer to Q0A2</details></li>
</ul>
</details>
</li>
<li><details id="Q0B"><summary>Q0B</summary>Answer to Q0B</details></li>
<li><details id="Q0C"><summary>Q0C</summary>Answer to Q0C</details></li>
</ul>
</details>
</li>
<li><details id="Q1"><summary>Q1</summary>
<ul>
<li><details id="Q1A"><summary>Q1A</summary>Answer to Q1A</details></li>
<li><details id="Q1B"><summary>Q1A</summary>Answer to Q1B</details></li>
<li><details id="Q1C"><summary>Q1A</summary>Answer to Q1C</details></li>
</ul>
</details>
</li>
</ul>
</body>
</html>
gist, codepen
also: gist, codepen
function MakeArrayOfAllPrefixes(str){
//console.log("MakeArrayOfAllPrefixes("+str+")");
var prefixes = [];
for (var i=1; i<=str.length; i++){
prefixes.push(str.substr(0,i));
}
console.log("MakeArrayOfAllPrefixes("+str+") -> returns [" + prefixes + "]");
return prefixes;
}
function SetOpenAttrForIdsAndPrefixes(ids, openAttrBool){
$('details').attr('open',false); // close all others first
console.log("SetOpenAttrForIds([" +ids+"], "+openAttrBool+")");
for (idindex in ids) {
var id = ids[idindex];
if (id != ""){
var prefixes = MakeArrayOfAllPrefixes(id);
for (prefixidx in prefixes) {
var prefix = prefixes[prefixidx];
if(openAttrBool==true) { operationstr="Opening"; } else { operationstr="Closing"};
console.log(operationstr+" <details id='#"+prefix+"'> with $('#"+prefix+").attr('open',"+openAttrBool+");");
$('#'+prefix).attr('open',openAttrBool);
}
}
}
}
function SetOpenAttrForIdsAndPrefixesFromLocationHash(){
var hashes = $(location).attr('hash').split('#');
SetOpenAttrForIdsAndPrefixes(hashes, true);
}
$(document).ready(function(){
SetOpenAttrForIdsAndPrefixesFromLocationHash();
if ("onhashchange" in window) {// does the browser support the hashchange event?
window.onhashchange = function () {
SetOpenAttrForIdsAndPrefixesFromLocationHash();
}
}
});
<p>
Opens details/summeries, all parths, using prefixes. Supports multiple anchors in url, example:
</p>
<ul>
<li>#Q0A0#Q1A,</li>
<li>#Q0B#Q0C#Q1A#Q1C.</li>
</ul>
<p>
references:
1,
2,
3,
4,
5.
</p>
<ul>
<li><details id="Q0"><summary>Q0</summary>
<ul>
<li><details id="Q0A"><summary>Q0A</summary>
<ul>
<li><details id="Q0A0"><summary>Q0A0</summary>Answer to Q0A0</details></li>
<li><details id="Q0A1"><summary>Q0A1</summary>Answer to Q0A1</details></li>
<li><details id="Q0A2"><summary>Q0A2</summary>Answer to Q0A2</details></li>
</ul>
</details>
</li>
<li><details id="Q0B"><summary>Q0B</summary>Answer to Q0B</details></li>
<li><details id="Q0C"><summary>Q0C</summary>Answer to Q0C</details></li>
</ul>
</details>
</li>
<li><details id="Q1"><summary>Q1</summary>
<ul>
<li><details id="Q1A"><summary>Q1A</summary>Answer to Q1A</details></li>
<li><details id="Q1B"><summary>Q1B</summary>Answer to Q1B</details></li>
<li><details id="Q1C"><summary>Q1C</summary>Answer to Q1C</details></li>
</ul>
</details>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
P.S. Credits to vokoscreen for good job at screencasting and ezgif.com for good job at optimizing gif to fit 2MiB imgur stackoverflow limit.
Related
I have a code of TOC on my website it seems to be very great for users.
But when I integrate it into my indiantechhunter's it appears in open condition i.e in show condition, I want it to be in Hided condition.
How can I do It?
The code is here ↓
<html>
<head>
...HEAD Stuff...
<script>
var hideTOC = function(){
var hideThese = document.getElementsByClassName("toc_list");
for (var i = 0; i < hideThese.length; i++){
hideThese[i].style.display = "none";
}
document.getElementById("showTOC").style.display = "";
}
var showTOC = function(){
var showThese = document.getElementsByClassName("toc_list");
for (var i = 0; i < showThese.length; i++){
showThese[i].style.display = "";
}
document.getElementById("showTOC").style.display = "none";
}
</script>
</head>
<body>
...BODY Stuff...
<div id="toc_container">
<p class="toc_title">Contents [<a href='javascript:void(null)' class='toc_list' onclick='hideTOC()'>hide</a><a href='javascript:void(null)' id='showTOC' style="display:none;" onclick='showTOC()'>show</a>]</p>
<ul class="toc_list">
<li>1 First Point Header
<ul>
<li>1.1 First Sub Point 1</li>
<li>1.2 First Sub Point 2</li>
</ul>
</li>
<li>2 Second Point Header</li>
<li>3 Third Point Header</li>
</ul>
</div>
...BODY Stuff...
</body>
</html>
I want to show it as shown in the following photo when a user opens page containing TOC.
I am attempting to create a way of ordering a list into specific sections using a nav bar. For example, all list items displays under 'All' and then the option to refine the list into 3 other sections.
Current example
https://ibb.co/pvBV4Lf
Does anyone have any suggestions on how to achieve this? Any examples?
I'm not even sure what you would name this kind of function
<div class="nav">
<h1>All</h1>
<h1><span>Residential</span></h1>
<h1><span>Commercial</span></h1>
<h1><span>Retail</span></h1>
</div>
<ul>
<li>Granville Place</li><br>
<li>Palisade</li><br>
<li>King & Phillip</li><br>
<li>Castle Residences</li><br>
<li>Opera Residences</li><br>
<li>Brighton Collection</li><br>
<li>Carpe Group</li><br>
<li>The Lennox</li><br>
<li>South Quarter</li><br>
<li>One Barangaroo</li><br>
<li>One Queensbridge</li><br>
<li>Australia 108</li><br>
<li>Oceans Freshwater</li><br>
<li>The Pavilions</li>
</ul>
Welcome to stackoverflow,
one way to filter your list element is to append a data-* attribute to your elements and bind a javascript function on your links in the div.nav to filter the list:
window.addEventListener('DOMContentLoaded', () => {
// filter list
const filterList = e => {
e.preventDefault();
// fetch filtertype
const type = e.target.closest('a').getAttribute('data-filter-type');
// hide or display list elements
document.querySelectorAll('ul li').forEach(li => {
li.style.display = type === li.getAttribute('data-filter-type') || type === 'all' ? 'list-item' : 'none';
});
};
// bind links
document.querySelectorAll('.nav a').forEach(a => {
a.addEventListener('click', filterList)
});
});
h1 { font-size: 18px; }
<div class="nav">
<h1>All</h1>
<h1><span>Residential</span></h1>
<h1><span>Commercial</span></h1>
<h1><span>Retail</span></h1>
</div>
<ul>
<li data-filter-type="residential">Granville Place</li>
<li data-filter-type="residential">Palisade</li>
<li data-filter-type="commercial">King & Phillip</li>
<li data-filter-type="commercial">Castle Residences</li>
<li data-filter-type="residential">Opera Residences</li>
<li data-filter-type="residential">Brighton Collection</li>
<li data-filter-type="commercial">Carpe Group</li>
<li data-filter-type="retail">The Lennox</li>
<li data-filter-type="retail">South Quarter</li>
<li data-filter-type="residential">One Barangaroo</li>
<li data-filter-type="residential">One Queensbridge</li>
<li data-filter-type="retail">Australia 108</li>
<li data-filter-type="commercial">Oceans Freshwater</li>
<li data-filter-type="commercial">The Pavilions
</ul>
This is code of HTML.
This code is working in Mozilla but not working in Chrome.
<!DOCTYPE html>
<html>
<body>
<ul id="myList1">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul id="myList2">
<li>Water</li>
<li>
<input id="files" name="files" type="file" />
</li>
</ul>
<p>Click the button to copy an item from one list to another.</p>
<button onclick="myFunction()">Try it</button>
<p>Try changing the <em>deep</em> parameter to false, and only an empty LI element will be cloned.</p>
<script>
function myFunction()
{
var itm = document.getElementById("myList2").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>
</body>
</html>
Can You Please Precise your Question a bit more clear
lastChild includes all node children, including text-nodes. So what you got was not an element but a text-node with the newline and space between </li> and </ul>.
So what you want is the last child Element, not the last child Node.
Which you can do with
function myFunction()
{
var itm = document.getElementById("myList2").lastElementChild;
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
<div>
<ul>
<li>1. View Profile</li>
<li>2. Change Password</li>
<li>3. Sign Out</li>
</ul>
</div>
As shown in above code, I want top open particular hyper link based on number pressed
ex- if I press '1' then hyper link should go to 'viewprofile.jsp'
if I press '2' then hyper link should go to 'chngpass.jsp'
In this way I want to perform, how to do it.
Sample example with JQuery:
$(function() {
var lnks = $('a').map(function() {
return this.href; //<-- fetch all hrefs in array
}).get();
$(document).on('keypress', function(e) { //<-- detect key press
var i = e.which - 49; //<-- ascii value of 1 is 49
if (lnks[i]) //<-- got link
window.location.href = lnks[i]; //<-- load page
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>1. geeksforgeeks
</li>
<li>2. w3schools
</li>
<li>3. javatutorials
</li>
</ul>
</div>
I'm creating an application in jsp & servlet. So I have created a home.jsp page it is a main page of an application and it contains a menu bar . When user clicks on menu item the following page should appear in my iframe and if user clicks on another menu item the selected page should appear in the same iframe.
I need a help.... The following code is creating a menu bar and menu item
<li>Master
<ul>
<li>Customer</li>
<li>Suplier</li>
<li>Item</li>
</ul>
</li>
<li>Transaction
<ul>
<li>Purchase</li>
<li>Sales</li>
</ul>
</li>
<li>Contact</li>
After menu bar I have a iframe in which I want to show a menu item.
I don't know how do i do this. please help me out
You will need to bind a function onclick of your <a> tag. Then using jQuery find the href of the <a> which is clicked, finally assign that href as src of your iframe
HTML
<li>Master
<ul>
<li>Customer</li>
<li>Suplier</li>
<li>Item</li>
</ul>
</li>
<li>Transaction
<ul>
<li>Purchase</li>
<li>Sales</li>
</ul>
</li>
<li>Contact</li>
<br />
<iframe src="" height="300" width="500"></iframe>
jQuery
$(document).ready(function () {
$('a').click(function () {
var target = $(this).attr('href');
$('iframe').attr('src', target);
return false;
});
});
Here's a working DEMO. I just changed the href of first two items as example.