I am making a ul li element function like a select input from which user can select a color for the box.
Here's the code:
$(document).ready(function() {
$('.color-picker ul.color-list li.active .text').after('<span class="pull-right glyphicon glyphicon-menu-down"></span>');
$('.color-picker ul.color-list li').click(function() {
if ($(this).hasClass('active')) {
console.log(2);
$('.color-picker ul.color-list li').show();
} else {
console.log(1);
var color = $(this).find('.box').css('backgroundColor');
$('.color-picker .color-box').css({
'background-color': color
});
$('.color-picker ul.color-list li.active').removeClass('active');
$('.color-picker ul.color-list li').hide();
$(this).addClass('active');
$('.color-picker ul.color-list li.active').show();
$('.color-picker ul.color-list li .glyphicon').remove();
$('.color-picker ul.color-list li.active .text').after('<span class="pull-right glyphicon glyphicon-menu-down"></span>');
}
});
});
.color-picker {
display: flex;
margin: 20px;
border: 1px solid #d9d9d9;
padding: 10px;
width: 350px;
}
.color-picker .color-box {
display: inline-block;
background-color: black;
height: 50px;
width: 50px;
}
.color-picker ul.color-list {
display: inline-block;
margin: 0;
position: absolute;
}
.color-picker ul.color-list li {
list-style: none;
border: 1px solid #d9d9d9;
padding: 10px;
cursor: pointer;
width: 200px;
background-color: white;
}
.color-picker ul.color-list li.active {
display: block;
}
.color-picker ul.color-list li {
display: none;
}
.color-picker ul.color-list li .box {
content: "";
display: inline-block;
height: 10px;
width: 30px;
margin-right: 10px;
}
.color-picker ul.color-list li.red .box {
background-color: #c71212;
}
.color-picker ul.color-list li.blue .box {
background-color: #0d89d1;
}
.color-picker ul.color-list li.green .box {
background-color: #18c771;
}
.color-picker .as-select .select-default {
border: 1px solid #d9d9d9;
padding: 10px 20px;
width: 200px;
margin-left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-picker">
<div class="color-box">
</div>
<div class="as-select">
<ul class="color-list">
<li class="red active">
<span class="box"></span>
<span class="text">Red</span>
</li>
<li class="blue">
<span class="box"></span>
<span class="text">Blue</span>
</li>
<li class="green">
<span class="box"></span>
<span class="text">Green</span>
</li>
</ul>
</div>
</div>
jsFiddle
As you can see the active element remains at the same place.
(Select Blue color and click drop down again)
Is their a way I can make the selected element the first child of the list?
Leverage Flexbox then you don't need to shuffle elements at all. CSS can visually "move" them for you.
.color-picker ul.color-list {
display: inline-flex;
margin: 0;
flex-direction: column;
}
.color-picker ul.color-list li {
list-style: none;
border: 1px solid #d9d9d9;
padding: 10px;
cursor: pointer;
order:2;
width: 200px;
}
.color-picker ul.color-list li.active {
display: block;
order:1;
}
JSfiddle Demo
You can use .prependTo() to prepend the active li element to color picker element.
$(this).prependTo('.color-picker ul.color-list');
DEMO
You should use the .prepend() function.
This should work:
$('.color-list').prepend($(this));
Working JSFiddle
you can set the current element to the first place of the list with :
$('.color-picker ul.color-list').prepend($(this));
https://jsfiddle.net/ksxhwo43/
The way to make the selected element the first child of the list is detaching the li dom element of the selected item and pre-appending it in the ul dom element.
You are probably going to use:
https://api.jquery.com/detach/
"This method is useful when removed elements are to be reinserted into the DOM at a later time.
http://api.jquery.com/prepend/"
"insert at the beginning of each element in the set of matched elements"
Related
It's simple show and hide in javascript. If I put the click button above the div box the script works however if I put it beneath the div box it does not.
How do I make it so the order is
<div class="box">
<ul>
<li>
Phones
</li>
<li>
TV
</li>
</ul>
</div>
Show
$('.box').hide();
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
e.preventDefault();
$(this).next('.box').slideToggle('fast', function() {
$(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
});
});
});
Here's the DEMO
When your clicked element (a) is under the div it is unable to detect next(). Use siblings() instead.
Change
$(this).next('.box').slideToggle('fast', function() {
To
$(this).siblings('.box').slideToggle('fast', function() {
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
e.preventDefault();
$(this).siblings('.box').slideToggle('fast', function() {
$(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
});
});
});
body {
font: 12px/16px sans-serif;
margin: 10px;
padding: 0;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;
}
.clickme:hover {
text-decoration: underline;
}
.box {
background-color: #ccc;
border-radius: 4px;
color: #333;
margin: 5px 0;
padding: 5px 10px;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<ul>
<li>
Phones
</li>
<li>
TV
</li>
</ul>
</div>
Show
Your calling the next element with class of box, but their is no box class after the button if you put it below the list. Just reference the list by calling its class:
$('.box').slideToggle('fast', function() {
$(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
});
Hope this helps;
$.next()return the immediately followed siblings, therefore you cannot use that in the case.
You can try $.siblings() or $.prev()
$('.box').hide();
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) { e.preventDefault(); $(this).siblings('.box').slideToggle('fast', function() { $(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show'); });
});
});
body {
font: 12px/16px sans-serif;
margin: 10px;
padding: 0;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;
}
.clickme:hover {
text-decoration: underline;
}
.box {
background-color: #ccc;
border-radius: 4px;
color: #333;
margin: 5px 0;
padding: 5px 10px;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<ul>
<li>
Phones
</li>
<li>
TV
</li>
</ul>
</div>
Show
Description: Get the immediately following sibling of each element in
the set of matched elements. If a selector is provided, it retrieves
the next sibling only if it matches that selector
I have a horizontal responsive menu that works great, here is link to the page with it
I tried to make a new one with dropdown menus but can't get it to work. Instead of having a dropdown appear on hover, it shows the menus automatically in the line below. Here is link to codepen showing the errors http://codepen.io/mlegg10/pen/akLaVA
$(document).ready(function() {
$('nav').prepend('<div id="responsive-nav" style="display:none">Menu</div>');
$('#responsive-nav').on('click', function() {
$('nav ul').slideToggle()
});
$(window).resize(function() {
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display', 'block');
$('nav ul').hide()
$('#responsive-nav').show()
} else {
$('nav ul li').css('display', 'inline-block');
$('nav ul').show()
$('#responsive-nav').hide()
}
});
$(window).resize();
});
$(document).on('scroll', function() {
if ($(document).scrollTop() > 100) {
$('#nav').addClass('fixed')
} else {
$('#nav').removeClass('fixed')
}
});
body {
margin: 0;
font-family: Georgia;
}
#menu-bar {
width: 100%;
height: auto;
margin: 50px auto 0;
background-color: #ff4500;
text-align: center;
}
#header h1 {
padding: 15px 0;
margin: 0;
}
#nav {
background-color: #036;
text-align: center;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0
}
#nav ul li {
display: inline-block;
padding: 5px 0;
margin: 0;
}
#nav.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul li a {
padding: 0 5px;
text-decoration: none;
color: #fff;
}
nav ul li:hover {
background-color: #ff0000;
}
#responsive-nav {
cursor: pointer;
color: #fff;
font-family: Georgia;
font-weight: bold;
padding: 5px 0;
}
#content {
width: 90%;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 5px;
}
#drop-nav li ul li {
border-top: 0px;
#drop-nav li ul li {
border-top: 0px;
}
ul li a {
display: block;
background: #036;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #f00;
}
**this part is in the head tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>**
<header id="menu-bar">
<nav id="nav">
<ul>
<li>Home
</li>
<li>Accomodations
</li>
<li>Amenities
</li>
<li>Rates
</li>
<li>Links
<ul>
<li>Dropwdown 1
</li>
<li>Dropdown 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Your javascript code has lots of unclosed line endings - you are missing the semicolons quiet often.
Additionally, jQuery will apply nav ul to all elements it finds. Meaning if there is a second occurrence, which is the case in your case, it will be applied to that too.
Instead: you should give your level 0 menu a clean, identifiable class, which you can preciesly target:
<!-- Your new HTML Markup -->
<nav class="mother-of-all-dropdown-lists">
and then in your jQuery:
$('.mother-of-all-dropdown-lists').slideToggle();
Sorry, that I keep writing, there are jQuery selectors wrong as well:
The id / hashtag is missing, so..:
$('nav ul li').css('display','inline-block');
$('nav ul').show()
should be:
$('#nav ul li').css('display','inline-block');
$('#nav ul').show();
How to use animation while appending new element using jQuery? I went through couple of answers here but the same method does not work for me. I used show('show') and fadeIn('slow') but it does not seem that animates the new element.
$(document).ready(function() {
$('#add-item').click(add);
function add() {
var newItem = $('#new-item-text');
var span = $('<span>', {
class: 'remove',
click: remove
});
var li = $('<li>', {
class: 'todo-item',
text: newItem.val(),
append: span,
click: completed
});
if (newItem.val()) {
$('ul.todo-list').append(li, $('li.todo-new')).fadeIn('slow');
newItem.val('');
}
}
});
.todo-list {
list-style: none;
padding: 0px;
}
.todo-item {
border: 2px solid #444;
margin-top: -2px;
padding: 10px;
cursor: pointer;
display: block;
background-color: #ffffff;
}
.todo-new {
display: block;
margin-top: 10px;
}
.todo-new input[type='text'] {
width: 260px;
height: 22px;
border: 2px solid #444;
}
.todo-new a {
font-size: 1.5em;
color: black;
text-decoration: none;
background-color: #ffffff;
border: 2px solid #444;
display: block;
width: 24px;
float: right;
text-align: center;
}
.todo-new a:hover {
background-color: #0EB0dd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class='todo-list'>
<li class='todo-item'>4L 2% Milk
<span class='remove'></span>
</li>
<li class='todo-item'>Butter, Unsalted
<span class='remove'></span>
</li>
<li class='todo-new'>
<input id='new-item-text' type='text' />
<a id='add-item' href='#'>+</a>
</li>
</ul>
To animate, you should start by hiding the elements, for instance by setting:
display: none;
Then fadeIn() will animate and set display: block;
I'm trying to create a simple swappale CSS theme with a jQuery event handler.
As you can see, I was able to modify .outer but I don't know how to style the spans. The default theme doesn't need further customization, but I would like to change the color/size of the spans and apply a hover effect, etc. for 'mytheme'.
The HTML shouldn't be changed but the JS can be edited.
Any input is highly appreciated. How can I use [data-theme="mytheme"] with other elements?
Here's the JSFiddle
This is the HTML:
<div class="outer" data-theme="default">
<ul class="list">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>0</span></li>
</ul>
<input type="button" value="Swap Theme" id="btnSwapTheme" />
</div>
JS:
$(document).ready(function() {
//Swap Theme event handler
$('#btnSwapTheme').on('click', function(evt) {
var theme = $('div.outer').attr('data-theme');
if (theme == 'default') {
$('div.outer').attr('data-theme', 'mytheme');
} else {
$('div.outer').attr('data-theme', 'default');
}
});
});
CSS:
.outer {
text-align: center;
}
.outer input {
margin: 0.5em;
}
.outer[data-theme="default"] {
background-color: #c0c0c0;
}
.outer[data-theme="mytheme"] {
background-color: red;
}
ul.list {
width: 13em;
margin: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0;
list-style-type: none;
text-align: center;
}
ul.list li {
display: inline-block;
font-weight: bold;
border: 1px solid blue;
margin: .5em;
}
ul.list li span {
display: inline-block;
height: 3em;
width: 3em;
line-height: 3em;
cursor: pointer;
}
For example like this:
.outer[data-theme="mytheme"] span {
background-color: green;
}
.outer[data-theme="mytheme"] span:hover {
background-color: coral;
}
Demo: http://jsfiddle.net/6kyhbhus/1/
You just need to prefix any selector with .outer[data-theme="mytheme"] since this is wrapping container for your elements.
<ul class="checklist">
<li><span><cite></cite></span><b>List 1</b></li>
<li><span><cite></cite></span><b>List 2</b></li>
<li><span><cite></cite></span><b>List 3</b></li>
<li><span><cite></cite></span><b>List 4</b></li>
</ul>
<ul class="append-checklist">
</ul>
$('.checklist li').click(function () {
$(this).toggleClass("active-checklist");
});
.checklist li b
{
font-size: 14px;
font-weight: 400;
color: #555454;
position: relative;
top: -3px;
padding-left: 5px;
color:#a7a7a7;
}
.checklist li.active-checklist b
{
color: #202020;
font-size:inherit;
top:2px;
}
.checklist li,.active-checklist li
{
margin-bottom: 4px;
}
.checklist
{
font-family:helvetica;
font-size: 14px;
margin-left: 23px;
cursor: pointer;
list-style-type: none;
display: inline-block;
float: left;
margin-top: 15px;
padding:0;
}
.checklist li span
{
width: 16px;
height: 16px;
border-radius: 3px;
display: inline-block;
background-color: #f6f6f6;
border: 1px solid #c2c2c2;
}
.checklist li.active-checklist span
{
border: 1px solid #49a1d7;
}
.checklist li span cite
{
display: none;
}
.checklist li.active-checklist span cite
{
position: relative;
left: 2px;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 3px;
background-color: #49a1d7;
border: none;
}
I need to append the value of the checklist li to the list of the append-checklist once the checklist li has the class active and remove the value once active class is removed from the checklist li. Thanks in advance. Please refer to the fiddle. Demo
Try to .clone() the selected lis and then .append() it into the other UL as per your wish,
$('.checklist li').click(function () {
$(this).toggleClass("active-checklist");
$('ul.append-checklist').empty().append($(this).closest('ul').find('.active-checklist').clone())
});
DEMO
As per your new requirement use,
$('.checklist li').click(function () {
$(this).toggleClass("active-checklist");
$('ul.append-checklist').html($.map($(this).closest('ul').find('.active-checklist '),function(elem,i){ return "<li>" + $(elem).text() + '</li>'; }))
});
DEMO
Try this : check if clicked li has class="active-checklist" then make clone of it and add it to append-checklist, otherwise remove from append-checklist.
$('.checklist li').click(function () {
$(this).toggleClass("active-checklist");
if($(this).hasClass('active-checklist'))
$(this).clone().appendTo('.append-checklist');
else
$('.append-checklist').find('li:contains('+$(this).text()+')').remove();
});
Demo
This works however is not robust as if you have list items with the same text they will collide consider adding ids either via the data attribute in jQuery.
$('.checklist li').click(function () {
var me = $(this);
me.toggleClass("active-checklist");
if (me.hasClass('active-checklist')) {
me.clone().appendTo('.append-checklist');
} else {
// remove me
$('.append-checklist li:contains(' + me.text() + ')').remove();
}
});
Demo: http://jsfiddle.net/robschmuecker/hC35Y/3/