How do i enable javascript in a .html document? - javascript

I wanted to learn a lil bit of website coding so I decided I want to see how a website is written. I used HTTrack Website Copier to copy a website and then i opend the index.html document. Now I saw a row where it says "-- Please enable Javascript --</p". How do I enable javascript to see what normaly would stand in that row? Also i dont have any html oder css file in the folder where HTTrack put the index.html into. Is that normal?
I dont know what to do about this cause i started 2days ago^^

Chances are, that page you copied is referencing a JavaScript file that you didn't download with the HTML file. Look through your HTML for a <script src="...">...</script> tag or something similar; that's the missing file. Same goes for the CSS, except that will be near the top with <link rel="stylesheet" href="styles.css">.
HTML is how the page is laid out. CSS is how the page looks (font sizes, colors, etc). JavaScript is how the page works (interactive features). I'd start with just basic HTML, you're kind of jumping in on the deep end. Codecademy has great (and free) introductory courses that should help you understand what you're looking at better.

Related

Debugging iframe in Readymag

I want to embed an interactive diagram in my Readymag page via iframe, but the diagram won't show up. I performed a test in JSFiddle: https://jsfiddle.net/TheFelipeGarcia/2p3aguck/, and it works there.
First, I exported my infographic as HTML + JavaScript from Adobe Animate. Then, I used Readymag's Widget Code to add the code to my page. A side note: originally the HTML had a link to the JS file
<script src="infographic.js?1578942235513"></script>
but I pasted the JS inline (it's very long so I won't repaste here).
Does anyone have experience with Readymag or a similar issue of embedding iframes, that might have ideas what I could be doing wrong?

How to include a list of links (stylesheets, javascript files) in every html file

I was wondering if it was possible to include a list of links into many HTML files. I based my idea off W3 School's W3 Include which allows you to include blocks of HTML code in many files which is super useful for changing lots of files at once.
Heres the link to the W3 article: https://www.w3schools.com/howto/howto_html_include.asp
What I want to be able to do is something like this:
<html>
<head>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body>
<h1>test</h1>
<div w3-include-html="links.html"></div>
</body>
</html>
Where the links.html file has a bunch of links. e.g
<link rel="stylesheet" href="style1">
<link rel="stylesheet" href="someframework">
<link rel="stylesheet" href="somescript">
I want to be able to do this as when online resources change their links that I can easily update them by updating the one links file and then it will roll out across my whole website.
I understand that there are most likely issues regarding being able to load files this way, but if anyone has any suggestions in how to do something along these lines that would be great.
Well, you can use partial rendering in any programming language. If your page has static HTML and is not powered by any programming language, you could add a link to a JavaScript file in the head of your page and from within the file, you load the stylesheets and scripts of your choice. (look for how to load stylesheets and scripts with JavaScript).
This way, you have a single place in which you manage head assets.
LE: https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports this will be a thing in the future 😁
You could maybe make your header an include depending how you set it up. Could use <?php include "your/file/location" ?>
This will allow you to just add this piece of code at the top of each of your pages. Then in the location file is where you would add all of the and tags which would clean up your HTML quite a bit and also increase page load time. Using this method for quite a lot of things could slow it down but the perfect amount will allow you to get 100/100 on google page speed hoping that analytics is hosted locally so you don't get a issue with that caching.
Went a tad off topic but hope this helps :)

Resolve URL Contents Into HTML Head As Text

I created a plugin for some web software that doesn't natively support plugins. I found that I could inject code into the head of the plugin webpage through their GUI. Currently, users have to paste a huge block of code into the head which contains the plugin HTML, CSS, and JS all minified into one block. I'd like to instead serve this over a CDN so users could simply subscribe and receive all updates without having to repaste. It also would keep them from having to paste a large chunk of code into the tool and instead it would be a nice link.
I tried:
<link rel="import" href="~my_CDN_link~">
but it seemed to only partially work. I didn't really understand the issue, but I saw that import is deprecated so this seems like it would only be a temporary patch.
At the end of the CDN link is a text file which contains:
HTML
<script>~my_scripts~</script>
<style>~my_styles~</style>
I was hoping there is some way to just resolve this link into the text which it contains and "paste" it into the head of the document. Maybe this isn't even the approach I should be taking? Should I instead provide two links? One for the stylesheet and one from the JavaScript? The JavaScript could then make a call to get the required markup and append it to the document. I'd love to keep it as one link if at all possible.

How to get source code of this website?

I want to get source code (html, css and script) of a specific section on this website:
http://damnripped.com/tdee-calculator/
this is for my project. It's easy to get the html, even css however im unable to pick the scripts using chrome's "inspect element" or "view source code feature".
could somebody please help? I want to get the code for "TDEE calculator" form on the above said page.
Thanks!
It is a Wordpress plugin anyway: https://en-gb.wordpress.org/plugins/calculated-fields-form/
So it is all open source and free to look at.
You can use HTTrack to grab all website content including image, css, html, javascript.
You can download HTTrack here

How to embed HTML5/CSS + js music player on single wordpress page?

I have an html 5, css, and javascript audio player that I'm trying to add to one page on my wordpress site.
I tried to paste the html into my page's text editor, while installing the JS and CSS folders for the player in my child theme's folder, which didn't work.
I tried placing the CSS for the player styling in my child themes CSS file, and that didn't work. I also tried linking to the style sheets and js scripts from the header.php file, which wasn't working for me.
My first thoughts are that because the html is showing up as it should, the css and JS files aren't being called. So I just need to figure out the path structure of how wordpress creates pages? Yet I know wordpress does something with a database to display the pages?
I saw some documentation about using I think it was either php or JS functions to call scripts or something and I don't understand enough of those languages to be able to make sense of it yet.
I'm still working with my developer, but he's 7 hours ahead of me and asleep. I just want to put the hardcoded version of the player and a few songs on my site for now so I can do some testing/see how it looks.
I hope that this question meets the SO req's. I tried to search on my own and I know the answer is out there, I just don't know enough to understand it yet. Trying to get a head start
The path to your Child theme's folder should be '/wp-content/themes/name-of-theme/'. You can use that in your header to call the files from wherever you might have placed them in your Child theme's folder.
To hard code the HTML, pasting it in the WordPress page editor should work fine unless there is another JS call or some weird iFraming going on.. if that's the case, you can simply create a Page Template (https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use) and paste the code there. You'll likely want to just copy an existing page template from your Theme, take out the inner loop, and replace it with your video code.
Adding the links to your 'header.php' file would be considered bad practice. You would want to create a 'functions.php' file inside your Child theme and call the JS/CSS from there. You can also find this within the WordPress codex (they literally give examples you can copy/paste and change your file names).

Categories

Resources