How can I delete two items at once?
I need to delete them by class. But I don't understand how to he -> display: flex me -> text-align: left;
I tried the code below but it didn't work.
document.getElementsByClassName('he')[0].style.color = null;
.he {
color: rgb(0, 162, 255);
display: flex;
}
.he .me {
text-align: left;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div class="he" id="test">
<div class="me">
<h1>hey</h1>
</div>
</div>
</body>
</html>
Alternative A:
Create another class with for example .unsetColor { color: auto } and then add the class.
for (const el of document.getElementsByClassName('he'))
el.classList.add('unsetColor')
Alternative B:
for (const el of document.getElementsByClassName('he'))
el.style.color = 'auto'
Otherwise, see this answer
https://stackoverflow.com/a/6620400/529725
which is inline with how you coding it.
Related
I'm currently trying to create a spelling quiz as part of a project website using HTML, CSS and JScript.
The concept is: the user is shown a word with two letters missing (shown by the underscores). They then select which answer is right (the three button options) and an alert message should come back on the window to say if they are correct or incorrect.
My idea behind the code I wrote so far was to have an event listener on the button that when clicked would trigger the alert either saying correct or incorrect if I have programmed it to be so.
My code isn't working, could anyone help me?
var aChoice = document.getElementById("S1");
aChoice.addEventLister("Click", C1)
function C1 ()
{
alert("Correct");
}
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
#S1 {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class ="Albl">Answer:
<button id="S1">a i</button>
<button id="S1">i a</button>
<button id="S1">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
(More code I was intending to write on Javascript here for logic purposes.)
var bChoice = document.getElementById("S2");
bChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
var cChoice = document.getElementById("S3");
cChoice.addEventLister("Click", C2)
function C2 ()
{
alert("Incorrect");
}
1.You cannot have more than one id="S1"! Since the id attribute is unique for the entire html document. In your case, it is better to use the class. Since there may be more buttons with answer options, like this:
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
2.Now on js ... I corrected your code. Also, you need to change the method of accessing elements (buttons). Like this:
var aChoice = document.querySelector(".btn");
3.Now everything is ready, but not completely! You need the logic for determining the correctness of the choice of the option by buttons.
var aChoice = document.querySelectorAll(".btn");
aChoice.forEach(function(aChoice_current, index) {
aChoice_current.addEventListener('click', function(){
if (index == 0) {
console.log('The answer is correct! :)');
} else {
console.log('The answer is not correct! :(');
}
})
})
#QuizBod {
background-color: #ffff80;
}
#QTitle {
text-align: center;
font-family: 'Langar', cursive;
font-weight: bold;
font-size: 30pt;
color: black;
text-decoration: underline;
text-decoration-color: #FFBF00;
}
.btn {
background-color: white;
color: black;
font-size: 25pt;
font-family: 'Langar', cursive;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
display: inline;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Spelling Test</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Spelling Quiz</h2>
<p id="MQ1">C h _ _ r</p>
<label class="Albl">Answer:
<button class="btn">a i</button>
<button class="btn">i a</button>
<button class="btn">e i</button>
</label>
<script src="SpellTest.js"></script>
</body>
</html>
This is my current HTML code (details changed for privacy):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
p {
display: table-cell;
}
img {
height: 204px;
float: left;
}
div.content-magazine {
display: table;
}
div.content-usedcar {
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 15px;
background-color: #FFFFFF;
padding: 10px;
}
</style>
<title>Anytown Car Sales | No.1 in West Yorkshire since 1982</title>
</head>
<body>
<H1>Anytown Car Sales</H1>
<H2>Est.1982</H2>
<H3>Sutton-in-Craven, West Yorkshire BD20</H3>
<H3>Tel: 01535 000000</H3>
<div class="content-magazine">
<div class="content-usedcar">
<img src="http://media.autoweek.nl/m/4cfy7lsbkrs1.jpg">
<P>2018 68 VAUXHALL INSIGNIA 1.5 TURBO 165 ELITE NAV, 5 door, blue, 15,000 miles £POA</P>
</div>
</body>
</html>
What I have been trying to do is to make a DIV that looks similar to the list at https://www.britanniacarsales.co.uk/used-cars with the picture next to the vehicle and space in between divs (color of my website's body will be changed in the code) but I am not quite sure how to get it to look similar if not the same.
What changes should I make to the code so that div class content-usedcar looks like the style in the link I've used as inspiration from? (I'm trying to make this original work, not copying others' CSS).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
p {
vertical-align: top;
margin: 0 0 0 10px;
}
img {
vertical-align: top;
height: 204px;
}
div.content-usedcar {
display: flex;
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 15px;
background-color: #FFFFFF;
padding: 10px;
}
</style>
<title>Anytown Car Sales | No.1 in West Yorkshire since 1982</title>
</head>
<body>
<H1>Anytown Car Sales</H1>
<H2>Est.1982</H2>
<H3>Sutton-in-Craven, West Yorkshire BD20</H3>
<H3>Tel: 01535 000000</H3>
<div class="content-magazine">
<div class="content-usedcar">
<img src="http://media.autoweek.nl/m/4cfy7lsbkrs1.jpg">
<P>2018 68 VAUXHALL INSIGNIA 1.5 TURBO 165 ELITE NAV, 5 door, blue, 15,000 miles £POA</P>
</div>
</div>
</body>
</html>
how about this?
I understand I need to enter the codes for you guys however the source code page is very long.
Rather this is the site: www.blasonmoderne.com
I should think you would be able to look at page source.
What is happening is on each "slide" in "portfolio" then say "police logo" the slide coming next does not show at all on left or right top end corner. You can catch a glimpse of the arrow when slides are changing in "behind" the slide.
I don't know how to fix this at all and this is my own site and does not need any glitch obviously for prospective client to have a good experience.
Thank you in advance even though I have not put the codes.
Beau
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Anglais & Communication Emmanuel Goussot</title>
<meta name="description" content="Un professionnel de la communication et de la formation. En recherche active d'emploi. English Teacher for now and looking for solid work" />
<meta name="keywords" content="cours anglais, anglais dijon, formation, cpf, communication, dijon" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/ component.css" />
<link rel="stylesheet" type="text/css" href="css76/demo76.css" />
<link rel="stylesheet" type="text/css" href="css76/component76.css" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r; i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g; m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com /analytics.js','ga');
ga('create', 'UA-10000488-1', 'blasonmoderne.com');
ga('send', 'pageview');
</script>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button /buttons.js"></ script>
<script type="text/javascript">stLight.options({publisher: "701f945f-6594-4301- b330-e329855990a6", doNotHash: false, doNotCopy: false, hashAddressBar: true});</script>
<style type="text/css">
.container #bl-main section .bl-content .bottom.page
a {
#font-face
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
margin: 0;
font-size: 1em;
text-align: left;
font-family: Lato, Calibri, Arial, sans-serif;
text-transform: lowercase;
color: #f2ede3;
}
</style>
<style type="text/css">
.container #bl-main #bl-panel-work-items div div .bottom.page2
a {
#font-face
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
margin: 0;
font-size: 1em;
text-align: left;
font-family: Lato, Calibri, Arial, sans-serif;
color: #f2ede3;
}
</style>
<link rel="alternate" href="www.blasonmoderne.com" hreflang="fr-fr" />
<link rel="alternate" href="www.blasonmoderne.com" hreflang="en-uk" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r; i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com /analytics.js','ga');
ga('create', 'UA-10000488-1', 'auto');
ga('send', 'pageview');
</script>
I am experiencing a little trouble to add a font into a panel for my firefox extension.
Here is a simplified code :
main.js
var panel = panels.Panel({
contentURL: self.data.url("panel.html"),
});
panel.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
lorem ...
<button>Deactivate</button>
</div>
</body>
</html>
font.css
#font-face {
font-family: 'MyFont';
src: url('MyFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
style.css
.wrapper {
font-family: 'MyFont', sans-serif;
}
Here is the result :
For a comparison, here is the result for chrome :
The font files used are the same.
Do you have any idea what can cause this and how to fix it?
Thanks,
I want to replace with their style defined earlier and soon for all class. I am newer in iOS. it is dynamic HTML. which render in any format . I want to replace with appropriate style <p class="p1"><span class="s1"> Sent
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px 'Helvetica Neue'}
span.s1 {font-family: 'Helvetica Neue'; font-weight: normal; font-style: italic; font-size: 15.00px; text-decoration: underline}
span.s2 {font-family: 'HelveticaNeue-BoldItalic'; font-weight: bold; font-style: italic; font-size: 15.00px; text-decoration: underline}
span.s3 {font-family: 'Helvetica Neue'; font-weight: normal; font-style: normal; font-size: 15.00px}
</style>
</head>
<body>
<p class="p1"><span class="s1">Sent</span><span class="s2"> from </span><span class="s3">Zone</span><span class="s2"> Mail for </span><span class="s1">iOS</span></p>
</body>
</html>
You can replace the style by either overriding the style rule or simply reusing the same
1) Overriding the style rule
span.s1 {/*some css rules*/}
Then at some later point in the code file
span.s1 {/*some different css rules*/}
s1 class will now have the latest rules
2) Reusing the CSS rule by a different name
span.s1, span.s2, s3 {/* CSS rules */}
All elements having the classes as per above will have the same CSS effect.
Hope it helps!