I am trying to add one class and remove another class on clicking of the start quiz button. While the 'info_box' class is successfully added the 'start_btn' class does not get removed, it just changes the position(from flex to no flex).
This is the Html
<body>
<div class="container">
<div class="start_btn" >
<button type="button" class="startBtn">Start Quiz</button>
</div>
<div class="row info_box">
<div class="col-md-6">
<!--Rest of the code-->
This is the CSS
/*START BUTTON BOX*/
.start_btn {
height:80vh;
display: flex;
justify-content:center;
align-items:center;
}
.startBtn{
font-size: 25px;
font-weight: 500;
color: var(--clr-steelBlue);
padding: 15px 30px;
outline: none;
border: none;
border-radius: 5px;
background: var(--clr-white);
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
pointer-events: auto;
}
.startBtn:focus{
background-color: var(--clr-steelBlue);
color:var(--clr-white);
outline: var(--clr-steelBlue);
}
.showInfoBox.info_box{
display: flex;
}
/* INFO BOX*/
.info_box {
height:100vh;
display: flex;
justify-content:center;
align-items:center;
display:none;
}
This is the javascript
const startbtn = document.querySelector(".start_btn");
const infoBox = document.querySelector(".info_box");
startbtn.addEventListener('click', function(){
startbtn.classList.remove("start_btn");
infoBox.classList.add("showInfoBox");
})
I checked the developers tool and it is like this. The class start_btn is not there but the button which is inside the start_btn div is still present
I tried removing the button separately before removing the start_btn box but it does not work
I tried making a separate class to remove the start_btn like this but it doesn't work
.hide.start_btn{
z-index:-1;
pointer-events: none;
}
What can I do to remove the start_btn class? Thank You!!
It does what it's intended to do: removing the class from an element. If you want to remove that element from the DOM, use remove() method.
Related
I wanted to put a lot of dropdowns on one page, and I could easily get them there. The problem is that when I click on the second one, it displays what's on the first, despite having different contents. Is there a solution for this?
Code because it wouldn't fit here:
https://jsfiddle.net/ne720zps/
Send the button that was clicked to myFunction. Get the appropriate dropdown from the button's relative position to that dropdown (the dropdown is the next element after the button in your code). Delete the duplicated IDs on the dropdown divs.
<button onclick="myFunction(this)">
and
function myFunction(button) {
// the dropdown is the next element after the button that was clicked
button.nextElementSibling.classList.toggle("show");
}
Here's a restructuring of that HTML, with ID tags removed and an example on how to target elements based on their proximity/relationship to the button.
// let the page load...
document.addEventListener('DOMContentLoaded', () => {
// assign the button click
document.querySelectorAll('.dropbtn').forEach(btn => {
btn.addEventListener('click', e => {
// first close all
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'))
// open the one you want which is CLOSEST
e.target.closest('.dropdown').querySelector('.dropdown-content').classList.add('show');
})
})
// catch the click outside
document.addEventListener('click', e => {
if (e.target.classList.contains('dropbtn')) return;
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'))
})
})
body {
background: black;
color: white;
}
.dropbtn {
background-color: #ffffff;
color: black;
padding: 10px;
font-size: 20px;
border: none;
cursor: pointer;
width: auto;
margin-bottom: 0;
font-weight: 600;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background: linear-gradient(90deg, #00ffa8, #2300ff);
color: white;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline-block;
text-align: center;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
text-align: left;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
width: 30%;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
background: white;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
#center {
text-align: center;
}
<div class="center">
<div class="dropdown">
<button class="dropbtn">Embedded Browser</button>
<div class="dropdown-content">
<b><i>Unblocked browser that won’t show up in your history. Doesn’t work with a lot of websites, so you can mostly just search.
</i></b>
</div>
</div>
</div>
<div class="center">
<div class="dropdown">
<button class="dropbtn">Fullscreen Browser</button>
<div class="dropdown-content">
<b><i>Same as the last one, but takes up your whole screen.
</i></b>
</div>
</div>
</div>
I have a button with a className 'actions'
This button shows the
css styling from '.actions' but not '.actions button' . I expect both to be included.
This syntax here works for every element except the button.
The full code is at: https://github.com/keithmacinnis/for-play-activity-browser
Activity.module.css
.item {
margin: 1rem 0;
}
.image {
width: 100%;
height: 20rem;
overflow: hidden;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.image img {
width: 100%;
object-fit: cover;
}
.content {
text-align: center;
padding: 1rem;
}
.content h3 {
font-size: 1.25rem;
color: #2c292b;
}
.actions {
padding: 1.5rem;
text-align: center;
}
.actions button {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
.actions button:hover,
.actions button:active {
background-color: #ffe2ed;
}
Activity.js
import css from "./Activity.module.css";
import Card from "./Card";
function Activity(props) {
return (
<li className={css.item}>
<Card>
<div className={css.image}>
<img src={props.activity.image} alt={props.activity.title} />
</div>
<div className={css.content}>
<h3>{props.activity.title}</h3>
<address>{props.activity.address}</address>
<p>{props.activity.description}</p>
</div>
<div>
<button className={css.actions}>Join Activity</button>
</div>
</Card>
</li>
);
}
export default Activity;
Again, I'm unsure why my button receives the stylings for padding and text-align, but the eight properties that follow are ignored.
I do not have much experience with creating selector combinations that include an element type and className, but I just did a little experimenting on my own, and it appears that these may be considered sibling selectors (as opposed to one being the child of the other). Also, it seems like the element type may have to come before the className.
It looks like if you write the selectors like one of these two ways, it should work:
button ~ .actions {
*styles*
}
button + .actions {
*styles*
}
You can read more about combinators here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
To use .class selector for a specific element. You need Start with the element name first, then write the period (.) character, followed by the name of the class... like this
Button.actions {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
If that doesn't work. It might be a problem with the browser using your previous css version from the cash and not the updated styling. To solve it use this:
Ctrl + F5 On Mac OS (in Chrome) use: Cmd + Shift + R .
This will force your browser to reload and refresh all the resources related to the website's page.
It was fixed by this change in Activity.js :
new code:
<div className={css.actions}>
<button >Join Activity</button>
</div>
old code:
<div>
<button className={css.actions}>Join Activity</button>
</div>
Trying to make my tooltips show and hide on click. I managed to do it with the first tooltip but this doesn´t work for the others.
I know that the problem might be with the code document.getElementById but I don´t know with which code I have to replace that, so that every tooltip gets triggered one after the other when clicked.
How can I manage that all the tooltips are shown and hidden as the first one?
Thanks for your support! ;)
//Showing the tooltip on click
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.add("website-tooltiptext-visible");
});
//Removing tooltip when clicked outside tooltip container or outside tooltip itself
document.addEventListener('mouseup', function(e) {
var container = document.getElementById('test');
if (!container.contains(e.target)) {
container.classList.remove("website-tooltiptext-visible");
}
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!
This question got answered in a similar question I made.
Here the link to the question also in stackoverflow
There you will find deeper insights and possible solutions for tooltips via JavaScript or :hover pseudo class.
I have managed to remove the tooltip entirely, just to see if it was possible to style this tooltip, in any way. But what I actually need is to position it centred below the choose file button.
The CSS for getting rid of the tool tip was basically this:
input[type="file"] {
display: none;
}
Which basically results in the button looking like this
However, if I remove the css, I am left with this mad button inside of a button mess which includes the tooltip inside the button
To be clear, both the button and the button within the button do the same thing. I am not 100% clear on why it displays like it as this is my first time working with a file upload button which isn't my own code.
Followed by this Codepen you can simply do it like this:
<html>
<style>
.custom-file-input {
color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
color: black;
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active {
outline: 0;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
</style>
<input type="file" class="custom-file-input" />
</html>
Now the question is how it works?
To get the answer know about css ::before selector here
Hope this helps!
I am creating the a button, that when clicked, will reveal an email input for the user to fill out. This is working, I just want a smooth transition so the action is not "jerky".
This is the HTML for the button and form
<button id="work" onclick="workyes()">Sign Up!</button>
<div id="workyes" class="invisible">
<form><input type='email'></form>
</div>
The CSS I'm Using:
button {
border: 0;
background: #5786c1;
color: white;
padding: 8px 14px;
font-weight: bold;
font-size: 18px;
text-decoration: none;
display: inline-block; /* needed for anchors */
position: relative;
box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,
2px 1px #3a587f, 1px 2px #4171ae,
3px 2px #3a587f, 2px 3px #4171ae,
4px 3px #3a587f, 3px 4px #4171ae,
5px 4px #3a587f, 4px 5px #4171ae,
6px 5px #3a587f, 5px 6px #4171ae;
-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
transition: all 1s;
max-height: inherit;
}
button:hover {
box-shadow: none;
-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
transition: all 1s;
}
.invisible {
display: none;
}
.visible {
display: block;
}
And the JS that ties it all together:
function workyes() {
var box = $('#work');
var form = $('#workyes');
box.toggleClass('invisible');
form.toggleClass('visible');
}
I have an on hover transition that works but I just can't get one to work when the .invisible or .visible classes are added to the script.
Is there any way to make the CSS transitions work or add an effect in a different.
I think you can add a second argument to the toggleClass(); function that specifies duration to smooth out the transition:
function workyes() {
var box = $('#work');
var form = $('#workyes');
box.toggleClass('invisible', 1000);
form.toggleClass('visible', 500);
}
Alternatively you can use the fadeToggle();, slideToggle(); or fadeIn(); / fadeOut(); functions.
Note - you should probably use jQuery's click function rather than the onclick html attribute.
HTML
<button id="clickToShowForm">Sign Up!</button>
<div class="hidden">
<form><input type='email'></form>
</div>
CSS
.hidden {
display:none;
}
jQuery
$('clickToShowForm').click(function(){
$('hidden').fadeToggle();
});
https://api.jquery.com/toggleClass/
http://api.jquery.com/fadetoggle/
maybe you can try to use the fadeIn and fadeOut functions from jquery, and when the animation is finished, add/remove the class? (Although not really necessary anymore..)
<button id="work">Sign Up!</button>
<div id="workyes" class="invisible">
<form id="workyes">
<input type='email'>
</form>
</div>
you better use the jquery selectors instead of an 'onclick' event on the element itself.
$("#work").click(function () {
$(this).fadeToggle("slow", function () {
$(this).toggleClass('invisible');
$('#workyes').fadeToggle("slow", function () {
$('#workyes').toggleClass('visible').focus();
});
});
});
I would think the toggleClass lines are not necessary anymore? Maybe you use there classes for other reasons.. so i left them in...
Take a look here for demo : https://jsfiddle.net/bff1y83b/