Toggle Time
How do I make an toggle time?
Created some toggles with a dependency that throws an alert. I'm terrible at JS (that's why almost everything is done in css) so anyone who wants to show me how wrong that is, let me know :). What is a toggle time? How do you make a toggle time? This script and codes were developed by Pete Nawara on 10 September 2022, Saturday.
Toggle Time - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle Time</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url('https://fonts.googleapis.com/css?family=Roboto');
body { background: #222 url(https://subtlepatterns.com/patterns/tweed.png) repeat; color: #404040; font: "Roboto", Tahoma, Verdana, sans-serif;
}
body h4,
body h5 { text-align: center; text-transform: uppercase;
}
body .button { background: #0099ff;
}
body .wrap { margin: 10px auto; width: 400px;
}
body .wrap form fieldset { background: #fff;
}
body .wrap form fieldset .toggle { background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; height: 40px; margin: 0px auto; position: relative; width: auto;
}
body .wrap form fieldset .toggle.small { width: 100px;
}
body .wrap form fieldset .toggle .toggle-input { display: none;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-left { background: #007fff;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-right { background: #333;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; color: #fff; font-weight: bold;
}
body .wrap form fieldset .toggle .toggle-input:not(:checked) + .toggle-label-on ~ .toggle-selection { background: #468C00;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection { left: 50%; right: 2px; -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out;
}
body .wrap form fieldset .toggle .toggle-label { color: #aaa; cursor: pointer; float: left; font-size: 15px; font-weight: bold; line-height: 38px; position: relative; text-align: center; width: 50%; z-index: 2;
}
body .wrap form fieldset .toggle .toggle-label.full { width: 100%;
}
body .wrap form fieldset .toggle .toggle-label.toggle-label-off { padding-left: 2px;
}
body .wrap form fieldset .toggle .toggle-label.toggle-label-on { padding-right: 2px;
}
body .wrap form fieldset .toggle .toggle-label.off { opacity: .5;
}
body .wrap form fieldset .toggle .toggle-selection { background: #007fff; border-radius: 3px; display: block; height: 34px; left: 2px; position: absolute; right: 50%; top: 2px; transition: left 0.15s; width: auto; z-index: 1;
}
body .wrap form fieldset .toggle .toggle-selection.full { background: #468c00; left: 2px; right: 2px;
}
body .wrap form fieldset .toggle .publicnotice { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; border-radius: 100px; height: 130px; opacity: 0; padding: 10px; position: absolute; text-align: center; top: -45px; width: 130px;
}
body .wrap form fieldset .toggle .publicnotice:after { content: ''; display: block; height: 0; position: absolute; top: 55px; width: 0;
}
body .wrap form fieldset .toggle .publicnotice.left { left: 0px;
}
body .wrap form fieldset .toggle .publicnotice.left:after { border-bottom: 10px solid transparent; border-left: 10px solid #ee8822; border-top: 10px solid transparent; right: -9px;
}
body .wrap form fieldset .toggle .publicnotice.right { right: 0px;
}
body .wrap form fieldset .toggle .publicnotice.right:after { border-bottom: 10px solid transparent; border-right: 10px solid #ee8822; border-top: 10px solid transparent; left: -9px;
}
body .wrap form fieldset .toggle .publicnotice.on { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; background: #ee8822; opacity: 1;
}
body .wrap form fieldset .toggle .publicnotice.on.left { left: -140px;
}
body .wrap form fieldset .toggle .publicnotice.on.right { right: -140px;
}
body .wrap form fieldset .toggle .publicnotice h5 { color: #fff; margin-bottom: 0px; margin-top: 8px;
}
body .wrap form fieldset .toggle .publicnotice span { color: #fff; font-size: 14px; font-weight: 200; line-height: 12px; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrap"> <form> <fieldset> <h4>I would like to</h4> <div class="toggle"> <input type="radio" class="toggle-input" name="joincreate" value="join" id="join" checked> <label for="join" class="toggle-label toggle-label-off" id="joinLabel">Join</label> <div class="publicnotice right"><span><h5>Sorry!</h5> You do not have permission to create a Public League!</span> </div> <input type="radio" class="toggle-input" name="joincreate" value="create" id="create"> <label for="create" class="toggle-label toggle-label-on" id="createLabel">Create</label> <span class="toggle-selection"></span> </div> <h4>a</h4> <div class="toggle"> <input type="radio" class="toggle-input" name="publicprivate" value="public" id="public" checked> <label for="public" class="toggle-label toggle-label-off public" id="publicLabel">Public</label> <div class="publicnotice left"><span><h5>Sorry!</h5> You do not have permission to create a Public League!</span> </div> <input type="radio" class="toggle-input dependent" name="publicprivate" value="private" id="private"> <label for="private" class="toggle-label toggle-label-on" id="privateLabel">Private</label> <span class="toggle-selection"></span> </div> <h4>League</h4> <a href="#" class="button large expand">Let's go!</a> </fieldset> </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>
Toggle Time - Script Codes CSS Codes
@import url('https://fonts.googleapis.com/css?family=Roboto');
body { background: #222 url(https://subtlepatterns.com/patterns/tweed.png) repeat; color: #404040; font: "Roboto", Tahoma, Verdana, sans-serif;
}
body h4,
body h5 { text-align: center; text-transform: uppercase;
}
body .button { background: #0099ff;
}
body .wrap { margin: 10px auto; width: 400px;
}
body .wrap form fieldset { background: #fff;
}
body .wrap form fieldset .toggle { background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; height: 40px; margin: 0px auto; position: relative; width: auto;
}
body .wrap form fieldset .toggle.small { width: 100px;
}
body .wrap form fieldset .toggle .toggle-input { display: none;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-left { background: #007fff;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-right { background: #333;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; color: #fff; font-weight: bold;
}
body .wrap form fieldset .toggle .toggle-input:not(:checked) + .toggle-label-on ~ .toggle-selection { background: #468C00;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-on ~ .toggle-selection { left: 50%; right: 2px; -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out;
}
body .wrap form fieldset .toggle .toggle-label { color: #aaa; cursor: pointer; float: left; font-size: 15px; font-weight: bold; line-height: 38px; position: relative; text-align: center; width: 50%; z-index: 2;
}
body .wrap form fieldset .toggle .toggle-label.full { width: 100%;
}
body .wrap form fieldset .toggle .toggle-label.toggle-label-off { padding-left: 2px;
}
body .wrap form fieldset .toggle .toggle-label.toggle-label-on { padding-right: 2px;
}
body .wrap form fieldset .toggle .toggle-label.off { opacity: .5;
}
body .wrap form fieldset .toggle .toggle-selection { background: #007fff; border-radius: 3px; display: block; height: 34px; left: 2px; position: absolute; right: 50%; top: 2px; transition: left 0.15s; width: auto; z-index: 1;
}
body .wrap form fieldset .toggle .toggle-selection.full { background: #468c00; left: 2px; right: 2px;
}
body .wrap form fieldset .toggle .publicnotice { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; border-radius: 100px; height: 130px; opacity: 0; padding: 10px; position: absolute; text-align: center; top: -45px; width: 130px;
}
body .wrap form fieldset .toggle .publicnotice:after { content: ''; display: block; height: 0; position: absolute; top: 55px; width: 0;
}
body .wrap form fieldset .toggle .publicnotice.left { left: 0px;
}
body .wrap form fieldset .toggle .publicnotice.left:after { border-bottom: 10px solid transparent; border-left: 10px solid #ee8822; border-top: 10px solid transparent; right: -9px;
}
body .wrap form fieldset .toggle .publicnotice.right { right: 0px;
}
body .wrap form fieldset .toggle .publicnotice.right:after { border-bottom: 10px solid transparent; border-right: 10px solid #ee8822; border-top: 10px solid transparent; left: -9px;
}
body .wrap form fieldset .toggle .publicnotice.on { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; background: #ee8822; opacity: 1;
}
body .wrap form fieldset .toggle .publicnotice.on.left { left: -140px;
}
body .wrap form fieldset .toggle .publicnotice.on.right { right: -140px;
}
body .wrap form fieldset .toggle .publicnotice h5 { color: #fff; margin-bottom: 0px; margin-top: 8px;
}
body .wrap form fieldset .toggle .publicnotice span { color: #fff; font-size: 14px; font-weight: 200; line-height: 12px; text-align: center;
}
Toggle Time - Script Codes JS Codes
if ($("#public").prop("checked")) { $("#createLabel").addClass("off");
}
$("input#public").on("change", function () { if ($("#public").prop("checked")) { $("#createLabel").addClass("off"); }
});
$("input#private").on("change", function () { if ($("#private").prop("checked")) { $("#createLabel").removeClass("off"); $(".publicnotice.left").removeClass("on"); }
});
$("input#create").on("change", function () { if ($("#create").prop("checked")) { $("#publicLabel").addClass("off"); $(".publicnotice.left").addClass("on"); $("#public").attr('disabled',true); } $("#private").prop("checked", true); $("#createLabel").removeClass("off");
});
$("input#join").on("change", function () { if ($("#join").prop("checked")) { $("#publicLabel").removeClass("off"); $(".publicnotice.left").removeClass("on"); $("#public").attr('disabled',false); }
});
Developer | Pete Nawara |
Username | petebot |
Uploaded | September 10, 2022 |
Rating | 3 |
Size | 5,345 Kb |
Views | 44,528 |
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 |
Mr. Blinky | 5,148 Kb |
Dynamic Logo Creation | 5,961 Kb |
Button Tooltips | 5,215 Kb |
Notifications | 5,037 Kb |
KITT | 3,255 Kb |
Toggle Time Three Options | 4,205 Kb |
History Viewer | 5,143 Kb |
The Team | 9,384 Kb |
Woman in Vintage Sunglasses | 282,518 Kb |
Audio Compare | 7,239 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 |
Blackberry Mock | Zacharyolson | 1,865 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
FCC Portfolio | Cmwebby | 4,304 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 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!