I have a switch icon purely designed in CSS. I got the design for switch from this page https://www.w3schools.com/howto/howto_css_switch.asp and some added modifications on the switch from this answer in stack overflow https://stackoverflow.com/a/39846603/5550284 .
This is how it looks like so far
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
</html>
Now I actually want to change the state of the switch using JavaScript based on the flag given by the back-end.
So this is what I do
if(response.data == "t"){
$('.switch-off').remove();
$('.switch-on').remove();
$('.toggle-slider').append('<span class="switch-on"></span>');
console.log("Prompt ON")
}
else if (response.data == "f") {
$('.switch-on').remove();
$('.switch-off').remove();
$('.toggle-slider').append('<span class="switch-off"></span>');
console.log("Prompt OFF")
}
Assume here response is an object sent by the back-end which has a field called data which contains the flag value t or f.
But it doesn't seem to do anything and using inspector in Firefox, I see the span elements randomly appearing and disappearing on toggle without any fixed behaviour. I suspect the CSS for the switch is somehow interfering with the state of the slider on the switch.
Can someone help me out with this problem?
Actually, I was just doing this last night on the same slider that you are.
the way to do it is
checked = ...; //boolean
$(slider).children("input").prop("checked",checked);
To check slider on/off, use
$(slider).children("input").is(":checked");
You have a hidden checkbox which toggles the switch.
So doing this will toggle it on:
$('#togBtn').prop('checked', true);
and off:
$('#togBtn').prop('checked', false);
EDIT: Added full code
So your full code would be:
if (response.data == "t") {
$('#togBtn').prop('checked', true);
}
else if (response.data == "f") {
$('#togBtn').prop('checked', false);
}
Related
I'm working on a project for computer science where I have to make a website. For this, me and my partner wanted a modal with information about us. One of the requirements is that we make the site work on different platforms. This is where the problem lies. Opening the modal on my phone while having the phone standing up works fine, but when transitioning to landscape it breaks and it does not return to normal when I turn it back.
Here is a snippet of the html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Machine Learning</title>
<script src="scripts/embedHTML.js"></script>
<script src="scripts/popUp.js"></script>
<script src="scripts/underline.js"></script>
<script src="scripts/modal.js"></script>
<link rel="stylesheet" href="stylesheets/main.css" />
<link rel="stylesheet" href="stylesheets/about-us.css" />
<link rel="stylesheet" href="stylesheets/popup.css" />
<link rel="stylesheet" href="stylesheets/modal.css" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img id="logo" src="images/logo.png" alt="logo image"></img>
<h1 id="title">Machine Learning</h1>
</header>
<article id="about-tijmen" class="modal-data" embed-html="pages/Tijmen.html"></article>
<article id="about-marijn" class="modal-data" embed-html="pages/Marijn.html"></article>
<div id="glass-pane" class="glass-pane"></div>
<article id="modal" class="modal">
<button id="closeModalButton" onclick="toggleModal()">x</button>
<article id="modal-dialogue"></article>
</article>
<script>
embedHTML();
</script>
</body>
</html>
The CSS:
.modal-data
{
display: none;
}
.modal {
pointer-events: none;
opacity: 0;
position: fixed;
z-index: 1000;
background: red;
border-radius: 20px;
border: 2px solid black;
margin-top: 0px;
padding-bottom: 20px;
left: 50%;
top: 50%;
transition: opacity .25s linear, display .25s linear;
transform: translateX(-50%) translateY(-50%);
overflow: hidden;
box-shadow: 0 0 100px 10px black inset;
width: 80vw;
}
.modal.open
{
pointer-events: all;
opacity: 100;
}
.glass-pane
{
pointer-events: none;
transition: opacity .25s linear;
background: rgba(0, 102, 255, 0.5);
z-index: 110;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0;
}
.glass-pane.shown
{
pointer-events: all;
opacity: 1;
}
#closeModalButton {
position: absolute;
top: 0;
right: 0;
width: 40px;
line-height: 20px;
margin: 0;
border: 2px solid black;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-left-radius: 20px;
cursor: pointer;
font-size: 15px;
}
#modal-dialogue p {
color: rgb(250, 232, 235);
width: 90%;
margin: auto;
margin-top: 2%;
}
ol{
color: rgb(250, 232, 235);
display: table;
margin: 0 auto;
}
The javascript:
function toggleModal()
{
let modal = document.getElementById("modal");
let glass = document.getElementById("glass-pane")
if(modal.classList.contains("open"))
{
modal.classList.remove("open");
glass.classList.remove("shown");
}
else
{
modal.classList.add("open");
glass.classList.add("shown");
}
}
function setModalContent(id)
{
let dialogue = document.getElementById("modal-dialogue");
let data = document.getElementById(id);
dialogue.innerHTML = data.innerHTML;
}
and, of course, a video showing the problem.
https://youtu.be/s3bsN72-qYE
You can add css max-height and overflow-y to your modal content to give the content a scrollbar inside the modal and ensure the modal doesn't go outside the page.
This may need an #media query, eg
article {
overflow-y: auto;
}
#media screen (height:300px) {
article {
max-height: 200px;
}
}
#media screen (height:600px) {
article {
max-height: 400px;
}
}
or may be set better using relative height such as % or vh (reference)
article {
max-height: 75vh;
overflow-y: auto;
}
I have the following code that works very nice and sweetly
HTML
<button id="changeColor">changeColor</button>
-Javascript
<script>
document.getElementById("changeColor").addEventListener('click', function(){
document.getElementsByClassName("Bkground")[0].style.backgroundColor = document.getElementById("changeColor").check ? "white" : "black";
});
</script>
- I would like to use the CSS Switch below instead of the HTML button to switch between white and black
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
-please note that my class is "Bkground" that's why I had document.getElementsByClassName(Bkground)
I want to fix two things
I would like to use the CSS Switch instead of the HTML button to switch between white and black
I want to be able to switch between two colors (black and white) when the button being clicked
like
<script>
if ( document.getElementById("changeColor").addEventListener('click', function(){
document.getElementsByClassName("mainWrapper fullWidth")[0].style.backgroundColor = document.getElementById("changeColor").changeColor ? "white" : "black");
else ( document.getElementById("changeColor").addEventListener('click', function(){
document.getElementsByClassName("mainWrapper fullWidth")[0].style.backgroundColor = document.getElementById("changeColor").changeColor ? "black" : "white");)
});
</script>
You need to simple change (add and remove a CSS class), and change UI based on it. This will be easiest.
$(document).ready(function(){
$("#changeColor").click(function(){
$("p").toggleClass("changed");
$("#changeColor").toggleClass("changed");
$("body").toggleClass("changed");
});
});
body {background: pink;}
body.changed {background:gray;}
button {background: yellow;}
button.changed {background: green;}
p {background: orange;}
p.changed {background: blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="changeColor">Toggle</button>
<p>This is a paragraph.</p>
I want to use a form with a checkbox as follow :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<form id= "test" method="POST" action="test">
})
<input type="checkbox"
name='switch'
onClick="document.forms['test'].submit();"
>
<span class="slider round"></span>
</label>
</form>
</body>
So far I've been able to do it for submit button using the following script:
....
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#test').ajaxForm(function() {
alert("");
});
....
But this isn't working apparently for checkbox. Any idea how may I do it!
thanks in advance !
This will be done as below:
$(document).ready(function() {
$('#test').on('submit', function(e) {
e.preventDefault();
alert("");
});
You need to use the "onchange" event instead of "onclick" and check the value. If it is checked, submit the form. And remove the event after, otherwise the form can be submited multiple times when toggling.
But it sounds simpler to use a button and style it like a checkbox with an image.
<button type="submit"><img src="/img/checkbox.png" alt="Checkbox" /></button>
You need no additional javascript for this and it is trivial to make the on/off state with CSS.
Also obviously use your ajaxForm function to avoid a page reload. Otherwise the "on" state will never be visible.
Try using the preventDefault() function, along the lines:
....
// wait for the DOM to be loaded
$(document).ready(function() {
const form = document.getElementById('test');
form.onsubmit = function (event) {
alert("");
// For this example, don't actually submit the form
event.preventDefault();
}
....
Use e.preventDefault(); in on click event
Codepen example
How preventDefault() works?
Also there are some mistakes in HTML structure
you opened label tag before the form so you should close it after
the form.
there are additional bracket and parenthesis
$(document).ready(function() {
$('#togglSwitch').change(function() {
alert("Handler for .submit() called.");
event.preventDefault();
$(this).closest("form").submit();
});
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Toggle Switch</h2>
<form id="test" method="POST" action="test">
<label class="switch">
<input type="checkbox"
name='switch' id='togglSwitch'
>
<span class="slider round"></span>
</label>
</form>
<div id="other">
Trigger the handler
</div>
Note:- You need to add event.preventDefault and need to add submit event on change is the solution for your problem
Call function on onclick of CheckBox
i.e.
<input type="checkbox" name='switch' onClick="myfunc();">
<script>
function myfunc()
{
Here write the code of Ajax to submit the form.
}
</script>
So I'm having trouble toggling this switch to change the background color. Im not sure how to get it to remove the CSS that it applies to the document. I want it to toggle between to different colored backgrounds.
Here's my code:
<!Doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<label class="switch"><input id="input" type="checkbox" /><div></div></label>
</div>
<footer>
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script type="text/javascript" src="js.js"></script>
</footer>
</body>
</html>
The Styles:
html {
background: #878476;
}
.container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
height: 40px;
margin: auto;
text-align: center;
}
.switch input {
position: absolute;
opacity: 0;
}
.switch {
display: inline-block;
font-size: 20px; /* 1 */
height: 1em;
width: 2em;
background: #BDB9A6;
border-radius: 1em;
}
.switch div {
height: 1em;
width: 1em;
border-radius: 1em;
background: #FFF;
box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
transition: all 300ms;
transition: all 300ms;
transition: all 300ms;
}
.switch input:checked + div {
transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
And the JS:
$(document).ready(function() {
console.log( "Coffee Isn't strong enough for me to remember how to toggle the OnClick" );
$(".switch").on("click", function() {
$("html").css("background", "blue");
});
});
You can use toggle class here is link for more information http://api.jquery.com/toggleclass/
$("#input").on("click", function() {
$("html").toggleClass("bck-change");
});
And also i've modified your code pls refer: https://jsfiddle.net/eLgqe2ya/
I am new to jQuery and Visual Studio Environment. I was working on creating a circular navigation menu bar using the guide at this link
The main problem is in the head section where I have mentioned all the jQuery and jQueryUI scripts. This is a screenshot of the errors. All the other stackoverflow questions couldn't solve this problem.
The code is as below. Please help!
Thanks in advance.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.11.2.js"></script>
<link rel="stylesheet"
href="code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="~/Scripts/modernizr-2.6.2.min.js"></script>
<script src="~/Scripts/polyfills.js"></script>
<script src="~/Scripts/classie.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.cn-button {
border:none;
background:none;
color: white;
text-align: Center;
font-size: 1.5em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #111;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
background-color: #222;
}
</style>
<style>
.csstransforms .cn-wrapper {
font-size:1em;
width: 26em;
height: 26em;
overflow: hidden;
position: fixed;
z-index: 10;
bottom: -13em;
left: 50%;
border-radius: 50%;
margin-left: -13em;
transform: scale(0.1);
transition: all .3s ease;
}
/* class applied to the container via JavaScript that will scale the
navigation up */
.csstransforms .opened-nav {
border-radius: 50%;
transform: scale(1);
}
</style>
<style>
.cn-overlay{
width:100%
height:100%;
background-color: rgba(0,0,0,0.6);
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
opacity:0;
transition: all .3s ease;
z-index:2;
pointer-events:none;
}
/* Class added to the overlay via JavaScript to show it when navigation
is open */
.cn-overlay.on-overlay{
pointer-events:auto;
opacity:1;
}
</style>
<style>
.csstransforms .cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
transform-origin: 100% 100%;
overflow: hidden;
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
transition: border .3s ease;
}
.csstransforms .cn-wrapper li a {
display: block;
font-size: 1.18em;
height: 14.5em;
width: 14.5em;
position: absolute;
bottom: -7.25em;
right: -7.25em;
border-radius: 50%;
text-decoration: none;
color: #fff;
padding-top: 1.8em;
text-align: center;
transform: skew(-50deg) rotate(-70deg) scale(1);
transition: opacity 0.3s, color 0.3s;
}
.csstransforms .cn-wrapper li a span {
font-size: 1.1em;
opacity: 0.7;
}
/* for a central angle x, the list items must be skewed by 90-x
degrees in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for
this demo) */
.csstransforms .cn-wrapper li:first-child {
transform: rotate(-10deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(2) {
transform: rotate(30deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(3) {
transform: rotate(70deg) skew(50deg)
}
.csstransforms .cn-wrapper li:nth-child(4) {
transform: rotate(110deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(5) {
transform: rotate(150deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(odd) a {
background-color: #a11313;
background-color: hsla(0, 88%, 63%, 1);
}
.csstransforms .cn-wrapper li:nth-child(even) a {
background-color: #a61414;
background-color: hsla(0, 88%, 65%, 1);
}
/* active style */
.csstransforms .cn-wrapper li.active a {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1);
}
.csstransforms .cn-wrapper li:not(.active) a:focus {
position: fixed; /* fix the "displacement" bug in webkit browsers
when using tab key */
}
</style>
</head>
<body>
<div>
<button class="cn-button" id="cn-button">+</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a href="#"><span class="icon-picture"></span>
</a></li>
<li><a href="#"><span class="icon-headphones"></span>
</a></li>
<li><span class="icon-home"></span></li>
<li><span class="icon-facetime-video"></span>
</li>
<li><a href="#"><span class="icon-envelope-alt"></span>
</a></li>
</ul>
</div>
<div id="cn-overlay" class="cn-overlay"></div>
</div>
<script>
$(document).ready(function(){
var button = document.getElementById('cn-button'),
wrapper = document.getElementById('cn-wrapper'),
overlay = document.getElementById('cn-overlay');
//open and close menu when the button is clicked
var open = false;
button.addEventListener('click', handler, false);
button.addEventListener('focus', handler, false);
wrapper.addEventListener('click', cnhandle, false);
function cnhandle(e) {
e.stopPropagation();
}
function handler(e) {
if (!e) var e = window.event;
e.stopPropagation();//so that it doesn't trigger click
//event on document
if (!open) {
openNav();
}
else {
closeNav();
}
}
function openNav() {
open = true;
button.innerHTML = "-";
classie.add(overlay, 'on-overlay');
classie.add(wrapper, 'opened-nav');
}
function closeNav() {
open = false;
button.innerHTML = "+";
classie.remove(overlay, 'on-overlay');
classie.remove(wrapper, 'opened-nav');
}
document.addEventListener('click', closeNav);
});
</script>
</body>
</html>
Try another version of jquery
Download min.js files and put it on local directory and give a valid path in src.
It might help you.
http://jquery.com/download/
Use absolute or relative paths eg. '/js/jquery.js' using webroot or '../js/jquery.js' depending on where you're calling the file from (Using absolute path is better). Try not using the ~ indicator.
Instead of this:
<script src="~/Scripts/jquery-1.11.2.js"></script>
Use:
<script src="/Scripts/jquery-1.11.2.js"></script>
depending on where the file is in relation to the webroot.
There might be something wrong with your jquery file.
Try using the online version from google.
1.x link:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
2.x link:
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
I don't know what the problem was, but I created a new project and added all the .js scripts one by one and that worked.