I'm trying to make an appended item draggable using jquery ui, With jquery I'm trying to say when a veggie is clicked add it to the dirt.
make the veggies draggable in the dirt but be constrained within that element. Is there a reason the following code isn't working?
<body>
<ul id = "dirt">
</ul>
<ul id = "veggies">
<li class ="veg tomato"></li>
<li class ="veg cucumber"></li>
<li class ="veg pepper"></li>
<li class ="veg eggplant"></li>
<li class ="veg beans"></li>
</ul>
<script>
$(document).ready(function(){
$("#veggies li").click(function(){
$(this).clone().appendTo("#dirt");
});
$("#dirt li").draggable({
containment: '#dirt'
});
});
</body>
You need to make the element draggable AFTER you append it, as shown in this fiddle: https://jsfiddle.net/5b3nfm11/1/
$(document).ready(function(){
$("#veggies li").click(function(){
$(this).clone().appendTo("#dirt").draggable({
containment: '#dirt'
});
});
});
It looks like you should be making your #veggies list items draggable instead of appending them on click.
This ought to work.
$(document).ready(function(){
$("#veggies li").draggable(function(){
$(this).clone().appendTo("#dirt")
});
});
Related
I am trying to add or remove active class for list element by clicking the link inside it.
<ul>
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
$('.btn1').click(function() {
$( "#l1" ).addClass( "active" );
$( "#l2" ).removeClass( "active" );
window.open ('/one');
});
$('.btn2').click(function() {
$( "#l2" ).addClass( "active" );
$( "#l1" ).removeClass( "active" );
window.open ('/two');
});
My html and css classes as above. But it doesn't work as expected. So anyone know how to resolve it?
$('.btn').click(function() {
$('.btn').closest('li').removeClass("active")
$(this).closest('li').addClass("active")
console.log($(this).data("url"))
})
li.active{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
My HTML and CSS classes as above
Basically, your code works well. You need to add CSS like .active{ color:red;}.
However, listen to the event click for each button is not a good thing to do. Imagine you have about 10/100/1000 button then you have to Copy/Pase code like this?
You should keep in mind that: Don't repeat yourself.
So as a result, I've refactored code for you like below. Cheers!
$('.btn').click(function() {
$('.btn').closest('li').removeClass("active");
$(this).closest('li').addClass("active");
var content = $(this).data('value');
$("#content").html(content);
});
.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
<div id="content" style="width:100px; height: 100px">
</div>
Edit
Basically, you should get content then assign it to div content below instead of navigating. If you still want to navigate, you should store your data by using localStorage
Try:
$(".btn1").click(function(){
$("ul li").removeClass('active');
$("#l1").toggleClass('active');
window.open ('/one');
});
Note line 2
// will remove class active from all bullets in all list add a #id to the selector to specify a specific list.
// One click handler for all buttons/links.
$('.btn').click(function(event) {
// Remove class from all buttons.
$('.btn').parent().removeClass('active');
// Get the specific button that was clicked.
var btn = $(this);
// Add active class to it's parent.
btn.parent().addClass('active');
//open from the data-link attribute on the link.
// though, window.open will probably be blocked by the browser popup blocker.
window.open(btn.attr('data-link'));
});
.active {
background-color: #ff0000;
}
a.btn {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<!-- you could save where to link to in a data attribute, though I am not sure why you wouldn't just have it in href -->
<li id="l1" class=""> one</li>
<li id="l2" class="">two</li>
</ul>
I would like to add and immediately remove class ".current" for all page elements with class ".chrome" after click at menu item with ".menu-item" class.
<ul id="navigation">
<li class="menu-item">1</li>
<li class="menu-item">2</li>
<li class="menu-item">3</li>
<li class="menu-item">4</li>
<li class="menu-item">5</li>
<li class="menu-item">6</li>
<li class="menu-item">7</li>
<li class="menu-item">8</li>
<li class="menu-item">9</li>
</ul>
Please look at addClass() and removeClass() from the jQuery documentation. To add a class, and then immediately remove it, you can use the following:
$('.menu-item').on('click', function() {
$('.chrome').addClass('current').removeClass('current');
});
This is what i can think of reading what you've asked for.
to add class to everything after click
$(".menu-item").on("click",function(){
//this is to add to all
$("*").addClass("current");
//this is to add to all with class chrome
$(".chrome").addClass("current");
});
to remove all
$(".menu-item").on("click",function(){
//this is to remove all
$("*").removeClass("current");
//this is to remove classes all from .chrome
$(".chrome").removeClass("current");
});
both
$(".menu-item").on("click",function(){
//add remove all
$("*")$("*").addClass("current").removeClass("current");
//add remove all from .chrome
$(".chrome")$("*").addClass("current").removeClass("current");
});
So i have some code like this
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
Then i use a JS code like this
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
$(".Menu").fadeIn(800).slideDown(800);
});
});
But when i using this, all the ".Menu" element will be fade in :(
Please correct my code...
You need to target the specific .Menu that is the one next to this. ELse it will target all element with .Menu class. You can use jquery next
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){ //changed here
$(this).next(".Menu").fadeIn(800).slideDown(800);
});
});
Check out this JSFIDDLE
jQuery doesn't know which element to open because there are no id's assigned to the menu items. So it opens everything in the .SplitCtrl class because it doesn't know any better. If you assign some id's to the elements, then it will know what to open and when. Using your code so as to minimize modifications, the following will work for you. Note the addition of id's to both of the .SplitCtrl items and the .Menu items, and using the click function and passing in the id of the item that the click originated from. If you embed further elements, this will still work in the case that it isn't the next element following your class, or if you want it to trigger other items on the page in addition to the menu items.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" id="menu1" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" id="menu2" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
<div id="surprise1" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
In order to toggle the items, you can add something that first hides everything that's open and then makes the newly selected item visible:
//...same code as above to this point
<div id="surprise1" class="Surprise" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(".Menu").fadeOut(100); // Hide all items of class .Menu
$(".Surprise").fadeOut(100); // Hide other items of class .Surprise
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
So now, all the .Menu items in that class are toggled off before the new one is displayed (even though only one displays at a time). Note the added class for "Surprise" to be able to hide all the external elements as well. There are lots of ways to toggle items so this is just one way you could accomplish it.
Am trying to add a onclick event to the a tag of particular li's which are under a ul with id #nav.
HTML Structure:
<ul id="nav">
<li>link1</li>
<li>
link2
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
<li>link3</li>
<li>
link4
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
</ul>
Jquery
$( document ).ready(function() {
$("ul#nav li").eq(1).children().first().click(function(){
$(this).attr('onclick', 'return false;');
return false;
});
$("ul#nav li").eq(5).children().first().click(function(){
$(this).attr('onclick', 'return false;');
return false;
});
});
If you see, am writing jQuery twice to select the a element of li item which has got another ul inside and add onclick event to it. This is working fine. But is there way to reduce my code and make it more clean?
So you don't want the li that contains an ul child to fire the click event so i think it would be like this
$('#nav li:has(>ul)').click(function (event) {
event.preventDefault();
alert('click');
});
fiddle can be found here: http://jsfiddle.net/552T4/3/
Hey you may be looking for this:
$("ul#nav li:has(>ul)")
$("ul#nav li:eq(1),ul#nav li:eq(5)").children().click(function(){
e.preventDefault();
var youClicked=$(this).text();
alert(youClicked);
});
Please try this.
$( document ).ready(function() {
$("#nav > li").each(function(){
$(this).find('a').attr('onclick', 'return false;');
});
});
Below is fiddle of this.
Js Fiddle
In above i apply "onclick" event to all anchor. if you want to apply only that li which has child ul then the code is something like this.
$( document ).ready(function() {
$("#nav > li").each(function(){
if($(this).find('ul').length>0)
{
$(this).find('a').attr('onclick', 'return false;');
}
});
});
below is the link for Li with Ul element selected.
li with ul onclick
Yea, Add ID's to the elements you need:
HTML Structure:
<ul id="nav">
<li>link1</li>
<li>
link2
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
<li>link3</li>
<li>
link4
<ul>
<li>innerlink1</li>
<li>innerlink2</li>
</ul>
</li>
</ul>
Jquery
$("#liOne, #liTwo").click(function(e){
e.preventDefault();
return false;
});
Or even a class, instead of id's.
This way, you only have to add the id / class attributes to the elements you want the click event to be handled on, instead of traversing the DOM like that.
I have this kind of setup in my html
<section class="grp">
<ul class="normal">
<li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
</ul>
<ul class="advanced">
<li>This is Advanced</li>
</ul>
</section>
<h1>Another Thing</h1>
<section class="grp">
<ul class="normal">
<li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
</ul>
<ul class="advanced">
<li>This is Advanced</li>
</ul>
</section>
How can I toggle the "advanced" ul if I clicked the button in ul.normal?
I tried it like this in coffeescript
$('.normal').on 'click', '.toggle-advanced', (e) ->
$(#).closest('.grp').siblings('.advanced').slideToggle();
since jquery is tagged... using jquery
$('.toggle-advanced').click(function(){
$(this).parents('ul.normal').siblings('ul.advanced').toggle();
});
or
$('.toggle-advanced').click(function(){
$(this).parents('.grp').find('ul.advanced').toggle();
});
these should work unless you aree adding the content dynamically.. use on() if added dynamically
$('.normal').on('click', '.toggle-advanced', function(){
$(this).parents('.grp').find('ul.advanced').toggle();
});
.advanced is not a sibling of .grp element, it is the sibling of the parent .normal element
$(#).closest('.normal').siblings('.advanced').slideToggle();
The javascript equal will be
$('.normal').on('click', '.toggle-advanced', function(){
$(this).closest('.normal').siblings('.advanced').slideToggle();
})
you can try this
$(".toggle-advanced").on('click', function(){
$(this).closest(".normal").siblings('.advanced').slideToggle();
});
this code is jquery based
In Jquery, you can use parent and siblings functions to get to the desired element.
Try this:
$('.toggle-advanced').click(function() {
$('this').parent().siblings().toggleSomething()
});
siblings returns all the siblings for given element, which in your case will always return "advanced" ul.
This should work.
$("ul.normal>li>button").click(function () {
$(this).closest('.normal').siblings('.advanced').slideToggle();
});
Working example: http://jsfiddle.net/riri78/dQcFE/