Cross-close icon not appearing - javascript

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>

Related

removing a style by class

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.

I'm trying to run the same code twice from a compiler I bought online

I have 3 games in this current code, I got the first 2 to work but the third has been elusive. I would like to have it all run simultaneously but it doesn't have to. The last 2 games are from the same compiler. These are interactive games like crosswords and word searches. Also, I'm new to js, I'm still learning. Here's my code.
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META NAME="Generator" CONTENT="Crossword Compiler (www.crossword-compiler.com)">
<br></br>
<center><p style="font-size:20px">Word Match Game</p></center>
<br></br>
<link rel="stylesheet" href="/s/style.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="/s/mayavocabagjQtest.js"></script>
</head>
<body>
<div id="cardslots">
<div id="draggableBlocks"></div>
<div id="targetArea"></div>
<div id="message">Match!</div>
<div id="successMessage">Success!</div>
</div>
</body>
<br></br>
<br></br>
<center><p style="font-size:20px">Crossword Puzzle</p></center>
<br></br>
<TITLE>Crossword Puzzle</TITLE>
<br></br>
<style type="text/css">
<!--
BODY, .Clues, .GridClues { font-size: -3pt; font-family: Times New Roman,Times; }
-->
</style>
<STYLE TYPE="text/css">
<!--
div#CrosswordCompilerPuz {
position: fixed;
transform: scale(1.4);
left: 22%;
width: 700px; // Any width will be fine
height: 700px; // Any height will be fine
}
.PuzTitle {
font-size: 15pt; color: #800000; font-weight: bold;
}
.CopyTag {
font-size: 10pt; color: #000000
}
-->
</STYLE>
<TITLE>Crossword Puzzle</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<script src="/s/raphael.js"></script>
<script src="/s/crosswordCompiler.js"></script>
<script src="/s/mayaagcw.js"></script>
<script>
$(function(){
$("#CrosswordCompilerPuz").CrosswordCompiler(CrosswordPuzzleData,null, {SUBMITMETHOD:"POST",SUBMIT : "",PROGRESS : "" , ROOTIMAGES: "CrosswordCompilerApp/CrosswordImages/" } );});</script>
<div id="CrosswordCompilerPuz"></div>
<center><P><BLOCKQUOTE><A CLASS="PDFURL" HREF="testcwp.pdf">PDF</A></BLOCKQUOTE></center>
<HR>
<SPAN CLASS="CopyTag">Web page created by Crossword Compiler.</SPAN>
</BODY>
<BODY>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta NAME="Generator" CONTENT="Crossword Compiler (www.crossword-compiler.com)">
<style type="text/css">
<!--
BODY, .Clues, .GridClues { font-size: -3pt; font-family: Times New Roman,Times; }
-->
</style>
<STYLE TYPE="text/css">
<!--
div#CrosswordCompilerPuz1 {
position: fixed;
transform: scale(1.0);
left: 22%;
width: 700px; // Any width will be fine
height: 700px; // Any height will be fine
}
.PuzTitle {
font-size: 15pt; color: #800000; font-weight: bold;
}
.CopyTag {
font-size: 10pt; color: #000000
}
-->
</STYLE>
<TITLE>Wordsearch</TITLE>
</BODY>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<script src="/s/raphael.js"></script>
<script src="/s/crosswordCompiler.js"></script>
<script src="/s/1.js"></script>
<script>
$(function(){ $("#CrosswordCompilerPuz1").CrosswordCompiler(CrosswordPuzzleData,null, {SUBMITMETHOD:"POST",PROGRESS : "" , ROOTIMAGES: "CrosswordCompilerApp/CrosswordImages/" } );});</script>
<div id="CrosswordCompilerPuz1"></div>
<HR>
</BODY>
</HTML>
any input is appreciated

Javascript event happening on their site, but it is not happening on our

I am newbie in frontEnd part.
When I have included their frontend into our test it just won't work.
They are the company that we are building the backend for.
This is their:
This is ours:
This is their code:
<head><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style><style type="text/css">#media print { .gm-style .gmnoprint, .gmnoprint { display:none }}#media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}</style><style type="text/css">.gm-style-pbc{transition:opacity ease-in-out;background-color:rgba(0,0,0,0.45);text-align:center}.gm-style-pbt{font-size:22px;color:white;font-family:Roboto,Arial,sans-serif;position:relative;margin:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ICLEI</title>
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cairo:400,200,300,600,700,900" rel="stylesheet" type="text/css">
<script type="text/javascript" style="">window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script><script src="js/jquery-1.11.2.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3" defer=""></script>
<script type="text/javascript" src="js/jquery.main.js" defer=""></script>
<style type="text/css">.js-slide-hidden{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}</style><style></style><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/common.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/map.js"></script><style type="text/css">.fancybox-margin{margin-right:15px;}</style>
<style type="text/css">.gm-style {
font: 400 11px Roboto, Arial, sans-serif;
text-decoration: none;
}
.gm-style img { max-width: none; }</style>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/util.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/onion.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/controls.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/stats.js"></script>
</head>
This is our code:
<head><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"><style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style><style type="text/css">#media print { .gm-style .gmnoprint, .gmnoprint { display:none }}#media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}</style><style type="text/css">.gm-style-pbc{transition:opacity ease-in-out;background-color:rgba(0,0,0,0.45);text-align:center}.gm-style-pbt{font-size:22px;color:white;font-family:Roboto,Arial,sans-serif;position:relative;margin:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}</style>
<style type="text/css">#media print { .gm-style .gmnoprint, .gmnoprint { display:none }}#media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}</style>
<style type="text/css">.gm-style-pbc{transition:opacity ease-in-out;background-color:rgba(0,0,0,0.45);text-align:center}.gm-style-pbt{font-size:22px;color:white;font-family:Roboto,Arial,sans-serif;position:relative;margin:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ICLEI</title>
<link rel="stylesheet" href="/css/main.css">
<link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cairo:400,200,300,600,700,900" rel="stylesheet" type="text/css">
<script type="text/javascript" style="">window.jQuery || document.write('<script src="/js/jquery-1.11.2.min.js"><\/script>')</script><script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3" defer=""></script>
<script type="text/javascript" src="/js/jquery.main.js"></script><style type="text/css">.js-slide-hidden{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}</style>
<style type="text/css">.js-slide-hidden{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}</style><style></style><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/common.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/map.js"></script><style type="text/css">.fancybox-margin{margin-right:15px;}</style><style
type="text/css">.gm-style {
font: 400 11px Roboto, Arial, sans-serif;
text-decoration: none;
}
.gm-style img { max-width: none; }</style>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/util.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/onion.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/overlay.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/controls.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/stats.js"></script>
<style></style><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/common.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/map.js"></script><style type="text/css">.gm-style {
font: 400 11px Roboto, Arial, sans-serif;
text-decoration: none;
}
.gm-style img { max-width: none; }</style><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/util.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/onion.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/controls.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/stats.js"></script></head>
I have already checked couple of times and it seems to me like those two are exactly the same header.
The only difference that I can find is that some event happen on their site and it isn't happening on our site and I can't see why.
And it is happening on class called locations-list.
This is theirs code:
And this is ours:
Could someone help me with this ?
What am I doing wrongly ?
Edited:
This what I get from the network tab inside inspector:

It seems like you are missing a js script, the "ev" next to class="location-list" means there is js event listening this node. This script "js/jquery.main.js" is not called from cdn like the others, make sure it has the right path on the server and if you do maybe be there is another script being called in the footer

Firefox addon panel font

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,

How we get Style with appropriate with class name

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!

Categories

Resources