I had attached some keyboard navigation on span all keyboard keys are working find up, down, left, right. but when setting the focus on mouse click it's not working I had also tried to setTimeout before set focus but that did not work in my case.
$(document).ready(function() {
$(".navigate").click(function() {
$(this).focus();
});
});
.box {
width: 300px;
height: 300px;
background-color: burlywood;
}
.navigate {
display: inline-block;
width: 96px;
height: 96px;
margin: 2px;
background-color: brown;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.foucs {
border: 1px solid #fff !important;
}
.row {
background-color: violet;
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div class="row">
<span class="navigate" tabindex="1">1</span>
<span class="navigate" tabindex="1">2</span>
<span class="navigate" tabindex="1">3</span>
</div>
<div class="row">
<span class="navigate" tabindex="1">4</span>
<span class="navigate" tabindex="1">5</span>
<span class="navigate" tabindex="1">6</span>
</div>
<div class="row">
<span class="navigate" tabindex="1">7</span>
<span class="navigate" tabindex="1">8</span>
<span class="navigate" tabindex="1">9</span>
</div>
</div>
Change your CSS to this...
.navigate:focus {
border: 1px solid #fff !important;
}
Instead of...
.foucs {
border: 1px solid #fff !important;
}
Related
I'm in need of hiding a div on mouse hover and then show another div instead, I'm trying to achieve this by using css but when I test the code, both divs are hidden. Maybe this can only be achieved using jQuery?
I wrote down this code in pure CSS/HTML:
.responsive-banner {
width: 100%;
height: 154px;
overflow: hidden;
margin: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.responsive-banner a {
text-decoration: none;
color: #fff;
}
.banner-description {
/*width:70%;
height:127px; */
display: flex;
align-items: center;
}
.banner-description-2 {
padding: 7px;
max-height: 127px;
overflow: hidde
}
.banner-title {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 5px;
text-shadow: #000 1px 1px 1px;
color: #000;
}
.banner-txt {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.11rem;
color: #000;
}
.banner-btn {
background: #279fba;
float: right;
margin-left: 20px;
padding: 12px;
font-size: 18px;
border-radius: 4px
}
a.banner-btn {
color: #FF0000;
padding: 3px 5px;
}
a.banner-btn:hover {
color: #5ca5ff;
}
#banneryoutube1 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image1.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
}
#banneryoutube12 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image2.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
/* animation: wahooMario 0.12s linear 1;*/
}
#showbannerinarticle1 {
display: block
}
#showbannerinarticle2 {
display: none
}
#showbannerinarticle1:hover {
display: none
}
#showbannerinarticle2:hover {
display: block
}
<div id="showbannerinarticle1" class="responsive-banner">
<a href="/index.html" rel="nofollow" target="_blank">
<div id="banneryoutube1" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
<div id="showbannerinarticle2" class="responsive-banner">
<a href="/index2.html" rel="nofollow" target="_blank">
<div id="banneryoutube12" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
How can I proceed with this?
Basically when I'm creating is an animated banner.
The issue may be that CSS cannot consider something to be hovered unless it is visible, and so it gets confused.
I would wrap both in another div and target the CSS to the wrapper, like this:
.wrapper:hover .hide-me {
display: none;
}
.show-me {
display:none;
}
.wrapper:hover .show-me {
display: block;
}
<div class="wrapper">
<div class="hide-me">Content 1</div>
<div class="show-me">Content 2</div>
</div>
Heres some workign example you can play with using jquery.
$(document).ready(function(){
$(".div1").hover(function(){
$(".div2").show();
$(".div1").hide();
});
$(".div2").hover(function(){
$(".div1").show();
$(".div2").hide();
});
});
.div1 {
background-color: blue;
cursor: pointer;
color: white;}
.div2 {
background-color: yellow;
display:none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1">
<h1>This is my div 1</h1>
</div>
<div class="div2">
<h1>div 2 is now showing</h1>
</div>
I would use:
document.getElementById('firstDivId').style.display = "none";
document.getElementById('secondDivId').style.display = "block";
// Switch these around when doing the opposite
I am new to CSS.
I want to create a Process Step Like in the image.
Below is the code I have tried.
.inline-div{
padding: 1rem;
border: 0.04rem gray solid;
display: inline-block;
width: 25%;
border-top-left-radius: 25px;
}
.active{
background: #8b7b38;
color: #FFFFFF;
}
<div>
<div class="inline-div">Text A</div>
<div class="inline-div active">Text B</div>
<div class="inline-div">Text C</div>
</div>
Any help would be great.
Thank You.
try this instead,
Remove the gap between each process by using flex
.main{
flex-wrap:nowrap;
display: flex;
}
And to remove all border-left of inline-div except first item.
.inline-div:not(:first-child){
margin-left:-0.04rem; // to remove the left border
}
.inline-div{
padding: 1rem;
border: 0.04rem gray solid;
width: 25%;
border-top-left-radius: 25px;
}
.inline-div:not(:first-child){
margin-left:-0.04rem; // to remove the left border
}
.main{
flex-wrap:nowrap;
display: flex;
}
.active{
background: #8b7b38;
color: #FFFFFF;
}
.inline-div {}
<div class="main">
<div class="inline-div">Text A</div>
<div class="inline-div active">Text B</div>
<div class="inline-div">Text C</div>
<div class="inline-div">Text D</div>
</div>
set outer div's font-size to zero to remove the gap between each 2 steps, set right step's margin-left to negative border width to overlap left step's border, then it'll work fine:
.outer-div{
font-size: 0;
}
.inline-div{
padding: 1rem;
border: 0.04rem gray solid;
display: inline-block;
width: 25%;
border-top-left-radius: 25px;
text-align: center;
font-size: 20px; /* set inner div's font-size as you need */
}
.active{
background: #8b7b38;
color: #FFFFFF;
}
.no-left-border{
margin-left: -0.04rem;
}
<div class="outer-div">
<div class="inline-div">Text A</div>
<div class="inline-div active no-left-border">Text B</div>
<div class="inline-div no-left-border">Text C</div>
</div>
.inline-div{
padding: 1rem;
border: 0.04rem gray solid;
display: inline-block;
width: 25%;
border-top-left-radius: 25px;
background-color: transparent;
}
.active{
background: #8b7b38;
color: #FFFFFF;
}
.flex-div {
display: flex;
background: blue; // change to your color
}
<div class="flex-div">
<div class="inline-div">Text A</div>
<div class="inline-div active">Text B</div>
<div class="inline-div">Text C</div>
</div>
i have a form for edit .
in this form i have 2 div .
the first div editForm for show form for edit and second form infos for show detail of this form .
i want when the size of page for mobile or tablet the infos must be hide and show the button for open it . its worked and it hide when in the mobile or table size and when click on the button in going hide but i need when the infos show or hide with button it using the animation for show or hide .
Demo
how can i do this ???
html :
<div class="container">
<div id="editForm" class="editForm">
<form>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
</form>
</div>
<div id="infos" class="infos">
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
</div>
<div id="mySidenav" class="sidenav">
<a (click)="showHideInfo()">open</a>
</div>
css:
p {
font-family: Lato;
}
.container{
display: flex;
}
.editForm{
border: 1px solid red;
width: 60%;
display: flex;
justify-content: center;
}
.infos{
border: 1px solid red;
width: 40%;
display: flex;
justify-content: center;
}
#media (max-width: 768px)
{
.infos{
display: none;
width: 0;
}
.editForm{
width: 100%;
}
}
#mySidenav a {
position: fixed;
background-color: #4caf50;
right: 0px;
-webkit-transition: 0.3s;
transition: 0.3s;
top: 50%;
display: flex;
padding: 3px;
width: 39px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 5px 0px 0px 5px;
}
#mySidenav a mat-icon{
margin-right: 10px;
margin-top: 6px;
}
#mySidenav a:hover {
right: 0;
}
#about {
top: 20px;
background-color: #4caf50;
}
and this my code when click on the button for show or hide infos :
showHideInfo(): void {
if(this.sidebarShow)
{
var editorEdit = document.getElementById('editForm');
editorEdit.style.visibility='visible';
editorEdit.style.width='100%';
var avtionInfo= document.getElementById('infos');
avtionInfo.style.display='none'
avtionInfo.style.width='0'
this.sidebarShow=!this.sidebarShow;
}else{
var editorEdit = document.getElementById('editForm');
editorEdit.style.visibility='hidden';
editorEdit.style.width='0';
var avtionInfo= document.getElementById('infos');
avtionInfo.style.display='block'
avtionInfo.style.width='100%'
avtionInfo.style.animation="showInRghit"
this.sidebarShow=!this.sidebarShow;
}
}
You can achieve this by giving a transition to the .editForm such as :
.editForm{
transition: width 0.3s ease;
}
Please try this and tell if this is the requirement.
I have 4 buttons which when i click it, it will slide down the content bar beneath it but when i do the, the 3 others button will slide down unintentionally as well. I wanted the buttons to stay onto the container, so how do i do it?
$(document).ready(function() {
$(".click").on("click", function() {
var clickid = $(this).attr("data-panbodnum");
$("." + clickid).slideToggle(300);
});
});
html {
font-family: Open Sans, sans-serif;
}
.btn {
border: 1px solid black;
}
a {
text-decoration: none;
color: #353535;
}
.panbody1,
.panbody2,
.panbody3,
.panbody4 {
display: none;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.navcon {
max-width: 960px;
margin: 0 auto;
align-items: center;
position: relative;
height: 46px;
flex-wrap: wrap;
border: 1px solid black;
}
.btn1,
.btn2,
.btn3,
.btn4 {
display: inline-block;
}
.panhead1,
.panhead2,
.panhead3,
.panhead4 {
height: 46px;
line-height: 46px;
vertical-align: middle;
color: #353535;
font-weight: 400;
padding: 0 15px;
text-align: center;
border-right: 1px solid black;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
.navbar {
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<div class="navcon">
<div class="btn1">
<div class="panhead1">
<a class="click" data-panbodnum="panbody1" href="#">News</a>
</div>
<div class="panbody1">
<a id="click1" href="#">Content 1</a>
</div>
</div>
<div class="btn2">
<div class="panhead2">
<a class="click" data-panbodnum="panbody2" href="#">Contact</a>
</div>
<div class="panbody2">
<a id="click2" href="#">Content 2</a>
</div>
</div>
<div class="btn3">
<div class="panhead3">
<a class="click" data-panbodnum="panbody3" href="#">About</a>
</div>
<div class="panbody3">
<a id="click3" href="#">Content 3</a>
</div>
</div>
<div class="btn4">
<div class="panhead4">
<a class="click" data-panbodnum="panbody4" href="#">Forum</a>
</div>
<div class="panbody4">
<a id="click4" href="#">Content 4</a>
</div>
</div>
</div>
</div>
Just add vertical-align: top; to div which contains the button and the content (.btn1,.btn2,.btn3,.btn4 ... )
OR use float:left instead of display:inline-block;
Note: you could have used just one class and applied it to all the div instead of using for each div a different class
$(document).ready(function() {
$(".click").on("click", function() {
var clickid = $(this).attr("data-panbodnum");
$("." + clickid).slideToggle(300);
});
});
html {
font-family: Open Sans, sans-serif;
}
.btn {
border: 1px solid black;
}
a {
text-decoration: none;
color: #353535;
}
.panbody1,
.panbody2,
.panbody3,
.panbody4 {
display: none;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.navcon {
max-width: 960px;
margin: 0 auto;
align-items: center;
position: relative;
height: 46px;
flex-wrap: wrap;
border: 1px solid black;
}
.btn1,
.btn2,
.btn3,
.btn4 {
float: left;
}
.panhead1,
.panhead2,
.panhead3,
.panhead4 {
height: 46px;
line-height: 46px;
vertical-align: middle;
color: #353535;
font-weight: 400;
padding: 0 15px;
text-align: center;
border-right: 1px solid black;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
.navbar {
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<div class="navcon">
<div class="btn1">
<div class="panhead1">
<a class="click" data-panbodnum="panbody1" href="#">News</a>
</div>
<div class="panbody1">
<a id="click1" href="#">Content 1</a>
</div>
</div>
<div class="btn2">
<div class="panhead2">
<a class="click" data-panbodnum="panbody2" href="#">Contact</a>
</div>
<div class="panbody2">
<a id="click2" href="#">Content 2</a>
</div>
</div>
<div class="btn3">
<div class="panhead3">
<a class="click" data-panbodnum="panbody3" href="#">About</a>
</div>
<div class="panbody3">
<a id="click3" href="#">Content 3</a>
</div>
</div>
<div class="btn4">
<div class="panhead4">
<a class="click" data-panbodnum="panbody4" href="#">Forum</a>
</div>
<div class="panbody4">
<a id="click4" href="#">Content 4</a>
</div>
</div>
</div>
</div>
Before addressing your question, you should note that you can make a couple of improvements to your HTML. Firstly, you're completely missing the point of classes. They are supposed to group elements together, yet making them incremental goes entirely against this. Give all the groups of elements the same class. You can then use DOM traversal to find the required element in the click event handler.
Secondly, you're also repeating the same id on several elements when they should be unique.
To fix your problem, place position: absolute on the .panbody in your CSS:
$(document).ready(function() {
$(".click").on("click", function() {
$(this).closest('.btn').find('.panbody').slideToggle(300);
});
});
html {
font-family: Open Sans, sans-serif;
}
.btn {
border-right: 1px solid black;
}
a {
text-decoration: none;
color: #353535;
}
.panbody {
display: none;
position: absolute;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.navcon {
max-width: 960px;
margin: 0 auto;
align-items: center;
position: relative;
height: 46px;
flex-wrap: wrap;
border: 1px solid black;
}
.btn {
display: inline-block;
}
.panhead {
height: 46px;
line-height: 46px;
vertical-align: middle;
color: #353535;
font-weight: 400;
padding: 0 15px;
text-align: center;
}
.navbar {
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="navbar">
<div class="navcon">
<div class="btn">
<div class="panhead">
<a class="click" href="#">News</a>
</div>
<div class="panbody">
Content 1
</div>
</div>
<div class="btn">
<div class="panhead">
<a class="click" href="#">Contact</a>
</div>
<div class="panbody">
Content 2
</div>
</div>
<div class="btn">
<div class="panhead">
<a class="click" href="#">About</a>
</div>
<div class="panbody">
Content 3
</div>
</div>
<div class="btn">
<div class="panhead">
<a class="click" href="#">Forum</a>
</div>
<div class="panbody">
Content 4
</div>
</div>
</div>
</div>
I'm trying to apply classList.add during the mouseover and classList.remove during the mouseout. The class which should be added or removed is ".portraitBG". It has a #32353F for the background.
I don't know why this isn't working when I tell the code to apply this function to all my html class ".portrait.flex". I don't want to use jQuery at this moment.
See the whole code on https://codepen.io/gabrielacaesar/pen/Pmrpzm
My Javascript:
var portrait = document.querySelectorAll(".portrait.flex")
portrait.addEventListener("mouseover", function() {
portrait.classList.add("portraitBG");
});
portrait.addEventListener("mouseout", function() {
portrait.classList.remove("portraitBG");
});
My HTML:
<section class="container">
<div class="portraits flex">
<a class="portrait flex one" href="#" alt="Foto:">
<img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
<div class="portraitContent">
<p class="portraitName">
Eliseu Padilha
</p>
<p class="portraitGovernment">
governo Michel Temer
</p>
</div>
</a>
<a class="portrait flex two" href="#">
<img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
<div class="portraitContent">
<p class="portraitName">
Eva Chiavon
</p>
<p class="portraitGovernment">
governo Dilma Rousseff
</p>
</div>
</a>
<a class="portrait flex three" href="#">
<img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
<div class="portraitContent">
<p class="portraitName">
Jaques Wagner
</p>
<p class="portraitGovernment">
governo Dilma Rousseff
</p>
</div>
</a>
</section>
My CSS:
a {
text-decoration: none;
cursor: pointer;
}
.container {
padding: 0;
max-width: 1500px;
margin: 0 auto;
}
.flex {
display: flex;
}
.portraits {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 80px;
}
.portrait {
max-width: 800px;
max-height: 340px;
flex-direction: column;
text-align: center;
padding-top: 30px;
}
.portraitBG {
background: #32353F;
border-radius: 5%;
}
.portrait img {
max-width: 800px;
max-height: 200px;
}
.portraitContent {
border: 3px #32353F solid;
border-radius: 5%;
background: #00EC85;
}
.portraitName {
font-size: 200%;
color: white;
padding-top: 7px;
}
.portraitGovernment {
font-size: 100%;
color: #32353F;
padding-bottom: 7px;
}
better to do it in CSS
.portrait:hover{
background: #32353F;
border-radius: 5%;
}