i've created a website with a date-picker calender
But the calendar is hardcoded as 365 divs with 365 div IDs and text inside.
How do i make a "real" calender that works* and then i can style it to look and behave (with javascript) like the one i've simulated (created with divs) ? :) Now it is created like:
<div id = "calender">
<div id = "january1"> 1 </div>
<div id = "january2"> 1 </div>
...
</div>
I want a real calendar which generates the right amount of days in a month for all years...
What is the purpose of your website? For any dynamic content you'll probably want to look at some background frameworks with processing abilities, such as Ruby on Rails, Django, Node.js or even PHP(not recommended though), to create a fully functional dynamic website. Of course you can also present a boilerplate page to the client first, before dynamically altering the divs with Javascript on client side. But that doesn't make much sense.
A starting point for Rails would be https://www.railstutorial.org/book, which doesn't only explain Rails but also does a decent job guiding you through the whole basic web development process.
Related
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.
Hi i got a question about pagination. First of all, im new at html and javascript.
Ok, here is my doubt. Im building a website from cero. Im not using any web editor.
I filled the index.html with enough content (based on what i think is enough).
Now i want to add a new page with new content, and this page will be my new index.html, and the first index.html will be page-2.html (for example).
And I will be adding a new page like every 3 days, so what happens when I got more than 30 or 40 pages?
I know how to do a pagination, but i want to know if there`s a way to have a pagination without having to change name of pages every time?
Like a dynamic pagination or something like that. I dont know how to do it. I have been searching but I found nothing.
-Is there a way to do it with javascript?
-I don´t have knowledge about PHP.
-Thanks for your answer in advance.
Consider the datatables.net library. It paginates for you: https://datatables.net/reference/api/
Only javascript solution :
You don't have to rename pages nor having multiple pages.
What you need to do is create a sinlge long pages with content separated liek this for exemple
<article>
Content 1
</article>
<article>
Content 2
</article>
...
And then simply do a pagination since you know how to do that.
And display element like, first of pagination show article 1 to 5
and display:none the other etc...
However this is clearly not a good idea mostly due to time of loading. The way you should do is to use php and sql to store your content in database and display it calling the server (with php).
I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. I want to create a single site menu. So if i press on a list item the browser should open an other content but on the same page. I tried using css with targets but everytime i click a new target the tagets will overlap and the old content will not disappear. I tried using Javascript with innerHTML but in javascript i need to write the whole page in a single line (.innerHTML ='websitecode') this will create a horrible overview.
Is there any other possibility to create something like this? Maybe with the require() / involve() function in php?
Thank you
From your question, what I understood is you want menu navigation without loading the content again.
`http://codepen.io/ArslanRafique/pen/raZybL`
Above is the snippet, I recently developed, simple menu navigation by using simple CSS and HTML. You can achieve simple menu navigation by using HTML label and can swap your views accordingly.
Please have a look at shared snippet, hope it will help you.
Sounds like you would like to create a single page web application:
There are many great javascript frameworks for this, try angular.
https://www.airpair.com/angularjs/building-angularjs-app-tutorial
Put your menu in the header file, and the content you want to replace in to views.
Or use angular UI-router https://github.com/angular-ui/ui-router/wiki
There are few possibilities to achieve your goal.
The simple and not so elegant one would be to generate the complete content and set anchors on the page. From the menu the user can call the anchors and will be brought to a desired part of the page. Example:
<!-- Menu -->
<ul>
<li>About us</li>
<li>Products</li>
</ul>
<!-- Page contents -->
<div id="aboutus">This is about us.</div>
<div id="products">Our products.</div>
More elegant, sophisticated and professional approach would be creating a SPA (single page application). It would include some techniques like AJAX, where you can load (or remove) contents on the page without refreshing.
There are many modern JS frameworks that can help you, for example AngularJS, ReactJS, etc.
Wikipedia offers also more information on SPA:
https://en.wikipedia.org/wiki/Single-page_application
So Arlan's version looks a lot prettier, but you can also use javaScript with divs that you can hide or display with functions. You can format the divs in your css with whatever you want. May get a little clunky if you have a long menu...
<div id="divOne">This will show some text</div>
<div id="divTwo"><p>This will show even more text</p><p>I may even format it differently</p>
</div>
<div id="divThree">This shows text that is different from the other two</div>
var formatOne = document.getElementById("button1"); //create handle for first button
formatOne.onclick = function() { //add functionality
document.getElementById("divOne").style.display = "block";
document.getElementById("divTwo").style.display = "none";
document.getElementById("divThree").style.display = "none";
}
Jsfiddle to show the functionality.
https://jsfiddle.net/lattivalidus/s7a9dLe7/
I´m starting to develop a Chrome App just to test it.
It seems that this kind of applications (desktop app at the end) must be developped with the single-page concept in mind.
But my application consists of three pages or "sections": One to control a web-cam, another to watch a streaming and the last to control a videoconference.
I´ve been reading and coding a bit within the Chrome Platform developing center, and just could find basic tutorials with one .html page.
So, my question is: What is the best way to load different .html pages (because i need to show different UI sections) in a Chrome App? I´ve seen that Google uses AngularJS to implement an MVC pattern, but i don´t know how to change from one view to another (thinking of views as .html pages) in that scenario (because i´ve never used AngularJS).
Thanks!
Is there a specific reason you need multiple HTML pages? It's pretty straightforward to do something like this:
<html>
<body>
<div id="tab_1">Section One</div>
<div id="tab_2">Section Two</div>
<div id="tab_3">Section Three</div>
</body>
</html>
and then show/hide each div according to which part of your app you want to show. CSS frameworks like Bootstrap are designed to work well this this kind of approach, turning the set of divs into a pane with a left nav, or a content area with a tab strip, all of which match the needs of a typical app UI.
I am attempting to create a simple iOS application, mostly for the learning process, but one which might also be useful to other botanists. The California Native Plant Society has a new Rare plant database online. At first I would like to just do simple querys for a plant by name. Later adding some type of location search, finding known occurrences of rare plants in your specific area.
So a search for `Layia' brings us to a page with a table. Looking at the source for the page I believe the table is generated by:
<div class="breadcrumb top20">
<div class="line1 center">
<!-- Modify Search Criteria -->
<span id=modifyCriteriaSlot></span>
<span id=exportPdfSlot></span>
<span id=exportExcelSlot></span>
<!-- END line1 -->
<span id=modifyColumnsSlot></span>
<span id=sortSlot></span>
<span id=displayPhotosSlot></span>
</div>
<!-- END line1 -->
</div>
I guess I am stuck. As far as the app goes I have been playing around with ASIHttpRequest and I see references to XMLKiss to parse web pages, but I just don't see any data on this page TO parse, it seems to be generated else ware and then just appears? I know I am a little out of my element here, but I want to put in the time and learn what I need to, so a little direction would be an awesome help! Thanks.
If it helps, they are showing the results table with this DIV
<div id=resultListSlot align=center style="max-width: 960px;"></div>
The DIV is being populated with javascript. The JS can be found here:
http://www.rareplants.cnps.org/org.cnps.Result/org.cnps.Result.nocache.js
Im not sure how you can get that to reply to your own request... let me look at it when I get back later today to see if I can help even more.
--------- Update -----------
If you wanted to skip learning JS you could just use firefox to view the DOM source which will include all the HTML generated by the JS. I just did a search for ALL of their plants, CTRL+A to select all of the page, right click on a highlighted area and "view selection source".
Then you could host your own page like I have done. Look at this page here http://luistovar.com/plants.html
Now you have all the plants, the HTML, the links and everything you need to create your own list. The only downfall is you would have to update every few weeks?? or so. It all depends on how often their data changes, or how much an updated list matters to you.
Might be better than learning JS though.