Develop Reference

Label background-color based on input state

i’m working on a tab, trying to highlight the label of the actived content-section. I want to change label's background-color to distinguish the selected tab, is it possible to do that only with css? If not, how can i do that with javascript?
I try with css following this ticket (Style a <label> based on its <input>'s state), javascript to assign active state to an element without success.
/* Tabs Name Container */
.TabsHeader-container{
position: relative;
width: 120px;
float: left;
z-index: 20;
}
/* Tabs Names Label */
.TabsHeader-container label{
position: relative;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: block;
font-size: 13px;
color: black;
cursor: pointer;
user-select: none;
}
.TabsHeader-container1 {
background-color:#f8ab1f;
width:50px;
height:50px;
border-radius:50px;
}
.TabsHeader-container2 {
background-color:#f8ab1f;
margin-top:20px;
width:50px;
height:50px;
border-radius:6px;
}
/* Hover effect on tabs names */
.TabsHeader-container label:hover{
background: rgba(0, 0, 0, 0.2);
}
/* Content area for tabs */
.TabsHeader-content{
position: relative;
background: white;
border-radius:10px;
width: calc(100% - 120px);
padding: 15px;
float: left;
box-sizing: border-box;
z-index: 19;
display: none;
}
.TabsHeader-content:after{
content: "";
clear: both;
}
/* Hide input radio from users */
input[name="TabsHeader"]{
display: none;
}
/* Show tab when input checked */
input[name="TabsHeader"]:checked + .TabsHeader-content{
display: block;
animation: slide 0.5s forwards;
}
/* Slide animation for tab contents */
#keyframes slide{
from{
left: -10%;
opacity: 0;
}
to{
left: 0;
opacity: 1;
}
}
<section class="TabsHeader-container">
<label class="TabsHeader-container1" for="TabsHeader1"></label>
<label class="TabsHeader-container2" for="TabsHeader2"></label>
</section>
<input name="TabsHeader" id="TabsHeader1" type="radio" checked />
<section class="TabsHeader-content">
<p class="text1" style="font-size:19px;">Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<!-- Any other content -->
</section>
<input class="text2" name="TabsHeader" id="TabsHeader2" type="radio" checked />
<section class="TabsHeader-content">
<p style="font-size:19px;"> Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
</section>
Thanks a lot.

Could just use a bit of jquery? something like:
$(document).ready(function(){
$('.TabsHeader-container1').click(function(){
$(this).addClass("active");
$('.TabsHeader-container2').removeClass("active");
});
$('.TabsHeader-container2').click(function(){
$(this).addClass("active");
$('.TabsHeader-container1').removeClass("active");
});
});
Then just add .active{} to your stylesheet with your desired background colour and all should be good.

Close popup by clicking off JS

How do I make a popup close when I click off it/click on a different one?
I've used EventListener to perform the function for the first popup, but when I do the same to a second popup the first popup stops working.
I've tried duplicating the JS code using different Function names and ID for the popups.
var popup = document.getElementById("myPopup");
function myFunction() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup.classList.contains('show')) myFunction();
});
var popup = document.getElementById("myPopup2");
function myFunction2() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup.classList.contains('show')) myFunction2();
});
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<h2>Popup2</h2>
<div class="popup" onclick="myFunction2()">Click me to toggle the popup!
<span class="popuptext" id="myPopup2">A Simple Popup again!</span>
</div>
</body>

Simply add another listener on the document, which will close any open modals.
Then add/modify one on your modal which will stop click events from bubbling up.
The end result is, click anywhere and if the click was over the modal, the modal will intercept and block, otherwise clicking anywhere else, then the document will receive the bubbled event and close the modal...
For good measure you can add a listener for the esc keydown event and close any open modals too

CSS Flip Animation reset on every click

I am using David Walsh css flip effect: http://davidwalsh.name/css-flip
I have this working onClick with a JavaScript function called showCard(). See the codePen here:
https://codepen.io/Chris_Nielsen/pen/YaWmMe
When you first click the button, it animates correctly (opens from left to right). However, when you click the button again, it closes animates from right to left. The third time the button is clicked it opens again animates correctly (from left to right) again.
What I want to do is get this to re-open from left to right every time.
Can someone point out how I can make this work? I have worked on this for 2 hours and am stumped.
The Code:
function showCard() {
document.querySelector("#errorMessage").classList.toggle("flip");
}
body {
background: #575955;
color: white;
}
.error-box {
width: 380px;
height: 110px;
background: #fff;
border: solid 1px #B71C1C;
border-radius: 9px;
font-family: 'Raleway', sans-serif;
font-size: 1.6rem;
color: #B71C1C;
text-align: center;
padding: 30px;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container.flip .flipper {
visibility: visible;
transform: rotateY(90deg);
/* transform: rotateY(90deg); */
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: .35s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(-90deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<h1>Click the button below to see the <br>animated alert.</h1>
<div class="flip-container" id="errorMessage" >
<div class="flipper">
<!-- text here will rotate -->
<div class="front">
<!-- front content -->
<br><br><br>
<div class="error-box">
Email address or password <br>
Incorrect. <br>
Please Try Again.
</div>
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
<input type="button" value="Show card" onClick="showCard();">

I think it will help to explain a little bit of what is going on here in the code you have now. In short, you've created an action based on a CSS class that fires on a click. The important part to note here is that this action is based on the addition of a class.
visually...your html looks something like this (using alternate elements here for simplification).
<element class="class1">some text</element>
then when you click the button, this changes the HTML markup to look something like this...
<element class="class1 class2">some text</element>
which in turn, hits your css sheet which now fires off the action that you want...in your case...flipping the card.
So the reason why your card is flipping the direction you want on first click, and then flipping back the opposite direction on your second click, is because you are simply adding a class that says, "turn me 90 degrees", and then on the 2nd click, removing that same class which tells your CSS to basically "undo" that move.
I'm not sure what the best approach will be if you want to continue to use what David Walsh wrote, plug and play, because it wasn't really designed to do what you're looking for. One approach may be to add a second class that completes another 90degree rotation on click 2, and then hide the element while you remove the two classes that undo your rotations.
Update 1 - Created a working version here off of your codepen here... https://codepen.io/SEAjamieD/pen/bvggOw?editors=0110
Probably not ideal to add and remove classes so quickly like that but it works. You might think about moving the animations into a keyframe. Hope this helps!

Okay, I finally got this working so that every time the button is clicked the card opens from right to left. It took a combination of #Jamie D's idea above about removing and re-adding classes with the idea of using a jQuery function with a timer that automatically reclicks the button.
Solution can be seen on codepen here:
https://codepen.io/Chris_Nielsen/pen/LdWPPG
Here is the solution code.
var card = document.querySelector("#errorMessage");
var container = document.querySelector('.flip-container');
var isOpen = false;
function showCard() {
if (!isOpen) {
container.style.visibility = "visible";
card.classList.add("flip");
document.querySelector(".flipper").classList.toggle("flip");
isOpen = true;
} else if (isOpen) {
card.classList.toggle("flip");
isOpen = false;
clickAgain();
}
}
function clickAgain(){
setTimeout(function() {
$(document).ready(function(){
$("#b1").click()
});
}, 350);
}
body {
background: #575955;
color: white;
}
.error-box {
width: 380px;
height: 110px;
background: #fff;
border: solid 1px #B71C1C;
border-radius: 9px;
font-family: 'Raleway', sans-serif;
font-size: 1.6rem;
color: #B71C1C;
text-align: center;
padding: 30px;
}
/* Hide the flip container to start */
.flip-container {
perspective: 1000px;
visibility: hidden;
}
.flip-container.flip .flipper {
transform: rotateY(90deg);
transition: 0.35s;
}
.flip-container, .front, .back {
width: 320px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(-90deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(90deg);
/* transform: rotateY(180deg); */
}
<h1>Click the button below to see the <br>animated alert.</h1>
<div class="flip-container" id="errorMessage" >
<div class="flipper">
<!-- text here will rotate -->
<div class="front">
<!-- front content -->
<div class="error-box">
Email address or password <br>
Incorrect. <br>
Please Try Again.
</div>
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
<input type="button" id="b1" value="Show card" onClick="showCard();">

Css Popup alert in button, instead input text

How do i customize css so the popup alert just like this but instead alert popup focus in a button.
i have use this kind of validation on text box
<div class="form-group">
<label class="control-label col-sm-3" for="judul_laporan">Judul Laporan </label>
<div class="col-sm-5">
<input type="email" class="form-control" id="judul_laporan" >
<span style="color: red" id="warnlaporan"></span>
</div>
</div>
<button type="button" id="save_laporan"></button>
JQuery
$("#save_laporan").click(function(){
var judul_laporan = $('input[name="judul_laporan"]');
if(judul_laporan.val() == ''){
judul_laporan.parent().parent().addClass('has-error');
$('#warnlaporan').text("Judul Laporan Belum Ada");
judul_laporan.focus();
result
}else{
judul_laporan.parent().parent().removeClass('has-error');
$('#warnlaporan').text("");
}
But i dont know how to make a popup alert likes the image ( and it should be button )

You can see the x3schools' documentation. It gives you a sample popup at the top of a div.
This code opens a popup:
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<div class="popup" onclick="myFunction()" style="left: 35px; top: 60px">Click me!
<span class="popuptext" id="myPopup">Popup text...</span>
</div>
You also can use microtip, it is a pretty library witch give you the opportunity to create simply popup. This is the only declaration: <button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">. However, you have to download a package (just 1kb) with rpm in your server.

How to select a language from a popup click button in css/html ?

I am working on a language selector button on a webpage. The language selector button here is the green settings button as shown below:
It will work in way that if I click on the button then the drop-down menu will show up. If the language is already in English then it will ask us to select the French language and vice-versa as shown below:
The HTML which I have used for the button is:
<span class="label-mobile-languageselector" onclick="myFunction()"><img src="img/SettingsSign.png" alt="LanguageSelector">
<span class="popuptext" id="myPopup">English</span>
</span>
I am wondering, how can I display the whole page in English or French after clicking the English or French text as shown above in the 2 images ? At this moment; if I click on "French" text, "English" text is getting displayed on the popup and vice-versa but there is no language conversion.
The CSS which I have used for the button is:
/* Popup container - can be anything you want */
.label-mobile-languageselector {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.label-mobile-languageselector .popuptext {
visibility: hidden;
width: 160px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: -55%;
left: 45%;
margin-left: -80px;
}
/* Popup arrow */
.label-mobile-languageselector .popuptext::after {
content: "";
position: absolute;
top: -35%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: red transparent transparent transparent;
transform: rotateX(180deg);
}
/* Toggle this class - hide and show the popup */
.label-mobile-languageselector .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
I think (not sure) I need to write a JavaScript code in order to create the popup for it. The JavaScript which I have written in order to create popup is:
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show')
if (!popup.classList.toggle('show')) {
if (popup.innerHTML == "English") {
popup.innerHTML = "French";
popup.classList.toggle('show')
} else {
popup.innerHTML = "English";
popup.classList.toggle('show')
}
} else {
popup.classList.toggle('show');
}
}

Create a new HTML document in the language that you desire.
Link to it
e.g. This document in French
HTML and JavaScript do not come with translation tools built in.
Third party automated translation tools, such as Google Translate, exist … but produce pretty poor results and are best left to users to initiate manually rather than having web authors endorse them.