html changes won't show up in browser - html

I'm working on an assignment for a class where our teacher has given us a webpage built out with html and css. We are eventually supposed to create some animations with gsap, but first need to make our own edits to the webpage itself. I am using vscode and when I edit any of the html, the changes show up in my index.html, but not in the browser. Any idea why this is?

try to right click your browser and check in the sources to make sure it really saved your changes.

Try to use live server on VS Code and then whenever you save it will show up on the page.
-> https://techstacker.com/local-live-server-vscode/

Make sure you save the file and reload the page in the browser

Related

Do I need to update CSS to upload new images?

I want to start by saying that I did not build said website. I was given FTP access to the site and can download it's entirety.
What we are interested in is replacing the images as they are rather outdated.
If I replace the images (naming them as the ones that exist as of right now), they update just fine.
But adding more does not. Lets say that files are numbered 1-6. If I replace those with the same name, they change. If I add 7.jpg, for example, it does not show in the gallery.
Do I need to update the CSS code or upload it again?
I can provide the code in turn.
Without further details it's hard to tell what the problem is, but it looks like either someone hard-coded CSS or hardcoded HTML. But I would really need to see the code.
Please try to copy/paste at least the code for file that should render the images.
Your gallery should contain new images' name.
if you upload 7.jpg, this one is not in your gallery I guess.
I think it will not matter if you update the CSS.
A priori, to clear any doubt if the images are in cache, I suggest you refresh the page by typing ctrl + R or open a tab in incognito mode.

HTML won't link up to CSS when I open it again

My problem is that I linked the CSS correctly when I created my HTML file, but then when I try to edit the CSS the other day, it just didn't update my HTML file and I did save it of course. One way I can get around this is by deleting the CSS in my htdocs and creating a new stylesheet with the exact same contents then linking the new one to my HTML. Can you guys tell me why is this happening and how can I prevent this from happening again?
I think that the problem is with cache. You can try running the site in an incognito/private window of your browser.
You can also inspect the page and see if the new styles are loaded. You can also try Empty Cache and Hard Reload option when you right click the reload button on chrome browser while inspecting.
one way you can prevent it is by doing all your css in the actual html file like so
<head><style></style></head>

How do I make changes in HTML code of website on wordpress?

Website source:http://www.salefee.com/blog/
The above website is made on wordpress.In this I have an html code which looks like: <div class="image-title-bg loading" style="padding-top: 140px;">(found out using inspect element option in chrome)
I want to change the padding-top: to 50px,But I am not able to find it in admin panel. Basically I am trying to reduce the image size on my first page of blog. Please help me out with this problem. Thanks in advance!!
You probably will enjoy this WordPress plugin : Simple Custom CSS
;)
You will have to find the relevant file and make changes in it.
Tip: You can search that html tag line in php files.
To change html in Wordpress in admin part you should get to source of home page which can be usually found in Appearance Editor tab. Over there you can find php and html which you can edit. Or if you have FTP access you can track file there.

SunOne Webserver HTML Includes

I'm running a large site, one that has a nav bar at the top. Rather than change the 100+ html files each time we want to change one of the buttons in the top nav, we want to switch the navbar to be displayed using an include of some kind. I want these includes to work on both Firefox and IE, and I don't want to have to change the extensions of each file either.
So far I've tried:
Javascript read file - This works fine on firefox, but IE has file reading blocked it seems.
HTML include - So far only works if we change the extension to shtml
PHP include - I know you can set up apache servers to run php scripts within html, but I don't know how to make this happen in SunOne.
iframes - I had to block iframes in order to comply with security standards.
I'm more than open to suggestions I haven't considered, or ways to make the above attempts work. Any ideas?
Eureka! I've found it!
So rather than include the html, why not just include the javascript and css? Every page will include a .js and .css file. The css can set the image src, and in each image I can use "onclick" to tell it to execute a function in the .js file with a simple window.location. Voila! Two quick changes will change the whole site!
Thanks to Mr. Lister for the CSS idea. That set me on the path.

Why is my jQueryMobile CSS Style being applied to a linked page?

I am using a jQuery CSS style on the main portion of my website. It works fine. Now, I also have a sub-directory of my website which should not use the style. When I manually navigate my browser to the sub-directory of the website, no style is applied which is what I want. When I click on a link to the sub-directory from the main area, however, it is applying the CSS style from the main part even though I am not referencing this CSS anywhere in the HTML of that sub-directory. If I refresh the browser, the style goes away.
Please can someone help me understand what is going on here? Thank you.
You are using jquery mobile, which by default loads the content of links via ajax. That means you don't have a page refresh when clicking on a link. The contents get dynamically inserted in your document which still has all your css.
More information here.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
You have to disable ajax for that link. More information here.
jquery-mobile - how can I bind disable ajax links to a certain class
Clear your history and browser data, then refresh and try.
Try to open the link in chrome and using the developer options (F12)
look for the resources it is referencing. If the page is referencing
the CSS files then either Javascript is making the referencing or
you have accidentally kept the resource link. Let the forum know your findings.
Edit
Somebody seems to have done what I have mentioned and has come to conclusions that they are because of AJAX. The steps I have mentioned above would let you do that all by yourself.