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,
Related
I am trying to animate my school webpage with a revealing animation, but things aren't working out how it should be, like me trying to invoke in the anime.js library, I downloaded the file into my workspace, but it still isn't working out how it should be, here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test animation</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
<script src="libs/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group website!
</div>
</body>
</html>
CSS Code:
body {
margin: 0px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: green;
}
.text-animation {
color: lightblue;
font-size: 50px;
font-family: "Passion One", sans-serif;
letter-spacing: 1px;
}
.text-animation, .letter {
display: inline-block;
}
And finally the JavaScript Code
var element = document.getElementsByClassName("text-animation")[0];
//Replace each char with <span class="letter">{char} </span>
element.innerHTML = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');
anime.timeline({loop: true})
.add({
targets: ".text-animation .letter",
scale: [3,1],
opacity: [0,1],
translateZ: 0,
duration: 1000,
easing: "easeOutExpo",
delay: (elem, index) => index*70,
})
.add({
targets: ".text-animation",
opacity: 0,
duration: 1000,
easing: "easeOutExpo"
})
Tried everything I could do but still not working, PLEASE HELP!!!
Add the scripts inside the body tag like this and see if it works.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group website!
</div>
<script src="index.js"></script>
<script src="libs/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Just delete your current HTML file and copy-paste the given code below. It will work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Test-Animation</title>
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group wesite!
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
</html>
when the mouse is entering on the link or hover over the link, the link will get in a bold state and when the mouse is leaving the link it goes back to its normal state, but this is not happening as the toggleClass is not working
Here is the html code
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.bold{
font-weight: bold;
}
.normal{
font-weight: normal;
}
</style>
</head>
<body>
Link
<script src="jquery-3.2.1.js"></script>
<script src="Bind.js"></script>
</body>
</html>
Here is the JS code
$(document).ready(function() {
$('a').bind('mouseenter mouseleave',function(){
$(this).toggleClass('bold');
});
});
$("a").hover(
function() {
$( this ).addClass("bold").removeClass("normal");
}, function() {
$( this ).addClass("normal").removeClass("bold");
}
);
If it is just bold on hover you want to achieve JS is quite overkill just use plain old CSS
a:hover {
font-weight: bold;
}
Looks like works fine:
$(document).ready(function() {
$('a').bind('mouseenter mouseleave',function() {
$(this).toggleClass('bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.bold{
font-weight: bold;
}
.normal{
font-weight: normal;
}
</style>
</head>
<body>
Link
<script src="jquery-3.2.1.js"></script>
<script src="Bind.js"></script>
</body>
</html>
But #Maantje is right, if you just want to apply bold on hover, you better just use CSS.
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>
When I put a script in my html file, the font changes to default and no styling can be applied:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<script>
function myFunction() {
}
</script>
</body>
</html>
CSS file looks like this:
ul.topnav li a {
font-size: 20;
}
If I take out the script the font size changes to 20.
Why does this happen?
You don't set 'px'.
Change to:
ul.topnav li a {
font-size: 20px;
}
Your font-size doesn't have a measurement.
font-size: 20;
Please try giving this an 'em' or 'px' and tell us the results.
ul.topnav li a {
font-size: 20px;
}
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!