Is there a way to select each toggle when using Ratchet? - javascript

I am dynamically loading a list of classes from a database that the user is supposed to select if they have been completed. I am using Ratchet's toggle to choose the classes and am trying to use a JavaScript function to find which toggles have been toggled -- so far, no luck. I am not very proficient with JavaScript so I apologize if this seems trivial. The function that that I have been trying to use, how the classes are displayed to the webpage, and the contents of the CSS that deals with toggles are as follows:
<script type="text/javascript">
function checkClasses() {
var classes = new Array();
classes.push("COSC120");
alert(classes[0]);
$("input:checkbox[name=type]:checked").each(function()
{
classes.push($(this).val());
});
}
</script>
writing classes to page:
echo '<div class="toggle" id="' .$row['class_id']. '" name="type">';
echo '<div class="toggle-handle"></div>';
echo '</div>';
css:
.toggle {
position: relative;
display: block;
width: 74px;
height: 30px;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 20px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border;
transition-property: background-color, border;
}
.toggle .toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 100px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
}
.toggle:before {
position: absolute;
top: 3px;
right: 11px;
font-size: 13px;
color: #999;
text-transform: uppercase;
content: "no";
}
.toggle.active {
background-color: #ff7e00;
border: 2px solid #ff7e00;
}
.toggle.active .toggle-handle {
border-color: #ff7e00;
-webkit-transform: translate3d(44px, 0, 0);
-ms-transform: translate3d(44px, 0, 0);
transform: translate3d(44px, 0, 0);
}
.toggle.active:before {
right: auto;
left: 15px;
color: #fff;
content: "yes";
}
.toggle input[type="checkbox"] {
display: none;
}
I do not know if more is needed for any assistance, but if so, please ask! Thank you in advance!

Ratchet will add active to the class list of the element, so $('.toggle.active') will give you an array of the active toggle switches

Related

location.href is not working, can't acess to link location

I've created a "loading page" which should be the first page that users see when they connect. It's a simple page with a central bouton that people have to click. Once they do, they access to the rest of the website. All the pages including the loading page are in the same folder. Each page of the site has its own : "XXXXX.html".
So I've created a loader.html page, and implemented a javascript function, that is here :
let introBox = document.getElementById('intro');
introBox.addEventListener('click', function(){
document.location.href = "main.html";
});
#keyframes sectionAnimation{
0%{
transform:scale(1);
}
50%{
transform:scale(1.5);
}
100%{
transform: scale(1);
}
}
html {
border: 0;
margin: 0;
padding: 0;
width: 100%;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,*:before,*:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: #fff;
padding: 0;
margin: 0;
height: auto;
width: 100%;
background-repeat: no-repeat;
& img{
width: 50%;
}
}
.loaderbody{
background-image: url('../../Assets/R.png');
}
b {
position: relative;
display: block;
font-family: helvetica neue, helvetica, sans-serif;
line-height: 1.15em;
margin-top: -1.15em;
top: 2.3em;
font-size: 0.67em;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.75;
text-align: center;
}
b span {
font-size: 0.785em;
font-weight: 400;
opacity: 0.4;
}
#intro {
width: 200px;
margin:auto;
margin-top:25%;
animation: sectionAnimation 1.5s both infinite;
transform:scale(1);
}
.button {
display: inline-block;
text-decoration: none;
position: relative;
margin-top: 40px;
}
.button .bottom {
position: absolute;
left: 7px;
top: 7px;
width: 100%;
height: 100%;
background-color: #2acdc1;
display: block;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button .top {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 24px 34px 22px 34px;
border: 2px solid #04049d;
}
.button-dark .top {
border: 2px solid #fff;
}
.button .top .label {
font-family: sans-serif;
font-weight: 600;
color: #04049d;
font-size: 12px;
line-height: 110%;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button-dark .top .label {
color: #fff;
}
.button:hover .bottom {
left: 0;
top: 0;
background-color: #f3f3f3;
}
.button:hover .top .label {
color: #2acdc1;
}
.button-border {
position: absolute;
background-color: #2acdc1;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.button:hover .top .button-border-left,.button:hover .top .button-border-right {
height: calc(100% + 2px);
}
.button:hover .top .button-border-top,.button:hover .top .button-border-bottom {
width: calc(100% + 2px);
}
.button-border-left {
left: -2px;
bottom: -2px;
width: 2px;
height: 0;
}
.button-border-top {
left: -2px;
top: -2px;
width: 0;
height: 2px;
}
.button-border-right {
right: -2px;
top: -2px;
width: 2px;
height: 0;
}
.button-border-bottom {
right: -2px;
bottom: -2px;
width: 0;
height: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../Css/main copie.css">
<title>TP</title>
</head>
<body class="loaderbody">
<script type="text/javascript" src="../Js/loader.js"></script>
<section id="intro">
<div id="intro-content" class="center-content">
<div class="center-content-inner">
<div class="content-section content-section-margin">
<div class="content-section-grid clearfix">
<a href="#" class="button nav-link">
<div class="bottom"></div>
<div class="top">
<div class="label">Let's go !</div>
<div class="button-border button-border-left"></div>
<div class="button-border button-border-top"></div>
<div class="button-border button-border-right"></div>
<div class="button-border button-border-bottom"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
The element "intro" is my bouton on my loading page. However, when I click on it, I stay on the same URL. I've noticed that when I click on the box it automatically add a "#" at the end of my URL. So I assume the function is kinda working, and my click is detected.
It seems the problem is about the .location.href but I can't get it.
Thank you so much.
There is a missing slash /, your code should look like this:
introBox.addEventListener('click', function(){
document.location.href = "/main.html";
});
If you want to redirect outside your website, you have to add double slash //.
document.location.href = "//google.com";
EDIT: The actual error is on the tag with href="#", change it to "/main.html".
You can remove the listener if you will, it's no longer needed.

Hide div by clicking another div jQuery

I have a div which when clicked, height changes so that the rest of the content becomes visible.
But I have a button inside this div which I would like to use as a "close-button", to change the height back to it's original value so the content is hidden again, but it's not working.
Here is the code:
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function() {
$('.scrollClick').css("height", "27px");
});
.scrollClick{
font-family:inherit;
background-color: #000E52;
color: #fff;
text-align: center;
display: inline-block;
position: fixed;
z-index: 9999;
cursor: pointer;
right: 20px;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
transition: all 0.5s ease;
font-size: 16px;
max-width: 240px;
box-sizing: border-box;
text-align: center;
height: 27px;
overflow: hidden;
}
.dropContentBox{
display: inline-block;
color: #fff;
transition: all 0.5s ease;
text-align: center;
}
.acceptCta{
display: inline-block;
position: relative;
background-color: #7CBD2B;
color: #333;
font-size: 14px;
font-weight: 600;
padding: 10px 25px;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
transition: all 0.5s ease;
z-index:10;
}
.acceptCta:hover{
background-color: #88D41B;
}
.acceptCta:hover .arrow{
opacity: 1.0;
}
.arrow {
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
opacity: 0;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: all 0.5s ease;
}
.bouncer {
position: relative;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: border-color 0.5s ease;
animation: bouncer 2s infinite;
}
#keyframes bouncer {
0% {
bottom: 0px;
}
20% {
bottom: 7px;
}
40% {
bottom: 0px;
}
60% {
bottom: 7px;
}
80% {
bottom: 0px;
}
100% {
bottom: 0px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollClick">
Viktig informasjon! Les her <i class="bouncer"></i>
<div class="dropContentBox"><img src="/content/cnm/137449/600x600-banner-include-info-dishwasher-2019-no.png?$banner$">
<div class="acceptCta">Jeg har lest og forstått <i class="arrow"></i></div>
</div>
</div>
</div>
So as you see in my jQuery code, I want the .scrollClick class to go back to it' original height, when clicking the .acceptCta div.
What am I doing wrong? Ty
The problem is that the click on your second button also triggers a click on your first button as the second button is within the first button. you can restructure your html or can stop propagation.
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function(e) {
e.stopPropagation();
$('.scrollClick').css("height", "27px");
});

Draggable CSS Toggle Switch

I have the following CSS Toggle Switch which I got from somewhere on the web.
It works but is not draggable. When you drag the handle on either side, the knob enlarges but doesn't move in the specified direction. The only way to change the value is to click on the other space. But I need the Drag operation, if sufficiently advanced, to also change the value. After a certain amount of drag the the toggle needs to flip. Is this possible?
/* SWITCH */
.form-switch {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.form-switch i {
position: relative;
display: inline-block;
margin-right: .5rem;
width: 46px;
height: 26px;
background-color: #e6e6e6;
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: #fff;
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: #4BD763; }
.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<label class="form-switch">
<input type="checkbox">
<i></i>
Select Me
</label>
You already use JQuery so just set the CSS behavior with *.draggable*
$(".victim").draggable({
//css animation here
});
Also set the victim class to the *input*

Hover over parent div to affect pseudo after elements of child. Underline animation

Currently I can hover over h1 and it will be underlined, but I want to know if I hover over the parent div can I activate the pseudo after elements of h1?
I am trying to preserve the line width to h1 only. Other methods I've tried will take the full width of the div.
So when hovering over h2 or h3, the underline becomes active on h1.
Is this do-able in CSS only or do I need to use Javascript?
.nav-underline {
position: relative;
display: inline-block;
cursor: pointer;
}
.nav-underline:before, .nav-underline:after {
content: '';
position: absolute;
width: 0%;
height: 3px;
top: 45%;
margin-top: -0.5px;
background: #000;
}
.nav-underline:hover {
letter-spacing: 4px;
transition: .35s;
}
.nav-underline:before {
left: -2.5px;
}
.nav-underline:after {
right: 2.5px;
background: #000;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-underline:hover:before {
background: #000;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-underline:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
<div class="nav-underline"><h1>Test</h1></div>
<h2>Description</h2>
<h3>Detail</h3>
</a>
https://jsfiddle.net/jvo8wo65/
Since you want the hover state on the parent a.imagereveal to trigger the effect instead of depending on the hover state on .nav-underline itself, you can simply replace all instances of this selector:
.nav-underline:hover
...with this:
.imagereveal:hover .nav-underline
On a side note, you should be using double colons for pseudo-elements, i.e. ::after instead of :after... unless you really need backwards compatibility with IE8 and below.
See proof-of-concept below, or fixed JSfiddle:
.nav-underline {
position: relative;
display: inline-block;
cursor: pointer;
}
.nav-underline::before, .nav-underline::after {
content: '';
position: absolute;
width: 0%;
height: 3px;
top: 45%;
margin-top: -0.5px;
background: #000;
}
.imagereveal:hover .nav-underline {
letter-spacing: 4px;
transition: .35s;
}
.nav-underline::before {
left: -2.5px;
}
.nav-underline::after {
right: 2.5px;
background: #000;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::before {
background: #000;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::after {
background: transparent;
width: 100%;
transition: 0s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
<div class="nav-underline"><h1>Test</h1></div>
<h2>Description</h2>
<h3>Detail</h3>
</a>
yes, you just have to move the hover to the parent element
.imagereveal:hover .nav-underline::before{
background: #000;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::after{
right: 2.5px;
background: #000;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

Google Material Design Growing Textarea while typing

I'm trying to implement Google Material Design Guidelines in my forms and it's working great, until I bumped into the textarea. What I want is this:
When you focus on the textarea there is only one line, but when you reach the end of the line (while typing) it automatically adds another line and continues typing there.
I have found this on codepen, but this uses an inputfield, not a textarea. This just scrolls horizontally... Demo
<input type="text" required>
Anyone who has this code and is willing to share?
Thanks
You are creating all the Material Design CSS & Jquery by yourself?
Otherwise, I found Material Design textarea like you mentioned in here:
Source: https://materializecss.com/text-inputs.html#textarea
Check out their Textarea part.
Actually, to obtain this level of control, and work around the fact that a textarea, on most web browsers, can be resized by hand, you'll want to use a div with the contenteditable attribute.
See the HTML doctor entry on contenteditable for more.
Further, to calculate font sizes and overflow, you might want to use the canvas measureText method, for example using canvas as an offscreen substitute (where you input exactly the same text that is typed inside your contenteditable element).
Finally, while the css lineHeight attribute can somewhat facilitate those calculations, there are a few javascript libraries out there that are dedicated to the purpose. I found Font.js, haven't tested it at the time of this writing.
You can use <div contentEditable> instead of textarea and that will make a trick. Also you might not use additional libraries (Material-ui, jQuery, etc.).With your code it will look like this:
.inputBlock {
position: relative;
margin-top: 20px;
font-family: 'Roboto';
display: block;
width: 300px;
background: #FFF;
}
.input {
font-size: 15px;
padding: 0 0 6px;
display: block;
width: 100%;
height: auto;
border: none;
box-sizing: border-box;
resize: none
}
.input:focus {
outline: none;
}
/* LABEL */
label {
color: #777;
font-size: 15px;
font-weight: normal;
position: absolute;
pointer-events: none;
top: 0;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
.input:focus~label,
.input:not(:empty)~label {
top: -15px;
font-size: 11px;
color: #00968a;
}
/* BOTTOM BARS */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #00968a;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
.input:focus~.bar:before,
.input:focus~.bar:after {
width: 50%;
}
/* HIGHLIGHTER */
.highlight {
position: absolute;
height: 73%;
width: 100%;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
border-bottom: 1px solid #777;
}
/* active state */
.input:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
border: none;
}
/* ANIMATIONS */
#-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
[class='input textarea'] height: auto !important color: #000000 !important font-size: 15px !important div color: #000000 !important font-size: 15px !important~.highlight height: 77% !important
<div class="inputBlock">
<div contentEditable class="input" required></div>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>

Categories