I use a pure CSS Accordion to present my content. The Accordion works with normal checkboxes. Now I want to implement, that by sending a simple link, a single checkbox entry will be checked and with the help of an anchor the browser should jump to that entry and show the specific content to the reader.
The whole thing should be done preferably without a scripting or programming language, but after a lot of research I think that at least JavaScript will be required (it must run on the client side, so no PHP or similar).
I have searched and tested a lot but unfortunately I have not found any suitable solution that would work.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
</style>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
</body>
</html>
```
You're correct that JavaScript is required. I have provided a solution, but I haven't tested it, because it's not possible to test in the snippet. It should select the relevant checkbox when a hash tag is detected in the URL that corresponds with a checkbox ID.
So you would use some time https://www.website.com/#title1
// Check if URL of browwser window has hash tag
if (location.hash) {
// Get URL hash tag
const hash = window.location.hash;
// Select checkbox with ID of hashtag
const checkbox = document.querySelector(hash);
// Check if checkbox exists
if(checkbox) {
// Set selected checkbox as checked
checkbox.checked = true;
}
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
I want to create two button which will float next to each other and also when we click one of them it will change background-color to #474e5d and some shadow effect. I am very new to design please help me to do this.
Click here to see the button design
//js
const span2 = document.getElementById("span2")
const span1 = document.getElementById("span1")
span2.addEventListener("click",function ( ) {
const span3 = document.getElementById("span3")
span3.style.left="150px"
span3.innerHTML="Search by dictric"
span3.style.transition = "all 0.5s";
})
span1.addEventListener("click",function () {
const span3 = document.getElementById("span3")
span3.style.left="0px"
span3.innerHTML="Search by pin code"
span3.style.transition = "all 0.5s";
})
/* css */
.sld_btn{
display: flex;
width: 300px;
height: 40px;
border-radius: 25px;
position: relative;
background-color: rgb(102, 102, 102);
}
.sld_btn span{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.5;
}
#span3{
border-radius: 25px;
position: absolute;
height: 100%;
width:150px ;
background-color: rgb(151, 151, 151);
box-shadow: 5px 5px 5px rgba(41, 41, 41, 0.5);
}
<!-- HTML -->
<div class="sld_btn">
<span class="span1" id="span1">Search by pin code</span>
<span id="span2">Search by dictric</span>
<span class="span3" id="span3">Search by pin code</span>
</div>
I think this is close to what you are looking for. I can explain individual parts if you want.
Click on Run Code Snippet to see it working.
const buttons = document.querySelectorAll('.button');
function onButtonClick(event) {
for (button of buttons) button.classList.remove('clickedButton');
event.target.classList.add('clickedButton');
}
.container {
display: flex;
border-radius: 32px;
background-color: grey;
width: max-content;
}
.button {
cursor: pointer;
padding: 16px;
text-align: center;
border-radius: 32px;
font-size: 14px;
transition: all 0.25s ease;
}
.clickedButton {
background-color: #474e5d;
box-shadow: 0px 0px 15px #444;
color: white;
}
<div class="container">
<div class="button" onclick="onButtonClick(event)">Search by Pin Code</div>
<div class="button" onclick="onButtonClick(event)">Search by District</div>
</div>
I a problem doing a simple css opacity transition on the selector #loginForm > div:first-child h1 by simply adding the class .animated to that element using javascript. Although it is not working. Below is the code:
document.querySelector('#loginForm > div:nth-child(2)').style.display = 'none';
document.querySelector('#loginForm > div:first-child').style.display = 'block';
var verified_text = document.querySelector('#loginForm > div:first-child h1');
verified_text.classList.add('animated');
#loginForm {
position: relative;
padding: 40px;
background-color: #fcde84;
border-radius: 5px;
margin-top: 75px;
width: 462px;
}
#loginForm>div:first-child {
height: 380px;
border: 0;
filter: drop-shadow( 5px 8px 8px rgba(0, 0, 0, 0.1));
}
#loginForm>div:first-child div {
margin-top: 165px;
}
#loginForm>div div {
width: 150px;
height: 150px;
margin: 0 auto;
overflow: hidden;
}
#loginForm>div:first-child h1 {
font-family: 'Arial Rounded MT';
color: rgb(109, 204, 91);
text-align: center;
display: block;
transition: all 5s ease-out;
opacity: 0;
}
#loginForm>div:first-child h1.animated {
opacity: 1;
}
#loginForm h2 {
font-size: 34px;
text-transform: uppercase;
line-height: 24px;
color: #2f4e71;
letter-spacing: -2px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
}
#loginForm p {
font-size: 17px;
line-height: 40px;
color: #333850;
display: block;
margin: 0 0 10px;
font-weight: 700;
}
#loginForm>div:nth-child(2) div {
border-radius: 50%;
border: solid 2.5px #3A5E77;
}
#loginForm ul {
padding: 10px 15px 10px 30px;
background-color: #fc7f77;
color: white;
border-radius: 7.5px;
margin: 12px 0;
display: none;
}
#loginForm li {
text-align: center;
display: block;
font-size: 24px;
}
#loginForm label {
margin: 0 0 12px;
display: block;
font-size: 1.25em;
color: #217093;
font-weight: 700;
}
#loginForm input {
border-radius: 32.5px;
height: 65px;
width: 100%;
font-weight: 600;
font-size: 1.55em;
transition: box-shadow .2s linear, border-color .25s ease-out, background-color .2s ease-out;
}
#email,
#password {
margin: 0 0 24px;
padding: 0 1em 0;
background-color: #f3fafd;
border: solid 2px #217093;
}
#email:focus,
#password:focus {
outline: none;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
border: solid 2px #4eb8dd;
}
#loginForm input[type="submit"] {
padding: .65em 1em 1em;
background-color: #4eb8dd;
color: #FFF;
}
#loginForm input[type="submit"]:hover {
background-color: #217093;
}
<form autocomplete="on" method="post" id="loginForm">
<div style="display: none;">
<div></div>
<h1>Verified</h1>
</div>
<div>
<h2>Join our community</h2>
<p>Login to get instant access to our video courses</p>
<div>SVG goes here</div>
<ul></ul>
<label for="email">Username</label>
<input type="text" id="email" name="username" form="loginForm" required autofocus/>
<label for="password">Password</label>
<input type="password" id="password" name="password" form="loginForm" required/>
<input type='submit' value="Login" name="login" form="loginForm">
</div>
</form>
video of the problem:
https://youtu.be/OGZWfBaG_aM
I want the word verified to fade in
Because the CSS and JavaScript load at virtually the same time as far as the Browser is concerned, a transition is not detected. Change that last line of JavaScript to something like:
setTimeout(()=>{
verified_text.classList.add('animated');
}, 100);
I stumbled on something similar on a React project. It was head-scratching at first but what #StackSlave mentioned above gave me a good hint about the issue I was having.
I had a parent component rendering a child component and I was trying to fade out the child component on a certain click event.
It wasn't working
I had the following setup at first:
const Parent = () =>{
const Child = () =>(
<Image
...
className={clsx(s.image, !showPoster && s.hidden)}
...
/>
)
return(
<>
...
<Child/>
...
</>)
}
I then modified above to the following and the CSS transition worked smoothly.
const Parent = () =>{
return(
<>
...
<Image
...
className={clsx(s.image, !showPoster && s.hidden)}
...
/>
...
</>)
}
styles
.image {
...
opacity: 1;
transition: all 0.2s ease-out !important;
}
.hidden {
opacity: 0;
}
I am developing a single-page-website because it's cheaper at firebase to host. My problem is that I must manage different screens at the single HTML file. So I must make screens disappear and appear again. I want to do this with main_dashboard_page.style.display = 'none'; and main_dashboard_page.style.display = 'block';.
Here is my HTML code:
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- L O G I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="login_page" id="login_page">
<div class="card_view">
<div class="login_container" id="login_container">
<div class="wrap_login">
<div class="login_form validate-form">
<span class="login_form_title p-b-26">
Login
</span>
<div>
<label for="email_field">E-Mail</label>
<input type="text" id="email_field" name="email_field" placeholder="E-Mail">
<label for="password_field">Passwort</label>
<input type="password" id="password_field" name="password_field" placeholder="Passwort">
<input type="submit" value="Einloggen" onclick="login()">
</div>
<div class="center_text_container p-t-115">
<span class="txt1">
Du hast noch keinen Account?
</span>
<a class="txt2" onclick="goToSignUp()">
Registrieren
</a>
</div>
<div class="modal">
<div class="modal-content">
<h1 id="msg_title"><h1>
<p id="msg_content"></p>
<div id="lds-ellipsis" class="lds-ellipsis" style="display: none;"><div></div><div></div><div></div><div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- M A I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="html_side_main" id="html_side_main">
<div class="toolbar">
<div class="centered_toolbar">
<img src="../images/logo.png" width="200px" height="auto" style="position: absolute; left: 0px; margin-left: 30px;"></img>
<ul>
<li class="active"></i>Dashboard</li>
<li></i>Notenliste</li>
</ul>
<i class="logout"></i>Logout
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class='main'>
<div class='main_padding'>
<div class='noten_stats'>
<p class="noten_stats_title">alpha_version: 1.0</p>
<div class="punkte_container">
<span class="punkte"></span>
<span class="punkte_text">Willkommen zur alpha version von kaffboard! Der Support ist rund um die Uhr erreichbar: raycroud#gmail.com</span>
</div>
</div>
</div>
</div>
</div>
As you can see I have two screens, which are represented as the divs:
1) ID: login_page
2) ID: html_side_main
Now the login_page should disapear and the html_side_main should appear, when user is logged in. I chek it with firebase as you could see in js:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
changePage();
}
else {
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = 'none';
}
});
function changePage() {
if (document.readyState === "complete") {
var login_page = document.getElementById("login_page");
var register_page = document.getElementById("register_page");
var main_dashboard_page = document.getElementById("html_side_main");
login_page.style.display = 'none';
main_dashboard_page.style.display = 'block';
}
As I heared that the css has a higher priority in the display of elements I would post the CSS here too:
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* F O N T */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
#font-face {
font-family: Poppins-Regular;
src: url('../public/fonts/poppins/Poppins-Regular.ttf');
}
#font-face {
font-family: Poppins-Medium;
src: url('../public/fonts/poppins/Poppins-Medium.ttf');
}
#font-face {
font-family: Poppins-Bold;
src: url('../public/fonts/poppins/Poppins-Bold.ttf');
}
#font-face {
font-family: Poppins-SemiBold;
src: url('../public/fonts/poppins/Poppins-SemiBold.ttf');
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* L O G I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #6a7dfe;
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
color: -o-linear-gradient(left, #21d4fd, #b721ff);
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
color: linear-gradient(left, #21d4fd, #b721ff);
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
label {
color: #fff;
}
p {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
.card_view {
width: 100%;
margin: 0 auto;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 9px; /* 5px rounded corners */
}
.login_container {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background-color: rgba(38, 38, 38, 1);
}
.wrap_login {
width: 390px;
background-color: rgba(48, 48, 48, 1);
border-radius: 10px;
overflow: hidden;
padding: 77px 55px 33px 55px;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}
/* Add rounded corners to the top left and the top right corner of the image */
img {
border-radius: 9px 9px 0 0;
}
.container {
padding: 2px 16px;
}
/*------------------------------------------------------------------
[ Form ]*/
.login_form {
width: 100%;
}
.login_form_title {
display: block;
font-family: Poppins-Bold;
font-size: 30px;
color: #fff;
line-height: 1.2;
text-align: center;
}
.login_form_title i {
font-size: 60px;
}
input, select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid rgba(48, 48, 48, 1);
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(38, 38, 38, 1);
}
input[type=submit] {
background-color: rgba(6, 132, 134, 255);
font-family: Poppins-Medium;
}
input[type=submit]:hover {
background-color: rgba(8, 160, 163, 255);
cursor: pointer;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba(92, 92, 92, 1);
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(92, 92, 92, 1);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(92, 92, 92, 1);
}
input, select, textarea{
color: #fff;
}
/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
font-family: Poppins-Regular;
font-size: 13px;
color: #666666;
line-height: 1.5;
}
.txt2 {
font-family: Poppins-Regular;
font-size: 13px;
color: #fff;
line-height: 1.5;
cursor: pointer;
}
.txt2:hover {
color: rgba(6, 132, 134, 255);
}
.center_text_container {
text-align: center;
vertical-align: middle;
line-height: 50px;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* M A I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
.html_side_main {
float: left;
height: auto;
width: 100%;
}
.html_side_main {
height: 100%;
}
/*TOOLBAR*/
.html_side_main .toolbar {
list-style-type: none;
height: 90px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(48, 48, 48, 1);
}
.html_side_main .centered_toolbar {
display: flex;
align-items: center;
justify-content: center;
}
.html_side_main ul {
list-style-type: none;
list-style: none;
}
.html_side_main li {
float: left;
}
.html_side_main a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.html_side_main a:hover {
color: #cccccc;
}
/* MAIN */
.html_side_main .main_padding {
padding: 15px;
width: 100%;
}
.html_side_main .noten_stats {
height: 200px;
background: #cc2b5e;
background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
background: linear-gradient(to right, #753a88, #cc2b5e);
border-radius: 5px;
box-shadow: 1px 1px 5px #ddd;
}
.html_side_main .noten_stats_title {
color: #ffffff;
padding: 20px;
font-family: Montserrat-Medium;
}
.html_side_main .punkte_container{
height: 80%;
margin: auto;
width: 50%;
display: flex;
justify-content: center;
align-items: baseline;
}
.html_side_main .punkte {
color: #ffffff;
font-size: 50px;
font-family: Montserrat-Bold;
}
.html_side_main .punkte_text {
color: #ffffff;
font-family: Montserrat-Medium;
}
PROBLEM:
To set the display option in js does not work. First both of the divs are shown and when user logged in both of them disapear. I don't know why, but please can you help me to fix this this problem? Because the website is basicly finished, and I only have to convert it to a one html file.
Thanks in advance.
In isolation of a codepen, this works:
function setStyle(propValue){
console.log(propValue)
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = propValue
}
Thus it is not a js⇄css problem. (as your title suggests)
Look deeper into your firebase events, add some console.log() into the code to verify, things actually get called, when you expect them to.
Generally, try to isolate your problem further and further (remove all unrelated clutter, i.e. your inner and unrelated html) as long as the problem persists...
As I heared that the css has a higher priority in the display of elements
Not true. Precedence is from lowest to highest:
Browser default
External style sheet (like yours)
Internal style sheet (commonly in <head>)
Inline style
...javascript runtime changes of CSS properties are a 4., they change the inline styles (at runtime, after DOM construction, so they are also higher than pre-exisiting inline styles), as you can also inspect with your browser's dev tools.
Your problem is much more trivial. Your #login_page is a parent of your #html_side_main, thus hiding it hides all. You are one closing </div> short. If your intend is to have two neighbouring (not nested) elements, probably meant to be somewhere around line :63.
(This is, why isolation aka damping down is good :-)
I would recommend to not use .style on a DOM node. Instead, I would recommend to create a class in css like:
.display-none {
display: none;
}
and then add the class via javascript:
login_page.className += " display-none";
That way you will have all your styles in your css and not in your javascript
!http://postimg.org/image/ym5xp7ilv/
what i would like to achieve is to move the div item which is clicked on the top of the div container when each item is clicked...the rest of the items(those who are not being clicked) would fill the rest of the div container respectively
HTML
<div class="row">
<div class="col-md-12">
<div class="containing_div">
<div class="container_div"></div>
<div class="menu_div">
<div class="item_div">Photos</div>
<div class="item_div">Video</div>
<div class="item_div">Music</div>
<div class="item_div">Files</div>
<div class="item_div">Contacts</div>
</div>
</div>
</div>
</div>
CSS
.containing_div
{
height: 100%;
}
.container_div
{
background: #fff;
height: 100%;
width: 90%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
text-align: center;
font-family: "Open Sans";
font-size: 26px;
float: left;
padding-top: 25px;
position: relative;
}
.menu_div
{
background: transparent;
float: left;
}
.item_div
{
background: #ddd;
height: 80px;
color: #bbb;
font-family: "Open Sans";
font-size: 16px;
font-weight: 300;
margin-bottom: 10px;
text-align: center;
padding: 8px;
border-radius: 0 2% 2% 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
cursor: hand;
}
If I correctly understood what you desire, you can achieve your target with a little of jQuery, thanks to prependTo method.
Here the working example and the jQuery function.
$('.item_div').on('click',function(){
$(this).prependTo('.container_div');
});
UPDATE:
If you want to simply swap positions, here a variation.
$('.item_div').on('click',function(){
$(this).prependTo('.menu_div');
});