I want a button that can only be pressed when all the options from 1 box are moved to the other box.
see screenshot of the interface are here:
interface
so all the options from the blue box are dragged in the green box and then the button becomes active. is this possible?
my code:
$(document).ready(function(){
$('.next').click(function() {
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
});
});
$(document).ready(function(){
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable, .connectedSortable1"
}).disableSelection();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div id='div2' class='dropboxes'>
<!--box with options to drag to the other box-->
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default" style="cursor:move;" id='I'>option1</li>
<li class="ui-state-default" style="cursor:move;" id='D'>option2</li>
<li class="ui-state-default" style="cursor:move;" id='C'>option3</li>
<li class="ui-state-default" style="cursor:move;" id='S'>option4</li>
</ul>
<!--other box where the options above can be dropped-->
<ul id="sortable2" class="connectedSortable1">
</ul>
<!--this button has to be only clickable when all the options are dragged to the other box-->
<button class="next">Volgende</button>
</div>
How can I do this ?
You can achieve this using .drop event of sortable. Please check snippet for more understanding.
$(document).ready(function(){
$('.next').click(function() {
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
});
});
$(document).ready(function(){
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable, .connectedSortable1",
stop: function( ) {
if($("#sortable1 li").length > 0){
$(".next").prop("disabled",true);
}else{
$(".next").prop("disabled",false);
}
}
}).disableSelection();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div id='div2' class='dropboxes'>
<!--box with options to drag to the other box-->
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default" style="cursor:move;" id='I'>option1</li>
<li class="ui-state-default" style="cursor:move;" id='D'>option2</li>
<li class="ui-state-default" style="cursor:move;" id='C'>option3</li>
<li class="ui-state-default" style="cursor:move;" id='S'>option4</li>
</ul>
<!--other box where the options above can be dropped-->
<ul id="sortable2" class="connectedSortable1">
Drag Here
</ul>
<!--this button has to be only clickable when all the options are dragged to the other box-->
<button disabled="disabled" class="next">Volgende</button>
</div>
Buttons can be disabled and enabled with their HTML disabled attribute
<button id="nextBtn" disabled="true">Disabled</button>
With access to DOM events and the moveable items you can check when objects are dragged over. When all have been moved then change the button's disabled attribute.
document.getElementById('nextBtn').disabled = false;
Here's is one of the possible way
If you have predefined number of options you could use counter provided you should make sure that the same option doesn't get clicked twice ,and then in the button click function check the counter value.
eg. 5 options counter value should be 5
if counter == 5
perform button click
It's possible by using the contentChanged event listener. Since you are using jQuery already, this might help.
$('#sortable2').on('contentChanged', function(){
if($(this).children().length == 4)
$('.next').attr('disabled', false);
});
This code is checking if the contents on the right hand list has changed and if so, we are checking if the number of list items present are 4 and enabling the button by setting it's attribute disabled to false. If you don't know the number of items on the left hand side, pre calculate and pass it to the call back while checking items on the right side.
Related
So I have images inside div and I am using sortable plugin on jquery to drag and drop the arrangement of images. I just need to figure out the number arrangement of images even when i drag and drop it off.
For example I drag test2.jpg in front of test1.jpg. So the arrangement should be 1. test2.jpg, 2. test1.jpg, 3. test3.jpg.
html
<div id="sortable">
<img id="product_preview" class="ui-state-default" src="/images/test1.jpg">
<img id="product_preview" class="ui-state-default" src="/images/test2.jpg">
<img id="product_preview" class="ui-state-default" src="/images/test3.jpg">
<div>
javascript
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
You will want top use serialize or toArray to gather this detail. You will want to ensure that the ID is correct for each item.
Note: If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes "foo_1", "foo_5", "foo_2" will serialize to "foo[]=1&foo[]=5&foo[]=2". You can use an underscore, equal sign or hyphen to separate the set and number. For example "foo=1", "foo-1", and "foo_1" all serialize to "foo[]=1".
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
var sorted = $(this).sortable("serialize");
var sortedIDs = $(this).sortable("toArray");
console.log(sorted, sortedIDs);
}
});
$("#sortable").disableSelection();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="sortable">
<img id="product_1" class="ui-state-default" src="/images/test1.jpg" />
<img id="product_2" class="ui-state-default" src="/images/test2.jpg" />
<img id="product_3" class="ui-state-default" src="/images/test3.jpg" />
<div>
See More:
https://api.jqueryui.com/sortable/#method-serialize
https://api.jqueryui.com/sortable/#method-toArray
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 have the following code:
function dosomething(id, event){
event.preventDefault();
event.stopPropagation();
// dosomething
}
<div class="btn-group">
click
<ul class="dropdown-menu options_drop pull-right">
<li>do some thing1</li>
<li>do some thing2</li>
</ul>
</div>
I use the dropdown dropdown, but when I click on one of the two Li tags, the dropdown does not automatically hide.
Please help me solve this problem,
Thanks all
Assuming you want to hide all li on each click try this:
$("ul li").click(function () {
$("li").hide("slow")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
click
<ul class="dropdown-menu options_drop pull-right">
<li>do some thing1</li>
<li>do some thing2</li>
</ul>
</div>
I made this simple script:
var jq111 = jQuery.noConflict();
jq111( ".main-cat" ).click(function() {
jq111( ".child" ).toggle( "slow" );
});
This show child category when i click on main-cat.
Example:
CAR
Audi <- show after click
Ferrari <- show after click
Fiat <- show after click
I have a problem that,all main category drop her child when i click one of their.
Another main category:
Bicycle, Motorcycle etc..
The categories are dynamic, all main have the same class because they are output by loop.
How can I expand only the categories within its container?
HTML:
<ul class="main-cat">
<li>CAR
<ul class="child">
<li>Ferrari</li>
<li>Fiat</li>
<li>Lamborghini</li>
</ul>
</li>
<ul class="main-cat">
<li>Motorcycle
<ul class="child">
<li>Honda</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
Try this:
<ul class="main-cat">
<li>CAR
<ul class="child">
<li>Ferrari</li>
<li>Fiat</li>
<li>Lamborghini</li>
</ul>
</li>
</ul>
<ul class="main-cat">
<li>BICYCLE
<ul class="child">
<li>Bike 1</li>
<li>Bike 2</li>
<li>Bike 3</li>
</ul>
</li>
</ul>
NOTE: the structure of the elements. They are wrapped in its own 'ul' tags
And your javascript:
$(document).ready(function() {
var jq111 = jQuery.noConflict();
jq111('.main-cat ul').hide() //hide all by default
jq111( ".main-cat" ).click(function() {
jq111('.main-cat ul').hide() //this will hide the elements if one is already open
jq111(this).find( ".child" ).show( "slow" );
});
});
The working demo is here:
https://jsfiddle.net/5j8ne1tz/
It's hard to make a definite recommendation without see the actual HTML - but perhaps this will work?
var jq111 = jQuery.noConflict();
jq111( ".main-cat" ).click(function() {
jq111(this).find( ".child" ).toggle( "slow" );
});
That should find each .child element below the .main-cat classed element that was clicked.
I have problem with vertical menu type accordion.
<div class="nav-section-container-large" data-set="nav-section" role="navigation">
<div class="nav-section">
<span class="nav-section-heading delta">In this section:</span>
<ul class="nav-section-level-2">
<li>Investment advantage</li>
<li>Statistics </li>
<ul class="nav-section-level-3">
<li>Clean technology</li>
<li>Food and beverage</li>
<li>Fund investment</li>
<li>High-value manufacturing</li>
<li>Information and communications technology</li>
<li>Infrastructure</li>
<li>Life sciences</li>
<li>Petroleum and minerals</li>
<li>Resource manufacturing</li>
</ul>
<li>Investment regulations</li>
<li>How can we help</li>
<li class="is-selected">Sectors of opportunity
<ul class="nav-section-level-3">
<li>Clean technology</li>
<li>Food and beverage</li>
<li class="is-selected">Fund investment</li>
<li>High-value manufacturing</li>
<li>Information and communications technology</li>
<li>Infrastructure</li>
<li>Life sciences</li>
<li>Petroleum and minerals</li>
<li>Resource manufacturing</li>
</ul>
</li>
</ul>
</div>
</div>
and
<script type="text/javascript">
$(function(){
$(document).on('click', ".nav-section-level-2 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
if ($(this).hasClass('is-selected') && $('.nav-section-level-3 li').hasClass('is-selected') )
$('.nav-section-level-2 ul').slideToggle('slow', function() { $(this).toggleClass('is-selected'); });
});
$(document).on('click', ".nav-section-level-3 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
});
});
</script>
algorithm vertical menu is working, but very bad. collapsed and expanded not working correctly!
How can I find resolve for my problem?
Please, ready resolves (type JQuery UI) not to offer.
Thank you very much.
I am not sure if I got it right. But here is one solution:
Modified example
$(function(){
$(".nav-section-level>li").on('click',function(e){
var ulElement = $(this).find('ul');
var isSameElement = $(ulElement).hasClass("open");
if( $("ul.open") !== undefined){
$("ul.open").slideToggle('slow');
$("ul.open").removeClass("open");
}
if(!isSameElement){
$(ulElement).slideToggle('slow');
$(ulElement).addClass("open");
}
});
});
First of all your html is little messy clean it up. Second you do not need to add any classes or anything to your li. Simple slidetoggle on click. Which will show hide your child ul.