I am trying to implement this:
https://www.w3schools.com/howto/howto_js_tabs.asp
except with additional borders.
When I select Tokyo, or mouse out of Paris, the menu button side borders disappear using MS Edge. It works perfectly in Chrome and Firefox.
Here's my code:
<!DOCTYPE html>
<html>
<!-- Tabs by Aubrey Bourke 2019 -->
<head>
<style>
body{
font-family: Sans-serif;
background-color: white;
}
/* Style the tab */
.tab {
overflow: hidden;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 16px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
/*background-color: #ddd;*/
}
/* Create an active/current tablink class */
.tab button.active {
background-color: white;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
.container{
box-shadow: 2px 2px 1px 0px #eee;
width: 500px;
}
#blank{
background-color:#efefef;
cursor: default;
}
#one{
background-color:white;
}
</style>
</head>
<body onload="openCity(event, 'London')">
<div class="container">
<div class="tab">
<button id="one" class="tablinks" onclick="openCity(event, 'London')">London</button>
<button id="two" class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button id="three" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
<button id="blank" class="tablinks" style="width:255px; border-bottom: 1px solid #ccc;"> </button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
if(cityName=="London"){
<!-- One -->
document.getElementById("one").style.backgroundColor="white";
document.getElementById("one").style.borderRight="1px solid #ccc";
document.getElementById("one").style.borderBottom="1px solid white";
<!-- Two -->
document.getElementById("two").style.borderLeft="0px solid #ccc";
document.getElementById("two").style.borderRight="0px solid #ccc";
document.getElementById("two").style.borderBottom="1px solid #ccc";
<!-- Three -->
document.getElementById("three").style.borderLeft="1px solid #efefef";
document.getElementById("three").style.borderRight="1px solid #efefef";
document.getElementById("three").style.borderBottom="1px solid #ccc";
}
if(cityName=="Paris"){
<!-- One -->
document.getElementById("one").style.backgroundColor="#f1f1f1";
document.getElementById("one").style.borderRight="1px solid #ccc";
document.getElementById("one").style.borderBottom="1px solid #ccc";
<!-- Two -->
document.getElementById("two").style.borderLeft="1px solid #efefef";
document.getElementById("two").style.borderRight="1px solid #ccc";
document.getElementById("two").style.borderBottom="1px solid white";
<!-- Three -->
document.getElementById("three").style.borderLeft="1px solid #efefef";
document.getElementById("three").style.borderRight="1px solid #efefef";
document.getElementById("three").style.borderBottom="1px solid #ccc";
}
if(cityName=="Tokyo"){
<!-- One -->
document.getElementById("one").style.backgroundColor="#f1f1f1";
document.getElementById("one").style.borderRight="1px solid #efefef";
document.getElementById("one").style.borderBottom="1px solid #ccc";
<!-- Two -->
document.getElementById("two").style.borderLeft="1px solid #efefef";
document.getElementById("two").style.borderRight="1px solid #ccc";
document.getElementById("two").style.borderBottom="1px solid #ccc";
<!-- Three -->
document.getElementById("three").style.borderLeft="1px solid #efefef";
document.getElementById("three").style.borderRight="1px solid #ccc";
document.getElementById("three").style.borderBottom="1px solid white";
}
}
</script>
</body>
</html>
Can anyone tell me why the borders disappear after hovering over them in MS Edge? Is there any way to fix this?
Well, not quite an answer to your question, but rather a different approach that works in classic Edge and other modern browsers.
I think there are better strategies for marking up and styling these tabs, but I stuck generally with the markup you provided. May not be at all what you're looking for, but perhaps it may be somewhat helpful in thinking through the relevant issues (e.g., extracting styling from JS, etc.).
I've leaned on CSS to do the heavy lifting with regard to styling and tried to simplify the JavaScript so that it does what it does well. I typically shy far away from adding styles to elements via JS unless I have a specific use case that constrains me to do so. That's generally good practice, but perhaps you have reasons I don't know for doing it like you did.
Best of luck.
function openCity(evt, cityName) {
var i, tabcontent;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
var toggleTabs = function (e) {
var active = document.querySelector('.active');
if (active) {
active.classList.remove('active');
}
e.currentTarget.classList.add('active');
}
var tablinks = document.querySelectorAll(".tablinks");
var tablinksSet = Array.from(tablinks);
tablinksSet.forEach(function (item) {
item.addEventListener('click', function (e) {
toggleTabs(e);
})
})
}
body {
font-family: Sans-serif;
background-color: white;
}
/* Style the tab */
.tab {
position: relative;
border-style: solid;
border-width: 1px;
border-color: #ccc #ccc transparent #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
margin-top: -1px;
border: 1px solid transparent;
outline: none;
cursor: pointer;
padding: 16px 16px;
transition: 0.3s;
font-size: 17px;
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #ccc;
}
/* Change background color of buttons on hover */
.tab button:hover {
/*background-color: #ddd;*/
}
/* Create an active/current tablink class */
.tab button.active {
position: relative;
background-color: white;
border: 1px solid #ccc;
border-bottom-color: white;
}
.tab button.active::after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: -2px;
left: 0;
background-color: white;
z-index: 50;
}
.tab button:first-child {
margin-left: -1px;
}
.tab button:not(.active):first-child {
border-left-color: #ccc;
}
.tabcontents {
width: 500px;
float: left;
}
/* Style the tab content */
.tabcontent {
position: relative;
z-index: 1;
display: none;
padding: 6px 12px;
margin-top: -1px;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #ccc #ccc #ccc #ccc;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.container {
width: 500px;
}
<!DOCTYPE html>
<html>
<head></head>
<body onload="openCity(event, 'London')">
<div class="container">
<div class="tab cf">
<button id="one" class="tablinks active" onclick="openCity(event, 'London')">London</button>
<button id="two" class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button id="three" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div class="tabcontents">
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</div>
</body>
</html>
Related
The following code seems to be working just fine on a computer, but breaks in Google Blogger.
<style>
.box {
width: 100px;
height: 100px;
background: yellow;
border: 1px solid #ccc;
outline : 1px solid #f00;
}
.box p{
color: blue;
}
</style>
<div class="box">
<p>This is test text.</p>
</div>
<script>
var box = document.querySelector('.box');
box.style.border = "5px solid red";
box.style.outline = "30px solid blue";
</script>
Any help would be appreciated.
your selector is first class element
if all (.box)
use document.querySelectorAll(".box")
return all box elements in array
example
var box = [...document.querySelectorAll('.box')];
box.forEach((el) => {
el.style.border = "5px solid red";
el.style.outline = "30px solid blue";
})
.box {
width: 100px;
height: 100px;
background: yellow;
border: 1px solid #ccc;
outline: 1px solid #f00;
margin: 10px;
}
.box p {
color: blue;
}
<div class="box">
<p>This is test text.</p>
</div>
<div class="box">
<p>This is test text.</p>
</div>
<div class="box">
<p>This is test text.</p>
</div>
in your blogger
Navigate to the Layout tab and click Add a Gadget ,select “HTML/JavaScript" ,create your js code and save it
you can follow this tutorial it will take you step by step:a link
I have an angular app in which i have my nested dropdown menu. And in one of the list item i have primeng Tabview in that list item like this
<li *ngIf="user.role !== 'super'" class="nav-item flex-center-center flex-column min-width-40 no-border custom-bell-padding notifications-dropdown">
<a class="nav-link" id="notificationsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true">
<i class="fal fa-bell font-26"></i>
</a>
<div class="dropdown-menu" aria-labelledby="notificationsDropDown" (click)="onClick($event)">
<span class="dropdown-menu-arrow"></span>
<div class="ui-g header-dropdown-list">
<div class="ui-g-12 list-item-border-bottom">
<div class="ui-g-6">
<p class="font-11 pb-0">Your Notifications</p>
</div>
<div class="ui-g-6 font-11 text-right">
<app-checkbox [disabled]="disabled" label="Technician updates" [isChecked]="true"></app-checkbox>
</div>
</div>
<div class="ui-g-12">
<p-tabView class="tab-panel-underline">
<p-tabPanel header="All">
<ng-template pTemplate="content">
</ng-template>
</p-tabPanel>
<p-tabPanel header="Critical">
<ng-template pTemplate="content">
</ng-template>
</p-tabPanel>
</p-tabView>
</div>
</div>
</div>
Now i am applying custom styling in component.scss like this
.notifications-dropdown{
.dropdown-menu {
left: 843px !important;
margin: -0.875rem 0 0;
font-size: 0.875rem;
color: #7A8281;
text-align: left;
list-style: none;
border: 0 solid #c8ced3;
box-shadow: 0px 3px 6px #00000029;
z-index: 99999;
top: 74px;
border-radius: 0px;
width: 20rem;
/* min-width: 18.2rem; */
/* right: 0px; */
.header-dropdown-list{
// height: 150px;
.list-item-border-bottom{
border-bottom: 1px solid #e5e6e6;
}
p-tabview.tab-panel-underline {
.ui-tabview{
padding: 20px !important;
.ui-tabview-nav li{
width: 50% !important;
padding: 0px !important;
}
}
}
}
}
But my styling is not applying on primeng tabview. I have this tabview inside of my main list item i.e li and applying some padding and width of li of primeng tabview but it's not applying my custom styles.
I have fixed this issue. The problem was causing due to ViewEncapsulation. My problem solved when i put ViewEncapsulation.None inside my component.
You can use ng-deep and & opertor in scss which refrence to parent class.
::ng-deep .notifications-dropdown{
.dropdown-menu {
left: 843px !important;
margin: -0.875rem 0 0;
font-size: 0.875rem;
color: #7A8281;
text-align: left;
list-style: none;
border: 0 solid #c8ced3;
box-shadow: 0px 3px 6px #00000029;
z-index: 99999;
top: 74px;
border-radius: 0px;
width: 20rem;
/* min-width: 18.2rem; */
/* right: 0px; */
.header-dropdown-list{
// height: 150px;
& .list-item-border-bottom{
border-bottom: 1px solid #e5e6e6;
}
& p-tabview.tab-panel-underline {
& .ui-tabview{
padding: 20px !important;
& .ui-tabview-nav li{
width: 50% !important;
padding: 0px !important;
}
}
}
}
}
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
This is the sample HTML generated from my javascript. Just wondering how come setting display:none; will affect the UI? Below is the code snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.card {
display: inline-block;
text-align: center;
margin: 5px;
padding: 10px;
width: 70px;
height: 100px;
font-size: 26px;
background-color: black;
border: solid 1px black;
color: white;
border-radius: 10px;
}
.holeCard {
/*visibility: hidden;*/
border: solid 1px black;
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
}
</style>
</head>
<body>
<div class="card red">
<span class="dealerCardFace">2</span>
<span class="dealerCardSuit">♦</span>
</div>
<div class="card red holeCard">
<span class="dealerCardFace">7</span>
<span class="dealerCardSuit">♦</span>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//$('.holeCard').eq(1).hide();
$(".holeCard > :nth-child(1)").hide();
$(".holeCard > :nth-child(2)").hide();
</script>
If I remove the display:none, it will look like below which is what I want.
It maybe due to the block has to share same component inside it too. But in your case you should use float: left instead of inline-block
$(".holeCard > :nth-child(1)").hide();
$(".holeCard > :nth-child(2)").hide();
.card {
float: left;
text-align: center;
margin: 5px;
padding: 10px;
width: 70px;
height: 100px;
font-size: 26px;
background-color: black;
border: solid 1px black;
color: white;
border-radius: 10px;
}
.holeCard {
/*visibility: hidden;*/
border: solid 1px black;
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card red">
<span class="dealerCardFace">2</span>
<span class="dealerCardSuit">♦</span>
</div>
<div class="card red holeCard">
<span class="dealerCardFace">7</span>
<span class="dealerCardSuit">♦</span>
</div>
I have 3 services in a row, If you hover over each services title text, the underline gets longer under the corresponding title, What I want to do is make it so when you hover over the button or the title text, the line gets longer.
I would prefer a css solution if possible, I have tried the + (maybe wrongly) but it does not seem to be working for me
<div class="row ">
<div class="col-xl-3 col-lg-4 ">
<em>01</em>
<h2>Web Design</h2>
<p>Acro Design create research led websites that make you and your business money</p>
<button>Explore Web Design</button>
</div>
<div class="col-xl-3 col-lg-4 ">
<em>02</em>
<a href="">
<h2>Branding </h2>
</a>
<p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
<div class="col-xl-3 col-lg-4 "><em>03</em> <h2>Print Design</h2>
<p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>
</div>
button {
margin: 1rem 0 7rem 0;
padding: 1.3rem;
font-size: 1.2rem;
font-style: italic;
background-color: transparent;
border: #000 solid 0.2rem;
color: #000
}
p {
padding: 1rem 1rem 0rem 0;
}
em {
display: block
}
h2 {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid black;
white-space: nowrap;
width: 6.429rem;
transition: 0.5s ease;
height: 5.357rem;
color: #000;
}
h2:hover {
border-bottom: 3px solid black;
width: 200px;
text-decoration: none;
}
}
http://codepen.io/saltedm8/pen/oxVNjO
Thank you
REGARDS
Here is a pen with solution : http://codepen.io/anon/pen/EKMxor. This includes javascript ( JQuery ) but there is no way to do it without css only.. You could say this is 50% hardware accelerated.
HTML:
<div class="row ">
<div class="col-xl-3 col-lg-4 ">
<em>01</em>
<h2>Web Design</h2>
<p>Acro Design create research led websites that make you and your business money</p>
<button>Explore Web Design</button>
</div>
<div class="col-xl-3 col-lg-4 ">
<em>02</em>
<a href="">
<h2>Branding </h2>
</a>
<p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
<div class="col-xl-3 col-lg-4 "><em>03</em> <h2>Print Design</h2>
<p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>
</div>
</div>
</section>
CSS:
p {
padding: 1rem 1rem 0rem 0;
}
button {
margin: 1rem 0 7rem 0;
padding: 1.3rem;
font-size: 1.2rem;
font-style: italic;
background-color: transparent;
border: #000 solid 0.2rem;
color: #000
}
em {
display: block
}
h2 {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid black;
white-space: nowrap;
width: 6.429rem;
transition: 0.5s ease;
height: 5.357rem;
color: #000;
}
h2.active{
border-bottom: 3px solid black;
width: 200px;
text-decoration: none;
}
JS :
$("h2").mouseover(function() {
$(this).addClass("active");
});
$("h2").mouseout(function() {
$(this).removeClass("active");
});
$("button").mouseover(function(){
$(this).parent().children("a").children("h2").addClass("active");
});
$("button").mouseout(function(){
$(this).parent().children("a").children("h2").removeClass("active");
});
My bootstrap dropdown for some reason is nowhere near full width and I need it to be.
Here is an image of what Im talking about:
The country and city are bootstrap dropdowns which I have styled rather a lot to completely change the look. They are each inside a container row. They each take up 6 columns so that it is split in half. I just want them to take up their full half of the green bit. Here is my code.
HTML:
<div id="find-vegan-products-page" style="height:900px;">
<div class="form-background">
<div class="container-fluid" style="padding: 40px;">
<h1>Filter Your Search!</h1>
<form role="form">
<div class="row">
<div class="form-group col-sm-6">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">Country
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
<div class="form-group col-sm-6">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">City
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
CSS:
.input-control {
height: 5rem;
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom: 1px solid dimgray;
border-left-style: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
button.input-control:hover {
background-color: none;
background: none;
}
.btn-primary.active,
.btn-primary:active,
.open>.dropdown-toggle.btn-primary {
/* color: #fff; */
background-color: transparent;
border-color: transparent;
}
.btn:focus,
.btn:active {
outline: none !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
color: #fff;
background-color: transparent;
border-color: dimgray;
box-shadow: none;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
color: #fff;
background-color: transparent;
border-color: dimgray;
}
.btn {
font-weight: 100;
}
.btn-primary:hover {
color: #fff;
background-color: transparent;
border-color: dimgray;
}
dropdown > button {
background:none;
border:none;
box-shadow:none;
}
.form-background {
background: rgba(149, 246, 102, .5);
}
#find-vegan-products-page {
margin-top: 100px; /*separate the div from top of the page*/
padding: 100px; /*or whatever value to give the div space */
}
.btn.btn-default:focus {
border:none;
outline:0;
}
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: white;
font-weight: 100;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
opacity: 1;
font-weight: 100;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
opacity: 1;
font-weight: 100;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: white;
font-weight: 100;
}
.form-control:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: white;
font-weight: 100;
}
How do I make the bootstrap dropdowns take up their full 6 columns in the bootstrap container? The only thing that will look different will be the bottom border will go the full width of the 6 container columns.
I did the following:
.input-control {
border:none; /* Remove border bottom */
}
.dropdown, .dropup {
border-bottom: 1px solid #696969; /* Add bottom border to drop down instead */
}
.dropdown-menu {
width:100%; /* Make drop down 100% width OPTIONAL */
}
I put an optional 100% width on the drop down menu incase you wanted the border to match.
UPDATE:
Having the button full width would help usability as well.
.input-control {
width:100%;
text-align:left;
}