so i have a website with multiple pages and a navigation menu with links to the other pages.
i need a Jquery and/or CSS page transition that'll slide the page down, load new page and then slide that page back up.
This would be easy to do if the content of all the pages was in one single page, in different divs, and then i could just make a sort of carousel to show the div corresponding to the link that was clicked. Most of the answers i found applied to that situation. this is not the case though so that wouldn't work and i can't touch the html of the site!
css3 transitions work great when the page loads, but they also need to happen onbeforeunload, which is where the problem lies. i can use jquery to give the divs a class onbeforeunload, which works, but it unloads before the animations even start happening.
I've tried this plugin:
https://rawgit.com/votum/page-transitions/master/demo/index.html
but it looks very glitchy and doesn't work properly.
any ideas?
You can check out accordion to show content of selected menu item.
https://jqueryui.com/accordion/
Related
I have a bunch of sections in my fullpage js continuous scroll. By default, I only want the user to scroll through a select few.
However, upon clicking a link, I want an additional section to be appended and navigated to.
I tried using jquery append; however, it doesn't seem possible afterLoad.
I have a link in my menu that opens up a fancybox with some ajax contents. This box contains links, like a menu for the data shown in the fancybox. I would like to be able to click these links and change the content of the fancybox but all I manage is to open a new box instead, which makes the screen fade to white and back which makes it look like it's flickering.
I tried using an array of content dictionaries to just change the but couldn't get it to load any of them. I've also added a rel to the links making it a album with arrows on the side so I can go to the next/previous and that works fine except that's not the type of navigation I want. It must be possible to do the same through links instead, but I can't figure out how. Can anyone help me with this?
Edit: a small jsfiddle of some things that I tried.
Fancybox supports iframes. You could make an iframe instead. And put in another html-page there.
You can try on each link
The links located on the same server or different domains?
Have you tried with onclick="window.location.replace(url)"
I use fancybox on our web system and that helped me with fancybox
Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.
Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)
that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.
You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want
I've just noticed that javascript elements aren't working correctly on the website. They are working, however, they only work on one page, and not site-wide.
http://www.radonsystems.net
Javascript elements, such as menu hovering, work on that page. Additionally, so does the jQuery fancybox [click on live chat].
No go to http://www.radonsystems.net/business/profile.2, notice that the menu hover and live chat fancybox doesn't work.
Any ideas?
Ok, looks like removing a script breaks it up. Have to split up the javascript in the header.
I'm developing a page that will present the user with a content slider, so that the user can click 'next' to browse through the slides.
However, I also want to hide any 'previous' buttons/links and additionally, when the user reaches the last slide in the list the 'next' button needs to be replaced with a different button and take the user to another page on the site instead of going back to the beginning of the slides.
I wondered if anyone had any advice on how to code this?
Thank you.
If your slides are images, you have this done in Lightbox (at least for the first part of your need):
http://leandrovieira.com/projects/jquery/lightbox/
http://www.huddletogether.com/projects/lightbox2/
You might also be interested in the following script (based on Scriptacolous):
http://railspikes.com/2007/5/14/slider-js-a-javascript-slider-component
Also this is a possibility:
http://www.webresourcesdepot.com/anythingslider-a-great-jquery-slider-plugin/