Toggle Time

Developer
Pete Nawara
Size
5,345 Kb
Views
44,506
  1. Toggle Time Previews
  2. Toggle Time HTML Codes
  3. Toggle Time CSS Codes
  4. Toggle Time JS Codes

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 Previews
IQ Test

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); }
});
Toggle Time - Script Codes
Toggle Time - Script Codes
Home Page Home
Developer Pete Nawara
Username petebot
Uploaded September 10, 2022
Rating 3
Size 5,345 Kb
Views 44,506
Do you need developer help for Toggle Time?

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!

Pete Nawara (petebot) Script Codes
Name
ScrollMagic playpen
History Viewer
The Team
KITT
Audio Compare
Text Shadow
Toggle Time Three Options
CSS Modal
Notifications
Mr. Blinky
Create amazing Facebook ads 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!