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
Related
I tried positioning the footer in holy grail layout using bootstrap grod, but I am unable to do so. I tried everything
I tried positioning the footer in holy grail layout using bootstrap grod, but I am unable to do so. I tried everything
I tried positioning the footer in holy grail layout using bootstrap grod, but I am unable to do so. I tried everything
Could someone help with this?
`
html,
body {
height: 100%;
width: 100%;
}
.container-fluid {
border: 5px solid plum;
}
.main-row {
border: 5px solid orangered;
}
.left-sidebar {
border: 3px solid teal;
}
.nav-bar {
border: 3px solid crimson;
}
.main-right-sidebar {
border: 3px solid khaki;
padding: 0px;
}
.main-bar {
border: 3px solid greenyellow;
}
.right-sidebar {
border: 3px solid turquoise;
}
.footer {
border: 3px solid deeppink;
}
.cont {
border: 3px solid brown;
padding: 0px;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100 main-row">
<div class="col-2 h-100 left-sidebar">
</div>
<div class="col-8 h-75 main-right-sidebar">
<div class="col-12 h-25 nav-bar">
</div>
<div class="col-12 h-75 main-bar">
</div>
</div>
<div class="col-2 h-75 right-sidebar">
</div>
<div class="col-10 h-25 footer">
</div>
</div>
</div>
</body>
</html>`
Try to offset your footer.
<div class="col-md-10 offset-md-1 h-25 footer">
</div>
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>
I tried using :focus CSS pseudo-class in my project. I want to change the color of the element where I click on it. Now when I click my element change color only where it is active and after mouse up it return to old color. After second click I want it back to old color. I'm using Chrome.
Demo here
.row {
display: inline-block;
border: 1px solid grey;
height: 200px;
width: 200px;
line-height: 1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active,
.row:focus {
background: orange;
}
<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>
If you want a real focus state to a div element, you can add a tabindex attribute to it.
.row {
display:inline-block;
border:1px solid grey;
height:200px;
width: 200px;
line-height:1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active, .row:focus { background: orange; }
<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>
If you want toggle the color with clicking the same div element, you have to use javascript (jQuery):
jQuery('#row0').click(function() {
$(this).toggleClass('orange');
});
.row {
display:inline-block;
border:1px solid grey;
height:200px;
width: 200px;
line-height:1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row.orange { background: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>
Following Andy Tschiersch's answer, I would suggest using tabindex = "0" (which is its default value) instead of tabindex = "1".
See: https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex
<div id="main" class="container">
<div class="row" id="row0" tabindex="0" >
</div>
</div>
You can emulate the toggle effect with a CSS trick by adding a hidden checkbox input.
See it here
HTML :
<div id="main" class="container">
<input type="checkbox" />
<div class="row" id="row0">
</div>
</div>
CSS :
.container { position: relative; }
input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 200px; z-index: 1; opacity: 0; display: block; }
input:checked + .row { background: orange; }
.row {
display:inline-block;
border:1px solid grey;
height:200px;
width: 200px;
line-height:1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active, .row:focus { background: orange; opacity:1 }
<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>
Please try this...
What you are looking for is :visited, but this doesn't work on a div. You should use the a-tag for it (including href="#").
.row:active, .row:visited { background: orange; }
Check the fiddle below:
http://jsfiddle.net/uuyNH/32/
Edit: Vincent G's answer seems to do more what you want though, since you can remove the background color by clicking away.
I have three divs on the same line and want to connect them with a line:
Unfortunately, every way I tried collided with the method of display, e.g. inline-block and vertically aligned spacer divs of height 50% with bottom-border.
http://codepen.io/anon/pen/QwOOZp
if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
margin-right: 5em;
position:relative
}
.boxItem:before,
.boxItem:after
{
content:'';
width:5em;/* size of your margin */
border-bottom:1px solid;
position:absolute;
top:50%;
}
:after {
left:100%;
}
:before {
right:100%;
}
.boxItem:first-of-type:before,
.boxItem:last-of-type:after {
display:none;
}
.myBox {
white-space:nowrap;
/* */ text-align:center;
}
body {
}
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
<div class="boxItem">4</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
<div class="boxItem">3</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
<div class="boxItem">2</div>
</div>
<div class="myBox">
<div class="boxItem">1</div>
</div>
fork of your pen
Try this:
div.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
}
div.line {
display: inline-block;
border-top: 1px solid black;
width: 2em;
}
<div class="boxItem">1</div><!--
--><div class="line"></div><!--
--><div class="boxItem">2</div><!--
--><div class="line"></div><!--
--><div class="boxItem">3</div>
Note: I used <!-- and --> to comment out the white space ensuring the line actually touches the divs. More info on that bit: https://stackoverflow.com/a/19038859/2037924
EDIT: Same in CodePen, for the case you like that more for some reason: https://codepen.io/anon/pen/wBPPRz
You could add a div with the width of your margin:
<div class="boxItem">1</div>
<div class="emptyDiv"></div>
<div class="boxItem">2</div>
<div class="emptyDiv"></div>
<div class="boxItem">3</div>
CSS:
div {
display: inline-block;
}
div.emptyDiv{
border: 1px solid black;
width:25em;
}
div.boxItem {
border: 1px solid black;
padding: 1em;
}
All I want DIVs from red to pink to be colored red and DIVs from pink to red to be colored pink. But this does not work (all is red):
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
display: inline-block;
padding: 50px;
background: yellow;
border: solid 1px black;
}
.pink div {
background: pink;
}
.red div {
background: red;
}
</style>
</head>
<body>
<div class="red">
<div>
<div>
<div>
<div>
<div class="pink">
<div>
<div>
<div class="red">
<div>
<div>
<div>
<div class="pink">
<div>
<div>
<div>
<div>
<!-- and so on -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I know why it doesn't work but now I am looking for a solution. Please suggest anything as long as:
it is in pure CSS;
it doesn't require defining IDs;
it can work for any numbers of DIVs;
the class names (red and pink) can be defined for any of the DIVs.
EDITED
background: inherit is your friend. Since background usually does not inherit.
div {
display: inline-block;
padding: 10px;
background: yellow;
border: solid 1px black;
}
div div {
background: inherit;
}
.red {
background: red;
}
.pink {
background: pink;
}
http://jsfiddle.net/pU6Ds/2
Now slide these off to the side to prove each one has an opaque background:
http://jsfiddle.net/pU6Ds/1/
You can use the following, of which the most important part is the default background-color: transparent; for the regular divs, which allows the background-color, where specified on the .pink and .red divs, to show through:
div {
display: block;
min-height: 2em;
margin: 0 auto;
padding: 0.2em 0;
border: 1px solid #000;
background-color: transparent;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
JS Fiddle demo.