JS Input Selector
How do I make an js input selector?
Messing around with a variety of inputs & picking between them. What is a js input selector? How do you make a js input selector? This script and codes were developed by Matt Gross on 03 January 2023, Tuesday.
JS Input Selector - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS Input Selector</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="stuff"> <div class="selectors"></div> <div class="items"> <div class="input text"><input type="text" /></div> <div class="input file"><input type="file" /></div> <div class="input range"><input type="range" /></div> <div class="input time"><input type="time" /></div> </div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
JS Input Selector - Script Codes CSS Codes
.selectors, .items { display: inline-block; vertical-align: top; padding: 20px;
}
.selectors { background: #eee;
}
.items { border: 1px solid #ddd;
}
.input { padding: 20px;
}
.input.hidden { display: none;
}
.selector { padding: 10px 20px; margin-bottom: 5px; background: #fff; cursor: pointer; -webkit-transition: .3s ease; transition: .3s ease;
}
.selector.active { background: rgb(215, 93, 93); color: #fff;
}
JS Input Selector - Script Codes JS Codes
var $container = $('.stuff');
$(document.body).ready(function() { console.log('ready'); $('.input').each(function() { //find the input type var $inputType = $(this).find('> input').attr( "type" ); //create a div with a 'blargh' of that input type $('.selectors').append("<div class='selector " + $inputType + "' blargh='"+ $inputType +"'>" + $inputType + "</div>") $('.items > .input').addClass('hidden'); }); $('.selector').click(function() { var $class = $(this).attr( "blargh" ), $input = "stuff"; $('.selector').removeClass('active'); $('.items > .input').removeClass('active').addClass('hidden'); $(this).addClass('active'); $('.items > .input.' + $class).addClass('active').removeClass('hidden'); });
});
Developer | Matt Gross |
Username | mattgrosswork |
Uploaded | January 03, 2023 |
Rating | 3 |
Size | 2,182 Kb |
Views | 6,072 |
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 |
Stacking Shadows | 2,146 Kb |
Basic Flexbox Layout | 1,729 Kb |
Fiddling with css-only parallax | 2,996 Kb |
Super Basic Menu with Best Practices | 1,639 Kb |
Simple Skewed Image Container | 1,676 Kb |
JS Input Selector | 2,182 Kb |
Site Menu | 6,873 Kb |
EvenVision Branded Ajax Loader | 3,023 Kb |
Fullscreen Video Background | 1,706 Kb |
Scared Eyes | 1,673 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 |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Horizontal slider on scroll | Alojzije | 2,672 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Practice using Wixel | Emnk | 3,057 Kb |
Objects | Bonzaipenguin | 2,616 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 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!