I am using a tutorial I found online to fit my needs for a project. I would like to add in functional buttons that select between days (changing "active" days in calendar) and select between months.
My first question is how do I code the prev day and next day buttons to change the previous and next day to active according to css?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
body {
font-family: Verdana, sans-serif;
}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .prevDay {
float: left;
}
.month .next {
float: right;
padding-top: 10px;
}
.month .nextDay {
float: right;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size: 12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
#media screen and (max-width: 720px) {
.weekdays li,
.days li {
width: 13.1%;
}
}
#media screen and (max-width: 420px) {
.weekdays li,
.days li {
width: 12.5%;
}
.days li .active {
padding: 2px;
}
}
#media screen and (max-width: 290px) {
.weekdays li,
.days li {
width: 12.2%;
}
}
</style>
<style>
.pM_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #cc9900;
background-color: #ffff00;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.pM_button:hover {
background-color: #ffff00
}
.pM_button:active {
background-color: #ffcc00;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.nM_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #9900cc;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.nM_button:hover {
background-color: #9900cc
}
.nM_button:active {
background-color: #660066;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.nD_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #ff0000;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.nD_button:hover {
background-color: #ff0000
}
.nD_button:active {
background-color: #800000;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.pD_button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #ffffff;
background-color: #33cc33;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.pD_button:hover {
background-color: #33cc33
}
.pD_button:active {
background-color: #009900;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body onkeydown="GetKey()">
<div class=" month ">
<ul>
<li class="prev ">
<button class="pM_button ">Prev Month</button>
</li>
<li class="prevDay ">
<button class="pD_button ">Prev Day</button>
</li>
<li class="next ">
<button class="nM_button ">Next Month</button>
</li>"
<li class="nextDay ">
<button class="nD_button ">Next Day</button>
</li>
<li style="text-align:center ">
August
<br>
<span style="font-size:18px ">2016</span>
</li>
</ul>
</div>
<ul class="weekdays ">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days ">
<li><span class="active ">1</span>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
<script type="text/javascript ">
function GetKey(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
//var character = String.fromCharCode(code);
setTimeout('ShowTree(' + code + ');', 100);
}
function nextDay() {
}
function ShowTree(character, k) {
//Main Menu Key
if (character == 106) {
cWindow.close();
}
//Close Key
if (character == 111) {
alert(" Key: / ");
responsiveVoice.speak("Close ", "UK English Male ");
}
//PageUP Key, next month
if (character == 98) {
alert(" Key: 2 ");
responsiveVoice.speak("Page Up ", "UK English Male ");
}
//PageDOWN key, previous month
if (character == 99) {
alert(" Key: 3 ");
responsiveVoice.speak("Page Down ", "UK English Male ");
}
//Previous Key, Previous Day
if (character == 65) { //keypad key 101
responsiveVoice.speak("Previous ", "UK English Male ");
//alert(" Key: 5 ");
}
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(.days.active++);
//alert(" Key: 6 ");
}
//Select Key
if (character == 83) { //keypad key 104
responsiveVoice.speak("Select ", "UK English Male ");
}
//alert(" Key: 8 ");
}
</script>
</body>
</html>
You can easily add the active class to any DOM element by using addClass("class") and remove the class with removeClass("class"), provided you're using jQuery.
So if you wish to mark the pD_button as active, you can do it like this with jQuery
$(".pD_button").addClass("active");
If you wish to accomplish this with vanilla JavaScript you would have to write your own functions that add and remove a class.
You could do that with
classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
or
className https://developer.mozilla.org/en-US/docs/Web/API/Element/className.
This approach is better than using the :active pseudo-class in CSS.
The :active pseudo-class is triggered when the mouse is being clicked, but only while the mouse button is held down. That means after you release the mouse click, :active is turned off. By using the approach mentioned above you just add another class when an onclick event happens to get the desired behavior.
var prevButton = $(".pD_button");
prevButton.on("click", function() {
if (!prevButton.hasClass("active")) {
prevButton.addClass("active");
} else /*if (prevButton.hasClass("active"))*/ {
prevButton.removeClass("active");
}
});
You can check it out here: https://jsfiddle.net/cqm26q1n/.
It is important that the .active in your CSS comes after the .pD_button class, so that it overwrites its CSS when the active class get's attached to it.
EDIT:
Use the approach I suggested combined with jQuery .keydown(handler):
var prevButton = $(".pD_button");
prevButton.on("keydown", function(e) {
if (e.which === 102 || e.which === 68) {
if (!prevButton.hasClass("active")) {
prevButton.addClass("active");
} else /*if (prevButton.hasClass("active"))*/ {
prevButton.removeClass("active");
}
}
});
Check the documentation of keydown here.
Assuming you are jQuery ( noticing presence of $ sign and .click event), There are couple of errors in this section you wrote.
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(.days.active++);
//alert(" Key: 6 ");
}
More specifically in this like $(".pD_button ").click(.days.active++);
General jQuery event works like, $("SELECTOR").EVENT(CALLBACK_FUNCTION);
So, in your case, to go to next date, the code should be like
//Next Key, Next Day
if (character == 68) { //keypad key 102
responsiveVoice.speak("Next ", "UK English Male ");
$(".pD_button ").click(function(e){
$('ul.days').find("li.active").removeClass('active').next().addClass('active');
e.preventDefault();
});
//alert(" Key: 6 ");
}
Similarly, to go make previous date active, you just need to use .after() method instead of .next() at this line $('ul.days').find("li.active").removeClass('active').next().addClass('active');
To know more about jQuery .next() methods, check the links
https://api.jquery.com/click/ to know about .click event
Related
In my site I made a simple dropdown menu, but my problem is that it won't close if mouseleave happens on the <span> that triggers the dropdown.
Here is my code:
//Find the dropdown span
var header = document.getElementById('drop');
//Find the ul with the links
var ul = document.getElementById('nav-dropdown');
//Get the width and apply it to the dropdown items
var width = drop.getBoundingClientRect().width;
ul.style.minWidth = width + "px";
//Round the corners on the last link
var links = document.getElementsByClassName('dropdown-link');
links[links.length - 1].style.borderRadius = "0 0 7px 7px";
var open = 0;
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
//What I've tried to fix it:
/*
header.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
});
*/
/*Stylesheet for this stuff*/
* {
font-family: arial;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
text-decoration: none;
list-style: none;
}
a:visited {
color: white;
}
a,
#drop {
color: white;
}
a:hover {
color: coral;
}
.header-links-container {
position: relative;
top: 0;
background: rgb(63, 83, 95);
width: 100%;
height: 80px;
opacity: .8;
z-index: 999;
}
.title {
font-weight: bold;
font-size: 30px;
padding: 20px 50px;
position: relative;
float: left;
color: white;
}
.header-links {
position: relative;
float: right;
vertical-align: middle;
}
.nav-links {
margin: auto;
padding-top: 20px;
padding-right: 30px;
}
.nav-link {
position: relative;
float: right;
padding: 0 20px;
font-size: 23px;
padding: 5px 10px;
margin: 5px;
background: #4471ba;
border-radius: 7px;
}
.nav-link:hover {
background: #4480ba;
color: #d1d1d1;
}
#nav-dropdown {
display: none;
margin-top: 42px;
margin-left: 5px;
position: absolute;
}
.dropdown-link {
color: black;
background-color: #ccc;
padding: 5px 10px;
}
.dropdown-link:hover {
color: #000;
background-color: #a7a7a7;
}
.dropdown-link:active {
color: white;
background-color: #3b8cfa;
}
<div class="header-links-container">
<h2 class="title">Title</h2>
<div class="header-links">
<ul class="nav-links">
<li class="nav-link">Photo Gallery</li>
<li class="nav-link">SLAP</li>
<li id="drop" class="nav-link"><span>Dropdown</span></li>
<ul id="nav-dropdown" class="jim">
<a href="#">
<li class="dropdown-link">Link 1</li>
</a>
<a href="#">
<li class="dropdown-link">Link 2</li>
</a>
<a href="#">
<li class="dropdown-link">Longer Link</li>
</a>
<a href="#">
<li class="dropdown-link">Vacuum</li>
</a>
</ul>
</ul>
</div>
</div>
<p>
Relavent JS lines start at Line 16
</p>
And here is the fiddle that might make more sense: https://jsfiddle.net/dLw1hu5n/6/
I've tried closing the dropdown like in the last code block, but then it won't stay open when you go to hover over the links. I've also tried making the menu close when the mouse hovers over the navbar div, but no luck there either.
Can I fix this or do I need to start from square 1?
I would prefere to solve this via css. However, in your case you can try the following:
function displayDropdown() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
}
function hideDropdown() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
}
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
displayDropdown();
});
ul.addEventListener("mouseover", function() {
displayDropdown();
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
hideDropdown();
});
header.addEventListener("mouseleave", function() {
hideDropdown();
});
Your JS is fine but your event listener for mouseleave needs to be on the enclosing div. This way your element stays open until you hover outside of the header
t.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
What is t?
var t = document.getElementById(t);
What element has id T?
Try this fiddle to find out https://jsfiddle.net/dLw1hu5n/12/
I have this piece of code.
HTML:
<header<% if ( current.source === 'features' || current.path[0] === 'index' || current.source !== 'customers' ) { %> class="header-white"<% } %>>
<div class="row">
<div class="small-3 columns">
<div class="logo">
<a href="/">
<svg class="handsontable-logo">
<use xlink:href="#handsontable-logo"></use>
</svg>
</a>
<a href="//github.com/handsontable/handsontable" id="github-star" class="star-counter" target="_blank">
<svg>
<use xlink:href="#github-squid"></use>
</svg>
<div class="github-star">
<div class="triangle"></div>
<div data-bind="starsCount">-</div>
</div>
</a>
</div>
</div>
<div class="small-9 columns text-right">
<nav class="mobile-inactive">
<a href="#" id="mobile-nav-menu">
<svg>
<use xlink:href="#open-mobile-nav"></use>
</svg>
</a>
<ul>
<li class="mobile-only">Home</li>
<li>Features</li>
<li><a
href="/examples.html?manual-resize&manual-move&conditional-formatting&context-menu&filters&dropdown-menu&headers">
Examples
</a></li>
<li>Download</li>
<li>Pricing</li>
<li>Case studies</li>
<li>Developers</li>
<li class="mobile-only">Resellers</li>
<li class="mobile-only">Blog</li>
<li class="mobile-only">Contact</li>
<li class="news">
<svg>
<use xlink:href="#bell"></use>
</svg>
</li>
<li><a href="//my.handsontable.com/sign-in.html"
class="btn size-small bg-green-light bg-lighten text-white">
Sign in
</a>
</li>
</ul>
</nav>
</div>
</div>
SCSS:
header {
#include absolute-top-left (0, 0);
width: 100%;
padding: 34px 0 0;
z-index: 1;
.logo {
#include relative-top-left (-3px, 0);
#media only screen and (min-width: $largeWidth) {
#include relative-top-left (10px, 0);
}
svg {
&.handsontable-logo {
#include rectangle (130px, 25px);
fill: $baseGray;
}
}
}
/* Begin: This allows to stretch the mobile menu to 100% of width of the viewport */
& > .row > .columns:last-child {
position: static;
}
/* End */
nav {
& > a {
#include absolute-top-right (4px, 5px);
padding: 20px;
display: block;
z-index: 11;
#media only screen and (min-width: $largeWidth) {
display: none;
}
svg {
#include square (28px);
fill: $baseGray;
}
}
ul {
display: none;
#media only screen and (min-width: $largeWidth) {
display: block;
}
li {
padding: 0 19px;
display: inline-block;
&:last-child {
padding-right: 0;
}
&.mobile-only {
display: none;
}
&.news {
padding-right: 32px;
position: relative;
svg {
#include square (18px);
#include relative-top-left (4px, 0);
fill: $baseGray;
}
#HW_badge_cont {
#include absolute-top-left (0, 13px);
#HW_badge {
#include square (12px);
#include relative-top-left (0, 0);
line-height: 13px;
background-color: $brandRedActive;
&.HW_softHidden {
opacity: .4;
background-color: $brandVibrantGreenActive;
}
}
}
}
a, a:hover, a:active, a:visited {
font-size: 13px;
color: $baseGray;
}
a:hover {
color: $darkGray;
}
}
}
}
/* Menu visible only on mobile devices */
nav.mobile-active {
#media only screen and (min-width: $largeWidth) {
display: none;
}
& > a {
svg {
fill: $darkGray;
}
}
ul {
#include absolute-top-left (12px, 2%);
width: 96%;
padding: 66px 0 8px;
display: block;
text-align: center;
border-radius: 4px;
z-index: 10;
box-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 18px rgba(0, 0, 0, 0.15);
background: #fff;
li {
width: 49%;
padding: 10px 0;
&.mobile-only {
display: inline-block;
}
a, a:hover, a:active, a:visited {
font-size: 18px;
color: $brandBlue;
&.btn {
width: 100%;
color: #fff;
font-size: 18px;
}
}
&:last-child {
width: 90%;
padding-top: 40px;
}
&.news {
display: none;
}
}
}
}
&.header-white {
.logo {
.github-star {
border: 1px solid $darkWhite;
color: $darkWhite;
font-weight: 600;
.triangle {
border-right-color: $darkWhite;
}
}
svg {
fill: $darkWhite;
}
}
a, a:hover, a:active, a:visited {
color: #fff;
}
a:hover:not(.btn) {
color: $brandFeatherBlue;
}
svg, .news svg {
fill: #fff;
}
}
}
My problem is that I want to change navigation color to customers page only.
The problem is that all subpages within the customer's category are also having recolored navigation style.
So:
customers === white
| subfolder === white
| subfolder === white
| subfolder === white
And I want to keep the subfolders in the customer's directory with the original color of navigation.
Any help please, I'm not a JS dev at the moment I'm trying to understand how does it work?
Cutting it down to the relevant bits you've got this is your SCSS:
header {
&.header-white {
a, a:hover, a:active, a:visited {
color: #fff;
}
}
}
That's going to set all your links to white.
Assuming this is your 'customers' section:
<li>Case studies</li>
you can add a class to single it out:
<li><a class="customers" href="/customers">Case studies</a></li>
and then update the CSS accordingly:
header {
&.header-white {
a.customers {
&, &:hover, &:active, &:visited {
color: #fff;
}
}
}
}
Ok problem solved:
I was approaching it in a wrog way, instead trying to link the exact path like here:
<header<% if ( current.source === 'features' || current.path[0] === 'index' || current.source !== 'customers' ) { %> class="header-white"<% } %>>
All I had to do was identify the exact length of the link like here:
<header<% if ( current.source === 'features' || current.path[0] === 'index' || current.path[1] === 'index' ) { %> class="header-white"<% } %>>
It worked for me the only problem here was identifying subpages name and link length.
This is something I have tried to do time and time again. I have the following column (named type) in my database called pets:
type
DOG
DOG
CAT
CAT
DOG
What I am trying to do is to create a filter, so I can choose if I want to display only the dogs, only the cats or both together. This should be done live (using AJAX) - so I don't have to reload the webpage when I choose the filter I want.
I have come up with this for the AJAX request:
$(document).ready(function() {
$('li.active').on('click', function() {
$value=$(this).val();
$.ajax({
type : 'get',
url : '{{$petname->pet_code}}',
data : {'search':$value},
success:function(data) {
$('#results-of-ajax-search').html(data);
}
});
});
});
This unfortunately did not work as intended. I am guessing I was unable to target the necessary value of the chosen filter. I am using this for the front-end part of this question:
$.fn.ulSelect = function() {
var ul = $(this);
if (!ul.hasClass('zg-ul-select-type')) {
ul.addClass('zg-ul-select-type');
}
// SVG arrow
var arrowtype = '<svg id="ul-arrowtype" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" viewBox="0 0 32 32"><line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/><path d="M4.131 8.962c-0.434-0.429-1.134-0.429-1.566 0-0.432 0.427-0.432 1.122 0 1.55l12.653 12.528c0.434 0.429 1.133 0.429 1.566 0l12.653-12.528c0.432-0.429 0.434-1.122 0-1.55s-1.136-0.429-1.566-0.002l-11.87 11.426-11.869-11.424z" fill="#111"/></svg>';
$('li:first-of-type', this).addClass('active').append(arrowtype);
$(this).on('click', 'li', function(event) {
// Remove div#selected if it exists
if ($('#selected--zg-ul-select-type').length) {
$('#selected--zg-ul-select-type').remove();
}
ul.before('<div id="selected--zg-ul-select-type">');
var selected = $('#selected--zg-ul-select-type');
$('li #ul-arrowtype', ul).remove();
ul.toggleClass('active');
ul.children().removeClass('active');
$(this).toggleClass('active');
var selectedText = $(this).text();
if (ul.hasClass('active')) {
selected.text(selectedText).addClass('active').append(arrowtype);
} else {
selected.text('').removeClass('active');
$('li.active', ul).append(arrowtype);
}
});
$(document).on('click', function(event) {
if ($('ul.zg-ul-select-type').length) {
if (!$('ul.zg-ul-select-type').has(event.target).length == 0) {
return;
} else {
$('ul.zg-ul-select-type').removeClass('active');
$('#selected--zg-ul-select-type').removeClass('active').text('');
$('#ul-arrowtype').remove();
$('ul.zg-ul-select-type li.active').append(arrowtype);
}
}
});
};
$('#be-select-type').ulSelect();
ul.zg-ul-select-type {
position: relative;
outline: none;
text-align: center;
margin: 0 auto;
width: 250px;
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
padding: 0;
overflow: auto;
}
ul.zg-ul-select-type li {
outline: none;
text-align: left;
background-color: #fff;
display: none;
padding: 15px;
}
ul.zg-ul-select-type li.active {
align-items: center;
border: 1px solid #ccc;
border-radius: 3px;
color: #111;
display: flex;
justify-content: space-between;
}
ul.zg-ul-select-type.active li {
border: none;
outline: none;
box-shadow: none;
display: block;
}
ul.zg-ul-select-type.active li:hover {
background: #f1f1f1;
}
ul.zg-ul-select-type.active li.active:hover {
background: #f1f1f1;
}
#selected--zg-ul-select-type {
outline: none;
background-color: #fff;
margin: 0 auto;
text-align: center;
width: 250px;
align-items: center;
box-sizing: border-box;
color: #111;
display: flex;
justify-content: space-between;
}
#selected--zg-ul-select-type.active {
border: 1px solid #ccc;
border-radius: 3px;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="data-control">
<ul id="be-select-type" tabindex="0">
<li><span class="filter-text" id="filter-type-reset">Filter by Type</span></li>
<li><span class="filter-text" id="filter-type-cat">Dog</span></li>
<li><span class="filter-text" id="filter-type-dog">Cat</span></li>
</ul>
</span>
If you run that code, it creates the front-end select list and adds a class of active to the selected value in the list.
For the Laravel backend controller, I am guessing you would have to add a where statement to a DB query and use an = to get and filter the value of the $request.
Basically, the correct answer for this question would be to create an AJAX request to my controller.
In your first block of code, when you try to get li element's "value" you must use .text() - if you want to get just text or .html() - if you want to get inner HTML :
$(document).ready(function() {
$('li.active').on('click', function() {
var $value=$(this).text();
$.ajax({
type : 'get',
url : '{{$petname->pet_code}}',
data : {'search':$value},
success:function(data) {
$('#results-of-ajax-search').html(data);
}
});
});
});
EDITED:
As a quick fix for ur problem, u can remove above block of code and use ur front-end part code with changes. A have added a snippet :
$(function(){
$.fn.ulSelect = function() {
var ul = $(this);
if (!ul.hasClass('zg-ul-select-type')) {
ul.addClass('zg-ul-select-type');
}
// SVG arrow
var arrowtype = '<svg id="ul-arrowtype" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" viewBox="0 0 32 32"><line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""/><path d="M4.131 8.962c-0.434-0.429-1.134-0.429-1.566 0-0.432 0.427-0.432 1.122 0 1.55l12.653 12.528c0.434 0.429 1.133 0.429 1.566 0l12.653-12.528c0.432-0.429 0.434-1.122 0-1.55s-1.136-0.429-1.566-0.002l-11.87 11.426-11.869-11.424z" fill="#111"/></svg>';
$('li:first-of-type', this).addClass('active').append(arrowtype);
$(this).on('click', 'li', function(event) {
// Remove div#selected if it exists
if ($('#selected--zg-ul-select-type').length) {
$('#selected--zg-ul-select-type').remove();
}
ul.before('<div id="selected--zg-ul-select-type">');
var selected = $('#selected--zg-ul-select-type');
$('li #ul-arrowtype', ul).remove();
ul.toggleClass('active');
ul.children().removeClass('active');
$(this).toggleClass('active');
var selectedText = $(this).text();
if (ul.hasClass('active')) {
selected.text(selectedText).addClass('active').append(arrowtype);
} else {
selected.text('').removeClass('active');
$('li.active', ul).append(arrowtype);
/* AJAX GET REQUEST */
if(!$(this).is('li:first-of-type')){
$.ajax({
type : 'get',
url : '{{$petname->pet_code}}',
data : {'search':selectedText},
success:function(data) {
$('#results-of-ajax-search').html(data);
}
});
}
/* AJAX GET REQUEST ENDS */
}
});
$(document).on('click', function(event) {
if ($('ul.zg-ul-select-type').length) {
if (!$('ul.zg-ul-select-type').has(event.target).length == 0) {
return;
} else {
$('ul.zg-ul-select-type').removeClass('active');
$('#selected--zg-ul-select-type').removeClass('active').text('');
$('#ul-arrowtype').remove();
$('ul.zg-ul-select-type li.active').append(arrowtype);
}
}
});
};
$('#be-select-type').ulSelect();
});
ul.zg-ul-select-type {
position: relative;
outline: none;
text-align: center;
margin: 0 auto;
width: 250px;
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
padding: 0;
overflow: auto;
}
ul.zg-ul-select-type li {
outline: none;
text-align: left;
background-color: #fff;
display: none;
padding: 15px;
}
ul.zg-ul-select-type li.active {
align-items: center;
border: 1px solid #ccc;
border-radius: 3px;
color: #111;
display: flex;
justify-content: space-between;
}
ul.zg-ul-select-type.active li {
border: none;
outline: none;
box-shadow: none;
display: block;
}
ul.zg-ul-select-type.active li:hover {
background: #f1f1f1;
}
ul.zg-ul-select-type.active li.active:hover {
background: #f1f1f1;
}
#selected--zg-ul-select-type {
outline: none;
background-color: #fff;
margin: 0 auto;
text-align: center;
width: 250px;
align-items: center;
box-sizing: border-box;
color: #111;
display: flex;
justify-content: space-between;
}
#selected--zg-ul-select-type.active {
border: 1px solid #ccc;
border-radius: 3px;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="data-control">
<ul id="be-select-type" tabindex="0">
<li><span class="filter-text" id="filter-type-reset">Filter by Type</span></li>
<li><span class="filter-text" id="filter-type-cat">Dog</span></li>
<li><span class="filter-text" id="filter-type-dog">Cat</span></li>
</ul>
</span>
I've got a simple to-do list app. To-do items are inserted by jQuery as <li> items. When they're checked off, they're removed from #todolist and prepended to #donelist. I want to let the user replace to-do items they've accidentally checked off, hence the .on handler for #donelist .checkbox elements, but it's not working. I've been puzzling over this for an embarrassingly long amount of time. How can I get the click handler working for #donelist .checkboxes?
HTML:
<div id="topform">
<input type="text" id="task" placeholder=" New task...">
</div>
<ul id="todolist">
</ul>
<ul id="donelist">
</ul>
JS:
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$('input').keypress(function (e) {
if (e.which == 13) {
addTask(e);
}
});
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
alert('hey buddy');
}
Full CSS:
html,
body {
margin: 0;
padding: 0;
background-color: #313131;
font-family: 'Helvetica', sans-serif;
}
#task {
width: 98%;
margin: 5px auto 7px auto;
padding: 0;
display: block;
height: 45px;
border: none;
border-radius: 2px;
font-size: 25px;
background-color: #F7F7F7;
}
ul {
margin: 0 auto 0 auto;
padding: 0;
width: 98%;
}
li {
list-style-type: none;
padding: 0;
margin: 5px auto 0 auto;
width: 100%;
height: 45px;
line-height: 45px;
position: relative;
font-size: 25px;
border-radius: 2px;
background-color: #F7F7F7;
}
#donelist li {
opacity: .5;
text-decoration: line-through;
}
.todotask {
margin-left: 7px;
}
.checkbox {
height: 31px;
width: 31px;
border-radius: 2px;
background-color: #C1C1C1;
position: absolute;
right: 7px;
top: 7px;
}
checkTask() works just fine, which is what really confuses me. checkTask() is called when the user clicks on a dynamically inserted element (a div in a li that's inserted by addTask(). Why doesn't replaceTask() fire as well?
Having the corresponding HTML in the OP would have helped, so I've had to guess a bit about how the structure, but here's a working example of what I think you're looking for:
HTML
<h1>ADD</h1>
<input id="task"></input>
<button id="add">Add</button>
<h1>TODO</h1>
<ul id="todolist">
<li><span class='todotask'>" Take out the garbage "</span><div class='checkbox'></div></li>
<li><span class='todotask'>" Do the dishes "</span><div class='checkbox'></div></li>
</ul>
<h1>DONE</h1>
<ul id="donelist">
</ul>
CSS
.checkbox{
width: 15px;
height: 15px;
background-color: black;
display: inline-block;
cursor: pointer;
}
JavaScript inside document.ready()
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$("#add").click(addTask);
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
var listItem = $(this).parent();
listItem.remove();
$('#todolist').prepend(listItem)
}
I am having a problem creating a Tab inside my already existing tab. The tab I have right now can be found http://jakobmillerwt.com/scripts.html. What it does right now is that I can tab between All-Knight-Paladin-Mage and open up alternatives underneath. What I want to do is to create a tab for each of the links inside the nav.
For instance. I press Knight and then open up links Killer Caiman, Blue Djnn and Quara. When I press any of those, I want the tab to slide to the side like the main tab does and it will show a div over the content inside.
<ul class="nav">
<li class="nav-one">All</li>
<li class="nav-two">Knight</li>
<li class="nav-three">Paladin</li>
<li class="nav-four last">Mage</li>
</ul>
<div class="list-wrap">
<ul id="featured">
<li>[30+] Terramite - Farmine </li>
<li>[30+] Chakoya - Svargrond</li>
</ul>
<ul id="core" class="hide">
<li>[100+] Killer Caiman - Farmine</li>
<li>[100+] Blue Djinn - Yalahar</li>
<li>[140+] Quara - Hydra Island</li>
</ul>
<ul id="jquerytuts" class="hide">
<li>Stuff in here!</li>
</ul>
<ul id="classics" class="hide">
<li>Stuff in here!</li>
</ul>
</div> <!-- END List Wrap -->
Here is the HTML code I have right now.
#example-one {
background: #E1E1E1;
padding: 10px;
margin: 0 0 15px 0;
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
width:420px;
border-radius:6px;
margin-left:auto;
margin-right:auto;
border:1px solid #CCC;
}
#example-one .nav { overflow: hidden; margin: 0 0 10px 0;}
#example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 14px; text-align: center; border: 0; border-radius:3px; font-family:Arial, Helvetica, sans-serif;}
#example-one .nav li a:hover { background-color: #111; }
#example-one ul { list-style: none; text-decoration:none;}
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; text-decoration:none;}
#example-one ul li a:hover, #example-one ul li a:focus { background: #999; color: white; border-radius: 3px; }
#example-one ul li:last-child a { border: none; }
#example-one li.nav-one a.current, ul.All li a:hover { background-color: #03F; color: white; }
#example-one li.nav-two a.current, ul.Knight li a:hover { background-color: #03F; color: white; }
#example-one li.nav-three a.current, ul.Paladin li a:hover { background-color: #03F; color: white; }
#example-one li.nav-four a.current, ul.Mage li a:hover { background-color: #03F; color: white; }
The CSS.
(function($) {
$.organicTabs = function(el, options) {
var base = this;
base.$el = $(el);
base.$nav = base.$el.find(".nav");
base.init = function() {
base.options = $.extend({},$.organicTabs.defaultOptions, options);
// Accessible hiding fix
$(".hide").css({
"position": "relative",
"top": 0,
"left": 0,
"display": "none"
});
base.$nav.delegate("li > a", "click", function() {
// Figure out current list via CSS class
var curList = base.$el.find("a.current").attr("href").substring(1),
// List moving to
$newList = $(this),
// Figure out ID of new list
listID = $newList.attr("href").substring(1),
// Set outer wrapper height to (static) height of current inner list
$allListWrap = base.$el.find(".list-wrap"),
curListHeight = $allListWrap.height();
$allListWrap.height(curListHeight);
if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
// Fade out current list
base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
// Fade in new list on callback
base.$el.find("#"+listID).fadeIn(base.options.speed);
// Adjust outer wrapper to fit new list snuggly
var newHeight = base.$el.find("#"+listID).height();
$allListWrap.animate({
height: newHeight
});
// Remove highlighting - Add to just-clicked tab
base.$el.find(".nav li a").removeClass("current");
$newList.addClass("current");
});
}
// Don't behave like a regular link
// Stop propegation and bubbling
return false;
});
};
base.init();
};
$.organicTabs.defaultOptions = {
"speed": 200
};
$.fn.organicTabs = function(options) {
return this.each(function() {
(new $.organicTabs(this, options));
});
};
})(jQuery);
And the Javascript.
I have tried to put the function inside the tab by using
$(function() {
$("#example-one").organicTabs();
});
But it does not want to work.