Since it is an assignment so I do not have a live link. Does the code I posted seem right though?
Does the code I posted seem right though?
There are no obvious mistakes, but it’s too much overhead to piece together to get the bigger picture.
Can you maybe zip all the files up and upload them here?
Also, do you see any errors in your browser console?
[ https://drive.google.com/file/d/1LSEz7I878rqHWANlEx_VlzFNA5sWSzp8/view?usp=sharing] This site does not let me upload files since I am a new member but I have attached the link to my google drive upload. Thank you so much for your help. I am quite new/self-taught so my codes may be messy!
The Popup seems to be working perfectly on my end by using the code provided below. However, one of my employees is telling me that he can’t see the popup. He is using Safari, but I am using Chrome, so I hope that there are no browser issues preventing it from loading on Safari.
Thanks. Which page is the popup meant to appear on?
“home.html” THANK YOU SO MUCH!
If you look at the browser console on that page, you will see the following error message:
Uncaught TypeError: $(...).featherlight is not a function
at HTMLDocument.<anonymous> (file:///...script.js:12:18)
That tells us where the error is coming from - script.js, line 12.
In that file we see:
$("#gallery a").featherlight();
and this is what’s causing your problem.
We can remedy this by adding in featherlight from a CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js"></script>
After that we have a new error:
jquery-3.3.1.min.js:2 jQuery.Deferred exception: Cookies is not defined ReferenceError: Cookies is not defined
at HTMLDocument.<anonymous> (file:///...script.js:44:19)
Caused by this line:
var popupShown = Cookies.get('colorboxShown');
So, let’s add in the cookies library from a CDN:
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
After which the popup opens after a short delay and sets a cookie accordingly.
Also, it is better to structure your page so that the CSS is in the <head> and the <script> tags are just before the closing </body> tag.
Like so:
<html>
<head>
<meta charset=utf-8 />
<title>Home</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113471548-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-113471548-3');
</script>
<link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Martel:200,300,400,600,700,800,900" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="home">
<div id="home">
<div class="header">
<a href="index.html" class="logo"> <img src="images/logo.png"></a>
<div class="header-right">
<a id="home" href="home.html">HOME</a>
<a id="about" href="about.html">ABOUT</a>
<div class="dropdown">
<button class="projects">PROJECTS</button>
<div class="dropdown-projects">
<a href="artdirection.html">ART DIRECTION</a>
<a href="branding.html">BRANDING</a>
<a href="graphicdesigns.html">GRAPHIC DESIGNS</a>
<a href="photography.html">PHOTOGRAPHY</a>
</div>
</div>
<div class="dropdown">
<button class="dilettante">DILETTANTE</button>
<div class="dropdown-dilettante">
<a href="instagram.html">INSTAGRAM</a>
<a href="quotes.html">QUOTES</a>
<a href="playlist.html">PLAYLIST</a>
<a href="goodreads.html">GOODREADS</a>
<a href="films.html">FILMS</a>
</div>
</div>
<a id="connect" href="connect.html">CONNECT</a>
<a href="http://instagram.com/naomiailinkwok">
<i id="instagram" class="fab fa-instagram"></i>
</a>
</div>
</div>
<div class="definition">
<h1> PHATASMAGORIA </h1>
<h2> [fantazməˈɡɒrɪə] </h2>
<h3> noun </h3>
<p> a sequence of real or imaginary images like that seen in a dream. </p>
</div>
<div id="slider">
<img src="images/slider/1.jpg">
<img src="images/slider/2.jpg">
<img src="images/slider/3.jpg">
</div>
<div id="modal-content">
<h4>WELCOME</h4>
<label for="email">Don't miss out on the latest updates!</label>
<input placeholder="enter your email here" id="email">
<button class="subscribe">SUBSCRIBE</button>
</div>
<div id="footer">
© Naomi Kwok 2018. All Rights Reserved.
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://cdn.rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Thank you so much for your help! I just copied and pasted the codes from here and it still does not work but the error messages are now gone. I feel like I am missing on the js codes. Can you please verify what codes I should be adding to the js scipt. Thank you again!
I didn’t change the JavaScript, I’m afraid.
The popup is only meant to show once, try clearing your cookies?