I'm new to web development. I'm making a site for a non-profit organization and I need some help. I am building a menu bar but instead of having to load each page separately, I am thinking of incorporating all the content on the same page. Only difference is that the new content will slide from the right whenever a new link is clicked.
Please check out www.pakgeosoc.org to see what i'm saying. I want to build a menu bar of this sort that will slide content from left or right whenever new link from menu bar is clicked.
I know this can easily be done using javascript. A simple explanation of how would be great! :)
P.S. The website I am building is a sister site of this website and my client (who owns this website) wants me to follow this template.
You may want to check these questions asked before:
JS or Css page slide transition between 2 full pages
slide between pages using jQuery
Related
I have a question i have been searching for how do these websites do page transition like when i click on a button or on a link it move to the next page with no time or with animations like these websites :
First site
Second site
They are Single Page Applications (SPA). Actually, they don't go to some other pages when you click a link. They change the URL and load a view to DOM accordingly. You can use one of Vue.js, React.js, Angular.js, and Svelte.js (I guess) to create those types of pages.
My manager asked me to try replicating the sliding feature here at this website:
https://insight.bakermckenzie.com/blockchains-and-laws
The navigator arrows at the right and left of the page direct the user to other pages of the site, but do so much like a carousel rather than simply opening the link in the traditional way. Even hitting the browser's "back/forward" buttons makes the site slide between the pages rather than opening them normally.
I've dug through the source code and used the developer tools, but can't find out how exactly the site is pulling this off. Any ideas? Seems like it could be JavaScript, but I'm not too sure.
I couldn't find the library that the site uses, but I'll try to explain it.
When you request a 'new page', by clicking on the arrows or the menu, all the content is loaded async. If you pay attention to the .page-container div, you can see that when you 'change' the page, the div with the content you are currently seeing moves to the side and then is completed removed from the page.
Step-by-step:
Request a page
New content loads into a div that is not visible yet.
The page you currently are moves to the side and then its content is removed when is completely hidden from the view (the whole html is deleted) .
The 'new page' that was requested follows the 'old' page movement.
It is like a carousel, but the new content is loaded async and the old one is removed.
Div responsible for the content
Sorry if something like this has been asked, but I've spent a long time Googling it and searching it here.
I'm trying to build a homepage for a website where the menu is along the top, rolling over the menu items should show a description of the page in the middle of the screen, which they do, and this is working.
The problem is that because jQuery/JS is using the href tag to find the page the description is on, clicking on the menu item takes the user to a description page and not the actual page.
I've put the description paragraphs on separate pages from those they're describing since it'd be redundant if the description showed up on both home and the page the user wants to navigate to. I've also tried display=none in the CSS to get the description to be hidden in the main page and show on the homepage, but as the description carries the CSS from the main page, it's also being hidden on the homepage.
I'll post any code if asked, I wasn't sure whether to dump it all here or just certain parts.
Thanks
A few days ago I asked help for a kind of website. Now I kinda made it using idangero's swiper but since I need the bullet to desappear and show my own linked menu I'm forced to create a div menu.
The problem is that when I slide with mouse or tapping with my phone the menu doesn't activate the name of the page on the menu that I'm visiting.
Any hint?
Here is my page: http://www.meowgraphix.it/prova
I fixed the problem. The only thing is that hashes doesn't load the right panel but the main one automatically :'(
I have a one page website.
I have an area of the screen that is a div.
I want to be able to show different "mini" pages within this div based
on if the user clicks a button.
The contents of the div are html,javascript and images.
What is the best way to solve this?
I want it to be very responsive and fast, without re-loading the page itself.
Thank you
angular framework is great for single page apps. You can use the default ngRoute or the angular-ui-router to achieve the content swapping you want.