How can I prevent sort action in jQuery UI for <h1>Title</h1>?
<div data-user-type="mix" class="col-xs-3">
<h1>Title</h1>
<div data-userId="1" class="user">
<h2>John</h2>
</div>
<div data-userId="2" class="user">
<h2>Bill</h2>
</div>
<div data-userId="3" class="user">
<h2>Max</h2>
</div>
</div>
Here is my try
$(function() {
$('div[data-user-type="mix"]').sortable({
revert: true
});
$('h1').disableSelection();
});
Now I can sort all user and title.
disableSelection() will only disable it from being draggable as other items can change it's position. You need to exclude the items from the selector of sortable.
$('div[data-user-type="mix"]').sortable({
revert: true,
items: ':not(h1)'
});
To connect two lists:
<div id="list1" class="connect">
</div>
<div id="list2" class="connect">
</div>
Connects using the same class name:
$('#list1, #list2').sortable({
connectWith: 'connect'
});
It's all in the docs: Connect Lists
Related
I have a container with multiple divs and in each div I have a handler on which you can click.
The requirement is to return the index of the div in the container for further processing.
I've simplified the code for readability purposes.
The HTML:
<div class="container">
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
</div>
The Javascript code I tried so far but I always get -1 as the index:
$(document).ready(function(){
$('.handler').click(function(e) {
let index = Array.prototype.indexOf.call($('.container'), $(this).parents('.block'));
console.log(index);
});
});
I also created a fiddle.
So what am I doing wrong here?
You can do the following,
$('.handler').click(function(e) {
var el = e.target;
console.log([].indexOf.call(el.parentNode.parentNode.children, el.parentNode));
});
However if you want to know what was wrong in your code,
Array.prototype.indexOf.call($('.container')[0].children, $(this).parents('.block')[0])
This part should fix the problem in your code. You have been doing it all right, but for the parameter of indexOf we needed the children array of .container and clicked element.
You were passing the container element and current clicked element as an array. That is Array.prototype.indexOf.call('[Container Element]', ['current clicked div']) Which is not right. You should pass something like this,
Array.prototype.indexOf.call('[children, children, children...]', 'current clicked div element').
It was happening because the $('.container') returns an array with the element having a class name .container. But we needed all the children array of the element that contains container class.
And $(this).parents('.block') returns an array with the matching elements even if it is only one.
You can access the index using the index method on parent element of selection.
$(document).ready(function(){
$('.handler').click(function(e) {
console.log($(this).parent().index())
});
});
You can do that like this. Find the index of the closest element of the clicked element, which is also a direct child of .handler. To find index, use index().
$(document).ready(function() {
$('.handler').click(function(e) {
let index = $(this).closest('.block').index()
console.log(index);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
<div class="block">
<div class="handler">
Click
</div>
</div>
</div>
You're checking at the wrong level of nesting in your HTML. I believe what you're trying to do is check from one level higher, at ".container" and get the index of the ".block" element that was clicked.
This code works in your Fiddle:
$(document).ready(function(){
$('.handler').click(function(e) {
const p = e.target.parentElement.parentElement;
const index = Array.prototype.indexOf.call(p.children, e.target.parentElement);
console.log(p.className) // "container"
console.log(index)
});
});
This can be done simply using delegate in jQuery.
I modify your JSFiddle code.
$(".container").delegate('.block', 'click', function () {
console.log( $(this).index() );
})
u can use a id
<div class="container">
<div class="block">
<div id='0' class="handler">
Click
</div>
</div>
<div class="block">
<div id='1' class="handler">
Click
</div>
</div>
<div class="block">
<div id='2' class="handler">
Click
</div>
</div>
<div class="block">
<div id='3' class="handler">
Click
</div>
</div>
</div>
$(document).ready(function(){
$('.handler').click(function(e) {
let index = this.id
console.log(index);
});
});
https://jsfiddle.net/vhrt596x/2/
I'm learning Javascript and jQuery and I'm stuck at this one problem. Let's say my code looks like this:
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Now, if i click one of the div's, i want the other ones to disappear.
I know, I could create 4 functions for each one of them with on.click hey and display none with how , are and you. But is there a easier way? I bet there is, with classes maybe?
Thanks for responding!
Use siblings to get reference to its "brothers".
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
$('div').click(function(){
$(this).siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Or you can hide all the other div which not the clicked element using not
Remove elements from the set of matched elements.
$('div').click(function() {
$('div').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
You can just hide siblings() of clicked div.
$('div').click(function() {
$(this).siblings().fadeOut()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey">hey</div>
<div id="how">how</div>
<div id="are">are</div>
<div id="you">you</div>
Yeah there are some easier ways and I could tell a one from it,
Set a common class to all the elements that you are gonna target,
<div class="clickable" id="hey"> hey </div>
<div class="clickable" id="how"> how </div>
<div class="clickable" id="are"> are </div>
<div class="clickable" id="you"> you </div>
And you have to bind a single click event by using a class selector,
$(".clickable").on("click", function(){ });
Now use the .siblings() functions to hide the required elements,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").hide();
});
But using a toggle instead of hide would sounds logical,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").toggle();
});
Since you can do the same operation over all the elements.
You can use not to avoid element and this will indicate current instance.
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).hide("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Assign a class to each of the elements:
<div id="hey" class='sth'> hey </div>
<div id="how" class='sth'> how </div>
<div id="are" class='sth'> are </div>
<div id="you"class='sth' > you </div>
And write a js function onclick.
Remove class 'sth' from 'this' element in this function
Hide all elements with class 'sth' $('.sth').hide();
For this example - you don't need to add any further selectors to target the div's although in reality - this solution wwould cause all divs on the page to be affectecd - adding classes would be my actual suggestion: - but this works for this example. Click a div and all divs are hidden then the clicked one is shown. I also added a reset button to allow all divs to reappear.
$('div').click(function(){
$('div').hide();
$(this).show();
});
$('#reset').click(function(){
$('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
<hr/>
<button type="button" id="reset">Reset</button>
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).toggle("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
So I was basically trying to create a drop-down list with jquery. I was successful in achieving but came across with a slight problem. Here's the code
HTML
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
JQUERY
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").slideDown();
});
$(".dropdown_container").mouseleave(function(){
$(".dropdown_container").slideUp();
});
});
Once I hover over the dropdown_heading the dropdown shows-up and I'm able to navigate over it but the only way the it slides back up is if i actually have the cursor in the dropdown_container. If I try to slide it up removing the mouse from dropdown_heading, the dropdown is still visible. How would I be able to slide the submenu back up when the mouse leaves both div_container and div_heading?
I've tried to execute this function but therefore I am unable to navigate over the container. Thanks.
$(".dropdown_heading").mouseleave(function(){
$(".dropdown_container").slideUp();
});
You can try a timer based solution like
jQuery(function($) {
var $target = $(".dropdown_container");
$('.dropdown_heading').hover(function() {
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown(500);
}, function() {
var timer = setTimeout(function() {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$target.hover(function() {
clearTimeout($(this).data('hoverTimer'));
}, function() {
$(this).stop(true, true).slideUp();
});
});
.dropdown_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect..
Try this,
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
I am trying to do a sort the data which is in a HTML form in to the div. Each time I drag new item, it will replace the previous item instead of sorting it from the top or the bottom. I don't think there is anything to do with wordpress here. Is just that I am developing it in wordpress. What have I done wrong or have I missed? Below are the code.
script
$(function () {
$("#blocks").droppable({
drop: function (event, ui) {
var id = ui.draggable.attr('id');
layout = $.ajax({type:"GET",url:'wp-content/themes/dynamictheme/templates/' + id + '.html',async:false}).responseText;
$("#blocks").wrap( layout );
}
}).sortable({
revert: true
});
$(".draggable").draggable({
helper: "clone"
});
});
html
<div class="sortable" >
<ul id="blocks" class="ui-sortable empty" ></ul>
</div>
<div id="slideout">
<div id="slideMenu">
<ul style="list-style-type: none;">
<li id="template1" class="draggable">
<img src="wp-content/themes/dynamictheme/img/template/template1.png" width="200"/>
</li>
<li id="template2" class="draggable">
<img src="wp-content/themes/dynamictheme/img/template/template2.png" width="200"/>
</li>
</ul>
</div>
</div>
template html
<section class="success" id="template1" >
<div class="container" style="width:auto;">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
</div>
<div class="col-lg-4">
<p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<a href="#" class="btn btn-lg btn-outline">
<i class="fa fa-download">Download Theme</i>
</a>
</div>
</div>
</div>
</section>
you are not dropping the data as a list item, append the layout variable inside a list element to the #blocks ul
$("#blocks").droppable({
drop: function (event, ui) {
var id = ui.draggable.attr('id');
layout = $.ajax({type:"GET",url:'wp-content/themes/dynamictheme/templates/' + id + '.html',async:false}).responseText;
$("#blocks").append('<li>' + layout + '</li>');
}
Use two sortable lists instead of draggable and droppable then use this code:
$(function() {
$("#list2").sortable({
connectWith:'.connect',
stop: function (event, ui) {
var id = ui.item.sortable.attr('id');
ui.item.html($.ajax({type:"GET",url:'wp-content/themes/dynamictheme/templates/' + id + '.html',async:false}).responseText);
}
$("#blocks").sortable({
connectWith:'.connect'
});
});
I wonder if it's possible to create something like a prev/next navigation with jQuery where it indexes all the divs with the same class. To try this I created a pretty basic fiddle.
HTML:
<ul class="list-inline">
<li>PREV</li>
<li>NEXT</li>
</ul>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="col-md-6">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
</div>
And I also created a basic jQuery action changing the color of the boxes:
$( document ).ready(function() {
$('.prevtrigger').click(function(){
$( '.box' ).css("background-color", "blue")
});
$('.nexttrigger').click(function(){
$( '.box' ).css("background-color", "green")
});
});
Now the question is: how do I manage to color one div after another red or green depending on the actual index it has. Ideas anyone? Have a look at my fiddle: HERE!
Take a look at following jQuery functions:
prev()
next()
Example:
$(".box.active").prev().css("background-color", "blue" );
$(".box.active").next().css("background-color", "green");
You could add a "active" class to the current element and use the prev and next function to make the switch.
Jsfiddle