How to get source code of this website? - javascript

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

Related

How do i enable javascript in a .html document?

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.

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 look at the Javascript that a page is using?

Are you able to see the coding of a Javascript function on a webpage your viewing? Is there a way using Google Chrome DevTools for example?
Specifically, I want to figure out how to code something like this
!Example 1
from this page
http://www.indeed.com/cmp/Bruce-Productions/jobs/Graphic-Designer-0a8d9cff06bf2790
Thanks in advance for any help!
Yes there is a way to look at all of a webpages html, Javascript files, and CSS using Chrome.
Open up the page in chrome, right click on the page and select inspect element (or press ctrl+shift+I).
From there you can navigate the different elements on the the page and the structure of the HTML file.
To get at the Javascript and CSS files switch over to the sources tab and look through the folders on the left to find the file you are looking for.
A word of warning, depending on the site the code that they are using may be minified (most all of the white space removed, and lots of variable names and other things shortened) or otherwise very difficult to read. If you are looking to do something more specific then I would recommend searching for that, or posting a question regarding that problem.
If you want to view the Javascript code, you can right-click the page, then select Inspect, then navigate to the javascript line by highlighting or selecting that line with .js extension and then position your pointer in the .js file, right-click & select Reveal in Sources panel.
In the browser you do right click to open a menu and select "View Source Code". Then you can read or save that page to analyze the content for any image or script.
But your question is so generic maybe you should try something basic and try to builds thing from there. Otherwise make a more specific question of what you want to do.
You can check it by opening the inspector in your browser and selecting the "coverage" menu. Then click on the "type" column until you find the .js files.
It is pretty much it, but you can read more details here: https://developer.chrome.com/docs/devtools/coverage/

Location of HTML file in wordpress for editing purposes

I just finished learning CSS and I trying to edit the format of the footer of the wordpress based website.
I can spot its code from firebug extension but dont know whether the HTML file is located in the wordpress directory so that I can edit it. Can anyone help. I am new to web development.
Go to wp-content/themes/your-theme/footer.php
There should be the PHP/HTML for the footer.
It is not always that easy to find where the html comes from.
e.g. : You can have a widget area in your footer.php and then your html comes from the widget you added to this area.
It also depends on the theme you use.
But mostly you'll see a header.php/footer.php/index.php file.
the most easy way to find HTML code or text is here: String Locator. just download this plugin and type the html code or text you need to find out and you can easily know the exact location of the particular code or text and after that you can easily change it.
Cheers!

Jquery script like google image preview

I am looking a script (example in web) like google images preview. I have attached an image what I am looking for
I have spend a time of looking such script / example but nothing. If someone know a name or a link please give it to me.
I have found a script but it's not exactly like Google Image's but has the same functionality. The script is free and is coded in HTML with CSS and JavaScript.
Click here to view the script

Categories

Resources