Tag list

Developer
Parth Viroja
Size
2,358 Kb
Views
24,288
  1. Tag list Previews
  2. Tag list HTML Codes
  3. Tag list CSS Codes
  4. Tag list JS Codes

How do I make an tag list?

What is a tag list? How do you make a tag list? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Tag list Previews
IQ Test

Tag list - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tag list</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Tag List</h1>
<div class="tag-wrapper"> <ul class="tag-ul"> <li class="add"> <input type="text" class="new-tag"> </li> </ul>
</div> <script src='http://code.jquery.com/jquery-1.11.2.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tag list - Script Codes CSS Codes

* { padding: 0px; margin: 0px; outline: none; font: 16px "Calibri"; font-weight: lighter; later-spacing: 1px; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { overflow: hidden; overflow-y: auto; height: 100%;
}
h1 { padding: 40px 0px; font-size: 4em; color: #54B2D3; text-align: center; text-transform: uppercase;
}
.tag-wrapper { disply: block; background: #54B2D3; margin: 10px auto; width: 60%; padding: 10px;
}
.tag-ul { position: relative; display: block; padding: 4px; margin: 4px;
}
.tag-ul li { display: inline-block; vertical-align: middle; background: #fff; padding: 6px 8px; padding-right: 26px; margin: 1px 2px; border-radius: 2px;
}
.tag-ul li i.remove { position: absolute; margin-left: 4px; margin-top: 2px; display: inline-block; padding: 0px; color: #999; font-size: 16px; cursor: pointer;
}
.tag-ul input { display: inline-block; background: none; width: 100px; border: 0px; padding: 4px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.tag-ul li.add { background: none;
}

Tag list - Script Codes JS Codes

 $(document).ready(function() { $('.new-tag').focus(); $(document).on('click', '.tag-ul .remove', function() { $(this).parents(".tag").remove(); }); $('.tag-ul .new-tag').keypress(function(event) { if (event.which == '13') { if ($(this).val().trim() != '') { $('<li class="tag"><label>' + $(this).val() + '<input type="hidden" name="tags[]" value="' + $(this).val() + '" /><i class="material-icons remove" onclick="$(this).parents(".tag").remove();">clear</i></label></li>').insertBefore('.add'); $(this).val(''); } } }); });
Tag list - Script Codes
Tag list - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 2,358 Kb
Views 24,288
Do you need developer help for Tag list?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Parth Viroja (parthviroja) Script Codes
Name
3D-box
Custom checkbox and radio with menu
Filter, sort grid item
Jquery Tab
Upload Image Form
Right side menu tab with icon
Responsive Card Design
Dynamic Radial Menu Using Javascript
Treeview using Angular
Page load animation
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!