404 from an overlay menu and an API issue

[REELHERO]

this is new.. I just started to notice it

If you click on any of the social links after hitting the bento box menu..

https://toddheymandirector.com/

the new page opens up using the _blank attribute.. but the site returns to a 404 (null).. dont know why the HTML is correct..

One other issue it may be API  but I cannot figure it out 

hit any thumb to bring up a movie here https://toddheymandirector.com/reel/

the bottom icon in the player is a play button (should be a pause bc it is playing) however if you hit it it stays on a play button but pauses - hit it one more time and it returns to normal function ie pause button shows up when its playing and vice versa - very strange..

any help would be appreciated!

[BenPleysier]

The only thing that I can find, there is no "start_url" mentioned in the manifest.

Because I am time bound, I'll quote AI:

A web app manifest is a JSON file that provides information about a web application, and it's essential for making a Progressive Web App (PWA). At minimum, a typical manifest file should include the following:

1. Name: The full name of the app.
2. Short Name: A shorter name for the app, used on the home screen or launcher.
3. Icons: An array of icons in different sizes and formats.
4. Start URL: The URL that the app should open when launched.
5. Display: How the app should be displayed when launched (e.g., `standalone`, `fullscreen`, `minimal-ui`).
6. Background Color: The background color used for the splash screen.
7. Theme Color: The color used for the address bar and other UI elements.

Here's an example of a minimal web manifest, which should be called "manifest.json" and linked like

"<link rel="manifest" href="manifest.json">"

{
"short_name": "Weather",
"name": "Weather App",
"icons": [
{
"src": "/images/icons-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icons-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#3367D6",
"theme_color": "#3367D6"
}

Edit: If that does not work, try adding "<base href="/">" inside the heading and/or "<link rel="canonical" href="https://toddheymandirector.com/">"

[REELHERO]

Thanks Ben-

I added all 3 (i didnt adjust the json completely but it now has a "start_url"

<link rel="canonical" href="https://toddheymandirector.com/">
<base href="https://toddheymandirector.com/">
<link rel="manifest" href="manifest.json">

but still the 404

[Nancy OShea]

I think legacy jQuery 1.10 has outlived its usefulness and may be causing more problems than it solves. 

The last stable release of jQuery was ver 3.7.1.

https://cdnjs.com/libraries/jquery

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragm...

https://firefox-source-docs.mozilla.org/devtools-user/debugger/source_map_errors/

It's also worth mentioning that jQuery's popularity has declined in recent years. It's been replaced with modern JavaScript and frameworks like React, Angular, and Vue.js.

[REELHERO]

thanks Nancy I updated to the latest stable release and its still happening (i dont have time right now to figure another way to make that overlay work..but I will) .. can you explain that souece map error.. is it saying it cant find the  jquery min..? why exactly is it giving a 404 error?

[REELHERO]

i read those development docs and it said "The only workaround is to manually change the map URL to a public one ( http://localhost:1234/file.map.js ) and start a local webserver at this port." so i made that jquery link a public one

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js

and that didnt work.. 

[REELHERO]

also, this : //@ to indicate sourceURL pragmas is deprecated. Use //# 

I cant find anywhere Im using //@ for a source URL

[Nancy OShea]

My browser's Inspect Panel (F12) now shows a different script error. 

TRANSLATION:  TypeError: "x" is not a function

The JavaScript exception "is not a function" occurs when there was an attempt to call a value from a function, but the value is not actually a function.

Possibly because jQuery 1 is deprecated and not compatible with jQuery 3.7 scripts. 😕

Also, you should replace your link to jQuery with this one that contains integrity and crossorigin attributes.  This allows user agents (browsers) to verify that the fetched resource has been delivered without unexpected manipulation.  It's a web security thing.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

[REELHERO]

I replaced the jquery as you suggested for more security but jquery wasnt the problem - I figured it out..

https://toddheymandirector.com/

I originally wrapped the social media div in a Li so it would be part of the list that animates up but never gave the li a data link like the rest so it was 404ing - once i added a link <li data-link="https://toddheymandirector.com/"> it opened a new page and refreshed the original - not perfect bc the overlay menu should ideally remain open but its scripted to close on all items in the list when clicked.. but its better than. 404 error 

[Nancy OShea]

A little spit & chewing gum is better than nothing. 

Hope it holds until you can replace it with a modern solution.

[REELHERO]

truth! Thanks Nancy when i have more time I will 100% do that

[REELHERO]

i never solved this error though: (again prob somewhere in the API but not sure - if you see anything obvious will you lmk?::

One other issue it may be API  but I cannot figure it out 

hit any thumb to bring up a movie here https://toddheymandirector.com/reel/

the bottom icon in the player is a play button (should be a pause bc it is playing) however if you hit it it stays on a play button but pauses - hit it one more time and it returns to normal function ie pause button shows up when its playing and vice versa - very strange..

any help would be appreciated!