I have two drag and two drop zones that I'd like to keep exclusive from one another. I've been playing around with the connectWith argument unsuccessfully and was hoping to get some help connecting sortable_alpha to droppable_alpha and sortable_numbers to droppable_numbers. I also need to be able to use the .append function to add a delete button inside the drop divs which I have code for in the second chunk I realize there's lots of great JQuery draggable posts but couldn't find one on distinguishing separate drop zones so thanks for any help!
Drag Works but Not Drop
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable();
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
Working on an Answer
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable({
drop: function (event, ui) {
// take the id of the dropped block
// then create a new, unique id
// then append a delete button to the block
// inside the drop numbers
var draggableId = ui.draggable.attr("id");
var newid = getNewId(draggableId);
$(this).append("
<div>
<div>
<div class="form-group drop_area">
<label class="control-label" for="${newid}">${newid}</label>
<button class="delete">Delete</button>
</div>
</div>
</div>")
}
}
});
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
Related
I have created a custom CSS select and need help to make the #drop in form of a modal.
So that whenever a user clicks on the dropdown button, it will open a modal containing a list of options. And selecting a list will show information on that particular list option.
Also, the #drop div does not appear in the middle of the screen.
I'm new to JS and have managed to create a structure. I'm sharing the code below. Please help me with the modal so that the entire thing works perfectly.
Thanks in advance.
PS: If you think there's some easy way of doing this please add the code to the answer.
<!-- HTML -->
<div class="dropdown">
<button onclick="toggleDrop(document.querySelector('#drop'))" class="dropbtn"></button>
<div id="drop" class="dropdown-content d-none">
<ul>
<li>Click for Bird Name</li>
<li>Click for Animal Name</li>
</ul>
</div>
</div>
<div class="tabs">
<!-- Bird Name -->
<div tab-name="dl-tabOne" class="dl-tabcontent">
Parrot
</div>
<!-- Animal Name -->
<div tab-name="dl-tabTwo" class="dl-tabcontent d-none">
Lion
</div>
</div>
<!-- CSS -->
.d-none {
display: none;
}
.dropbtn {
display: block;
font-size: 40px;
font-weight: 700;
margin: auto;
width: auto;
outline: none;
border: none;
border-bottom: 2px solid ;
border-bottom-style: dotted;
height: 60px;
cursor: pointer;
overflow: hidden;
color: #150ee6;
background: none;
}
.dropdown {
position: relative;
margin: 30px 30px 10px;
text-align: center;
}
.dropdown-content {
position: absolute;
background-color: #fff;
min-width: 250px;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 5px 4px -5px rgba(0, 0, 0, 0.1);
z-index: 1;
text-align: left;
padding: 20px;
}
.dropdown-content ul {
padding: 0;
}
.dropdown-content li {
list-style-type: none;
border-bottom: 1px solid #dfe1e5;
}
.dropdown-content li:last-child{
border: none;
}
.dropdown-content a {
color: #0d0d21;
padding: 15px 10px;
font-size: 1rem;
text-decoration: none;
list-style-type: none;
display: block;
font-weight: 600;
}
.dropdown-content a:hover {
background-color: #f2f2f2;
}
.tabs {
max-width: 720px;
margin: 0 auto;
}
.dl-tab-abt{
margin-top: 25px !important;
}
<!-- JS -->
setButtonInnerText(document.querySelector(".dropbtn"))
function openPage(id, a) {
const p = document.querySelector("[tab-name='" + id + "']");
const tabs = document.querySelectorAll(".tabs .dl-tabcontent");
for (var x = 0; x < tabs.length; x++)
tabs[x].classList.add("d-none");
if (p !== null) {
document.querySelector(".dropbtn").innerHTML = a.innerHTML;
p.classList.remove("d-none");
}
}
function toggleDrop(drop) {
drop.classList.toggle("d-none");
drop.onclick = function (e) {
drop.classList.add("d-none");
}
}
function setButtonInnerText(btn) {
const firstOption = btn.parentElement.querySelector("#drop a:first-child");
btn.innerHTML = firstOption.innerHTML;
}
How to replace the selection in the class="selected"?
For example, if I select "Select 1" from drop down, it will become:
<span class="selected">Select 1</span>
and vice versa if select "Select 2" from drop down, it will become:
<span class="selected">Select 2</span>
html
<section class="data-tab">
<div class="rank-dropdown" data-id="item">
<span class="selected">Select 1</span>
<ul class="dropdown-list">
<li class="dropdown-item hide" data-id="item">Select 1</li>
<li class="dropdown-item">Select 2</li>
</ul>
</div>
<div id="item" class="rank-list-wrap">
added class show-origin
</div>
</section>
javascript
$(document).ready(function(){
$('.dropdown-list .dropdown-item').click(function(){
var tab_id = $(this).attr('data-id');
var parent = $(this).closest('.data-tab');
$(parent).find('.dropdown-item').removeClass('hide');
$(parent).find('.rank-list-wrap').addClass('show-origin');
$(this).addClass('hide');
$(parent).find("#"+tab_id).removeClass('show-origin');
})
})
jsfiddle: https://jsfiddle.net/e9nrzmfL/3/
To achieve this you can set the text of the related .selected to match that of the clicked dropdown item.
Also note that parent in your code is already a jQuery object so you don't need to wrap it again multiple times. Additionally, jQuery 1.9.1 is rather outdated. You should update to at least 1.12.4 if you still need to support IE9 and lower, ideally 3.x if not.
$(document).ready(function() {
$('.dropdown-list .dropdown-item').click(function() {
var $item = $(this);
var tab_id = $item.data('id');
var $parent = $item.closest('.data-tab');
$parent.find('.dropdown-item').removeClass('hide');
$parent.find('.rank-list-wrap').addClass('show-origin');
$parent.find("#" + tab_id).removeClass('show-origin');
$parent.find('.selected').text($item.text()); // set the selected text
$item.addClass('hide');
})
})
.rank-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
background-color: #fff;
cursor: default;
padding: 0 7px;
height: 22px;
line-height: 22px;
border: 1px solid #ccd0d7;
border-radius: 4px;
}
.rank-dropdown:hover {
border-radius: 4px 4px 0 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
}
.rank-dropdown .selected {
display: inline-block;
vertical-align: top;
}
.rank-dropdown .dropdown-list .dropdown-item:hover {
background-color: #e5e9ef;
}
.rank-dropdown .dropdown-list {
position: absolute;
width: 100%;
background: #fff;
border: 1px solid #ccd0d7;
border-top: 0;
left: -1px;
top: 6px;
z-index: 10;
display: none;
border-radius: 0 0 4px 4px;
padding-inline-start: 0px;
}
.rank-dropdown:hover .dropdown-list {
display: block;
}
.rank-dropdown .dropdown-list .dropdown-item {
cursor: pointer;
margin: 0;
padding: 3px 7px;
}
.rank-list-wrap {
height: 500px;
display: none;
}
.rank-list-wrap.show-origin {
display: block;
}
.dropdown-item.hide {
display: none;
}
li {
list-style: none;
}
a[href]:focus,
*:focus {
outline: none;
}
ol,
ul {
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="data-tab">
<div class="rank-dropdown" data-id="item">
<span class="selected">Select 1</span>
<ul class="dropdown-list">
<li class="dropdown-item hide" data-id="item">Select 1</li>
<li class="dropdown-item">Select 2</li>
</ul>
</div>
<div id="item" class="rank-list-wrap">
added class show-origin
</div>
</section>
I just started doing some jquery and php and I followed the tutorial from Udemy on how to build some php web site. Now I want to animate the li elements so that their border-radius changes on mouseenter().
Here is my code:
$(document).ready(function() {
$('.list_el').mouseenter(function() {
$(this).animate(borderRadius(300), 200);
});
function borderRadius(radius) {
return {
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
borderBottomLeftRadius: radius,
borderBottomRightRadius: radius,
};
}
});
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
But when I enter the mouse on any of the li element (menu,contact..) it doesn't animate, I mean when I press F12 and target the li it shows me that the border-radius is changing but on the website it doesn't curve the border. So what am I doing wrong?
Just in case :
The animation works, it just has no visual effect: your a elements contains all the style, you'll see some change if you animate the a's border-radius or if you put overflow: hidden for list_el
$('.list_el').mouseenter(function() {
$(this).find("a").animate(borderRadius(300), 200);
});
this will work for instance
http://codepen.io/anon/pen/PGPrgY
You should use mouse enter and leave event together
$('.list_el').on("mouseenter", function() {
$(this).find("a").animate(borderRadius(300), 200);
}).on("mouseleave", function() {
$(this).find("a").animate(borderRadius(0), 200);
});
On any modern browser, you can also achieve this transition with simply:
.list_el:hover a {
border-radius: 300px;
transition: 0.2s;
}
That animates the border-radius of the contained a element over a period of 200ms when the .list_el containing the a is hovered.
Note that this assumes you were planning to add a mouseleave handler that undoes the border-radius. It doesn't apply if you were planning to leave the updated radius in place when the mouse leaves the element.
Example using 1s rather than 0.2s so it's more obvious:
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
.list_el:hover a {
border-radius: 300px;
transition: 1s;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I don't want the both menus to be able to be open at the same time. What I want: If one menu is open and you click the next one the first one will close. I include my jsfiddle so you can get a better understanding of what I am looking for, jQuery 2.1 is enabled.
Take a look here:
https://jsfiddle.net/blomberg/y0bxL2sL/1/
$(document).ready(function() {
$.fn.dropDown = function(hiddenClass) {
var that = this;
$('html').click(function() {
that.each(function() {
$(this).find('.smaller_ul_list').addClass(hiddenClass);
});
});
return this.each(function() {
var $this = $(this);
$this.data('desktop__menuTrigger', true);
$this.find('.smaller_ul_list').addClass(hiddenClass);
$this.click(function(e) {
$(this).find('.smaller_ul_list').toggleClass(hiddenClass);
e.stopPropagation();
if ($(e.target).parent().data('desktop__menuTrigger')) {
e.preventDefault();
}
});
});
}
$('.desktop__menu').dropDown('hidden');
});
.main-hamburger-menu {
display: block;
width: 28px;
float: left;
height: 100%;
margin-left: 14px;
}
/* DESKTOP MENU */
.hidden {
display: none
}
.desktop__menu {
.bigger_ul_list {
.smaller_ul_list {
width: 200px;
border: 2px solid gray;
border-bottom: none;
/* height: 350px; */
background: gray;
/* overflow-y: scroll; */
margin-top: -20px;
/* border-radius: 8px; */
li {
clear: both;
height: 47px;
border-bottom: 2px solid gray;
line-height: 47px;
letter-spacing: .3px;
padding-right: 15px;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
&: hover {
background: #fff;
}
}
li:first-child {
border-radius: 8px 8px 0 0;
}
img {
width: 30px;
}
a {
color: gray;
text-decoration: none;
li {
border-bottom: 2px solid gray;
line-height: 47px;
letter-spacing: .3px;
padding-right: 15px;
text-transform: uppercase;
font-size: 15px;
color: black;
&: hover {
background: #fff;
}
}
}
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="main-hamburger-menu">
<div class="desktop__menu">
<ul class="bigger_ul_list">
<li class="dropdown__desktop">Click me
<ul class="smaller_ul_list">
<li>test</li>
</ul>
</li>
</ul>
</div>
</div>
<br>
<br>
<br>
<div class="main-hamburger-menu">
<div class="desktop__menu">
<ul class="bigger_ul_list">
<li class="dropdown__desktop">Click me
<ul class="smaller_ul_list">
<li>test</li>
</ul>
</li>
</ul>
</div>
</div>
You can achieve this by hiding all other .smaller_ul_list elements when toggling the intended one. Try this:
$this.click(function(e) {
var $smallerUlList = $(this).find('.smaller_ul_list').toggleClass(hiddenClass);
$('.smaller_ul_list').not($smallerUlList).addClass(hiddenClass);
e.stopPropagation();
if ($(e.target).parent().data('desktop__menuTrigger')) {
e.preventDefault();
}
});
Updated fiddle
I am making a header for a page, but from some point I noticed that the text-family is being changed when the dropdown menu was being launched(Safari 8). Then I tried to open it in Chrome, where it didn't changed when launching jQuery function. But when I tried to change the font, but it didn't make any difference. It did't changed the font at all. So even though I don't have specified the font for the header tabs, it's still formatted. Thanks in advance for help. I am sorry if it's just some manor mistake, I am quite new to this.
$(document).ready(function() {
$('.hdr-drpdwn-menu').hide();
$('.hdr-list-more').hover(
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
},
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
}
);
});
/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
margin: 0;
padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}
ul, li {
list-style: none;
}
a, a:active, a:visited {
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #5a5a5a;
font-style: normal;
}
#header .hdr-nav-opt {
float: left;
margin-left: 10px;
background-color: transparent;
}
#header .hdr-nav-soc {
float: right;
margin-right: 10px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
display: inline;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
position: relative;
width: 120px;
margin-left: 40px;
background-color: #5a5a5a;
box-shadow: 2px 2px 10px #888888;
border: 1px solid #888888;
}
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<!-- The Global Header of the website-->
<div id="header">
<!-- The Left part of the header-->
<div class="hdr-nav-opt">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
<li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
<!-- The Dropdown Menu-->
<div class="hdr-drpdwn-menu">
<ul class="hdr-drpdwn-list">
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- The Right part of the header-->
<div class="hdr-nav-soc">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
</ul>
</div>
</div>
I don't know which font you are using now, but maybe you need a callback in your styles
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
and it will works all the browsers.