A Pen by alex rodrigues
How do I make an a pen by alex rodrigues?
What is a a pen by alex rodrigues? How do you make a a pen by alex rodrigues? This script and codes were developed by Alex Rodrigues on 13 August 2022, Saturday.
A Pen by alex rodrigues - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by alex rodrigues</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="initial-scale = 1.0" /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap cf"> <h2>Slider Testing</h2> <p>Concept for using a mobile Input type range to set value of another input. Work around for cross-browsers.</p> <div class="range_wrap cf"> <span class="labels"><span class="label_wrap">Quantity: <span class="range_value"></span></span></span> <input type="range" min="1" max="25" step="1" value="1"> </div>
<form> <div class="quantity_wrap cf"> <span class="nmt">Need More than <span class="range_value"></span>?</span> <label>Quantity</label> <input id="quantity" name="quantity"> </div> <span class="submit_btn">Add to Cart</span>
</form>
</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>
A Pen by alex rodrigues - Script Codes CSS Codes
@import url('http://fonts.googleapis.com/css?family=Roboto:400,700');
@import url('http://fonts.googleapis.com/css?family=Roboto+Condensed:700');
* {box-sizing:border-box;}
body { background: #e7e7e7; font-family: 'Roboto', sans-serif; color: #333333; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
} input:focus { outline:0; }
.cf:after,
.cf:before { content: ''; display: table;
}
.cf:after { clear: both;
}
.cf { zoom: 1;
}
.wrap { width:25%; margin: 1em auto 5% auto; background: #Fff; padding:0 5%; box-shadow: 0px 0px 10px -2px #d5d5d5; border-radius:10px;
}
h2 { padding: .5em 0; width:100%; font-size: 2em; text-align:center; position: relative; display: block; margin-top:1em; letter-spacing: 0px; color: #294A6D; -moz-transform: scale(1) rotate(-10deg) skewX(-15deg) skewY(0deg); -webkit-transform: scale(1) rotate(-10deg) skewX(-15deg) skewY(0deg); -o-transform: scale(1) rotate(-10deg) skewX(-15deg) skewY(0deg); -ms-transform: scale(1) rotate(-10deg) skewX(-15deg) skewY(0deg); transform: scale(1) rotate(-10deg) skewX(-15deg) skewY(0deg); text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif;
}
p { text-align: center;
}
h2:after { width: 75px; height: 1px; background: #294A6D; position: absolute; bottom: 5px; content: " "; left: 50%; right:50%; margin-left:-35px;
}
h2:before { width: 75px; height: 1px; background: #294A6D; position: absolute; top: 5px; content: " "; left: 50%; right:50%; margin-left:-35px;
}
input[type="range"] { -webkit-appearance: slider-horizontal; padding:1em;
}
form label { position:absolute; left: -9999em;
}
.range_wrap .labels { margin: 1em 0 1em 0; display: block; color: #9E9E9E; text-align: center; font-size: 1.15em;
}
.range_value { font-weight: 700; color: #676767;
}
.range_wrap { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}
.range_wrap.alerted {
}
.label_wrap {
}
.submit_btn { background: #0070FF ; display:block; clear:both; width:50%; text-align:center; margin: 1.5em auto 2em; padding:1em; color: white; font-weight:700; border-radius: 5px; cursor:pointer; font-size:.85em; box-shadow: inset 0px 0px 18px -2px #0D4FA2; -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.submit_btn:hover { box-shadow: inset 0px 0px 63px -2px #205597;
}
input[type='range'] { -webkit-appearance: none; background-color: #E9E9E9; width: 100%; height: 20px; margin-bottom: 2em; border: 1px solid #D5D5D5; border-radius: 10px; padding: 0 .5em; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}
input[type='range']:focus { outline:0;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background-color: #fff; box-shadow: inset 0px 0px 10px 10px #f5f5f5; border: 1px solid #d5d5d5; width: 30px; height: 30px; border-radius:50%; position: relative;
}
input[type='range']::-webkit-slider-thumb:before {
/* content: " (" attr(data-rel) ") "; font-weight: 700 ; position: absolute ; top: -2em; width: 100%; font-family: text-align: center; background:#333333; color: #ffffff; padding:.25em; font-family: 'Roboto Condensed', sans-serif;*/
}
#quantity { font-size: 22px; border: 1px solid #D5D5D5; font-weight: 700; color: #676767; display: block; width: 21%; text-align: center; float: right; height: 100%; line-height: 50px; border-radius: 5px; -webkit-appearance: none;
}
.quantity_wrap {
}
.nmt {
color: #333333;
display: block;
text-align: center;
width: 70%;
float: left;
padding: 0 .5em;
line-height: 55px;
position: relative;
border: 1px solid #D5D5D5; background: #FAFAFA; font-style: italic;
}
.nmt:after { content: ""; position: absolute; right: -16px; background: rgba(0, 0, 0, 0); width: 0; z-index: 2; border-style: solid; border-width: 20px 0px 20px 17px; border-color: rgba(0, 0, 0, 0); border-left-color: #FAFAFA; top: 50%; margin-top: -19px;
}
.nmt:before { content: ""; position: absolute; right: -17px; z-index: 1; background: rgba(0, 0, 0, 0); width: 0; border-style: solid; border-width: 20px 0px 20px 17px; border-color: rgba(0, 0, 0, 0); border-left-color: #d5d5d5; top: 50%; margin-top: -19px;
}
.nmt .range_value { color: #333333 ;
}
@media only screen and (max-device-width: 800px) { .wrap {
width:75%;
}
}
@media only screen and (max-device-width: 480px) { .wrap {
width:100%;
}
}
A Pen by alex rodrigues - Script Codes JS Codes
$(document).ready(function(){ // On Load Set Value of Quantity to 1 & Hide Wrapper var range = $("input[type=range]").val(); $('.quantity_wrap').hide(); $('#quantity').val( range ).attr('type' , 'tel' ); $('.range_value').html( range );
// When Sliding the Range Slider $("input[type=range]").on('change', function(){ // Set Variables for Values var range = $("input[type=range]").val(); var max = $("input[type=range]").attr('max'); $('.range_value').html( range ); $('#quantity').val( range ); // Show Quantity Text Input When Max Is Reached if( range > max - 1) { $('.quantity_wrap').show(300); $('#quantity').attr('value' , range ); $('.range_wrap').addClass('alerted'); } // Hide Quantity Text Input else { $('.quantity_wrap').hide(300); $('#quantity').attr('value' , range ); $('.range_wrap').removeClass('alerted'); } })
// If Quantity Value = 0 set to 1 $('#quantity').on('blur', function(){ var range = $("input[type=range]").val(); var quant = $("#quantity").val(); var max = $("input[type=range]").attr('max'); var $this = $(this); if($this.val() == ''){ $this.val( '1' ); } if($this.val() == '0'){ $this.val( '1' ); $('.range_value').html( range ); } if (max - 1 > quant ) { $('.quantity_wrap').hide(300); } }); // Replace Letters with Numbers
$('#quantity').keyup(function (e) { var range = $("input[type=range]").val(); var quant = $("#quantity").val(); var max = $("input[type=range]").attr('max'); this.value = this.value.replace(/[\s\D]/g, ''); if (quant < max - 1 ) { $( "input[type=range]").val( quant ); $('.range_value').html( quant ); } }); // For testing On Click alerts value of the Quantity Input
$('.submit_btn').click(function(){ var quantity = $('#quantity').val() alert( 'Value of Quantity Input ' + quantity );
}); });
Developer | Alex Rodrigues |
Username | alex_rodrigues |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 3,920 Kb |
Views | 18,216 |
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 |
Front End Age Gate | 5,806 Kb |
Learning FlexBox | 2,821 Kb |
Toying With Flexslider | 5,052 Kb |
WIP - Checkout Flow Steps Progress mobile concept | 3,960 Kb |
Playing with Grid | 2,224 Kb |
SA_testing | 2,188 Kb |
Animate delay Sass Mixin | 3,050 Kb |
Responsive Checkout Concept WIP | 6,323 Kb |
Jquery Scroll test | 3,879 Kb |
Animated Bar Graphs | 3,919 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 |
Dice | Fraina | 5,026 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
Flex layout example | Mofny | 1,663 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 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!