We Keep Coding

enable clickling on parent tag with routerlink as child vue 3

I have a RouterLink used inside a li tag and which basically makes a simple dropdown menu, When options are present on the dropdown menu I can click on the text to go to the next page but not click anywhere else inside the box, instead I want to be able to click on the whole "bar" which is the li tag to be able to go to the page
<ul>
<li v-for="product in products">
<RouterLink :to="/product"> {{product}} </RouterLink>
</li>
</ul>
this creates a dropdown like this:
|product name |
|product 2 name |
Now clicking on only text works but I want to be able to click inside the box as well. How do you solve that.
Another question is how do I close the dropdown when it is clicked anywhere else.

The intuitive solution is to add click event handler to the li tag and use $router.push('/product') :
<ul>
<li v-for="product in products" #click="$router.push('/product')">
{{product}}
</li>
</ul>

Replace fields in columns on click with JS

I am trying to find a way to do something with JavaScript. I have a list of exercises, they are 5, and I want when I click on one of them, this exactly one to be transferred to another list(right one), this will be the exercises the user choose from the left list, and if he changes his mind, to be able to return this exercise to the left list. Also, when some exercises are chosen, to be visible only on the right site.
<ul id="left" th:each="exercise : ${exercises}">
<button type="submit">
<li th:text="${exercise.name}">
</button>
</li>
</ul>
<ul id="right" th:each="exercise : ${exercises}">
<button type="submit">
<li th:text="${exercise.name}">
</button>
</li>
</ul>
Something like that.
(I build the whole project with Java and Spring)

I assume the 2 lists come from the Back End and are rendered on the UI.
You need to send a request to the server to tell that an item that clicked on to the server "API endpoint" to move the item to the 2nd list
If you are using ajax you need to send a get request to get the updated lists
If you are using Spring MVC that will require reloading the View to update the UI
If the lists are built on the Front end and then will be submitted to the server
You need to remove the element from 1st list and then add it to the 2nd list
<ul id="left">
<li id="i" onclick="remove(this)">Item that clicked on</li>
</ul>
<ul id="right">
<li id="li1">li 1</li>
<li id="li2">li 2</li>
</ul>
<script>
function remove(el) {
const textContent = el.textContent;
// copy classes or id or anything
el.remove();
addElementToRightList(textContent);
}
function addElementToRightList(textContent) {
const parent = document.querySelector("#right");
const element = document.createElement("li");
// do stuff with element eg: set text by getting it from item that clicked on using textContent
element.textContent = textContent;
parent.appendChild(element);
}
</script>

Keep Zurb Foundation dropdown open when clicking

I am using a Foundation dropdown, and inside it I have multiple things I need to interact with, including colpick, adding and removing components, etc. Anytime I do any of these actions, the dropdown closes, as it should since it is a dropdown. Is there a good way to have the dropdown ignore my clicks and only close if I click the close button instead?

Juts use aria-autoclose="false" in the <ul> tag (see section Autoclose in documentation.
<a class="button" data-dropdown="autoCloseExample" aria-controls="autoCloseExample" aria-expanded="false">Link Dropdown »</a>
<ul id="autoCloseExample" class="f-dropdown" data-dropdown-content tabindex="-1" aria-hidden="true" aria-autoclose="false" tabindex="-1">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>

This foundation forum issue may help you

How do you scroll down to navbar when a nav link is clicked

I want to be able to automatically scroll down when a link in the navbar is clicked. Right now when links in the navbar are clicked the page reloads and returns to the top of the page. I used JQuery to hide the sections that aren't selected now I need to add the scroll method when a link is clicked. OR build it so that when the navbar link is selected, the page reloads with the new unhidden section, and the page moves down to the navbar. I would like to see both methods if possible.
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>

You need to provide an ID for the link to point to. If you only link to '#', the page will simply reload.
This link will jump to the corresponding ID on the H2
Click to move to ID 'myLink'
<h2 id="myLink">My link</h2>
As for the jQuery, did you use .hide(), .toggle() or .remove()?
.hide() does exactly that, but doesn't delete it from the DOM.
.toggle() switches between visible and invisible.
.remove() actually deletes your target from the DOM, and it can't be manipulated after that.

Make the dropdown menu of bootstrap at top

I am using the dropdown menu component of twitter/bootstrap
And i have a timer countdown 10 minutes
I want to make dropdown menu show up (at top), and won't vanish even if user click the other place.
Only after user hovered that dropdown list, user can let it vanish by click other lace.
<li class="dropdown">
User Name
<ul class="dropdown-menu">
<li class="first" id = "mymenu">
setting
</li>
<li class="last">
sign_out
</li>
</ul>
</li>
How can i do that?
I had though about use event handler to prevent vanish even, but how can i do that?
Thanks for help!!