Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So I have this problem. Such a structure is generated programmatically
<ul id="container1">
<li>Click 1</li>
<li>Click 2</li>
<li>Click 3</li>
</ul>
And on generation time click event handlers are assigned to these 'li' elements. Basically clicking on any 'li' hides the other 'li' elements and only the one which is clicked would be visible.
Now what I want to do is to have the same navigation cloned with all it's behaviour and I want to show it also on the other part of the page. It would look like this then
<ul id="container1">
<li>Click 1</li>
<li>Click 2</li>
<li>Click 3</li>
</ul>
<ul id="container2">
<li>Click Cloned 1</li>
<li>Click Cloned 2</li>
<li>Click Cloned 3</li>
</ul>
The trick here is, when I click on any 'li' element under 'container2', the action will happen on 'container1', lets say If I click on 'Click Cloned 1' on 'container2', 'Click 2', 'Click 3' will disappear on 'container1'. I must code this on pure JS and no external libraries are allowed. I tried many things and nothing worked. Do you have any idea how can I make container2 working as an alias of container1?
Below may be what you want (when an element in #container2 is clicked, the other elements in #container1 will disappear):
var alias = document.querySelector('#container2').childNodes;
Array.prototype.slice.call(alias)
.forEach(function(el) {
el.onclick = function() {
var that = this;
var targets = document.querySelector('#container1').childNodes;
Array.prototype.slice.call(targets)
.forEach(function(ta, i) {
if (ta.nodeType === 1 && !that.parentNode.childNodes[i].isEqualNode(that)) {
ta.style.display = 'none';
}
})
};
});
<ul id="container1">
<li>Click 1</li>
<li>Click 2</li>
<li>Click 3</li>
</ul>
<ul id="container2">
<li>Click Cloned 1</li>
<li>Click Cloned 2</li>
<li>Click Cloned 3</li>
</ul>
See JSFiddle
Related
Hi, I'm trying to implement something like this where the user can click on an item and move it from left to right div or list and vice versa (refer to attached image). The list of items needs to be tracked so I'm able to use javascript to do some processing. I saw some websites done this before but not sure what this is called, is there any terminology for this? I'm don't really know what to search on google so I'm a bit stuck currently. Greatly appreciated it if anyone can help with this, thanks.
You can add a click event listener to both lists that appends the event target to the other list and deletes the event target.
row1.addEventListener('click', function(e){
if(e.target != this){
row2.appendChild(e.target.cloneNode(true));
e.target.remove()
}
})
row2.addEventListener('click', function(e){
if(e.target != this){
row1.appendChild(e.target.cloneNode(true));
e.target.remove()
}
})
.row {
display: flex;
}
<div class="row">
<ul id="row1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="row2">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
There is no real formal name dedicated for this, but you can find many things resembling what you are looking for with 'multi list', 'multi select list' and 'multi select box'. Angular Material also has a CDK for this called 'droplist', but they seem to be the only one really using the term.
I have menu with items. I want to add to tag class with name "name". I try to use:
var element = document.getElementById('myElement');
element.classList.add('myClass');
But the tag doesn't have any ID or class.
It's even possible with Javascript?
<ul id="menu-main">
<li id="menu-item">
ODKAZ
</li>
</ul>
If you really want to add the class with javascript, you can do:
var element = document.getElementById('menu-item');
element.getElementsByTagName("a")[0].classList.add('js-target-scroll');
<ul id="menu-main">
<li id="menu-item">
ODKAZ
</li>
</ul>
But beware that the "onemenu" you are talking about is looking for this css-class and if your own script is not run before that, this won't work since the class is not yet added.
If it's your own theme you are developing, you can add the css-class server side with custom walker.
If you want to add the class for all menu item anchor tags, you can use the code below. If not, use what Esko has suggested in his answer and comments.
var menuItemLinks = document.querySelectorAll("#menu-main li a");
menuItemLinks.forEach(function(element) {
element.classList.add("myClass");
});
<ul id="menu-main">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
I may possible have a requirement where i have to link the parent menu to a link rather than showing sub menu. Right now i am using Slick Menu http://slicknav.com/
Logically parent menu should not be linked as it should show child menu on mobile device. while desktop version we can counter this with hover effect can show sub-menus and click on the parent menu can open link also but on small screen we can either open link or show submenu.
my question right now is that in fiddle example (http://jsfiddle.net/y1dLdd1f/1/) i am linking Parent 1 meny to google.com, but script is blocking this. How can i unblock it and when user click on it it opens the page rather than showing the sub menu if parent menu has a proper link
<ul id="menu">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
</ul>
Slick menu has a number of available options including "allowParentLinks", all you need should be,...
$(document).ready(function(){
$('#menu').slicknav({
allowParentLinks:"true"
});
});
But to show this working in JSFiddle you would need to add target="_blank" to you <a> tag.
The great Google and SO didn't render search results regarding this. Some were similar but didn't quite get me there.
I am in need of making a classless submenu that will attach a style attribute to each individual <li> in the sub <ul> in order to set a min-width property based on the number of sub list items.
The HTML
<nav>
<ul>
<li>HOME</li>
<li>ABOUT COMPANY</li>
<li>
ABOUT PRODUCT
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>GETTING STARTED</li>
<li>
PATIENT SUPPORT
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>CONTACT</li>
<li>eUPDATES</li>
</ul>
</nav>
The JavaScript
$('.sub').text(function() {
var count = $(this).next().find('li').length;
var totalwidth = count * 115;
$(this).next().find('li').parent('ul').attr('style','min-width:'+totalwidth+'px');
});
I need to be able to do this without searching based off the class "sub". I've tried a few times, but none of it seems as powerful as the code I'm currently using. The backend developer I'm working with is requiring it to all be simple <ul><li></li></ul> structure with no classes.
If anyone can help point me in the right direction on this, I'd greatly appreciate your time and help!
Target all LI items that contain UL's, find the number of LI's in those UL's, and multiply for width :
$('ul', 'li').css('min-width', function() {
return ( $(this).find('li').length * 115 ) + 'px';
});
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="info-1></div>
<div id="info-2></div>
And when you hover over one of the items a window is displayed with some info regarding the item. I have worked this out for one item, now I wanna know how I can make this work for the entire list.
My initial thought was to create one script per each item... but that seems a bit thick considering the functionality of js.
Javascript
$(function(){
$('pop il li').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
Now I need the following. Once the "window" is displayed on hover, in I need the window to stay open in some way for me to be able to scroll through the content using my mouse. This is mainly because I have some links inside it and need to access them! Right now, As soon as i leave the li item, the window of course disappears... which is not fun. So, how can i solve it?
UPDATED
I would make one function to handle the action you want for these. Make sure the 'info' divs are in the same order as the 'pop' li's
Here is an example FIDDLE
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
Then use this jquery
$('#pop li').mouseover(function() {
$('.info').hide();
var x = $(this).index();
$('.info').eq(x).show();
});
$('.info').mouseout(function(){
$(this).hide();
});