I need your help
If document.getElementById("file").children[1].style.display = "none"; hides the "Save" item in the "file" menu, then document.getElementById("edit").children[1].style.display = "none"; does not work properly and does not hide the "Add new" item in the "edit" menu item.
<div id="menuwrapper">
<div id="menu" style="width: 1001px; height: 20px">
<ul>
<li>
<div id="div_rssims_file">File</div>
<ul id="file">
<li><a onclick="window.print()"><div id="div_rssims_file_print">Print</div></a></li>
<li id="li_rssims_file_save"><a onclick="rssims_save()"><div id="div_rssims_file_save">Save</div></a></li>
<li><a onclick="rssims_save();window.close()"><div id="div_rssims_file_save_exit">Save & Exit</div></a></li>
<li><a onclick="window.close()"><div id="div_rssims_file_exit">Exit</div></a></li>
</ul>
</li>
<li>
<div id="div_rssims_edit">Edit</div>
<ul id="edit">
<li><div id="div_rssims_edit_addnew">Add new</div></li>
<li><div id="delete">Delete</div></li>
<li><div id="clear">Clear Form</div></li>
</ul>
</li>
<li>
<div id="div_rssims_view">View</div>
<ul>
<li><div id="goto_first">>> Go to First</div></li>
<li><div id="goto_next">>Go to Next</div></li>
<li><div id="goto_prev">Go to Previous></div></li>
<li><div id="goto_last">Go to Last>></div></li>
</ul>
</li>
<li>
<div id="div_rssims_reports">Reports</div>
<ul>
<li><div id="export_excel">Export to Excel Table</div></li>
<li><div id="export_html">Export to HTML Table</div></li>
<li><div id="export_list">Export to HTML List</div></li>
<li><div id="export_contact">Export as Contact Card</div></li>
</ul>
</li>
<li>
<a style="cursor: pointer;" onclick="sims_logoff()"><div id="div_rssims_logoff">Logoff</div></a>
</li>
</ul>
</div>
</div>
Try this
document.getElementById("edit").children[0].style.display = "none"
Add New is a first position of #edit
You're not deleting the right item, because [1] will select the second child. To grab the first one, use [0] instead:
document.getElementById("edit").children[1].style.display = "none"
That this works for the first example given is probably because it is the second element.
document.getElementById("file").children[1].style.display = "none";
Is hiding the 'Save' menu item (the 2nd child of <ul id="file">).
document.getElementById("edit").children[1].style.display = "none";
Is hiding the 'Delete' menu item (the 2nd child of <ul id="edit">).
If you want to hide the 'Add New' submenu item, you should target the first child of <ul id="edit"> like this:
document.getElementById("edit").children[0].style.display = "none";
If you want to hide the entire 'Edit' submenu with all items, you should target the <ul id="edit"> like this:
document.getElementById("edit").style.display = "none";
This does point out an important drawback of using children as a means of selecting menu items. If the order of the items changes, so does your Javascript.
You are much better off targeting the items by their classnames or ids. If you remove the inner div from the a link in each item (this is superfluous), and replace the id on the li element, you can target just the menu item you want:
<ul id="edit">
<li id="div_rssims_edit_addnew">Add new</li>
<li id="delete">Delete</li>
<li id="clear">Clear Form</li>
</ul>
document.getElementById("div_rssims_edit_addnew").style.display = "none";
This always works, no matter what the order of the items is. It still blows up with an error if the element(s) are not present in the page. To prevent this, you best use a javascript library like jQuery to do this: http://api.jquery.com/hide/.
Related
I am struggling with jquery a little. I have an unordered list that looks like this.
<ul>
<li class="folder">Folder: Test</li>
<ul>
<li class="folder">Folder: Archive</li>
<ul>
<li class="file">
<div class="filename">HelloWorld.docx</div>
<div class="size">11.79kiB</div>
<div class="date">2021-01-12 09:31:34</div>
</li>
<li class="file">
<div class="filename">HelloWorld1.docx</div>
<div class="size">12.79kiB</div>
<div class="date">2021-01-11 09:31:34</div>
</li>
</ul>
</ul>
</ul>
Which looks like this
Folder: Test
Folder : Archive
HelloWorld.docx
11.79kiB
2021-01-12 09:31:34
HelloWorld1.docx
12.79kiB
2021-01-11 09:31:34
When I click on any of the li's with the class of "file" I want to look back and work out what the path structure is by finding the parent li's that have the class "folder".
I have tried various combinations but cannot get it
This is what I am working with at the moment
$(document.body).on('click',"li.file",function (e) {
console.log("clicked");
$(this).parents("li.folder").each(function() {
console.log($(this).text());
});
});
Ultimately i want to get back a full path with the parent folder and the filename in a variable.
e.g. pathtofile = /Test/Archive/HelloWorld.docx
Here is a jsfiddle https://jsfiddle.net/e5d7bcyz/
Thanks
Before approaching your question you first need to correct the HTML. ul elements cannot be children of other ul elements. You need to wrap the ul within their associated li.
You will also need to wrap the folder names in another element, such as a span, in order for the text to be easily retrievable. This would be possible with your current HTML by trawling through text nodes, however that is messy code to write and very brittle. A simple HTML change is the best approach there.
Finally, you can loop through the parent li elements of the clicked .file and reverse their order to get the path in the right format. From there you can append the filename of the selected file. Try this:
$.fn.reverse = [].reverse;
$(document).on('click', "li.file", function(e) {
let $file = $(this);
let $path = $file.parent().parents('li').reverse();
let path = $path.map((i, el) => $(el).children('span').text().trim()).get();
path.push($file.children('.filename').text().trim());
console.log(path.join('/'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="folder">
<span>Test</span>
<ul>
<li class="folder">
<span>Archive</span>
<ul>
<li class="file">
<div class="filename">HelloWorld.docs</div>
<div class="size">11.79kiB</div>
<div class="date">2021-01-12 09:31:34</div>
</li>
<li class="file">
<div class="filename">HelloWorld1.docs</div>
<div class="size">12.79kiB</div>
<div class="date">2021-01-11 09:31:34</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Well, the LI you're looking for are not really the parents as they're not wrapping the current li.file element.
<ul>
<li class="folder">Folder: Archive</li> // You close the LI tag. So it's not a parent of the rest of the code.
<ul>
<li class="file">
Try to wrap the rest of the code with the LI tag:
<ul>
<li class="folder">Folder: Test
<ul>
<li class="folder">Folder: Archive
<ul>
<li class="file">
<div class="filename">HelloWorld.docx</div>
<div class="size">11.79kiB</div>
<div class="date">2021-01-12 09:31:34</div>
</li>
<li class="file">
<div class="filename">HelloWorld1.docx</div>
<div class="size">12.79kiB</div>
<div class="date">2021-01-11 09:31:34</div>
</li>
</ul>
</li> //closing the second parent: Folder: Archive
</ul>
</li> //closing the first parent: Folder: test
</ul>
As far as I know it's valid HTML code.
And then those li.folder elements would be actually parents.
I have a top menu with some items that have sub-items. If the user clicks on an item that has sub items, I want these sub-items to be displayed in the bottom menu, so that when one reaches the bottom of the page it is easy to continue to a another sub-item.
Example: If the user clicks on "First" it should look like below.
<nav id='top-menu'>
<ul>
<li>
<a href='#'>First</a>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</li>
<li>
<a href='#'>Second</a>
</li>
</ul>
</nav>
<article>
Article text
</article>
<nav id='bottom-menu'>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</nav>
<details>
<summary>Heading #1</summary>
<nav>
Link A
</nav>
</details>
<details>
<summary>Heading #1</summary>
<nav>
Link B
</nav>
</details>
with out jquery by using html5 we can do it,if you dont like comment i will update with jquery more..in fiddle
if you are using jQuery you can try something like this:
var $bottomContainer = $('#bottom-menu');
$('#top-menu a').on('click', function(e){
e.preventDefault();
var $submenu = $(e.target).siblings('ul');
if (!$submenu.length) return;
$bottomContainer.empty().append($submenu.clone());
});
I need to change link color to the button below the id #idTERRITORIAL_8 which has the class .active_default, the idIMMUNOLOGY_9, but I cannot use that directly. My starting point has to be #idTERRITORIAL_8.
I tried this :
$('#idTERRITORIAL_8').parent().find('.active_default').addClass("red");
But all .active_default changed color.
I also tried next and nextAll
<div id="wrapper">
<ul class="menu">
<li>Overview</li>
<li>Sales
<ul>
<li>National</li>
<li>Provincial</li>
<li>Regional
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Territorial
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Depot</li>
</ul></li>
<li>ICP</li>
</ul>
</div>
$('#idTERRITORIAL_8').next().find('.active_default').addClass("red");
Link to jsbin example:
https://jsbin.com/lenotolaco/1/edit?html,js,output
We need to do so that when you click on the main menu items, changed both style BODY, by default (body class = "front") front, but when you click on the menu, design, class will not front but work, when you click on the menu pretul (body class = "pret"), etc.
<jdoc:include type="modules" name="limbi" />
<h1 id="site-name">web site</h1>
<nav>
<!--
THIS MENU
-->
<ul class="main-nav" >
<li class="careers"><span class="menu-item-title">HOME</span>
</li>
<li class="work"><span class="menu-item-title">DESIGN</span>
</li>
<li class="pret"><span class="menu-item-title">Pretul</span>
</li>
<li class="promovare"><span class="menu-item- title">Promovare</span>
</li>
<li class="port"><span class="menu-item-title">Portofoliu</span>
</li>
<li class="contact"><span class="menu-item-title">Contacte</span>
</li>
</ul>
</nav>
</header>
If you want to change a class name of elements, you can use these Jquery methods.
http://api.jquery.com/removeClass/
http://api.jquery.com/addClass/
var body = $('body');
body.removeClass('front').addClass('design');
I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>
I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.
I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp
Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});