jQuery, I think it should be pretty simple. Includes jsfiddle - javascript

I want to create a list upon my selected items, by items I mean any <li> with class .service. The selected items have the class .selected and I want both the data #name and #price for the selected item to display in <ul class="your_likes"> with a unique <li class="one_like">.
This is my JSFiddle with a pure html example included.
How can I do this?


Is this what you're trying to do? First thing, don't use ID's for the name and price all over the place -- use classes.
// step by step functionality
var myTotal;
$('.service').on('click', function(e) {
e.preventDefault();
var $parent = $(this).closest('section')
// remove selected class from links after the current one
$parent.nextAll('section').find('li').removeClass('selected');
// remove selected from siblings, toggle current selected class
$(this).toggleClass('selected');
(!$parent.hasClass('multiple')) && $(this).siblings('li').removeClass('selected');
var $target = $('#' + $(this).attr('data-id'));
if ($target.length) {
// hide any steps after the current one that may be shown
$parent.nextAll('section').find('.step').not($target).removeClass('active');
// toggle display of selected step
$target.toggleClass('active', $(this).hasClass('selected'));
} else {
console.log('hmm');
}
})
// your selections incl. price & total
$('.service').click(function() {
$('.hide-me-once-a-banana-is-clicked').hide('slow');
$('ul.your_likes').show('slow');
var myLike = $(".number-" + $(this).data("likes"));
myLike.children(".like").text($(this).children(".name").text());
myLike.children(".price").text($(this).children(".price").text());
// Now, somehow, calculate the total price...
myTotal = 0;
var myLikes = $(".your_likes .one_like");
myLikes.each(function() {
myTotal += parseNumber($(this).children(".price").text());
})
$(".topay").children(".price").text(myTotal);
});
function parseNumber(n) {
return Number(n.replace(/[^0-9\.-]+/g, ""))
}
body {
color: #333;
}
h1 {
font-size: 20px;
}
.step {
display: none;
}
.active {
display: block;
}
.selected {
background: #27ae60 !important;
color: #fff !important;
}
ul {
padding: 0;
}
li {
list-style: none;
}
.service {
padding: 20px;
color: #7f8c8d;
background: #ecf0f1;
display: inline-block;
border-radius: 10px;
cursor: pointer;
width: auto;
text-align: center;
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
}
.service.special.selected {
background: #3498db !important;
}
.hi {
color: #27ae60;
border-bottom: 2px dotted #27ae60;
}
h1 {
margin-top: 30px;
margin-bottom: 30px;
}
.hi.special {
border-bottom: 2px dotted #3498db;
color: #3498db;
}
#same_target {
margin-top: 30px;
background: #9b59b6;
padding: 20px;
color: #fff;
}
#same_target p {
margin-bottom: 0;
}
.nomarking {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.price {
display: block;
margin: 0;
font-size: 14px;
font-weight: 300;
}
ul.your_likes {
display: none;
}
ul.your_likes li {
list-style: none;
cursor: default;
}
ul.your_likes li.one_like .like {
display: inline-block;
font-size: 16px;
}
ul.your_likes li.one_like .price {
display: inline-block;
float: right;
font-size: 16px;
color: #4285f4;
}
ul.your_likes li.topay {
border-radius: 10px;
margin-bottom: 5px;
margin-top: 10px;
}
ul.your_likes li.topay .text {
display: inline-block;
font-size: 16px;
color: #000;
font-weight: bolder;
}
ul.your_likes li.topay .price {
display: inline-block;
float: right;
font-size: 16px;
color: #000;
font-weight: bolder;
}
ul.your_likes li.topay .lets_go button {
display: block;
margin-top: 10px;
font-weight: normal;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6">
<!-- HELLO FIRST SECTION -->
<section>
<h1>Choose <span class="hi">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="one" data-likes="one">
<span class="name">Hamburger</span>
<span class="price">€ 10</span>
</li>
<li class="service nomarking" data-id="two" data-likes="one">
<span class="name">Pizza</span>
<span class="price">€ 5</span>
</li>
<li class="service nomarking" data-id="three" data-likes="one">
<span class="name">Icecream</span>
<span class="price">€ 3</span>
</li>
</ul>
</section>
<!-- BYE FIRST SECTION -->
<!-- HELLO SECOND SECTION -->
<section>
<div id="one" class="step">
<h1>Choose <span class="hi special">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Games</span>
<span class="price">€ 7</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Soccer</span>
<span class="price">€ 2</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Memes</span>
<span class="price">€ 1</span>
</li>
</ul>
</div>
<div id="two" class="step">
<h1>Choose <span class="hi special">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Gossip Girl</span>
<span class="price">€ 7</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Coding</span>
<span class="price">€ 8</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Cats</span>
<span class="price">€ 6</span>
</li>
</ul>
</div>
<div id="three" class="step">
<h1>Choose <span class="hi special">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Netflix</span>
<span class="price">€ 7</span>
</li>
<li class="service nomarking " data-id="last" data-likes="two">
<span class="name">Reddit</span>
<span class="price">€ 9</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Lady Gaga</span>
<span class="price">€ 20</span>
</li>
</ul>
</div>
</section>
<!-- BYE SECOND SECTION -->
<!-- HELLO THIRD AND LAST SECTION -->
<section class="multiple">
<div id="last" class="step">
<h1>Choose <span class="hi special">more</span> of your liking!</h1>
<ul>
<li class="service nomarking" data-id="third" data-likes="three">
<span class="name">Michael Jordan</span>
<span class="price">€ 23</span>
</li>
<li class="service nomarking " data-id="third" data-likes="three">
<span class="name">Dogs</span>
<span class="price">€ 10</span>
</li>
<li class="service nomarking" data-id="third" data-likes="three">
<span class="name">Cars</span>
<span class="price">€ 100</span>
</li>
</ul>
</div>
</section>
<!-- BYE THIRD AND LAST SECTION -->
</div>
<div class="col-xs-4">
<h1>Your likes</h1>
<p class="text-muted hide-me-once-a-banana-is-clicked">
Click on something you like to make a order overview
</p>
<ul class="your_likes">
<li class="one_like noselect number-one">
<div class="like">
Hamburger
</div>
<div class="price">
€ 8
</div>
</li>
<li class="one_like noselect number-two">
<div class="like">
Memes
</div>
<div class="price">
€ 1
</div>
</li>
<li class="one_like noselect number-three">
<div class="like">
Dogs
</div>
<div class="price">
€ 10
</div>
</li>
<li class="topay noselect">
<div class="text">
To pay
</div>
<div class="price">
€ 19
</div>
<div class="lets_go">
<button class="btn btn-primary">Checkout</button>
</div>
</li>
</ul>
</div>
</div>
</div>

Related

Input date calendar does not open

I compose a part of the code of my project here to report the problem I am facing. I need to keep the js function to work the links that I put in the top bar.
$(function () {
function setFlatTheme() {
$("body").toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
$(".rad-chk-pin input[type=checkbox]").prop("checked", true);
}
setFlatTheme();
$(document).on("click", function (e) {
e.preventDefault();
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$("li.rad-dropdown > a.rad-menu-item").on("click", function (e) {
e.preventDefault();
e.stopPropagation();
$(".rad-dropmenu-item").removeClass("active");
$(this).next(".rad-dropmenu-item").toggleClass("active");
});
});
.links > li {
list-style: none;
position: relative;
margin: 10px;
display: inline-block;
}
.rad-dropmenu-item.active {
display: block;
-webkit-animation: flipInX 1s ease;
}
.rad-notification-body {
color: black;
vertical-align: middle;
margin-left: 30px;
}
.rad-logo-container {
width: 225px;
text-align: center;
height: 50px;
float: left;
transition: all 0.2s ease-in-out;
}
.rad-menu-item {
position: relative;
padding: 0 5px;
line-height: 30px;
height: 30px;
color: #89949B;
z-index: 5;
display: inline-block;
}
.rad-dropmenu-item {
position: absolute;
right: -6px;
top: 45px;
min-width: 250px;
background: white;
border: 1px solid #BDBDBD;
border-top: 5px solid #515d6e;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: none;
}
.rad-chk-pin span {
display: inline-block;
position: relative;
height: 20px;
width: 40px;
border-radius: 4px;
background: crimson;
border: 1px solid #f6f6f6;
}
.rad-chk-pin span:after {
content: "";
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 4px;
top: -1px;
left: 0px;
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.2s ease;
}
.rad-chk-pin input {
display: none;
}
.rad-chk-pin input:checked + span {
background: #23AE89;
}
.rad-chk-pin input:checked + span:after {
left: 19px;
}
.rad-color-swatch {
display: table;
width: 90px;
height: 25px;
border-radius: 4px;
}
.rad-color-swatch .colors {
width: 25px;
height: 25px;
display: table-cell;
cursor: pointer;
}
.rad-color-swatch .colors input[type=radio] {
display: none;
}
.rad-color-swatch .colors:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.rad-color-swatch .colors:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.rad-sidebar.rad-nav-min {
width: 65px !important;
}
#media screen and (max-width: 850px) {
.rad-navigation {
height: 100px;
}
.rad-logo-container.rad-nav-min + .rad-logo-hidden {
display: none;
}
.rad-logo-container {
display: block;
float: none;
width: 100%;
border-bottom: 1px solid #F2F2F2;
}
.rad-top-nav-container {
display: block;
float: none;
height: 50px;
background: white;
}
.rad-sidebar.rad-nav-min {
transform: translate3d(-200px, 0, 0);
}
}
.flat-theme .rad-navigation .rad-top-nav-container .links > li > a {
border-radius: 50%;
width: 32px;
height: 32px;
background: #f6f6f6;
display: inline-block;
line-height: 32px;
}
.rad-bg-purple {
background: rebeccapurple;
}
.rad-bg-twitter {
background: #55acee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<body>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<span class="letra">xxxxxxxxxxxxxx xxxxxxxxxxxx </span>
<i class="fa fa-bars acertobar"></i>
</div>
xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx
<div class="rad-top-nav-container">
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" id="verificar" href="#"><img class="rad-list-img sm-img acerto" src="<?php echo $_SESSION['image'] ?>" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="https://gestao.centropadreangelo.pt"><i class="fa fa-edit"></i> Perfil</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a id="verificar" class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header">Definições</li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Mudar para tema plano</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Escolha uma cor</div>
<div class="sm-text">Torne-o colorido</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<span class="letra1">xxxxx xxxxxxx xxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt/xxx.php" class="inbox">
<i class="fa fa-user">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<form class="steps" id="inscricao" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<label for="validade" Style="margin-top: 10%;">Data de Validade </label>
<input id="validade" name="validade" type="date" >
</form>
</main>
</body>
But when you put this function, you stop opening the calendar in the input with the date type. If you remove the function, the calendar of the input already works. But when I remove the function, I’m unable to close the links on the top bar.
Can you help solve this problem?

You can shift the preventDefault() inside the if condition. So that the click default action is prevented only if the menu is opened. As per your current code, what happens is that It is capturing all click events on document and then preventing the event trigger always. So the datepicker is not able to catch the click event on calender and the calender never opens. With the following modification, now the click event will only get prevented when the menu is open.
$(function () {
$(document).on("click", function (e) {
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
e.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<span class="letra">xxxxxxxxxxxxxx xxxxxxxxxxxx </span>
<i class="fa fa-bars acertobar"></i>
</div>
xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx
<div class="rad-top-nav-container">
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" id="verificar" href="#"><img class="rad-list-img sm-img acerto" src="<?php echo $_SESSION['image'] ?>" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="https://gestao.centropadreangelo.pt"><i class="fa fa-edit"></i> Perfil</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a id="verificar" class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header">Definições</li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Mudar para tema plano</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Escolha uma cor</div>
<div class="sm-text">Torne-o colorido</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<span class="letra1">xxxxx xxxxxxx xxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt/xxx.php" class="inbox">
<i class="fa fa-user">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
<li>
<a href="#" class="inbox">
<i class="fa fa-power-off">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">Terminar Sessão</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<div class="hs_firstname field hs-form-field">
<label for="validade">Data de Validade <span style="color: red;">*</span></label>
<input id="validade" name="validade" required="required" type="date" value="<?php echo $validade; ?>" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</main>
</body>

$(document).on("click", function (e) {
e.preventDefault(); //<-- THIS HERE
When you click anywhere on the document, that click will be caught and the default action (like opening the date picker) will be prevented.
I suggest that instead of calling the .on() function on the entire document you limit it only to the part where your links are i.e.
$(".rad-navigation").on("click", ....
(this selects the .rad-navigation class)

Callapse list: Keep open only the active one open

This works fine on my app but for some reason I could not get it to work correctly here. Anyway my question is, when I click on a list title I want to close the previously opened one and keep only the active one open. Currently it opens everything I click, but keeps everything open as well. Any ideas on how I can achieve this?
$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-title').click(function() {
$(this).parent().parent().toggleClass('cl-item-open');
});
$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-icon').click(function() {
$(this).parent().parent().toggleClass('cl-item-open');
})
$('.cl-item').each(function(){
console.log ($(this).find('> ul').length);
if ( $(this).find('> ul').length === 0 ) {
$(this).addClass('cl-item-no-sub');
}
})
$li-padding: 7px;
$li-padding-tools: 10px;
$cascade-padding: 25px;
$bg-level-1: #dadada;
$bg-level-2: #ffffff;
$bg-level-3: #ffffff;
$color-tools: #9e9e9e;
$toggle-width: 1.5em;
.cl-start-wrap {
list-style: none;
padding: 0;
margin: 30px;
width: 300px;
ul {
list-style: none;
padding: 0;
margin: 0;
}
> li {
> .cl-label-wrap {
padding: $li-padding 0 $li-padding $cascade-padding*0;
margin: 1px 0;
background: $bg-level-1;
&:hover {
background: darken($bg-level-1, 5%);
}
}
> ul > li {
> .cl-label-wrap {
padding: $li-padding 0 $li-padding $cascade-padding*1;
background: $bg-level-2;
&:hover {
background: darken($bg-level-2, 5%);
}
}
> ul > li {
> .cl-label-wrap {
padding: $li-padding 0 $li-padding $cascade-padding*2;
background: $bg-level-3;
&:hover {
background: darken($bg-level-3, 5%);
}
}
}
}
}
}
.cl-item {
> ul {
}
> .cl-label-wrap {
.cl-label-title {
cursor: pointer;
}
.cl-label-icon {
cursor: pointer;
text-align: center;
&:before {
cursor: pointer;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
}
.cl-label-tools {
a {
color: $color-tools;
&:hover {
color: darken($color-tools, 10%);
}
}
}
}
}
.cl-item:not(.cl-item-open) {
> ul {
display: none;
}
> .cl-label-wrap {
.cl-label-icon {
&:before {
content: "\f0da";
}
}
}
}
.cl-item.cl-item-open {
> .cl-label-wrap {
.cl-label-icon {
&:before {
content: "\f0d7";
}
}
}
}
.cl-item.cl-item-no-sub {
> .cl-label-wrap {
.cl-label-title {
cursor: default;
}
.cl-label-icon {
&:before {
content: "";
}
}
}
}
// Label-Flexbox
.cl-label-wrap {
display: table-cell;
-ms-display: flex;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
.cl-label-title {
order: 1;
flex: 1 1 auto;
align-self: auto;
}
.cl-label-icon {
order: 0;
flex: 0 1 $toggle-width;
align-self: auto;
}
.cl-label-tools {
order: 2;
flex: 0 1 auto;
align-self: auto;
white-space: nowrap;
padding: 0 $li-padding-tools;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="cl-start-wrap">
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-plus"></i>
</span>
</div>
<ul>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.1</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
<ul>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.1.1</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-plus"></i>
</span>
</div>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.1.2</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-plus"></i>
</span>
</div>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.1.3</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-plus"></i>
</span>
</div>
</li>
</ul>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.2</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
</ul>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 2</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
<ul>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 2.1</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 2.2</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 2.3</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
</ul>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 3</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
</ul>

Use the siblings function to close everything but the current item:
$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-title,
.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-icon').click(
function() {
var parent = $(this).parent().parent();
parent.siblings().removeClass("cl-item-open");
parent.toggleClass('cl-item-open');
}
);

Scrolling tab bar items with JavaScript

Precondition
I have a tab bar on my application, each tab labels include icons and text.
Users can navigate between tabs by tapping a tab. Once an edge tab has been fired, other tabs should shift left or right.
Expected Result
I want it to work like Web Material Component's Scrolling tabs.
Problem
I not sure how to shift the tabs by using pure JavaScript when edge tab has been pressed. Can anyone else give some tips for me?
See the code snippet below:
function clickHandler(e) {
let target = e.srcElement || e.target;
console.log(target);
}
.flex-container {
width: 100%;
min-width: 50rem;
height: 7rem;
display: flex;
align-items: center;
justify-content: flex-start;
background: black;
overflow: hidden;
}
.sub-menu {
display: flex;
flex-direction: column;
align-items: center;
width: 7rem;
color: white;
flex-grow: 1;
min-width: 22%;
}
.sub-menu:active {
color: gray;
}
.menu-icon {
width: 3.2rem;
height: 3.2rem;
text-align: center;
}
.menu-title {
height: 1.7rem;
width: 7rem;
font-size: 1.2rem;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="flex-container" onclick="clickHandler(event)">
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-behance fa-3x"></i></div>
<span class="menu-title">Action 1</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-codepen fa-3x"></i></div>
<span class="menu-title">Action 2</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-eercast fa-3x"></i></div>
<span class="menu-title">Action 3</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-fort-awesome fa-3x"></i></div>
<span class="menu-title">Action 4</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-flickr fa-3x"></i></div>
<span class="menu-title">Action 5</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-skype fa-3x"></i></div>
<span class="menu-title">Action 6</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-vimeo fa-3x"></i></div>
<span class="menu-title">Action 7</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
<span class="menu-title">Action 8</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
<span class="menu-title">Action 9</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
<span class="menu-title">Action 10</span>
</div>
</div>

You can try my code:
function clickHandler(el) {
const rect = el.getBoundingClientRect()
const winWidth = window.innerWidth || document.documentElement.clientWidth
const widthScroll = winWidth * 33 / 100
if (rect.left <= 0 + 10)
{
document.getElementById('main-menu').scrollLeft -= widthScroll ;
}
if (rect.right >= winWidth - 10)
{
document.getElementById('main-menu').scrollLeft += widthScroll ;
}
}
This is demo link https://codepen.io/phuongnm153/pen/BeagOo
You can add more animation for effect when scroll

Accordion with icon on expanded

$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
$(this).next().slideToggle().addClass('expanded').prev('h4').removeClass('icon-rotate');
$(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});
});
/* Accordion - Left Panel */
/* line 4, ../sass/my-request.scss */
.filter-panel .accordion-header {
background: #506070;
color: #FFF;
font-size: 16px;
padding: 15px;
font-weight: 600;
}
/* line 11, ../sass/my-request.scss */
.filter-panel .accordion-toggle-first {
cursor: pointer;
margin: 0;
font-size: 14px;
color: #333;
background: #F6F6F6;
padding: 15px 20px;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 22, ../sass/my-request.scss */
.filter-panel .accordion-toggle {
cursor: pointer;
margin: 0;
font-size: 14px;
color: #333;
background: #F6F6F6;
padding: 11px 20px;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 33, ../sass/my-request.scss */
.filter-panel .accordion-content {
display: none;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 39, ../sass/my-request.scss */
.filter-panel .accordion-content ul li {
padding: 10px 30px;
}
/* line 42, ../sass/my-request.scss */
.filter-panel .accordion-content.default {
display: block;
}
/* line 45, ../sass/my-request.scss */
.icon-rotate span {
transform: rotate(90deg);
transition: .25s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion" class="filter-panel">
<div class="accordion-header">Refine by:</div>
<div class="accordion-toggle-first">All</div>
<h4 class="accordion-toggle">Active <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content default">
<ul>
<li>
<div class="align-left">Pending DSL (12)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending ECR (21)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending OSI (10)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending OWS (6)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending Requestor (10)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
</ul>
</div>
<h4 class="accordion-toggle">Closed <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Cancelled (21)</li>
<li>Rejected (14)</li>
<li>Completed (21)</li>
</ul>
</div>
<h4 class="accordion-toggle">Type <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Alias (13)</li>
<li>Sites (15)</li>
<li>Domain (19)</li>
<li>Social Media (9)</li>
<li>Archive/Back-up (21)</li>
<li>Mobile App (6)</li>
</ul>
</div>
<h4 class="accordion-toggle">VPU <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Africa (23)</li>
<li>East Asia Pacific (15)</li>
<li>South Asia (19)</li>
<li>Latin America (9)</li>
</ul>
</div>
<h4 class="accordion-toggle">Date <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
</div>
</div>
I am using the following script
http://uniondesign.ca/wp-content/uploads/2012/09/accordion-demo.html
and adding arrow icon if any accordion is open n changing based on accordion open n close but I am stuck once all the accordion is closed my icon is not rotating.
Also attached the screenshot for more details
Error Screenshot

I think you could use toggleClass in this situation. Here is what I changed to get the demo to work.
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
$(this).toggleClass('icon-rotate').next().slideToggle().addClass('expanded');
$(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});
});
Fiddle

Skrollr init set <body> height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.

skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.

Categories