Brief Explanation: I have div1 and div2 onside a <div>. On right click i open context menu which has a button switch.
On clicking this button i want div1 and div2 to switch positions,
attached pic for your reference:
here is my code:
$(document).on("contextmenu", "div", function(event) {
// alert("right clicked");
event.stopPropagation();
this.clickedElement = $(this);
event.preventDefault();
$(this.clickedElement).addClass('selecteddiv');
$(".custom-menu4").show();
$(".custom-menu4 li").unbind().click(function() {
switch ($(this).attr("data-action")) {
case "second":
$(".custom-menu4").hide();
$(".selecteddiv").removeClass('selecteddiv');
break;
case "first":
alert("clicked switch");
break;
}
})
// alert("add");
});
.selecteddiv {
border: 1px solid rgb(180, 13, 172);
}
.custom-menu4 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" style="padding: 20px">
<div class="switch">Hello</div>
<div class="switch">World</div>
</div>
<ul class='custom-menu4'>
<li data-action="first">Switch</li>
<li data-action="second">Cancel</li>
</ul>
link to jsfiddle
On clicking the switch button, the div1 should switch position with div2, i mean in whatever positions they are, they should switch.
Please help.
You can do it by selecting the second element and prepending it to the div with class "click" so it becames the first.
$("li:contains('Switch')").click(function() {
$('div.switch:last').prependTo('.click');
})
.selecteddiv {
border: 1px solid rgb(180, 13, 172);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" style="padding: 20px">
<div class="switch">Hello</div>
<div class="switch">World</div>
</div>
<ul class='custom-menu4'>
<li data-action="first">Switch</li>
<li data-action="second">Cancel</li>
</ul>
You just need to select the first switchable element, and move it after the other one. Demo:
$(document).on("contextmenu", "div", function(event) {
event.stopPropagation();
event.preventDefault();
$('.selecteddiv').removeClass("selecteddiv");
$(this).addClass('selecteddiv');
$(".custom-menu4").show();
$(".custom-menu4 li").off().click(function() {
switch ($(this).attr("data-action")) {
case "second":
$(".custom-menu4").hide();
$(".selecteddiv").removeClass('selecteddiv');
break;
case "first":
/***** This is the important bit, to do the switching ****/
var $div = $('.switch').first();
$div.next('.switch').after($div);
break;
}
})
});
.selecteddiv {
border: 1px solid rgb(180, 13, 172);
}
.custom-menu4 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" style="padding: 20px">
<div class="switch">Hello</div>
<div class="switch">World</div>
</div>
<ul class='custom-menu4'>
<li data-action="first">Switch</li>
<li data-action="second">Cancel</li>
</ul>
I simplified this a lot
$(document).on("contextmenu","div", function(event) {
event.stopPropagation();
event.preventDefault();
$(".custom-menu4").show();
})
$('#btn-cancel').click(function (evt) {
$(".custom-menu4").hide();
});
$('#btn-switch').click(function (evt) {
var $div = $('#top-divs div').first();
$('#top-divs').append($div);
});
.selecteddiv {
border: 1px solid rgb(180, 13, 172);
}
.custom-menu4 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-divs" style="padding: 20px">
<div class="switch">Hello</div>
<div class="switch">World</div>
</div>
<ul class='custom-menu4'>
<li id="btn-switch" data-action="first">Switch</li>
<li id="btn-cancel" data-action="second">Cancel</li>
</ul>
$('.click').find('.switch').eq(0).appendTo($('.click'));
http://jsfiddle.net/ohw25Ltf/
You can use flex with order and keep the DOM elements in their original location.
With this technique, you could manipulate the ordering of multiple elements quite easily only by changing their order.
$(".switch-btn").click(function() {
$('.switch').toggleClass('high-order');
})
.click {
display: flex;
flex-flow: column wrap;
padding: 20px;
}
.click > div {
order: 1
}
.click > div.high-order {
order: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
<div>Hello</div>
<div class="switch">World</div>
</div>
<button class="switch-btn">Switch</button>
Do this in JavaScript:
$(".custom-menu4 li").unbind().click(function() {
switch ($(this).attr("data-action")) {
case "second":
$(".custom-menu4").hide();
$(".selecteddiv").removeClass('selecteddiv');
break;
case "first":
alert("clicked switch");
var selected = $("div.selecteddiv").html();
var unselected = $("div").not(".selecteddiv").html();
$("div.selecteddiv").html(unselected);
$("div").not(".selecteddiv").html(selected);
$(".selecteddiv").removeClass("selecteddiv");
break;
}
})
Related
Goal
Avoid unnecessary event bindings.
Sample code
Comment box with a reply button for each individual comment
const btns = document.getElementsByClassName('reply-btn');
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', showCommentContentAsPreview);
}
function showCommentContentAsPreview(e) {
console.log('showCommentContentAsPreview()');
// CHECK IF THIS BUTTON ALREADY BINDED !!!
const previewDiv = document.getElementById('preview');
const commentId = e.target.getAttribute('data-comment-id')
const commentDiv = document.getElementById('comment-' + commentId);
const commentText = commentDiv.querySelector('p').innerText
const closeReplyBtn = previewDiv.querySelector('button');
const previewContent = previewDiv.querySelector('.preview-content');
// set to preview
previewContent.innerText = commentText;
// show reply close button
closeReplyBtn.classList.remove('hidden');
// bind EventListener to "reply close button"
closeReplyBtn.addEventListener('click', closeReply)
function closeReply() {
console.log('bind to btn');
previewContent.innerText = '';
this.removeEventListener('click', closeReply);
closeReplyBtn.classList.add('hidden');
}
}
.hidden {
display: none;
}
.comment {
border-bottom: 1px solid #000;
padding: 5px;
}
.preview {
background-color: #ccc;
padding: 20px;
margin-top: 20px;
}
<div>
<!-- comment list -->
<div id="comment-1" class="comment">
<p>Comment Content 1</p>
<button class="reply-btn" data-comment-id="1">reply</button>
</div>
<div id="comment-2" class="comment">
<p>Comment Content 2</p>
<button class="reply-btn" data-comment-id="2">reply</button>
</div>
</div>
<!-- output -->
<div>
<div id="preview" class="preview">
<div class="preview-content"></div>
<button class="hidden">Close Preview</button>
</div>
</div>
Simulate problem
When you try the example, the following two scenarios occur:
Click reply once and then click "close preview"
Click on reply several times and then on "close preview".
Question
How can I avoid multiple bindings to the same button? I am already thinking about singleton.
Instead of binding a listener to every element in the series, you can bind a single listener once on a common parent of them all, and then use element.matches() to determine if the click target is the one that you want before doing more work. See the following example:
function logTextContent (elm) {
console.log(elm.textContent);
}
function handleClick (ev) {
if (ev.target.matches('.item')) {
logTextContent(ev.target);
}
}
document.querySelector('ul.list').addEventListener('click', handleClick);
<ul class="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
<li class="item">Item 5</li>
</ul>
With the helpful hints from #Zephyr and #jsejcksn I have rewritten the code of the above question. Thus I have achieved my goal of avoiding multiple identical bindings to one element.
const container = document.getElementById('comment-container');
const previewDiv = document.getElementById('preview');
const closeReplyBtn = previewDiv.querySelector('button');
const previewContent = previewDiv.querySelector('.preview-content');
container.addEventListener('click', handleClick);
function handleClick(ev) {
if (ev.target.matches('.reply-btn')) {
if (ev.target.getAttribute('listener') !== 'true') {
removeOtherListenerFlags();
ev.target.setAttribute('listener', 'true');
showCommentContentAsPreview(ev);
}
}
if (ev.target.matches('#preview button')) {
previewContent.innerText = '';
closeReplyBtn.classList.add('hidden');
removeOtherListenerFlags();
}
}
function showCommentContentAsPreview(e) {
console.log('showCommentContentAsPreview()');
const commentId = e.target.getAttribute('data-comment-id')
const commentDiv = document.getElementById('comment-' + commentId);
const commentText = commentDiv.querySelector('p').innerText
// set to preview
previewContent.innerText = commentText;
// show reply close button
closeReplyBtn.classList.remove('hidden');
}
function removeOtherListenerFlags() {
const replyBtns = container.querySelectorAll('.reply-btn')
Object.keys(replyBtns).forEach((el) => {
replyBtns[el].removeAttribute('listener');
})
}
.hidden {
display: none;
}
.comment {
border-bottom: 1px solid #000;
padding: 5px;
}
.preview {
background-color: #ccc;
padding: 20px;
margin-top: 20px;
}
<div id="comment-container">
<div id="comment-listing">
<!-- comment list -->
<div id="comment-1" class="comment">
<p>Comment Content 1</p>
<button class="reply-btn" data-comment-id="1">reply 1</button>
</div>
<div id="comment-2" class="comment">
<p>Comment Content 2</p>
<button class="reply-btn" data-comment-id="2">reply 2</button>
</div>
</div>
<!-- output -->
<div>
<div id="preview" class="preview">
<div class="preview-content"></div>
<button class="hidden">Close Preview</button>
</div>
</div>
</div>
Cool and Thanks!
I have the below data coming from another server which is not in my control and when displaying it in the browser I have to provide a solution to
1) Show delete button for the class childElement on hover
2) Click on delete button and delete that childElement div
Is there any way I can do it using CSS/JS or Vuejs ( Dynamically adding Delete button on hover and delete the element on button click) ? Thank You
.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
Your work basically boils down to some script that will find all the elements and auto append elements with listeners.
const childElements = document.querySelectorAll('.childElement');
childElements.forEach(childElement => {
// create button for each childElement
const deleteButton = document.createElement('button');
deleteButton.setAttribute('hidden', '');
deleteButton.innerText = "Click to delete";
// append button to the childElement
childElement.appendChild(deleteButton);
// add event listeners
childElement.addEventListener('mouseenter', event => {
deleteButton.removeAttribute('hidden');
});
childElement.addEventListener('mouseleave', event => {
deleteButton.setAttribute('hidden', '');
});
deleteButton.addEventListener('click', event => {
childElement.setAttribute('hidden', '');
});
});
.childElement {
width: 100px;
height: 100px;
background-color: #f3f3f3;
margin-top: 10px;
padding: 10px;
}
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
You could add an array to your data object called childDivs and which item inside that array contains a boolean showBtn intilially its value is false and the text to be shown inside the div element
UPDATE :
the above described logic could be useful when you could control the data in front-end, but according to the OP's use case, we could add the script given by #GenericUser inside the mounted hook.
new Vue({
el: '#app',
data() {
return {
childDivs: [{
text: 'First',
showBtn: false
},
{
text: 'Second',
showBtn: false
},
{
text: 'Third',
showBtn: false
}
]
}
},
methods: {
remove(i) {
this.childDivs.splice(i, 1)
}
},
mounted() {
const childElements = document.querySelectorAll('.childElement');
childElements.forEach(childElement => {
const deleteButton = document.createElement('button');
deleteButton.setAttribute('hidden', '');
deleteButton.innerText = "delete";
deleteButton.classList.add("btn")
deleteButton.classList.add("btn-danger")
childElement.appendChild(deleteButton);
childElement.addEventListener('mouseenter', event => {
deleteButton.removeAttribute('hidden');
});
childElement.addEventListener('mouseleave', event => {
deleteButton.setAttribute('hidden', '');
});
deleteButton.addEventListener('click', event => {
childElement.setAttribute('hidden', '');
});
});
}
})
.childElement {
width: 100px;
height: 100px;
background-color: #f3f3f3;
margin-top: 10px;
padding: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<div id="app" data-app>
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
</div>
Try this code
also use jquery to you project
here like this
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div id="videos">
<div class="childElement" id="divOne" >
<div id="delete">X</div>
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
<script>
$(document).ready(function(){
$("#divOne").hover(function(){
$(this).css("visibility", "visible");
}, function(){
$(this).css("visibility", "hidden");
});
$("#delelte").on("click",()=>{
$("#divOne").children().remove();
});
});
</script>
You can try this one with jQuery:
$('body').on('mouseenter', '.childElement', function(e){
$(this).append('<div class="remove">remove it</div>');
$('.childElement').on('mouseleave', function(){
$('.remove').remove();
});
$('body').on('click', '.remove', function(e){
$(this).parent().remove();
});
});
.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}
.remove {
position:absolute;
width: 100px;
height: 30px;
background: #000;
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>
I want to create search-input with drop-down list. The list must close when i have focused or clicked anywhere except search-input.
I added listClose() to "blur"-Listener. But now I can`t catch click-event from drop-down elements. Which is the event-listener I really need? Or I need the another realization?
Please, run snippet below. I tried to write it the most clear.
document.addEventListener("DOMContentLoaded", function() {
var inputElement = document.getElementById("input_word-search");
var listElement = document.getElementById("dd-menu_search-input");
// Input will focused when document is ready.
inputElement.focus();
listOpen = function() {
listElement.classList.add('dd-open');
};
listClose = function() {
listElement.classList.remove('dd-open');
};
inputElement.addEventListener("focus", function(e) {
listOpen();
});
inputElement.addEventListener("blur", function(e) {
listClose();
});
})
.dd-menu {
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
position: absolute;
display: none;
}
.dd-suggestion {
cursor: pointer;
text-align: left;
padding: 3px 20px;
line-height: 24px;
}
.dd-suggestion:hover {
color: #fff;
background-color: #697981;
}
.dd-open {
display: block;
}
.dd-empty {
display: none;
}
#dd-menu_search-input {
width: 74%;
}
<body>
<div id="input-group">
<input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach">
<div id="dd-menu_search-input" class="dd-menu dd-open">
<div class="dd-dataset">
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-1
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-2
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-3
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-4
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-5
</div>
</div>
</div>
</div>
</body>
A solution (or may I say workaround) is to use onmousedown instead of onclick, so it will look like this (Note that I'm also removing the alert() and using a console.log() instead)
<body>
<div id="input-group">
<input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach">
<div id="dd-menu_search-input" class="dd-menu dd-open">
<div class="dd-dataset">
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-1
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-2
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-3
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-4
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-5
</div>
</div>
</div>
</div>
</body>
The reason is when you focusout the textbox, it call blur function and the list immediately disapear. So you can't click on the list. You can walkaround by setTimeout to listClose() like this
listClose = function() {
setTimeout(()=>{
listElement.classList.remove('dd-open');
},100)
};
I added boolean-variable that indicates mousedown-event on drop-down list
var mousedownOnNodeCalee = false;
listElement.addEventListener("mousedown", function (e) {
mousedownOnNodeCalee = true;
});
inputElement.addEventListener("blur", function (e) {
if(!mousedownOnNodeCalee) {
listClose();
return;
}
inputElement.focus();
mousedownOnNodeCalee = false;
});
I'm having a problem on how to disable tab 3 when the first button is clicked. When I click Activate 2nd tab, the 2nd tab will be enabled, but the 3rd tab will be enabled, too; it should be enabled when I click Activate 3rd tab.
What should I do?
<div class="tab-wrapper" id="tab-wrapper">
<div class="tab-header">
<ul class="tabs">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
<div class="tab_container">
<div id="tab1" class="tab_content">
this is tab 1
<button id="button2">Activate 2nd tab</button>
</div>
<div id="tab2" class="tab_content">
this is tab 2
<button id="button3">Activate 3rd tab</button>
</div>
<div id="tab3" class="tab_content">
This is tab3
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
var activate = false,
tabLinks = $('.tabs a'),
tabContent = $('.tab_container').children();
tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup
$('#tab2').hide();
$('#tab3').hide(); // Hide second tab
tabLinks.bind('click', function(e) {
e.preventDefault();
if(activate === true) { // Only do something if button has been clicked
var target = this.hash,
el = $(this);
tabLinks.filter('.active').removeClass('active');
el.addClass('active');
tabContent.hide(); // Hide all
$(target).show(); // Show selected
}
});
$('#button2').bind('click', function() {
activate = true; // Activate tab functionality
tabLinks.eq(1).trigger('click'); // Trigger a click on the second tab link
});
$('#button3').bind('click', function() {
activate = true; // Activate tab functionality
tabLinks.eq(2).trigger('click'); // Trigger a click on the third tab link
});
});
</script>
</html>
You can do something like this (using an array to know if the tab is already activated instead of only one boolean):
$(function() {
var activate = [true, false, false],
tabLinks = $('.tabs a'),
tabContent = $('.tab_container').children();
tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup
$('#tab2').hide(); // Hide second tab
$('#tab3').hide(); // Hide second tab
tabLinks.on('click', function(e) {
e.preventDefault();
var idx = $(this).data('index');
if (activate[idx] === true) { // Only do something if button has been clicked
var target = this.hash,
el = $(this);
tabLinks.filter('.active').removeClass('active');
el.addClass('active');
tabContent.hide(); // Hide all
$(target).show(); // Show selected
}
});
$('button').on('click', function() {
var index = $(this).data('index');
activate[index] = true; // Activate tab functionality
tabLinks.eq(index).trigger('click'); // Trigger a click on the second tab link
});
});
* {
padding: 0;
margin: 0;
}
body {
margin: 30px;
}
.tab-wrapper {
width: 500px;
}
.tabs {
overflow: hidden;
list-style: none;
}
.tabs li {
float: left;
margin-right: 10px;
border: 1px solid #ccc;
border-bottom: 0;
}
.tabs a {
display: block;
padding: 5px;
width: 100px;
}
.tabs a.active {
background: #efefef;
}
.tab_container > div {
padding: 10px;
border: 1px solid #ccc;
}
button {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="tab-wrapper" id="tab-wrapper">
<div class="tab-header">
<ul class="tabs">
<li>step1</li>
<li>step2</li>
<li>step3</li>
</ul>
</div>
<div class="tab_container">
<div id="tab1" class="tab_content">
here is the list of the overview
<button data-index="1">Activate 2nd tab</button>
</div>
<div id="tab2" class="tab_content">
here is the list of the overview
<button data-index="2">Activate 3nd tab</button>
</div>
<div id="tab3" class="tab_content">
End
</div>
</div>
</div>
</body>
You can find the code on jsfiddle too :
https://jsfiddle.net/psLshz3u/
Here is what I want to do...First if you click the "All" li box it adds and removes a red border around all the other boxes. Now I want it so that if a box containing a red border is clicked then simply toggle the class .box-border.
<style>
.box { width: 100px; height: 100px; background: beige; }
.box.select-all { background: #333; color: white; }
.box-border { border: 1px solid red; }
ul li {
display: inline;
list-style: none;
float: left;
margin: 0 5px;
text-align: center;
line-height: 100px;
}
</style>
<div class="row">
<div class="large-10 push-2 medium-10 columns">
<ul>
<li class="box box1"></li>
<li class="box box2"></li>
<li class="box box3"></li>
<li class="box box4"></li>
<li class="box box5 select-all">All</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
var selectAll = $('.box.select-all');
var boxes = $('.box').not(selectAll);
selectAll.click(function(){
boxes.toggleClass('box-border');
// if (boxes.hasClass('box-border')) {
// console.log('yes');
// }
});
$('ul li').click(function(){
var item = $(this).index();
if (item.hasClass('box-border')) {
console.log('yessssss');
}
});
});
</script>
You need to use $(this).hasClass('box-border')
As per your code, item will be a integer referring to elements index.
var item = $(this).index();
Modified Code:
$('ul li').click(function(){
var item = $(this).index();
if ($(this).hasClass('box-border')) {
console.log('yessssss');
}
});
EDIT
If you want to use toggleClass()
$('ul li').click(function(){
var item = $(this).index();
$(this).toggleClass('box-border');
});
I wrote this (with jQuery) to toggle between two pages upon clicking a button with a class (the class is removed if it is present, and added if it is absent to use the same button (element with the same ID) again),
the order of the method calls and 'innerHTML' property setting does matter in the function (you must make changes to the page(or other changed element) before you make changes to the button (or other event 'triggered' element)), and the order in which you add the 'mPage' class (the triggering class) to the button does not matter.
<script id="toSettings">
const spage = document.getElementById("mContent");
$( "#setsBtn" ).click(function(){
if ($(this).hasClass('mPage')) {
spage.innerHTML = '';
spage.innerHTML = '<br /><div style="width=100%; height=100%; top=0; left=0; background-color: pink;"> <button class="w3-btn w3-amber" onclick="goso()">dest</button><br /> <button class="w3-btn w3-amber">dest</button><br /><button class="w3-btn w3-amber">dest</button> </div>';
this.innerHTML = '<img src="img/leftarrow.svg"/>'
this.classList.remove('mPage');
}
else {
spage.innerHTML='';
spage.innerHTML = '<div style="width: 100%; height: 100%; " id="mContent" class="mContent w3-center"><br /><br /><br /><br /><br /><br /><br /><div id="" class=""><div class="mPageBtn w3-button w3-green" id="ledgerbtn" style="display: block;">Ledger</div><br /></div>';
this.classList.add('mPage');
this.innerHTML = '<img src="img/gear.svg"/>';
}
});
</script>
The 'w3' classes are part of the w3-css library available on w3schools.com .