How to solve issue with source code in glitch? - google-chrome

I was trying to see the source code of this website so that I could experiment with it.
https://supermedium.com/superframe/components/audioanalyser/examples/volume/
So, using the 'view page source' option (right click), I copy-pasted the code into https://glitch.com/. Unfortunately, it didn't do any of the animation or audio! Could anyone please help? I have a project coming up soon and it would be really helpful. Thank you!

copy-pasting will not work mainly because of these lines:
<head>
...
<script src="../build.js"></script>
<script src="../components/audioanalyser-volume-scale.js"></script>
...
</head>
those are relative paths that won't be pointing to the correct resources. You would need to recreate the folder structure and include those files or rewrite it so it is accessible

Related

Why my sources are not available after I pushed changes to the production?

Something is wrong. When I open my site using localhost then everything is fine. What can be wrong here?
And when I click assets/css/style.css I got error like this:
When ew check Network tab, and click on style.css sotmething weird happens because html file is previewed:
As myself and Quentin mentioned in the comments, it is generally good practice (and the intended effect for most situations) to use /assets/path/to/resource instead of the relative path assets/path/to/resource.
Unless it is intended to leave out that slash (which it isn't in your case, as you said in the comments), you'll need to prefix all the asset links with slashes.
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/scregal.css">
etc.
There is only one possible causes of the problem I know although your question is not so clear.
1.》 Make sure the assets folder is in the same location as your html file.
》Prefix all your href link with a dot. Check the image to see
I faced a problem like this when I wanted to push one of my electron apps to production mode. The dot makes it easy for the packager to load the whole folder.

My CSS and images aren't loading once the HTML file is hosted on a server. Why?

I am hosting the website on a home server so we aren't going through a third party. Even though I have the CSS linked, the file in the same area as the HTML, and the images all set up just one file away, nothing is showing up aside form basic HTML.
Please let me know if you've run into this problem of the HTML file working UNTIL it's hosted on our server and how you've fixed it. Thank you!
When I load just the HTML file in my browser (chrome) everything shows up beautifully, but once I try to host it, nothing looks the same.
Here is some of the code I used to link the CSS file and the images just to make sure there's nothing wrong there:
<head>
<title>Alexandra ReganHolzheimer</title>
<link href="pages_style.css" rel="stylesheet" type="text/css"
media="screen">
</head>
And for the images:
<div class="container">
<img src="img/me3.jpg" alt="me" class="logo">
</div>
UPDATE: I think I figured it out. The issue turned out to be that my server didn't like underscores and a lot was case sensitive. Your suggestions were super helpful and put me on the right path.
thank you!
Once u load your URL on browser. Then see the page source. In pagesource please check your css is loading correct or not. If error means please correct it and then load again.
I faced a similar issue when I tried hosting one of my learning projects onto a server.
I fixed it by making all the references relative.
For example:
If your file structure is like:
your_project /
pages_style.css
index.html
img/
Just change your paths, from: img/me3.jpg to ./img/me3.jpg in your index.html.
I hope it helps. :)

can you link a css file through html?

I just need some clarification about linking a css file. I am looking at a html widget that has been created by someone and they seem to have a html with a query string to get the required css..
<link href="https://cdnres.willyweather.com.au/widget/cssView.1-12-8.html?id=36723" rel="stylesheet">
And this works if you click on this link
http://cdnres.willyweather.com.au/widget/loadView.html?id=36723
But when i downloaded these files onto my own web server and tried it, it didn't work
http://www.mccdepot.com.au/Test1/loadView.html
but when I update the link styles to a css and updated the file name it worked.
http://www.mccdepot.com.au/Test2/loadView.html
For the query string html do I need to enable something on the server side?
Thanks in advance
i copied that link css add it to your code its coming same as given link i have added the screen shot check it.
try this->
<link rel="stylesheet" type="text/css" href="path of the css file"/>
This is how normally we include a css file in our html page. If still getting error, please check the file path properly.
your linked css file is minified, check it once. When you minify some
css files actually it replaces some variables. Try again to download
again and link it. And js files also not included properly, when it
check it in viewsource file was not found there

Making my html link to my css files correctly

I've been using w3schools for a long time and i've never had a problem linking css to my html until today. I have a whole bunch of files referenced as such:
<link rel="stylesheet" href="http://enviroptics.com/Matt/css/styles.css"/>
And I checked the url and when i go to the page everything looks correct in the css, but for some reason it isnt pulling the styles into the html the way it has been for the last 6 months for me... I tried using the chrome editor to see what the problem and it says that my file is not https. It never has been https and i have been using it for many months with no problem.
Does anyone know why it would stop working all of a sudden? Is there another editor that i might be able to use? jsfiddle also tells me i need https..
Any help would be greatly appreciated!
Thanks
open http://enviroptics.com/Matt/css/styles.css.
copy all.
open blocknotes or simple text editor
paste all
save file( name = styles.css )
insert this file in Matt/css in your web server ( ftp )
add <link rel="stylesheet" href="/Matt/css/styles.css"/> in your code html -> head

Linking an External Stylesheet (HTML)

I am building my first website and I'm trying to attach an external css file...
Both my index.html and test.css are in the exact same folder/directory, but for some reason my test.css file isn't being linked...
Question: Does anyone know why my test.css isn't being linked?
//HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="test.css">
<title>Page Title</title>
</head>
<body>
<h1>header of type 1</h1>
<p>standard paragraph</p>
<hr>
<p>HTML stands for Hyper Text Markup Language</p>
</body>
</html>
No need to worry, there's nothing wrong with your css code.
You just have to make sure that the 'href' part of your stylesheet link contains the name of the file your want to include, which in your case would be:
href="CSS Test.css"
Windows will hide the file extensions by default though, so make sure your file isn't actually called "CSS Test.css.css" after you added the extension a second time. To show all file extensions, do the following:
Open Folder Options by clicking the Start button Picture of the Start button, clicking Control Panel, clicking Appearance and Personalization, and then clicking Folder Options.
Click the View tab, and then, under Advanced settings, clear the Hide extensions for known file types check box, and then click OK.
Ok, thank you for all the quick responses, I have cleaned up my style thanks to both replies and I have kind of found the solution. I think "user5375312" was on the right track with the .css.css idea, that by adding .css I was somehow adding it twice. I don't think that's "exactly" what happened, but by creating a new css file, when I made it .css I also unchecked the "hide extension" box, which revealed a .txt, making my final file "Test.css.txt"
I removed the .txt keeping only the .css, saved the file to the same location, updated my page and the css file loaded in fine.
I'm still not sure what exactly went wrong or where, but I know it was either when I created the file the .txt was somehow still present when with previous files it was overridden or removed (something unique to creating css files maybe) or it was after I made the file, that some other setting caused it, but unchecking the hide extension box and making sure it saved correctly solved the problem, and I hope if anyone else encounters the issue that this helps.
Thanks again for the responses, it probably would have been days before I thought figured this out on my own, it was the mention of the .css.css possibility that drew that checkbox to my attention on my4th attempt at making a css file :D