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/
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
I have a site which is tracked by Adobe Omniture, it loads s_code.js to track the site.
My site also have a full screen slide function, when click Next, it will show a short animation and replace with the next slide. But when put the s_code.js and use s.t(), the animation disappeared. (I think there should be some code conflict.)
Does anyone know how to let s_code to exclude the links like Next? For example, Next button has id as nextbutton.
Thanks a lot in advance.
I have a Jquery Mobile app with a slidemenu in the global page, and it appears with the press of a button or a swipe on the screen, facebook style. My problem is that the first time the app loads, the menu never pops out, even if you press the button a thousand times. You have to refresh the page and then in works in all the pages of the app for the lifetime of the session. If you logout and enter again, you need to refresh.
You can see a example here: http://cic-team.no-ip.biz:9090/apex/f?p=112:2 User: Demo Passw: 1234abc
The menu it's in an "After Header" region as a "List: Menu" type with this custom template: http://i236.photobucket.com/albums/ff289/Best1989/template.png
The button has the following attributes:
data-slidemenu="#slidemenu" data-slideopen="false" style="margin-left:0px !important;"
Maybe the Javascript or the CSS are not loading correctly the first time, but inserting the menu in other region has not worked for me. I'll gladly read your suggestions and comments.
I'm using Apex 4.2.0.
Thanks in advance.
With some research I found the answer to my question, please check this:
http://www.gajotres.net/how-jquery-mobile-page-handling-affects-javascript-executions/
The problem was that I wasn't loading the menu classes at the Login page (which is the first of all) and when you actually got to the page where the button and menu is displayed, it didn't load the classes.
Solved the problem loading the components in the first page but keeping them hidden.
This is a bit weird to explain so ill do my best.
Im working on a mobile site that im trying to shape into an ios app (eventually).
On this page i have a menu button that on click, shows/hides menu.
Everything for the most part is working but, the problem is that when you click on the "back" button and the browser runs out of previous locations to go back to, the menu button breaks. When you click it, nothing happens. it behaves as though nothing is there.
The errors go like this, if on index(or first page), you click ONE link to go forward, and then on the browser hit the back button, it breaks instantly.
If your on the index, and hit for example, 5 links in any order(essentially you went forward 5xs) and thereafter, you hit back up to 4xs, the menu still works....you can essentially keep pressing links forward and be fine, hit back as far as you want and stop short one less than the total times you went forward and still be fine.
As soon as you hit the maximum backs, and theres nothing left in the history of page locations to go back to, the menu then breaks.
here is the link of this dummy site im working on (on my server)
NOTE: to test, when it loads, manually shrink the browser to about 400 width so you can see the page take effect.
EDIT** woops forgot the link
http://somdowprod.net/4testing/mobile/less1.html
and here is my code
javascript:(i left comments in there, so you can see where my logic is at...maybe im going about it wrong?)
// JavaScript Document
$(document).ready(function(){
var newHash = "";
var menuBtn = $('.leftButton');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide
menuBtn.click( menuShowHide);
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~MENU SHOW / HIDE
function menuShowHide(){
$('#menu').toggleClass();
// if($('#menu').css("display") == "none"){
// $('#menu').css("display","block");
// } else {
// $('#menu').css("display","none");
// }
scroll(0,0);
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE is-loaded trick.
function isLoaded(){
$('#progress').remove();
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE HOME PAGE
if(newHash == ""){
$('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
$('#contentHere').load('index.html #content', isLoaded);//load the content div from the index.html file
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~Load the clicked content into my container via jQuery AJAX
$('#menu a').click(function(){
menuShowHide();
window.location.hash = $(this).attr('href');
return false; //doesnt let the link jump to a new page
});
$(window).bind('hashchange',function(){
newHash = window.location.hash.substring(1);
$('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
$('#contentHere').load(newHash, isLoaded);
//console.log(newHash);
});
//===========================//
});
Anyone have any ideas as to whats making the menu break? Thanks in advanced.
The hashchange event is known to be unpredictable with the browsers back button.
Here's what's happening. When you back all the way to the beginning, the whole less.html page is being loaded into its own 'contentHere' container, and since document.ready won't be called on this subpage, no menuButton.click handler will be assigned to the links, so clicking them will not do anything.
Although being able to use your browsers back and forward buttons on asynchronous changes would be a neat feature, I don't think people would miss it enough for you to try to hack a workaround. People are used to not being able to use the back and forward button on asynchronously loaded content. They would try it once, see that it takes them to your site's referrer, hit forward, and subconciously make a mental note to use your menu instead of the back and forward buttons.
Probably a better suggestion, however, is to get rid of the AJAX feature altogether and let the links act the way that people expect them to. Okay, so you lose the cool 'Loading' modal and you save the user a tiny bit of time, but then you aren't confusing people's expectations about your interface.
Edit: to answer your question below, instead of using load() to get static content (which is overkill), put all of the content as sections in your less.html file and hide/unhide it using the menu selections. Here are two ways to accomplish this, each with their own advantages and disadvantages:
Fix your header with CSS (including the menu) (example: lifeinthegrid.com/simple-css-fixed-header/) and then make your menu links normal anchor links with no JavaScript event handler. When you click a link in the menu, the content jumps to that section and because your header is fixed, it has the feel of being a very fast httpRequest. Advantages: minimal JavaScript, the browser's back and forward buttons will work. Disadvantages: fixed elements are a nuisance on older smartphones, the next section might sneak into the bottom of the viewport and ruin the illusion. Solution: put more space between them.
The other method is to use show()/hide() on the different content sections. So let's say you click 'about us'. All of the sections are hidden and the 'about us' content is shown. Advantages: It's not as annoying as a fixed element, you can spice it up with FadeIn()/FadeOut() or other JQuery animation effects. Disadvantages: your browsers history will not track these changes unless you do some window.location hackery.