Having same <div> on all my sites - javascript

I want to create a site like any other. I want the "thing" at the top (home downloads and stuff) to be on all my pages. Do I need to copy and paste the same code over and over again?

put the common part in your header/some specific file and use ,since you will be using header/some specific file on all pages so the desired content will also be loaded.

Learn Psd to html conversion For batter understanding the divs and styles modification and customization.. your divs and tags can be easily maintained with your stylesheet by giving id and classes you can also give one dive multiple classes and ids,
you are talking about master page i think
that is one in style and in that page you're showing other page, likely we can say one template page and many functionality see this and
see this

As far as I'm concerned pretty much all the intelligent options for solving this problem are mentioned in this question
Use a server-side template (e.g.php), use a client-side template (e.g. handlebars), use javascript, or you could use a static site generator like Jekyll.

Related

How to create multiple Html subpages without writing redundant code?

everyone currently I am working on a project which a Financial web application. But as I'm moving forward code redundancy is increasing & particularly for HTML code.
I have multiple Html pages on my website such as Dashboard, EditProfile, AccountStatistics, etc. For Eg.
DashBorad - enter image description here
EditProfile - enter image description here
AccountStats - enter image description here
Now judging from the above pics you guys can see every time we navigate from one page to another only the main section content is changing but the body structure & design of the website remains the same.
Problem: If i want to create a new page I have to include code for header, sub-header, sideBar, footer which is repetitive. I just want the main-section code to change. For eg - Made one file like Body.html which contains code for header, sidebar, etc & every time I want to create a new page then only code for the main-section has to written which be can later merge with the body.
How can we achieve this?
(Tech used - Html, Css & JavaScript)
Note: I can also attach code if anyone wants more clear understanding!
Thank You!
Cheers to coding :)
You can use Frontend Frameworks like React/Vue.
Depending on if it's a static site, you can use stuff like Jekyl/Hugo.
If you want to go the SSR way, then you have Angular Universal/ ASP.NET Core/ PHP way.
Depending on your use case, you can't really go wrong either way. If you're new, pick either one and get started Learning.
Have fun!
This is an excellent use-case for a library like ReactJS (and other similar alternatives). Using React you can define 'components' for your header, sidebar and other common parts of your webpages that can be reused in different places. You can also update each of these components separately.

Is there a vanilla JavaScript technique for dynamically inserting common code into HTML pages, similar to PHP's include capability?

I have a multi-page HTML site with common code that is reused on each page (for example, navbar code, Analytics, stylesheet imports, etc).
Is there a way to dynamically insert that common code in a manner that achieves the same result as PHP's include capability, and makes the code easier to maintain?
I've seen similar questions but not all seem to speak to what I want to achieve with the site I am working with. For example:
How to inject HTML banner code using Vanilla Javascript? - Stack Overflow
Important: Much of the code I want to insert/import will be <header> code that is necessary to properly render the pages so it will need to be inserted as the page loads.
Any suggestions? Please limit suggestions to vanilla JavaScript. I don't know JQuery at this point and want to try do this with JS.
There are a handful of ways to do what you want, but I think a template engine such as EJS or similar will meet your needs.
Do keep in mind though the implications of doing this client-side. Crawlers and such that don't run JavaScript won't have the benefit of seeing what's supposed to be on your page.
What you should probably be doing instead is running these JavaScript templates server-side, outputting static pages which then can be put on your web server or CDN.
Webpack? You could use a packaging system to fuse all your JS into one file, same for CSS. That way you have only only script and one link to add to each page. But for HTML parts, they would be added with javascript ajax and that shouldn't be a solution...
Why would you have multiple pages at all? Cant you just have one page, then update a certain ( the main part) part of your page with new code content instead of a redirect. ( if you want to see this in action visit http://google.com, http://twitter.com and many many more ). the index.html would then look like this:
<body>
<div id = "nav" >
<a href = "/whatever.html" class = "redirect" > Whatever </a>
</div>
<div id = "main" >
Some content
</div>
<script>
//embed jquery
$(_ => {
$(".redirect").on("click",function(e){
e.preventDefault();
$("#main").load(this.href);
});
});
</script>

How to stop angular merging different pages to make them look the same?

I have a chat website using node js and angular, and I have made the login/signup and chat page using these. but the problem is, whenever I load the chat page it uses the style from the other pages, and basically acts like a different section of the same page, It also merges the login/signup together, which is ok, because they have the same style just different number of form boxes, I want to stop angular from merging the styles from the login/signup with the chat and have it use its own style.
All help would be very much apreciated, thanks in advance.
And as far as I have been told and know, there is nothing in my own code that is preventing this, it is only angular itself. strong textBy the way, As far as I know, certain things the body of the different pages cant be individually styled, and If I were to merge html's it would take a while and research and I dont really want to do so.
The idea of loading pages as partials is not loading its css and js files etc.
You need to have only one file as index.html and inside,
define <ui-view> tag this is where you have to load all your partials to, but not an entire page, having html tags and everything.
Take a look at this pattern to load all your partials into one file.
and then,
I highly recommend you check this web site out to set nodejs to set all the missing routes to your html file as well as defining your "/css", "/js" etc.
I have just merged these two working methods to make a very concrete restful application structure.
All you have to do to avoid this problem is to write your css with starting parent class. In this way your css will work only if you have parent element with specific class.
.signIn .button {
}
.chat .button {
}
Write it like this and the button in different elements will have different style

JavaScript Best Practices: where should I include my JavaScript?

I am building a website using PHP and JavaScript, and I feel that I have a good grasp on where to include my JavaScript, but a more specific situation has come up that has me confused. I currently have all of my JavaScript in one external file, which is being included on every PHP page.
Let's say that I have a paragraph with an id='myParagraph' and I need to highlight this paragraph in red with JavaScript on page load. This paragraph is only on ONE PHP page and my website has about 50 different pages. I immediately assumed that I should throw some code into my one external JavaScript file, something like:
$('#myParagraph').css('color', 'red')
and the paragraph would be highlighted when that page loads.
My question is: is this the best way to do it? To my understanding, every time I load a page it will be searched for an element with the id myParagraph, yet 98% of my pages won't even have that id. Is this wasteful? Should I instead include the following code:
function highlightParagraph()
{
$('#myParagraph').css('color', 'red')
}
in my one JavaScript file and then put some inline JavaScript in the PHP file with the id myParagraph to call the function highlightParagraph() when it's loaded? That way, only the one page with myParagraph will be searched and highlighted.
I feel like option 2 is the best, but I read all the time not to use inline JavaScript.
edit: I realize that for this example you would just use CSS. I'm just using it to get my question across
You should have a one "big" js file with the infrastructure functions and all the pages should have a reference to it.
Then each page should reference another js file with the functions related only.
The good things about using external js files are:
The files are cached after the first download => Faster surfing.
Separate of concerns, you keep the presentation tier away from the scripting tier.
Another important note:
The best way to change css is with css... not javascript.
I
If you change the element style on DOM ready, just add the element definition
#myParagraph{color: red;}
The problem with inline JavaScript is you might be starting with a few lines now, but in a few weeks or months, it will add up and be a lot of inline JavaScript.
That is bad, because inline JavaScript can't be cached by the browser like JavaScript files that you include with <script src="path/to/file.js" />.
That's bad because you add a lot of content that will be fetched every single page view by the user, adding load on your server bandwidth and slowing page load for the user.
If it's just a few selectors, don't worry; The time wasted on it won't cause any browser to sweat.
Though, if it becomes a lot of code for a different page/module of your site, you might want to split it into a different JavaScript file and include just that file when certain pages are loaded.
That way, the browser will cache that file and save that bandwidth for you and the user.
I wouldn't be too surprised if many people disagree with me (violently even) but I don't have a problem with putting a javascript tag with specific javascript for that page in the header if it will reduce the number of files or overall complexity of the project. Most of the core things that are done everywhere should of course be separated in another file but if it is a one page deal, then I would go for cleanliness.
The same goes for css, if it is specific to that page just put a css tag in the header with the specific changes that differ from the master css file. BTW as everyone is pointing out, this is a case where you want to just use CSS.

Single page web app basic logic

I'm creating a small web application.
The application have several screens (list, inner list, item details, etc.).
I have a REST API on the server and I need to create the client.
At start I thought about HTML page for each main screen.
For every page I have a CSS and JS code.
The HTML will include only place holders (empty divs) that wwill be filled by the JS code.
Then I've decided to a create the application as single page application and using the URL with anchors to imply the state (domain.com/#list1#item1).
I've found this question to be informative about the architecture of the application, but I wonder:
1) How can I server the right CSS to the page in a clean way?
2) How can I define the page basic structure (the way the HTML divs do) in a clean way?
Unless your css is drastically different from one page to the next it should probably be in one page anyway. You will have a base css file that gets served up to every page and then page specific css files as needed for each pages. The idea is to reduce page loading overhead, but in your case it sounds like it is pretty small so putting everything in one css file shouldn't have too big of an impact.
As for page structure, start by just doing a rough drawing of each page on paper and then pencil in the divs. Then see how things overlap and what can be the master page layout elements and what are the actual page layout elements. then look at the common pieces to decide how to set up your divs.
To be honest, trying to do everything in one page, the layout of the divs is going to be a little bit messy at best. Unless it is related functionality like the steps of a wizard or something similar, putting it all in one page may cause down the road problems if you try to add or change things.

Categories