Beginner here,
I'm currently trying to show a border around buttons every time I click on them.
Theborder would appear quarter by quarter (or 1/3) with the same onclick="myFunction(). I don't get it. How could I properly do it without using a new css class (here: .test_skill) ? I've tried to replace or modify the actual border in .btn but it's not doing anything.
My .html file is :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<div id="skill_unlocked" onclick="myFunction()">
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
</div>
<button class="btn"></button>
</body>
</html>
My .css file is :
body{
background-color: #575757;
}
.btn{
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover{
opacity: 0.9;
background-color: #2B2B2B;
}
.fas{
font-size: 28px;
}
.test_skill{
}
My .js file is :
function myFunction()
{
document.getElementById('skill_unlocked').setAttribute("class", ".test_skill");
}
Bonus question : I'm not sure about the structure I've choose for my button with the<div>,<button>,<i> and <a> tags.I think that I'll have problems with it later becuase of the class tags a bit randomly placed. And it will not fit to what I want on thecss.file
function myFunction()
{
document.getElementById('skill_unlocked').setAttribute("class", ".test_skill");
}
body{
background-color: #575757;
}
.btn{
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover{
opacity: 0.9;
background-color: #2B2B2B;
}
.fas{
font-size: 28px;
}
.test_skill{
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<div id="skill_unlocked" onclick="myFunction()">
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
</div>
<button class="btn"></button>
</body>
</html>
A few things:
When adding the class test_skill programmatically, you want to omit the dot (you have ".test_skill").
You'll probably want to add onclick and the ID skill_unlocked to the <button>, rather than the full-width containing <div>. In this case, you don't need the <div> at all.
.setAttribute("class", ...) will actually overwrite the class(es) if you have an existing one. Instead, you really should use .classList.add("test_skill").
The class that you're adding is test_skill, yet you set up rules for .test_skill_unlocked. You'll want to ensure these match!
To add the border, you're looking to apply border such as:
.test_skill {
border: 2px solid red;
}
And instead of targeting the individual element, what I would recommend is to grab all of the buttons with document.getElementsByClassName("btn"). Note that this returns a NodeList collection of elements, so you'll need to loop over them, adding an event handler to each. From here, you can use the JavaScript keyword this to refer to the button you're currently clicking on. This way, you can use the same function to add the bordered class to each button.
This can all be seen in the following:
var buttons = document.getElementsByClassName("btn");
for (var i = 0; i < buttons.length; i++) {
document.getElementsByClassName("btn")[i].addEventListener("click", function() {
this.classList.add("test_skill");
});
}
body {
background-color: #575757;
}
.btn {
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover {
opacity: 0.9;
background-color: #2B2B2B;
}
.fas {
font-size: 28px;
}
.test_skill {
border: 2px solid red;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
<button class="btn"></button>
</body>
</html>
This is some code i was paying with. I think it does what you was asking but on hover not click. Not exactly what you need but maybe some ideas.
$( ".hvr-ripple-out-good" ).click(function() {
$( this ).toggleClass( "fill-good" );
});
.hvr-ripple-out-good {
margin: 5px;
width: 20px;
height: 20px;
padding: 10px;
color: #333;
text-align: center;
border: 1px solid #333;
border-radius: 50%;
}
.hvr-ripple-out-good:hover {
color: #39CCCC;
border-color: #39CCCC;
}
/* Ripple Out */
#-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
#keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out-good {
display: inline-block;
vertical-align: middle;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.hvr-ripple-out-good:before {
content: '';
position: absolute;
border: rgba(0, 0, 0, 0.0) solid 2px;
border-radius: 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out-good:hover:before, .hvr-ripple-out-good:focus:before, .hvr-ripple-out-good:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
border-color: #39CCCC;
animation-fill-mode: forwards;
}
.fill-good {
background-color: #39CCCC;
color: #fff;
border: 1px solid #fff;
}
.fill-good:hover {
color: #fff;
border: 1px solid #fff;
}
.active {
color: #61D6D6 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div style="padding: 100px; float: left;">
<a class="hvr-ripple-out-good"><i class="fas fa-check"></i></a>
</div>
It's very simple, you can achieve it with css only. No need to use scripts for this simple task, as this make the application heavy and it won't even work if the user has disabled JS in their browser.
Please find the code below for showing border on click (for desktop like devices) and on focus (for touch devices).
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #575757;
}
.btn {
margin: 10px;
display: block;
opacity: 0.6;
border: 5px hidden;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover {
opacity: 0.9;
background-color: #2B2B2B;
}
/* Show border on all buttons */
.btn:active,
.btn:focus {
border: 2px solid red;
}
.fas {
font-size: 28px;
}
/*
* Remove comment for section below to Show border on specific button.
*/
/*
#skill_unlocked:active,
#skill_unlocked:focus {
border: 2px solid red;
}
*/
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<button class="btn" onclick="myFunction()" id="skill_unlocked"><i class="fas fa-flag fa-inverse"></i></button>
<button class="btn"></button>
</body>
</html>
</body>
</html>
Answer to bonus Question
The structure is not an issue in your case here. But, preferably use <i> within <a> if you want to create link on element within <i>
Use this function
function myFunction() {
var el = document.getElementById('skill_unlocked');
el.classList.add("test_skill");
}
Probably best to knock that out with pure CSS with the :active selector.
.btn:active {
border: 5px solid red;
}
Example JSFiddle
There are a few good ways to do something like this. That said, I'd suggest using something other than an inline onclick attribute.
In this solution, I used jQuery and added an animation to the border with CSS. This gives the effect of the border appearing quarter by quarter
as per your OP and additional comments. You can play with the animation keyframes to get the border to appear in thirds, make it thicker, etc.
Edit: I made the border remain by adding the animation-fill-mode CSS property and inserting the "filled" border segments at each keyframe in the animation.
Hope this helps!
$('.btn').on('click', function() {
$(this).addClass('test_skill');
$(this).on('oanimationend webkitAnimationEnd msAnimationEnd animationend', function() {
//$(this).removeClass('test_skill');
});
})
body {
background-color: #575757;
}
.btn {
margin: 10px;
display: block;
opacity: 0.6;
border: none;
background-color: grey;
border-radius: 50%;
cursor: pointer;
height: 70px;
width: 70px;
outline: none;
}
.btn:hover {
opacity: 0.9;
background-color: #2B2B2B;
}
.fas {
font-size: 28px;
}
.test_skill {
animation: border .5s;
animation-fill-mode: forwards;
}
#keyframes border {
0% {
border-top: 0px;
}
25% {
border-top: 2px solid red;
border-right: 0px;
}
50% {
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 0px;
}
75% {
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-left: 0px;
}
100% {
border-top: 2px solid red;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="testborder.js"></script>
<link rel="stylesheet" type="text/css" href="testbutton.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i></button>
<div id="skill_unlocked">
<button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
</div>
<button class="btn"></button>
</body>
</html>
Theres 2 problems:
1) Is you are calling the function setAttribute to add a class.
2) Structure doesnt make much sense , since the class you trying to add doesnt have any styles , so you can remove the
To make it work you could do this:
add the on click and id attributes to the btn like so :
<button class="btn" id="skill_unlocked" onclick="myFunction()">
and remove the border attr like this:
document.getElementById("btn").style.border = "none";
if you want to add a class you should do it like this ( but this wont do anything) :
document.getElementById("skill_unlocked").classList.add('btn');
or to remove a class (this should remove all the styles):
document.getElementById("skill_unlocked").classList.remove('btn');
$(document).ready(function(){
var btn = $('.btn');
btn.click(function(){
$(btn).css('border','1px solid #000');
$(this).css('border','1px solid #f00');
})
})
.btn {
width: 120px;
height: 40px;
display: inline-block;
outline: none;
}
div {
margin: 5px 0;
}
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i> Shipping</button>
<button class="btn"><i class=" fas fa-address-card fa-inverse"></i> Address</button>
<!-- ici fa-inverse manquant -->
<button class="btn"><i class=" fas fa-camera-retro"></i> Camera</button>
<div id="skill_unlocked">
<button class="btn"><i class="fas fa-flag fa-inverse"></i>Flag</button>
</div>
<button class="btn">Button</button>
</body>
</html>
Related
I tried to add JavaScript function to similar element but unfortunately it doesn't work.
I also tried modifying JavaScript code by using querySelectorAll and Foreach but it didn't worked, It add the class but when it come to removing class it broke down and console just kept throwing undefined errors.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
arrow.classList.add("active_arr");
if (leftContainer.classList.contains("off")) {
leftContainer.classList.remove("off");
leftContainer.classList.add("active");
}
});
cancel.addEventListener("click", ({ target: cancel }) => {
cancel.classList.add("active_arr");
if (leftContainer.classList.contains("active")) {
leftContainer.classList.remove("active");
leftContainer.classList.add("off")
}
});
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #2c5346, #203a43, #0f2027);
}
.center{
display: flex;
justify-content: center;
align-items: center;
}
.main{
height: 100vh;
}
.box{
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.288);
border-radius: 23px;
flex-direction: column;
color: white;
position: relative;
overflow: hidden;
}
.box img{
width: 100px;
height: 100px;
border-radius: 50px;
}
.user_name{
margin-bottom: 5px;
font-size: 2rem;
}
.skill{
color: rgba(225,225,225,0.555);
}
/*arrow*/
.arr_container .cancel{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container i{
transform: rotate(45deg);
}
.active_arr{
transform: translate(80%, 80%);
}
.left_container{
position: absolute;
background: #0f2027;
width: 100%;
height: 100%;
border-radius: 23px;
padding: 40px 0 0 20px;
transition: all .4s;
}
.off{
transform: translate(-80%,-80%) rotate(90deg);
}
.active{
transform: translate(0) rotate(0);
}
.left_container p{
margin-bottom: 15px;
font-size: 1.2rem
}
.left_container .skill div{
display: inline-block;
color: rgb(155,155,155);
border:1px solid rgb(155,155,155);
padding: 5px 10px;
font-size: .9rem;
margin: 4px 4px 4px 0;
}
.left_container .icons{
font-size: 1.6rem;
margin-top: 10px;
}
.left_container .icons i{
color: #cfcfcf;
cursor: pointer;
margin-right: 10px;
transition: all .4s;
}
.left_container .icons i:hover{
color: #2c5346;
}
.cancel{
right: 0px;
bottom: 0px;
font-size: 1.5rem;
color: rgb(70,70,70);
position: absolute;
width: 50px;
height: 50px;
background: white;
justify-content: center;
align-items: center;
border-radius: 23px 0 23px 0;
}
.cancel .fas{
position: absolute;
right: 1rem;
bottom: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="cards.css">
<title>cards</title>
</head>
<body>
<div class="main center">
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<div class="box center">
<img src="2bb723986d0546f2c26bcc27f712f0e0.jpg">
<div>
<p class="user_name">Mor Maz</p>
<p class="skill">Front-end Developer</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="skill">
<div>Html</div>
<div>Css</div>
<div>React</div>
<div>Node Js</div>
</div>
<div class="icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script src="cards.js"></script>
<!-- <script>
$(document).ready(function(){
$(".arr_container").click(function(){
$(".left_container").addClass("active")
})
})
</script>
<script>
$(".cancel").click(function(){
$(".left_container").removeClass("active")
})
</script> -->
</body>
</html>
I will appreciate any kind of help
thank you
The classnames and CSS are a mess and you're only adding active_arr to ar and you're only removing active_arr from cl. You're also only selecting one left_container
You should not reach up to change parents if possible; you should iterate parents, iterate their children, etc
This should get you started.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
});
cancel.addEventListener("click", ({ target: cancel }) => {
});
});
I have an issue with a searchbox when looking for questions within the carousel.
The search box is used to find questions in the FAQ list.
When the user clicks on a question from the searchbox, the href brings him to that specific question in the carousel. However, if I select a question which is not in the currently active item of the carousel, nothing happens. E.g. if I search 'Question 3' while being on the first tab of the carousel, I cannot find any 'Question 3' (see example in the code).
How can I solve this?
//LOADER
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
// searchbox
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Hide countries when no input is given
if (input.value.length == 0) {
ul.style.display = "none";
return;
} else {
ul.style.display = "block";
}
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
// FAQs
const items = document.querySelectorAll(".accordion button");
function toggleAccordion() {
const itemToggle = this.getAttribute('aria-expanded');
for (i = 0; i < items.length; i++) {
items[i].setAttribute('aria-expanded', 'false');
}
if (itemToggle == 'false') {
this.setAttribute('aria-expanded', 'true');
}
}
items.forEach(item => item.addEventListener('click', toggleAccordion));
body{
background-color: #cddadaff;
}
/* - - - - CAROUSEL - - - - */
.carousel-indicators li {
background-color: #17171cff;
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators {
position: absolute;
bottom: -100px;
}
#FAQlist {
padding: 6% 15% 2%;
}
#FAQs {
padding-bottom: 450px;
}
/* - - - - Searchbar - - - - */
#myInput {
background-position: 10px 12px;
/* Position the search icon */
background-repeat: no-repeat;
/* Do not repeat the icon image */
width: 100%;
/* Full-width */
font-size: 16px;
/* Increase font-size */
padding: 12px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 12px;
/* Add some space below the input */
font-weight: lighter;
}
#myUL {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li {
margin: 0px;
}
#myUL li a {
border: 1px solid #ddd;
/* Add a border to all links */
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
/* Grey background color */
padding: 12px;
/* Add some padding */
text-decoration: none;
/* Remove default text underline */
font-size: 18px;
/* Increase the font-size */
color: black;
/* Add a black text color */
display: block;
/* Make it into a block element to fill the whole list */
}
#myUL li a:hover:not(.header) {
background-color: #eee;
/* Add a hover effect to all links, except for headers */
}
/* Style the search field */
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
/* - - - - FAQ - - - - */
#import url('https://fonts.googleapis.com/css?family=Hind:300,400&display=swap');
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
.containerFAQ {
margin: 0 auto;
padding: 0;
width: 80%;
}
.accordion .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded='true'] {
border-bottom: 1px solid #03b5d2;
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
color: #7288a2;
font-size: 1.15rem;
font-weight: 400;
border: none;
background: none;
outline: none;
}
.accordion button:hover, .accordion button:focus {
cursor: pointer;
color: #03b5d2;
}
.accordion button:hover::after, .accordion button:focus::after {
cursor: pointer;
color: #03b5d2;
border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: '';
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: '';
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded='true'] {
color: #03b5d2;
}
.accordion button[aria-expanded='true'] .icon::after {
width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
opacity: 1;
max-height: 60em;
transition: all 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content p, li {
font-size: 1rem;
font-weight: 300;
margin: 2em 0;
color: #8f8f8f;
}
/* dividers */
.heading-1 {
font-family: "PTSerif-Regular", serif;
font-size: 28px;
letter-spacing: 0.08em;
font-weight: 300;
color: #17171cff;
text-shadow: 0 1px 1px #FFFFFF;
}
.divider-1 {
border-bottom: 1px solid #96c5b0ff;
background-color: black;
height: 1px;
margin: 0.5em 0px 1.5em;
}
.divider-1 span {
display: block;
width: 444px;
height: 1px;
background-color: #17171cff;
}
.divider-2 {
border-bottom: 1px solid #96c5b0ff;
background-color: black;
height: 1px;
margin: 0.5em 0px 1.5em;
}
.divider-2 span {
display: block;
width: 486px;
height: 1px;
background-color: #17171cff;
}
.dividerline {
padding: 0 10% 0 10%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/v4-shims.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title></title>
</head>
<body>
<!-- SearchBar -->
<section id="FAQlist">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Type a question..">
<ul id="myUL" style="display: none">
<li>Question1?</li>
<li>Question2?</li>
<li>Question3?</li>
<li>Question4?</li>
<li>Question5?</li>
<li>Question6?</li>
</ul>
</section>
<!-- FAQs -->
<section id="FAQs">
<div class="dividerline">
<h1 class="heading-1">Frequently asked questions</h1>
<div class="divider-1"> <span></span>
</div>
</div>
<div id="slider" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#slider" class="active" data-slide-to="0"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="containerFAQ">
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Question1?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer1</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Question2?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer2</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="containerFAQ">
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Question3?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer3</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Question4?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer4</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="containerFAQ">
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Question5?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer5</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-6" aria-expanded="false"><span class="accordion-title">Question6?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer6</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<script src="switch.js" charset="utf-8"></script>
</html>
It looks like you'd need to make the relevant 'panel' of the carousel active when selecting a question.
So, if we're on 'panel 1' which contains Question 1 & 2, and you select 'Question 3' from the search bar, you would need to make panel 2 'active' (via the active class) and then do what you're currently doing to focus on Question 3
This question already has answers here:
How to scale a div without scaling content
(3 answers)
Closed 2 years ago.
I have a div that expands on click to 1.3 width and 1.02 height, but I want the responsive icon inside it to retain its dimensions. Currently the icon becomes stretched and elongated to match the dimensions of its container div. I want it to grow but not lose its original dimensions.
$(document).ready(function(){
$(".ico").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
.bar {
display: inline-block;
font-size: 3vw;
width: 7%;
}
.ico {
background-color: #f8f8ff;
line-height: 1.5;
border-style: solid;
text-align: center;
border-width: 2px;
border-color: #aeaf9d;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.active{
transform-origin: left;
transform: scale(1.3, 1.02);
transition: 50ms;
box-shadow: 2px 2px 10px -1px rgba(0,0,0,.3);
z-index: 10;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
<div class="ico">
<div class="twitter">
<i style="color:#1DA1F2;" class="fab fa-twitter"></i>
</div>
</div>
<div class="ico">
<div class="youtube">
<i style="color:#FF0000;" class="fab fa-youtube"></i>
</div>
</div>
</div>
Apply the opposite scaling to the icon
$(document).ready(function() {
$(".ico").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
});
.bar {
display: inline-block;
font-size: 3vw;
width: 7%;
}
.ico {
background-color: #f8f8ff;
line-height: 1.5;
border-style: solid;
text-align: center;
border-width: 2px;
border-color: #aeaf9d;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.active {
transform-origin: left;
transform: scale(1.3, 1.02);
transition: 50ms;
box-shadow: 2px 2px 10px -1px rgba(0, 0, 0, .3);
z-index: 10;
}
.active i {
transform: scale(calc(1/1.3), calc(1/1.02));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
<div class="ico">
<div class="twitter">
<i style="color:#1DA1F2;" class="fab fa-twitter"></i>
</div>
</div>
<div class="ico">
<div class="youtube">
<i style="color:#FF0000;" class="fab fa-youtube"></i>
</div>
</div>
</div>
I used a glyphicon but i made the visibilty:hidden in CSS , i want when the user write something and click on the button (post) the glyphicon (#gl1) will show , but i have a problem , when i do it by js the glypicon does not show , i don't know why
My Code:
My CSS :
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width , initial-scale=1">
<title>POST</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
div{
background-color: beige;
height:400px;
width:500px;
padding: 10px;
border: 3px solid brown;
margin:20px;
}
div #txtar{
width:470px;
height:280px;
font-size:30px;
padding-left: 13px;
resize: none;
}
div .btn{
float: right;
margin-top:40px;
margin-right:9px;
width:80px;
height: 40px;
font-size:17px;
font-family: monospace;
font-weight: bold;
background-color:beige;
border:1px solid brown;
}
#post{
width:470px;
height:500px;
background-color:white;
border:1px solid brown;
}
#post .glyphicon-pencil , .glyphicon-trash{
float: right;
color:brown;
font-size: 20px;
margin-left: 10px;
visibility: hidden;
}
#post #gl1{
float: right;
color:brown;
font-size: 20px;
margin-left: 10px;
visibility:visible;
}
#post span{
border:1px solid brown;
padding:10px;
}
</style>
</head>
And this is the HTML Elements i want when the user click on the button "post" which has id="post"
, the glypicon will show ...
<body>
<div>
<textarea id="txtar" placeholder="Write Something ..."></textarea>
<button class="btn" onclick="ClickPost();">Post</button>
<button class="btn" onclick="">Cancel</button>
</div>
<div id="post" onmousedown="">
<span id="gl1" class="glyphicon glyphicon-cog" ></span><br>
<span class="glyphicon glyphicon-pencil" id="gl2"></span>
<span class="glyphicon glyphicon-trash" id="gl3"></span>
</div>
JS Code :
<script>
function ClickPost(){
var txt= window.txtar.value;
var txt2;
window.post.innerHTML=txt;
window.txtar.value=" ";
if (!txt){
txt2 = txt;
window.post.innerHTML="Please write something ..!";
window.post.style.color="#a80707";
}
else{
window.gl1.style.visibility="visible";
}
}
</script>
<script src="jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
and when i open the console i find this message:
Uncaught TypeError: Cannot read property 'style' of undefined
at ClickPost (Post edit and delete.html:94)
at HTMLButtonElement.onclick (Post edit and delete.html:67)
please can any one help
This command window.post.innerHTML = txt; will replace the contents of div#post element with new txt value, so all the other elements inside this div#post will be erased (and so the 3 spans).
To protect spans you can add another inner element into the div#post for example like this:
<div id="post" onmousedown="">
<span id="gl1" class="glyphicon glyphicon-cog" ></span><br>
<span class="glyphicon glyphicon-pencil" id="gl2"></span>
<span class="glyphicon glyphicon-trash" id="gl3"></span>
<span id="postContents"></span> <!-- here it is -->
</div>
function ClickPost() {
var txt = window.txtar.value;
window.postContents.innerHTML = txt;
window.txtar.value = "";
if (!txt) {
window.postContents.innerHTML = "Please write something ..!";
window.post.style.color = "#a80707";
} else {
window.gl1.style.visibility = "visible";
window.post.style.color = "";
}
}
div {
background-color: beige;
height: 400px;
width: 500px;
padding: 10px;
border: 3px solid brown;
margin: 20px;
}
div #txtar {
width: 470px;
height: 280px;
font-size: 30px;
padding-left: 13px;
resize: none;
}
div .btn {
float: right;
margin-top: 40px;
margin-right: 9px;
width: 80px;
height: 40px;
font-size: 17px;
font-family: monospace;
font-weight: bold;
background-color: beige;
border: 1px solid brown;
}
#post {
width: 470px;
height: 500px;
background-color: white;
border: 1px solid brown;
}
#post .glyphicon-pencil,
.glyphicon-trash {
float: right;
color: brown;
font-size: 20px;
margin-left: 10px;
visibility: hidden;
}
#gl1 {
float: right;
color: brown;
font-size: 20px;
margin-left: 10px;
visibility: hidden;
}
#gl1, #gl3 {
visibility: hidden;
}
#post span {
border: 1px solid brown;
padding: 10px;
}
#post #postContents {
border: none;
padding: 0;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<textarea id="txtar" placeholder="Write Something ..."></textarea>
<button class="btn" onclick="ClickPost();">Post</button>
<button class="btn" onclick="">Cancel</button>
</div>
<div id="post" onmousedown="">
<span id="gl1" class="glyphicon glyphicon-cog"></span><br>
<span class="glyphicon glyphicon-pencil" id="gl2"></span>
<span class="glyphicon glyphicon-trash" id="gl3"></span>
<span id="postContents"></span>
</div>
Note: I've slightly edited your CSS, HTML and JS, keeping maximum of your code.
P.S. If you have questions, just ask.
I recently made a simon game using JS,HTML5,CSS3 and Bootstrap v4.5.Now the issue occurs on phones i.e. when display of viewport is below 726px.While testing locally on Chrome developer tools the site looks the way I want the website to look.Below is the image on Chrome developer tools
https://www.flickr.com/photos/189671520#N03/50243919798/in/dateposted/
Below is the screenshot of the same page taken on actual pone https://www.flickr.com/photos/189671520#N03/50244763957/in/dateposted/
The key difference is on the edge of each color ,the border radius as well as the border color black is not being applied !. Looking forward for help.
the code for CSS is
body {
text-align: center;
font-family: "Press Start 2P", cursive;
background-color: #011f3f;
color: #fef2bf;
}
.btn {
margin: 3px 0px;
display: inline-block;
height: 210px;
width: 210px;
border: 10px solid black;
border-radius: 20%;
padding: 0px;
}
.btn-close:nth-child(odd) {
text-align: right;
}
.btn-close:nth-child(even) {
text-align: left;
}
.btn-close {
padding: 7px 10.5px;
}
footer {
font-size: 1rem;
margin: 0 0 1% 0;
}
.game-over {
background-color: red;
opacity: 0.8;
}
#level-title {
font-size: 2.85rem;
margin: 2% 5%;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
.simon-rules {
color: #fef2bf;
text-decoration: none;
}
.simon-rules:hover {
color: red;
text-decoration: none;
}
/*****************************************colors*****************************************/
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
#media (max-width: 726px) {
.btn {
margin: 0px;
height: 86px;
width: 86px;
border: 5px solid black;
}
.btn-close {
padding: 5px 2.5px;
}
footer {
margin-bottom: 5%;
}
#level-title {
height: 70px;
font-size: 1.85rem;
margin: 4% 5%;
}
}
the code in HTML is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Simon</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet"
/>
</head>
<body>
<h1 id="level-title">Press Me To Start</h1>
<div class="container">
<div class="row">
<div class="col-6 btn-close">
<div type="button" id="green" class="btn green"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="red" class="btn red"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="yellow" class="btn yellow"></div>
</div>
<div class="col-6 btn-close">
<div type="button" id="blue" class="btn blue"></div>
</div>
</div>
</div>
<footer class="fixed-bottom">
<a
href="https://www.youtube.com/watch?v=1Yqj76Q4jJ4"
class="simon-rules"
target="_blank"
>What is Simon Game?</a
><br />
© Yash Salvi
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
If possible can anyone also help me know that on phone when user clicks on my "Press me to Start" i.e. on "h1" then I have used "h1" as a button and assigned the onclick function to it.Now the problem is that when user taps say on the "Press" it gets copied and browser asks if I want to do google search of the clicked word.
I want this "click to google search on any word" disabled.
[Text](https://raxy45.github.io/SIMON_GAME/) Link to github page