I'm working on a project that needs to have a header in all pages, I decided to use php for that and I have an external one JavaScript file. My problem is when the changed content on the html page page JavaScript start running function on that page, but it should not. I am interested how using one JavaScript file on multiple html pages, but there is no conflict. There is a solution to get around this, but it's not good. Plus I have light and dark mode on html pages, so I do not think it's good to create more JavaScript files with the same code :) thanks
Related
I am coding a web app in Flask. I need to find a way to load "posts" with text variables (from external Python scripts) into an HTML file, ideally using pure Javascript (Not Jquery). The posts need to be loaded automatically, upon the opening of a page.
As of right now, I use the <body onload="function_name">, but I am not sure how to load more than one post. I know how to use python variables in html, but I also don't know how to use those variables to generate posts.
Any pointers/resources/code snippets would be immensely helpful.
I don't know if it's possible, but I wanna ask from experienced people first.
I'm building a simple web game in one HTML file, I have a javascript file for it already. Now I want to add another game (in another div) in the same HTML file (because I want the game to be a SPA 'sort of') but I want to use a separate Javascript file for the new game (that's inside the HTML file).
My question is...is it possible to have separate JS files for each DIV in one HTML file? or is there a way to divide JS codes of each DIV in a single JS file?
What I'm thinking about the latter is that the code will be too long thereby causing a slow application (I'm not sure if this is valid tho), and if it is not valid, how can I achieve this?.
When debugging JS, Chrome allows you edit JS and then reload the page. This can only happen if the JS you are editing is provided as a separate resource. As far as I can tell, it's currently not possible to debug JS code is this fashion because of the way Yesod drops any included JS on to the page directly.
Editing a julius template file without changing any variable interpolation allows for instant reloading of the page. However, if I include small snippets of javascript with:
toWidget [julius|doStuff();|]
I can't edit this Javascript for debugging without causing a reload of the model, which for our case, takes ~1minute. Is there a way around this?
There are multiple choices here:
If you put the Julius content in an external file, you can use juliusFileReload and then edit the file and reload the webpage without a recompile. The scaffolded site does this by default.
Have generated Javascript be placed in a separate file. This is also the default behavior of the scaffolded site.
Very new to the world of HTML and I will try to phrase this question as best as I can.
Currently, I am creating a website. For each page I am creating, I have 2/3 pages - 1 I save the HTML file in, the other I save the file .css/.js.I make sure to keep the name of the file the same and in turn, it edits my html page as I wish it to do. So I therefore have a folder with 2/3 files made up of HTML, CSS and Javascript. Is this the correct way, or should I have everything saved together in a .html file?
Reasons for separation:
Separate JS - Reuse it on other pages
Separate CSS - Able to give the site a new fresh look easily along with reuse
Separate HTML - Focus on content not look.
Also should be mentioned CSS/JS could be cached if used on multiple pages on your site
First and main rule :
A web developer should be able to change the markup in an HTML
template without worrying about accidentally breaking a CSS rule or
some JavaScript functionality.
So Yes, your html, css, js files should be separate.
Here's my problem: I want to build a website, mostly static but with some dynamic parts (a little blog for news, etc..).
My webserver can only do static files (it's actually a public dropbox directory!) but I don't want to repeat the layout in every html page!
Now, I see two possible solutions here: either I create an index.htm page that emulates site navigation with javascript and AJAX or I create all the different html pages and then somehow import the layout bits with javascript..
From you I need ideas and suggestions on how to implement this, which libraries to use, or maybe there exists even something tailored exactly for what I need?
Thanks!!
I would define the site layout in your index.html file, and then use JavaScript and Ajax to load the actual content into a content div on the page. That way your content files (fetched by Ajax) will be more or less plain HTML, with CSS classes defined in index.html. Also, I wouldn't recommend building a blog in pure HTML and JavaScript. It wouldn't be very interactive; no comments, ratings, etc. You could store your blog content in XML and then fetch and display it with Ajax and JavaScript, however.
While on the subject of XML, you could implement all your site content in XML. You should also store the list of pages (for generating navigation) as XML.
Just another one way. You can generate static HTML in your computer and upload result to dropbox. Look at emacs muse.
jQuery allows you to easily load a section of one page into another page. I recommend loading common navigation sections into the different pages, rather than the other way around to avoid back/forward problems. Layout can be done with a separate CSS file rather than with tables to minimize the amount of repeated code. For the blog, you could put each blog entry in a separate file and load each section individually.
However, I would just use something already available. TiddlyWiki, for example, is a self-contained wiki that is all in one file. It's very customizable, and there's already a blog plug-in available for it. You can work on the site on your hard drive or USB drive, and then you can upload it to the web when done. There's nothing more to it.
Have you considered using publishing software on your computer to combine your content with a template, resulting in a set of static pages that you can then upload to the dropbox?
Some options in this regard come to mind:
Movable Type - can output static HTML which can then be uploaded to the server
Adobe Dreamweaver
Apple iWork Pages
To handle comments, you can use Disqus. It inserts a complete comment system into your site using just JavaScript.
You can use the Google Closure templates. It's one of the fastest and most versatile javascript templating solutions around.