Adding a new subpage automatically after content reaches predefined limit - javascript

I'd like to ask a question: how do I add a new subpage automatically after current page's content reaches pre-defined limit? I mean to create something like Google's search pages, as seen in the image, but I have no clue where to even start. Can someone give me even a hint?
https://i.stack.imgur.com/N9RQU.png

Are you working with vanilla js or some framework? In vanilla, you can write backend for that. In frameworks such as React or Vue, there're routing libraries that alongside lazy loading/data fetching can do wanted result.

Related

Is it possible to use like js or something to load a navbar in HTML? It's hosted through Github Pages, so nothing server side would work

I have multiple .html files, and it's a hassle to go through each one and manually edit each file if I just wanted to add a link to the navbar. I'm using a bootstrap 5 one.
So, I was wondering if it's possible to have JavaScript take care of loading the navbar instead of me going in an editing each individual .html file just so all the navbar have the same content.
I don't know if this is possible, sorry if it's obvious that it's not possible or whatever, I honestly don't know.
If there's any other way to do it, let me know because I'd rather not edit like 10 different pages just because I wanted to add something to a dropdown menu in the navbar.
You should probably be using a static website generator. Have a look, for example, at Sergey which is specifically used for "including" common site parts such as navigation.
For other options have a look at https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

How to repeat text from one page to another to reduce time in updating every month

I've been looking everywhere and I can't seem to find exactly what I'm looking for, I'm starting to think I should be looking at some kind of Javascript?
Basically, I have an amount £1,000,000 displayed over an image button and I need this repeated on a different page (The page the button leads to).
As I've never done this before I'm not sure where to look or what I need to be looking at as I'm a novice in this area.
Any help would be appreciated.
If the value is static so you can use content css property :
https://developer.mozilla.org/fr/docs/Web/CSS/content
If the amount is dynamic you should pass variable through Url or via form.
As I don't have a clue as to what you're setup is, i'll make some assumptions:
a static HTML site
no javascript frameworks (so no jQuery or jqLite etc)
with these assumptions you should start by looking up url attributes as a way to communicate basic information between pages.
As an example, the button href should look something like this:
/link-to-page?amount=1000000
then you grab the amount on the new page - with javascript - looking in the window.location object
This is a good resource

Load content in a div without reloading the page

First of all I warn you i am new in HTML development...
I am creating a website using Bootstrap. I have some buttons on the left as you can see in the screenshot and I want to content on the right to change without having to load the whole page.
Any help here? Thanks a lot!
You'll need to use JavaScript, which is the standard programming language that ships with all modern web browsers. In JavaScript, there is an API called the DOM (Document Object Model) which represents the current page as an object. You can use that API to change the text contained in the div tag.
Here is the W3Schools page on the DOM.
There are a few JavaScript libraries that try to abstract and simplify DOM manipulation. The most famous is jQuery.
You can try using AngularJS or any MVC framework/library. These might be a little heavy-handed for something simple, but they'll help achieve what you're looking for. Pretty good to learn these anyway as they're in high demand.
Here's AngularJS's homepage with docs and tutorials. You'd want to look at information on routing view templates using the ngView module, or you can use ui-router, created by Angular's UI team (my personal favorite) for nested views.
PS: Stay away from W3Schools
http://www.w3fools.com/

is it possible to append and save a css file using javascript/meteor?

I need to dynamically append css elements to a css file using values selected from a db.
Is there a way to do this using javascript or some other library.
I've looked on atmospherejs.com but didn't see anything that looked like it could do it.
I'm currently doing this using php/mysql but if I can use meteor and js that would be better.
Any ideas?
Take a look at this article: http://davidwalsh.name/add-rules-stylesheets
the file will need to get built on every page load, however. The problem with adding styles via script is that they get parsed REALLY late in the page build process, it will be a way better user experience for you to build a custom.php (or something) file and give that to every page - which it sounds like you're doing already.
That will ensure it processes the styles before the scripts, avoiding a momentary style 'flash' where your script finishes executing and adds the new rules.

Convert my Xcode application to a webapp (to use tabbar)

I have made a basic tabbar view app in xcode but I need it to be a webapp as I will be viewing the data from a server so do not need/ want it on the app store.
I've looked at some other questions with this kind of topic and nothing is relevant. Also I've done plenty of googling and looking into other code plus using things like cubiq.org's slide-in menu.
I really want that tabbar look. I've tried to do this in HTML with images as buttons and using frames but (I think) because I'm using the JS code to stop the UIview from moving (to look more native) it seems that the buttons open the link in a new page, or switch to Safari, rather then open them in the same frame as they would in a regular browser.
Alternatively, does anyone know of a way I can implement a taskbar in a webapp?
Regards,
Eric.
Have you seen JQuery Mobile !?
It's awesome... but still in Beta.
They have precisely the toolbar you're looking for: JQuery Mobile Navbar
Without code, it's hard to pinpoint your problem exactly, but you should not be doing:
Text of Button
Because the above code will actually load a different page. Rather, you want:
<div class="some_button_type" onclick="doSomeAction()"><!-- ... --></div>
And that "doSomeAction()" function should use DOM manipulation to transform the current page to look like whatever you want it to look like (rather than navigating to some separate page).
P.S. I'm assuming you have some CSS styling based on class type, and you might want content in the DIV (for example, for the text of the button). I've also omitted some attributes (e.g. "role") that you want.

Categories

Resources