International Sort
How do I make an international sort?
What is a international sort? How do you make a international sort? This script and codes were developed by Juan Gallardo on 18 August 2022, Thursday.
International Sort - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>International Sort</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav"> <a href="#" data-category-type="germany" data-category-name="germany">Germany</a> <a href="#" data-category-type="sweden" data-category-name="sweden">Sweden</a> <a href="#" data-category-type="canada" data-category-name="canada">Canada</a>
</div>
<div id="Categories"> <div class="hide" data-category-type="sweden" data-category-name="sweden"> <img src="http://31.media.tumblr.com/tumblr_ldefvinVQp1qav6t4o1_500.jpg"><br> Sweden </div> <div class="hide" data-category-type="sweden" data-category-name="sweden"> <img src="http://37.media.tumblr.com/tumblr_lvkc8bJP2S1r6r3f1o1_1280.jpg"><br> Sweden </div> <div class="hide" data-category-type="sweden" data-category-name="sweden"> <img src="http://www.wired.com/wp-content/uploads/nextgen/underwire/wp-content/gallery/tron-ice-hotel-sweden/Disney%20Tron%20Legacy%20inspired%20-%20legacy%20of%20the%20river%20suite%20at%20the%20Ice%20Hotel%20-%20arctic%20sweden%20-_660.jpg"><br> Sweden </div> <div class="hide" data-category-type="sweden" data-category-name="sweden"> <img src="http://31.media.tumblr.com/3c331002fb2328d62fa8a52babf5fb3d/tumblr_mwir907Eis1rkdemgo1_1280.jpg"><br> Sweden </div> <div class="hide" data-category-type="canada" data-category-name="canada"> <img src="http://31.media.tumblr.com/tumblr_ls55tyStCp1qay2gro1_1280.jpg"><br> Canada </div> <div class="hide" data-category-type="canada" data-category-name="canada"> <img src="http://31.media.tumblr.com/tumblr_ls55tyStCp1qay2gro1_1280.jpg"><br> Canada </div> <div class="hide" data-category-type="canada" data-category-name="canada"> <img src="http://media.tumblr.com/tumblr_m3goz3fvex1qlhvji.jpg"><br> Canada </div> <div class="hide" data-category-type="canada" data-category-name="canada"> <img src="http://37.media.tumblr.com/c46624131ad64580a35c1e1a4bd0be9c/tumblr_mwzidiaZMg1qb30dwo1_500.jpg"><br> Canada </div> <div class="hide" data-category-type="germany" data-category-name="germany"> <img src="http://static.tumblr.com/f76976a7d6bcb4d776f9456e9b403693/swg5rxq/UAsn1w1c4/tumblr_static_google-launches-defend-your-net-campaign-in-germany-da82d888a0.jpg"><br> Germany </div> <div class="hide" data-category-type="germany" data-category-name="germany"> <img src="http://media.tumblr.com/tumblr_m9xl9w8DjC1r44f5b.jpg"><br> Germany </div> <div class="hide" data-category-type="germany" data-category-name="germany"> <img src="http://imagizer.imageshack.us/a/img89/7104/2tgw.jpg"><br> Germany </div> <div class="hide" data-category-type="germany" data-category-name="germany"> <img src="http://31.media.tumblr.com/tumblr_m7c289BHLd1r4xjubo1_500.jpg"><br> Germany </div> <div class="hide" data-category-type="germany" data-category-name="germany"> <img src="http://img839.imageshack.us/img839/5767/schwerin.jpg"><br> Germany </div> <!-- <div class="hide" data-category-type="germany" data-category-name="germany">Germany</div> -->
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
International Sort - Script Codes CSS Codes
body { font-family: helvetica;
}
img { width: 300px; }
.nav { float: left; }
.nav { margin: 20px; padding-top: 36px;}
.nav a { color: #555; text-decoration: none; margin-right: 13px;
}
#Categories { float:left; }
#Categories > div { margin-bottom: 13px; }
#Categories { font-size: 11px; }
International Sort - Script Codes JS Codes
$('.nav a').on('click', function (e) { e.preventDefault(); var cat = $(this).data('categoryType'); var nam = $(this).data('categoryName'); $('#Categories > div').hide(); $('#Categories > div[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();
});
Developer | Juan Gallardo |
Username | JGallardo |
Uploaded | August 18, 2022 |
Rating | 3 |
Size | 2,564 Kb |
Views | 38,456 |
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!
Name | Size |
BruxZir - Testimonial Section | 169,941 Kb |
BruxZir - Home Page -3 | 2,170 Kb |
A Pen by Juan Gallardo | 1,823 Kb |
Travel Location Select | 2,218 Kb |
Working demo of Headroom.js | 12,199 Kb |
Template - iPhone 5 - Vertical | 1,919 Kb |
Testimonial - Concept 1 | 1,880 Kb |
Button - Test | 2,834 Kb |
Plane Blog - Masonry Demo | 5,347 Kb |
Fixed Header when scrolling | 4,203 Kb |
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!
Name | Username | Size |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
RSW | JordanC | 3,726 Kb |
A Pen by Markku Lehmonen | SharpDal | 7,804 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
Automatic scroll | Skeurentjes | 4,042 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!