Related
When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, accompanied by localStorage. Can someone help me to fix this?
function onClickAvGamesCheckBox() {
var arr = $('.AvGamesCheckBox').map(function() {
return this.checked;
}).get();
localStorage.setItem("checked", JSON.stringify(arr));
}
$(document).ready(function() {
var arr = JSON.parse(localStorage.getItem('checked')) || [];
arr.forEach(function(checked, i) {
$('.AvGamesCheckBox').eq(i).prop('checked', checked);
});
$(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});
//* Clone script
$(".avclone :checkbox").change(function() {
var name = $(this).closest("div").attr("name");
if (this.checked)
$(".columns[name=" + name + "]").clone().appendTo("#favorite");
else
$("#favorite .columns[name=" + name + "]").remove();
});
* {
box-sizing: border-box;
padding: 5px;
}
.AvGamesContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.AvGamesContainer input {
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
cursor: pointer;
height: 0;
width: 0;
}
.AvGamesCheckmark {
position: absolute;
top: 26px;
right: 0;
height: 25px;
width: 25px;
padding: 3px !important;
background-color: #fff;
background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
z-index: 5;
}
.AvGamesContainer input:checked~.AvGamesCheckmark {
background-color: #fff;
color: yellow !important;
background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.AvGamesContainer:hover input~.AvGamesCheckmark {
background-color: #fff;
}
.AvGamesCheckmark:after {
content: "";
position: absolute;
display: none;
}
.AvGamesContainer input:checked~.AvGamesCheckmark:after {
display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
display: none;
}
img {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
transition: all 0.5s ease-in-out 0s;
z-index: 4;
}
img:hover {
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-webkit-filter: saturate(150%);
}
.column {
float: left;
width: 50%;
padding: 5px;
height: auto;
}
.columns {
position: relative;
border-radius: 10px;
text-align: center;
width: 99%;
margin: 0 auto;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
</div>
<div id="favorite"></div>
When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, accompanied by localStorage. Can someone help me to fix this?
You have a click handler, so we wire that up to do the storage (will not work here due to sandbox), we also can use data and filter by that, adding an index to each columns container to use to filter the cloned items so we can target them and remove no matter which one is added first.
Here is a fiddle with custom event and slightly more complex storage example:
https://jsfiddle.net/MarkSchultheiss/5Luyn18j/47/ done as a fiddle to avoid the sandbox on SO.
Original:
//borrow some code from https://stackoverflow.com/a/15651670/125981
(function($) {
$.fn.filterByData = function(prop, val) {
return this.filter(
function() {
return $(this).data(prop) == val;
}
);
}
})(window.jQuery);
function onClickAvGamesCheckBox(event) {
var arr = $('.AvGamesCheckBox').map(function() {
return this.checked;
}).get();
// localStorage.setItem("checked", JSON.stringify(arr));
}
$(function() {
//add some data
$('.AvGamesCheckBox').each(function(index, element) {
$(this).closest('.column').data("checkindex", index);
});
// replace [] with the commented out for real stuff
var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
arr.forEach(function(checked, i) {
$('.AvGamesCheckBox').eq(i).prop('checked', checked);
});
$(".AvGamesCheckBox").trigger("change");
});
//* Clone script
$(".avclone").on('change', '.AvGamesCheckBox', function() {
var checkContainer = $(this).closest('.column');
var checkIndex = checkContainer.data("checkindex");
var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
if (this.checked && !matcher.length)
checkContainer.clone(true).appendTo("#favorite");
else
matcher.remove();
}).on('click', '.AvGamesCheckBox', onClickAvGamesCheckBox);
* {
box-sizing: border-box;
padding: 5px;
}
.AvGamesContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.AvGamesContainer input {
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
cursor: pointer;
height: 0;
width: 0;
}
.AvGamesCheckmark {
position: absolute;
top: 26px;
right: 0;
height: 25px;
width: 25px;
padding: 3px !important;
background-color: #fff;
background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
z-index: 5;
}
.AvGamesContainer input:checked~.AvGamesCheckmark {
background-color: #fff;
color: yellow !important;
background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.AvGamesContainer:hover input~.AvGamesCheckmark {
background-color: #fff;
}
.AvGamesCheckmark:after {
content: "";
position: absolute;
display: none;
}
.AvGamesContainer input:checked~.AvGamesCheckmark:after {
display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
display: none;
}
img {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
transition: all 0.5s ease-in-out 0s;
z-index: 4;
}
img:hover {
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-webkit-filter: saturate(150%);
}
.column {
float: left;
width: 50%;
padding: 5px;
height: auto;
}
.columns {
position: relative;
border-radius: 10px;
text-align: center;
width: 99%;
margin: 0 auto;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
</div>
<div id="favorite" ></div>
Addition of the click on the clone:
EDIT: added custom event and comment on how to modify for real use
//borrow some code from https://stackoverflow.com/a/15651670/125981
(function($) {
$.fn.filterByData = function(prop, val) {
return this.filter(
function() {
return $(this).data(prop) == val;
}
);
}
})(window.jQuery);
function onClickAvGamesCheckBox(event) {
var arr = $(".avclone").find('.AvGamesCheckBox').map(function() {
return this.checked;
}).get();
//EDIT: un-comment for real use
// localStorage.setItem("checked", JSON.stringify(arr));
}
$(function() {
//add some data
var checks = $(".avclone").find('.AvGamesCheckBox');
checks.each(function(index, element) {
$(this).closest('.column').data("checkindex", index);
});
//EDIT replace []; with commented out code for real use
var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
arr.forEach(function(checked, i) {
checks.eq(i).prop('checked', checked);
});
//checks.trigger("change");
});
//* Clone script
$(".avclone, #favorite").on('change', '.AvGamesCheckBox', function() {
var checkContainer = $(this).closest('.column');
var checkIndex = checkContainer.data("checkindex");
var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
if (this.checked && !matcher.length) {
checkContainer.clone(true).appendTo("#favorite");
} else {
$(".avclone").find('.AvGamesCheckBox')
.eq(checkIndex).trigger('clickcustom');
matcher.remove();
}
});
$(".avclone").on('click clickcustom', '.AvGamesCheckBox', onClickAvGamesCheckBox);
* {
box-sizing: border-box;
padding: 5px;
}
.AvGamesContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.AvGamesContainer input {
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
cursor: pointer;
height: 0;
width: 0;
}
.AvGamesCheckmark {
position: absolute;
top: 26px;
right: 0;
height: 25px;
width: 25px;
padding: 3px !important;
background-color: #fff;
background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
z-index: 5;
}
.AvGamesContainer input:checked~.AvGamesCheckmark {
background-color: #fff;
color: yellow !important;
background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.AvGamesContainer:hover input~.AvGamesCheckmark {
background-color: #fff;
}
.AvGamesCheckmark:after {
content: "";
position: absolute;
display: none;
}
.AvGamesContainer input:checked~.AvGamesCheckmark:after {
display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
display: none;
}
img {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
transition: all 0.5s ease-in-out 0s;
z-index: 4;
}
img:hover {
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-webkit-filter: saturate(150%);
}
.column {
float: left;
width: 50%;
padding: 5px;
height: auto;
}
.columns {
position: relative;
border-radius: 10px;
text-align: center;
width: 99%;
margin: 0 auto;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
</div>
<div id="favorite"></div>
This should work for you. Note: avoid using camelcase classes or ids. Also relying on elements indexes it's not a good idea I would use some sort of identifier to track elements relations.
JS:
function onClickAvGamesCheckBox() {
var arr = $('.AvGamesCheckBox').map(function() {
return this.checked;
}).get();
localStorage.setItem("checked", JSON.stringify(arr));
}
$(document).ready(function() {
var arr = JSON.parse(localStorage.getItem('checked')) || [];
arr.forEach(function(checked, i) {
$('.AvGamesCheckBox').eq(i).prop('checked', checked).trigger("change");
});
$(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});
//* Clone script
$(document).on("change", ".avclone [type='checkbox']", function(e){
var column = $(e.target).closest(".column"),
eq = column.index();
if ($(e.target).prop("checked"))
column.clone().attr("data-eq", eq).appendTo("#favorite");
else
$("#favorite .column[data-eq='"+eq+"']").remove();
});
CSS:
* {
box-sizing: border-box;
padding: 5px;
}
.AvGamesContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.AvGamesContainer input {
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
cursor: pointer;
height: 0;
width: 0;
}
.AvGamesCheckmark {
position: absolute;
top: 26px;
right: 0;
height: 25px;
width: 25px;
padding: 3px !important;
background-color: #fff;
background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
z-index: 5;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark {
background-color: #fff;
color: yellow !important;
background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.AvGamesContainer:hover input ~ .AvGamesCheckmark {
background-color: #fff;
}
.AvGamesCheckmark:after {
content: "";
position: absolute;
display: none;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark:after {
display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
display: none;
}
img {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
transition: all 0.5s ease-in-out 0s;
z-index: 4;
}
img:hover {
-webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
-webkit-filter: saturate(150%);
}
.column {
float: left;
width: 50%;
padding: 5px;
height: auto;
}
.columns {
position: relative;
border-radius: 10px;
text-align: center;
width: 99%;
margin: 0 auto;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#favorite .column .AvGamesCheckmark {
display: none!important
}
HTML:
<div class="avclone">
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer1" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
</div>
<div id="favorite"></div>
#Leo since you asked how to do this in React.
DEMO: https://react-krwy1w.stackblitz.io/
CODE: https://stackblitz.com/edit/react-krwy1w?file=index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
const GAME_IMAGES = [
{
title: "some title 01",
href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
},
{
title: "some title 02",
href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357"
},
{
title: "some title 03",
href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
},
];
const GameCard = ({title, href, img, onChange}) => {
return (
<div className="column">
<div className="columns">
<label className="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" className="AvGamesCheckBox" onChange={(e) => onChange(e.target.checked, {title, href, img})}/>
<span className ="AvGamesCheckmark"></span>
</label>
<a href={href}>
<img src={img} title={title}/>
</a>
</div>
</div>
);
};
class App extends Component {
constructor() {
super();
this.state = {
display: null
}
}
handleChange(isChecked, obj) {
this.setState({
display: isChecked ? obj : null
});
}
render() {
return (
<div>
{
this.state.display !== null ?
<div id="favorite">
{<GameCard {...this.state.display} />}
</div> : null
}
<p>
Start editing to see some magic happen :)
</p>
{
GAME_IMAGES.map(prop => <GameCard {...prop} onChange={this.handleChange.bind(this)} />)
}
</div>
);
}
}
render(<App />, document.getElementById('root'));
I am working on a header navigation which has logo on the left and profile icon on the right in the middle there are some navigation links.
There is a left slide menu made which triggers in when window width is less than 700px. I have triggered slide left menu on window resize event as well. The main navigation has to shift to the responsive menu container on resizing the window width. However it is not working on window resize function.
Here is the codepen link i tried
$("#sidebarCollapse").on('click', function () {
$('#sidebar').toggleClass('active');
});
$(".main-nav li a").on('click', function(){
$(".main-nav li a").removeClass('active');
$(this).addClass('active');
});
// Menu Add Class Left
$(".hamburger-menu").click(function(){
$(".mob-menu").toggleClass("slide-left");
});
// Menu Add Class Close
$('.mdl-layout__obfuscator').click(function(){
$(".mob-menu").removeClass("slide-left");
});
var domWidth = $(window).width();
function moveElements() {
var mobMenu = $('.mob-menu'),
$mainNav = $('.main-nav'),
respNav = $('.resp-nav'),
mainHdr = $(".global-header");
if( domWidth < 700) {
//alert(domWidth);
$('.main-nav').appendTo('.resp-nav');
}
} .
$(window).on('load resize',function() {
// alert('hi');
moveElements();
$(window).resize(function() {
moveElements();
});
});
/* ---------------------------------------------------
GLOBAL HEADER PAGE
----------------------------------------------------- */
textarea,
input,
button {
outline: none;
}
.txtlabel {
font-size: 12px;
text-align: left;
color: #706e6b;
padding-bottom: 11px;
display: block;
}
.global-header {
width: 100%;
display: block;
height: 50px;
box-shadow: 0 2px 4px 0 #e8ebf3;
-moz-box-shadow: 0 2px 4px 0 #e8ebf3;
-webkit-box-shadow: 0 2px 4px 0 #e8ebf3;
position: relative;
background-color: #f1f1f1;
}
.g-logo {
padding: 7px 24px;
float: left;
}
.m-g-logo {
display: none;
padding: 7px 20px;
float: left;
}
.hamburger-menu {
display: none;
}
.resp-nav {
margin-top: 20px;
float: left;
}
.mob-menu {
display: none;
padding: 10px;
box-shadow: 2px 0 3px 0 #b5b7bd;
-moz-box-shadow: 2px 0 3px 0 #b5b7bd;
-webkit-box-shadow: 2px 0 3px 0 #b5b7bd;
/*position: fixed;*/
position: absolute;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 240px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
.profile-info {
float: left;
width: 100%;
}
.profile-icon {
width: 23px;
height: 23px;
margin: 8px;
display: block;
}
.profpic {
width: 32px;
height: 32px;
border-radius: 50%;
color: #fff;
background-color: #394961;
float: left;
margin: 5px 0px 5px 5px;
}
.profile-info span {
color: #626579;
font-size: 16px;
margin: 3px 0 0 3px;
}
.prof-name {
float: left;
width: 68%;
margin: 0 0 0 20px;
}
.prof-name a.link {
float: left;
margin: 0 10px 0 3px;
}
.prof-name a.link:first-child {
position: relative;
}
.prof-name a.link:first-child:after {
content: "|";
position: absolute;
right: -10px;
color: #9ea6a9;
}
.icon-hamburger {
height: 5px;
background-color: black;
margin: 6px 0;
width: 20px;
float: left;
border: none;
cursor: pointer;
}
.main-nav {
list-style: none;
float: left;
margin-left: 30px;
}
.main-nav li {
list-style: none;
float: left;
}
.main-nav li a {
color: #626579;
padding: 14px 30px;
display: block;
}
.main-nav li a:hover {
color: #00a0e7;
}
.main-nav li a.active {
color: #00a0e7;
border-bottom: 3px solid #00a0e7;
background-color: #eef0f6;
}
.nav-icon {
float: left;
padding: 10px;
}
.pull-right i[class^='icon-'] {
width: 32px;
height: 32px;
display: block;
}
.icon-search {
background: url("../../imgs/global-header/icn-search.svg") no-repeat 4px 5px;
}
.icon-notification {
background: url("../../imgs/global-header/icn-notification.svg") no-repeat 8px 8px;
}
.icon-profile {
background: #394961 url("../../imgs/global-header/avatar.svg") no-repeat;
position: relative;
margin-right: 30px;
border-radius: 50%;
}
.icon-profile:after {
background: url("../../imgs/global-header/page-1.svg") no-repeat;
display: block;
width: 9px;
height: 6px;
position: absolute;
content: "";
top: 14px;
right: -20px;
}
.icon-profile:before {
background: url("../../imgs/global-header/avatar-icon.svg") no-repeat;
display: block;
width: 16px;
height: 16px;
position: absolute;
content: "";
top: 7px;
right: 8px;
}
.nav-icon:hover {
background-color: transparent;
}
.nav-icon:not(.active):hover {
background-color: #eef0f6;
cursor: pointer;
}
.usage {
list-style: none;
}
.usage ul {
list-style: disc;
list-style-position: outside;
}
/* search */
.srch {
position: relative;
display: inline-block;
margin-right: 30px;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
.ui-front {
list-style: none!important;
background-color: #fff;
color: #626579;
font-size: 12px;
font-weight: 500;
width: 240px!important;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border: 1px solid #F1F5F6;
border-radius: 4px;
padding: 10px 8px!important;
}
.ui-front li {
padding: 8px 8px!important;
cursor: pointer;
}
.slide-left {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 99999;
}
.mdl-layout__obfuscator {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.slide-left~.mdl-layout__obfuscator {
background-color: rgba(0, 0, 0, .5);
visibility: visible;
}
.slide-menu {
position: fixed;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 250px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
#media only screen and (max-width: 768px) {
.main-nav {
display: block;
width: 100%;
margin: 0;
}
.main-nav ul {
padding: 0;
}
.main-nav ul li {
width: 100%;
margin: 0;
}
.nav-icon:nth-child(3) {
display: none;
}
.g-logo {
display: none;
}
.m-g-logo {
display: block;
padding: 7px 24px;
float: left;
}
.hamburger-menu {
display: block;
}
.global-header .rightmenu {
position: absolute;
right: 12px;
}
.mob-menu {
display: block;
}
.global-header {
width: 100%;
display: block;
height: 500px;
}
}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="global-header">
<div class="mob-menu">
<div class="profile-info">
<div class="profpic"><i class="profile-icon"></i></div>
<div class="prof-name">
<span>Marvin Duncan</span>
Profile
Logout
</div>
</div>
<div class="resp-nav"></div>
</div>
<div class="pull-left">
Logo
</div>
<nav class="main-nav">
<ul>
<li>Label 1</li>
<li>Label 2</li>
</ul>
</nav>
<div class="pull-right rightmenu">
<div class="nav-icon" title="Profile"><i class="icon-profile">☺</i></div>
</div>
<div class="mob-view">
<span class="hamburger-menu">
<button class="icon-hamburger"></button>
Logo
</span>
</div>
<div class="mdl-layout__obfuscator"></div>
</div>
The problem is probably because this line only happens once:
var domWidth = $(window).width();
You need to place that line of code within your moveElements function, so that it continually checks the width of the window.
Additionally, I'd suggest not using 'appendTo' to move something. It is tricky to move pieces of the DOM around like this and you can get in a mess easily. Better to use CSS to move the display of something. Or, if you can't achieve it with CSS alone - maybe have two instances, and show/hide them as needed.
change $(window).width(); to $(document).width();
i tried and it worked
I'm developing a Cordova app. For that I'm using Vue.js and jQuery for bindings and script and I'm developing UI on my own. I could do page transitions and animations for most of the UI like, Radio buttons and check boxes etc. But I could not be able to develop a custom popover. I have tried following code.
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
This works fine for toggling popover on button click. I tried so much. But I could not hide the popover when click on outside of the popover.
How can I hide popover when clicking out side of it?
Please try this. I have added jQuery
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function(e) {
e.stopPropagation();
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
$(el).closest('.ui-page').find('.drawer').toggleClass('active');
});
$('body').on('click', $(el).closest('.ui-page'), function(e) {
var $drawer = $(el).closest('.ui-page').find('.drawer');
var $target = $(e.target);
if ($target.closest($(el)).length <= 0
&& $drawer.hasClass('active')
&& $target.closest('.drawer').length <= 0) {
$drawer.removeClass('active');
}
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
I have a Clipboard Tooltip button script that display tooltip when hover with the cursor on it.
In the Clipboard page under Copy text from attribute example, it display tooltip after a click to copy, while hover do nothing.
And that exactly what i want to achive. Cuz i only success display tooltip when hover.
I have tried to play with the Clipboard page main.css and primer.css and didnt got it to work as i want (display tooltip after clicking)
Also looked at the tooltip creator documentation but even there it has only hover tooltips.
Here is the HTML code:
<div id="example-text" class="example">
<div class="table">
<div class="table-row">
<div class="table-cell">ebay</div>
<div class="table-cell">amazon</div>
</div>
<div class="table-row"><p></p></div>
<div class="table-row">
<div class="table-cell"><button class="btn" data-clipboard-text="ebay">ebay-link</button></div>
<div class="table-cell"><button aria-label="copied!" class="btn tooltipped tooltipped-e border p-2 mb-2 mr-2 left" data-clipboard-text="amazon">amazon-link</button></div>
</div>
</div>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
</script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
And here is the CSS:
#example-text {width: 500px;}
.table
{
display:table;
text-align: center;
}
.table-row
{
display:table-row;
width: 400px;
}
.table-cell
{
display:table-cell;
width: 200px;
color: black;
font-family: arial;
font-size: 14px;
}
.btn[disabled] .clippy {
opacity: .3;
}
.example {
position: relative;
margin: 15px 0 0;
padding: 39px 19px 14px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
z-index: 2;
}
.example p {
color: #666;
}
.example:after {
content: "copy the link";
position: absolute;
top: 0;
right: 0;
padding: 2px 8px;
font-size: 14px;
font-weight: bold;
background-color: #f5f5f5;
color: #9da0a4;
border-radius: 4px 0 4px 0;
}
.example+.snippet {
background: #f8f8f8;
border-radius: 4px;
border: 1px solid #ddd;
clear: both;
top: -20px;
padding: 20px 0 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
.form-control.focus,
.form-control:focus,
input[type="text"].focus,
input[type="text"]:focus,
input[type="password"].focus,
input[type="password"]:focus,
input[type="email"].focus,
input[type="email"]:focus,
input[type="number"].focus,
input[type="number"]:focus,
input[type="tel"].focus,
input[type="tel"]:focus,
input[type="url"].focus,
input[type="url"]:focus,
select.focus,
select:focus,
textarea.focus,
textarea:focus {
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
select:not([multiple]) {
height: 34px;
vertical-align: middle
}
input.input-contrast,
.input-contrast {
background-color: #fafafa
}
input.input-contrast:focus,
.input-contrast:focus {
background-color: #fff
}
::-webkit-input-placeholder {
color: #aaa
}
::-moz-placeholder {
color: #aaa
}
:-ms-input-placeholder {
color: #aaa
}
::placeholder {
color: #aaa
}
input.input-mini {
min-height: 26px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px
}
input.input-large {
padding: 6px 10px;
font-size: 16px
}
.input-block {
display: block;
width: 100%
}
.input-monospace {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace
}
.select {
display: inline-block;
max-width: 100%;
padding: 7px 24px 7px 8px;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
background-size: 8px 10px;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 8px \9;
background-image: none \9
}
.select:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)
}
.select::-ms-expand {
opacity: 0
}
.select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px
}
.select-sm:not([multiple]) {
height: 26px;
min-height: 26px
}
.clearfix:before {
display: table;
content: ""
}
.clearfix:after {
display: table;
clear: both;
content: ""
}
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: bold;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none
}
.btn i {
font-style: normal;
font-weight: 500;
opacity: 0.6
}
.btn .octicon {
vertical-align: text-top
}
.btn .counter {
text-shadow: none;
background-color: #e5e5e5
}
.btn:focus {
text-decoration: none;
border-color: #51a7e8;
outline: none;
box-shadow: 0 0 5px rgba(81, 167, 232, 0.5)
}
.btn:focus:hover,
.btn.selected:focus {
border-color: #51a7e8
}
.btn:hover,
.btn:active,
.btn.zeroclipboard-is-hover,
.btn.zeroclipboard-is-active {
text-decoration: none;
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc
}
.btn:active,
.btn.selected,
.btn.zeroclipboard-is-active {
background-color: #dcdcdc;
background-image: none;
border-color: #b5b5b5;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15)
}
.btn.selected:hover {
background-color: #cfcfcf
}
.btn:disabled,
.btn:disabled:hover,
.btn.disabled,
.btn.disabled:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
border-color: rgba(197, 197, 197, 0.5);
box-shadow: none
}
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941
}
.btn-primary .counter {
color: #60b044;
background-color: #fff
}
.btn-primary:hover {
color: #fff;
background-color: #569e3d;
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e
}
.btn-primary:active,
.btn-primary.selected {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
background-color: #569e3d;
background-image: none;
border-color: #418737
}
.btn-primary.selected:hover {
background-color: #4c8b36
}
.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary.disabled,
.btn-primary.disabled:hover {
color: #fefefe;
background-color: #add39f;
background-image: linear-gradient(#c3ecb4, #add39f);
border-color: #b9dcac #b9dcac #a7c89b
}
.btn-danger {
color: #900
}
.btn-danger:hover {
color: #fff;
background-color: #b33630;
background-image: linear-gradient(#dc5f59, #b33630);
border-color: #cd504a
}
.btn-danger:active,
.btn-danger.selected {
color: #fff;
background-color: #b33630;
background-image: none;
border-color: #9f312c
}
.btn-danger.selected:hover {
background-color: #9f302b
}
.btn-danger:disabled,
.btn-danger:disabled:hover,
.btn-danger.disabled,
.btn-danger.disabled:hover {
color: #cb7f7f;
background-color: #efefef;
background-image: linear-gradient(#fefefe, #efefef);
border-color: #e1e1e1
}
.btn-danger:hover .counter,
.btn-danger:active .counter,
.btn-danger.selected .counter {
color: #b33630;
background-color: #fff
}
.btn-outline {
color: #4078c0;
background-color: #fff;
background-image: none;
border: 1px solid #e5e5e5
}
.btn-outline .counter {
background-color: #eee
}
.btn-outline:hover,
.btn-outline:active,
.btn-outline.selected,
.btn-outline.zeroclipboard-is-hover,
.btn-outline.zeroclipboard-is-active {
color: #fff;
background-color: #4078c0;
background-image: none;
border-color: #4078c0
}
.btn-outline:hover .counter,
.btn-outline:active .counter,
.btn-outline.selected .counter,
.btn-outline.zeroclipboard-is-hover .counter,
.btn-outline.zeroclipboard-is-active .counter {
color: #4078c0;
background-color: #fff
}
.btn-outline.selected:hover {
background-color: #396cad
}
.btn-outline:disabled,
.btn-outline:disabled:hover,
.btn-outline.disabled,
.btn-outline.disabled:hover {
color: #767676;
background-color: #fff;
background-image: none;
border-color: #e5e5e5
}
.btn-with-count {
float: left;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn-sm {
padding: 2px 10px
}
.tooltipped {
position: relative
}
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
display: inline-block;
text-decoration: none
}
.tooltipped-multiline:hover:after,
.tooltipped-multiline:active:after,
.tooltipped-multiline:focus:after {
display: table-cell
}
.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw:after {
margin-right: -15px
}
.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw:after {
margin-right: -15px
}
.tooltipped-s:after,
.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8)
}
.tooltipped-multiline:after {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 250px;
word-break: break-word;
word-wrap: normal;
white-space: pre-line;
border-collapse: separate
}
.tooltipped-multiline.tooltipped-s:after,
.tooltipped-multiline.tooltipped-n:after {
right: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.tooltipped-multiline.tooltipped-w:after,
.tooltipped-multiline.tooltipped-e:after {
right: 100%
}
#media screen and (min-width: 0\0) {
.tooltipped-multiline:after {
width: 250px
}
}
.tooltipped-sticky:before,
.tooltipped-sticky:after {
display: inline-block
}
.tooltipped-sticky.tooltipped-multiline:after {
display: table-cell
}
.fullscreen-overlay-enabled.dark-theme .tooltipped:after {
color: #000;
background: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before {
border-bottom-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before {
border-top-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before {
border-right-color: rgba(255, 255, 255, 0.8)
}
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before {
border-left-color: rgba(255, 255, 255, 0.8)
}
EDIT: Getting closer:
This is the related code:
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<pre class="snippet">
<button class="btn" data-clipboard-snippet="">
<img class="clippy" width="13" src="./index_files/clippy.svg" alt="Copy to clipboard">
</button>
<code class="html hljs xml">
<span class="hljs-comment"><!-- Trigger --></span>
<span class="hljs-tag"><<span class="hljs-title">button</span>
<span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span>
<span class="hljs-attribute">data-clipboard-text</span>=<span class="hljs-value">"Just because you can doesn't mean you should — clipboard.js"</span>></span>
Copy to clipboard
<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
</code>
</pre>
Tried and still without success- Wonder what exactly triger that.
How do i get tooltip After i click (like in the clipboardpage)?
Here's a live one:
Got it. It was hiding in the demoes.js file.
And especially that line:
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
This is the corrected code:
<script src="https://clipboardjs.com/assets/scripts/demos.js"></script>
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
Now it is working.
Here's the result: HERE
Hello does anyone know why my it doesn't display 3 instead of {{remain}} ? I got the error :
"Error: $injector:nomod Module Unavailable".
My snippet work here but I don't know why it does not work to my side
/index.html
/app.js
/MyTodoList.js
/style.css
//Inside app.js
var app = angular.module("myapp", []);
//Inside MyTodoList.js
app.controller('TodoCtrl', ['$scope', function ($scope) {
$scope.remain = 3;
}]);
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
color: #4d4d4d;
width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTv, .sapUiBtnS {
font: inherit;
font-size: inherit;
}
#todoapp {
background: #fff;
background: rgba(255, 255, 255, 0.9);
margin: 130px 0 40px 0;
border: 1px solid #ccc;
position: relative;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before {
content: '';
border-left: 1px solid #f5d6d6;
border-right: 1px solid #f5d6d6;
width: 2px;
position: absolute;
top: 0;
left: 40px;
height: 100%;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#todoapp input:-moz-placeholder {
font-style: italic;
color: #a9a9a9;
}
#todoapp h1 {
position: absolute;
top: -120px;
width: 100%;
font-size: 70px;
font-weight: bold;
text-align: center;
color: #b3b3b3;
color: rgba(255, 255, 255, 0.3);
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#header {
padding-top: 15px;
border-radius: inherit;
}
#header:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 15px;
z-index: 2;
border-bottom: 1px solid #6c615c;
background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px;
border-top-right-radius: 1px;
}
#main {
position: relative;
z-index: 2;
border-top: 1px dotted #adadad;
}
#new-todo,
.sapUiTfBrd.sapUiTfRo.todo,
.sapUiTfBrd.sapUiTfStd.todo {
position: relative;
margin: 0;
margin-right: 153px;
width: 100%;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
background-color: transparent;
border: 0;
outline: none;
color: #4D4D4D;
padding: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTfBrd.sapUiTfStd.todo {
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
}
.sapUiTfBrd.sapUiTfRo.todo[data-completed="true"] {
color: #a9a9a9;
text-decoration: line-through;
}
#toggle-all {
display: block;
outline: none;
}
#toggle-all input {
z-index: 3;
position: absolute;
text-align: center;
top: 9px;
left: -15px;
width: 65px;
height: 41px;
-webkit-transform: rotate(90deg);
/* transform: rotate(90deg); */
-webkit-appearance: none;
appearance: none;
}
#toggle-all input:before {
content: '»';
font-size: 28px;
color: #d9d9d9;
padding: 0 25px 7px;
}
#toggle-all input:checked:before {
color: #737373;
}
#new-todo {
padding: 15px 15px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.02);
z-index: 2;
box-shadow: none;
}
#todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.checkbox-align {
padding-top: 7px;
margin-bottom: 0;
vertical-align: middle;
}
#todo-list li {
position: relative;
font-size: 24px;
border-top: 1px dotted #ccc;
}
#todo-list input[type='checkbox'] {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
/*
position: absolute;
top: 0;
bottom: 0;
*/
margin: auto 0;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#todo-list input[type='checkbox']:after {
content: '✔';
line-height: 62px;
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
#todo-list input[type='checkbox']:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
#todo-list input:not([type='checkbox']) {
word-break: break-word;
padding: 15px;
margin-left: 45px;
display: block;
line-height: 1.2em;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#todo-list li .destroy {
outline: none;
background-color: transparent;
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 22px;
color: #a88a8a;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#todo-list li .destroy:hover {
text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
#todo-list li .destroy:after {
content: '✖';
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list .sapUiRrNoData,
#todo-list .sapUiRrPtb,
#todo-list .sapUiRrFtr {
display: none;
}
#footer {
color: #777;
padding: 0 15px;
position: absolute;
right: 0;
bottom: -31px;
left: 0;
height: 20px;
z-index: -1;
text-align: center;
}
#footer:before {
content: '';
position: absolute;
right: 0;
bottom: 31px;
left: 0;
height: 50px;
z-index: -1;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
0 6px 0 -3px rgba(255, 255, 255, 0.8),
0 7px 1px -3px rgba(0, 0, 0, 0.3),
0 43px 0 -6px rgba(255, 255, 255, 0.8),
0 44px 2px -6px rgba(0, 0, 0, 0.2);
}
#footer #AllTodos, #footer #ActiveTodos, #footer #CompletedTodos {
color: #83756f;
}
#footer #clear-completed {
color: inherit;
}
#footer .sapUiHLayoutChildWrapper:nth-of-type(1) {
float: left;
text-align: left;
}
#todo-count {
vertical-align: 1px;
}
#todo-count:first-letter {
font-weight: bold;
}
#filters {
margin: 0;
padding: 0 2px 0 0;
position: absolute;
right: 0;
left: 0;
outline: none;
}
#filters .sapUiBtnStd,
#filters .sapUiBtnFoc {
background-color: transparent;
font-weight: normal;
outline: none;
padding-right: 3px;
margin-top: -1px;
}
#filters .sapUiSegButtonSelected.sapUiBtnStd,
#filters .sapUiSegButtonSelected.sapUiBtnAct.sapUiBtnFoc {
font-weight: bold;
}
#footer .sapUiHLayoutChildWrapper:nth-of-type(3) {
float: right;
}
#clear-completed {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
font-size: 11px;
padding: 0 10px;
border-radius: 3px;
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
height: 20px;
outline: none;
}
#-moz-document url-prefix() {
#clear-completed {
top: -22px;
}
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}
#info {
margin: 65px auto 0;
color: #a6a6a6;
font-size: 12px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
text-align: center;
}
#info a {
color: inherit;
}
.hidden{
display:none;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px dashed #C5C5C5;
border-bottom: 1px dashed #F7F7F7;
}
.learn a {
font-weight: normal;
text-decoration: none;
color: #b83f45;
}
.learn a:hover {
text-decoration: underline;
color: #787e7e;
}
.learn h3,
.learn h4,
.learn h5 {
margin: 10px 0;
font-weight: 500;
line-height: 1.2;
color: #000;
}
.learn h3 {
font-size: 24px;
}
.learn h4 {
font-size: 18px;
}
.learn h5 {
margin-bottom: 0;
font-size: 14px;
}
.learn ul {
padding: 0;
margin: 0 0 30px 25px;
}
.learn li {
line-height: 20px;
}
.learn p {
font-size: 15px;
font-weight: 300;
line-height: 1.3;
margin-top: 0;
margin-bottom: 0;
}
.quote {
border: none;
margin: 20px 0 60px 0;
}
.quote p {
font-style: italic;
}
.quote p:before {
content: '“';
font-size: 50px;
opacity: .15;
position: absolute;
top: -20px;
left: 3px;
}
.quote p:after {
content: '”';
font-size: 50px;
opacity: .15;
position: absolute;
bottom: -42px;
right: 3px;
}
.quote footer {
position: absolute;
bottom: -40px;
right: 0;
}
.quote footer img {
border-radius: 3px;
}
.quote footer a {
margin-left: 5px;
vertical-align: middle;
}
.speech-bubble {
position: relative;
padding: 10px;
background: rgba(0, 0, 0, .04);
border-radius: 5px;
}
.speech-bubble:after {
content: '';
position: absolute;
top: 100%;
right: 30px;
border: 13px solid transparent;
border-top-color: rgba(0, 0, 0, .04);
}
/**body*/.learn-bar > .learn {
position: absolute;
width: 272px;
top: 8px;
left: -300px;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, .6);
transition-property: left;
transition-duration: 500ms;
}
#media (min-width: 899px) {
/**body*/.learn-bar {
width: auto;
margin: 0 0 0 300px;
}
/**body*/.learn-bar > .learn {
left: 8px;
}
/**body*/.learn-bar #todoapp {
width: 550px;
margin: 130px auto 40px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<section id = "todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form">
<input type="text" id="new-todo" placeholder="New task" autofocus autocomplete="off" ng-model="remain">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li>
<div class="view">
<input type="checkbox" class="toggle">
<label>Etendre le linge</label>
<button class="destroy"></button>
</div>
</li>
</u1>
</section>
<footer id="footer">
<span id="todo-count"><strong> {{ remain }} </strong> Tasks remaining
</span>
</footer>
</section>
<script src="MyTodoList.js"></script>
<script src="app.js"></script>
</body>
</html>
The problem is with your cdn as it gives error. Use the below angularjs cdn. It will solve your problem.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js
See plunkr demo for this :
https://plnkr.co/edit/S6RYmyJE1BPIRpXtldRg?p=preview