Jquery mobile panel has to be included in a page element, as a sibling of header and footer. I want to use the panel as a menu to switch between different pages, so I include the same panel in every page. It works fine except one thing: when switching to a new page, the page is shown with the panel closed. I want the panel to 'slide back' while new page is loaded, like in most mobile native apps.
I know this is possible, because JQM has 'persistent headers and footers', with multiple pages containing similar headers/footers, but they don't flicker when loading a new page.
So my question is: Does JQM support a 'persistent panel'? If it doesn't, is there any easy way to implement this without modifying code in JQM itself?
Related
I am working on a Chrome extension that has a popup with multiple pages. Before I started implementing all the pages in one HTML file, and hid <div>s depending on which page the user was currently on. Since this turned out to be a major hassle I decided to instead create an HTML file / JavaScript file for each page and switch between them
function toX() {
chrome.browserAction.setPopup({ popup: 'x.html' });
window.location.href = 'x.html';
}
Unfortunately this causes the popup to "flicker" / "reload" (it closes the current page, then opens the next one) when switching between pages.
How can I prevent this from happening an make switching between pages smooth (it was smooth when hiding <div>s containing the HTML of the pages the user isn't on, but as I said, that's a huge hassle)? I was thinking something along the line of Jinja's template inheritance, but I'm not sure if that is possible with a Chrome extension.
I am very experienced with jquery, but jquery mobile is very new to me. I am developing an app using cordova and jquery mobile.
So i have a multi page setup in the html, with navigation bars that switch the pages. All works great there, however, i need to load the page content via ajax when the page is changed.
I am managing to do this with a post request to an external web server that generates the content, then caches it inside a local database via the app. I am currently doing this with the "pagebeforeshow" event.
The problem is, when the user clicks the menu item, jquery mobile has already switched the page before the ajax call in "pagebeforeshow" is fired, which means we see a blank page delay while the content is requested.
So my question is: Is there a way to either prevent jquery mobile from switching the page automatically on menu click so that i can catch the event, grab the content and then manually display the page with changePage() or is there an event i can hook into that fires well before the transition takes place?
So the idea is they click the menu item, a full screen loader shows (which works) , load the content and then display the page, not display the page then load the content....
Make sense?
The way I'd go about it would be to not use pagebeforeshow and instead have the page initally covered by a splash screen.
Then when the splash screen is loaded and displayed (image onLoad or similar) start the AJAX call, which once finished, fades out the splash screen and shows the actual content.
A question about the Fullpage plugin: http://alvarotrigo.com/fullPage/
You can open the site in any section. For example this link opens the site in the fourth section:
http://alvarotrigo.com/fullPage/#4thpage
This means the site immediately starts to scroll once you opened the site (it scrolls down to the fourth section).
However, I have a script (it loads a chat box) that slows down this process. Although I added my chat script AFTER the Fullpage.js initialization script, my site first loads the chat box and after that Fullpage scrolls to the right section.
I want the page first to scroll down to the right section on site open, and once the site has opened and has scrolled to the right section, then the chat box script needs to start to run (for as long as the site is open).
How to accomplish that? I tried to place my chat script in the afterLoad and afterRender, but for some reason that makes my chat box not showing up at all. Is there a way to perform some actions after Fullpage has loaded and after the first scroll (on site open) to the right section?
As I said in a previous comment:
Probably what's taking time is the loading of the JS, CSS or SWF files required for that script to run. Fullpage.js waits until all elements from the site have loaded to scroll to the section. The reason to do this is due to the use of images in section when using scrollOverflow:true, as fullpage.js needs to determine if the section needs scroll bar or not depending on the size of the loaded image.
To solve it you can load the element dynamically by using jQuery or ajax.
Otherwise, you can edit fullPage.js and change line 536 this:
$window.on('load', function() {
scrollToAnchor();
});
To this:
scrollToAnchor();
The only problem with that is that you'll have to remember to change that line every time you update fullpage.js.
Feel free to open an issue in fullPage.js github forum and a solution might be implement in future versions.
I'm creating a Phonegap iOS and Android application. I've got one index.html file where all the pages / tabs are in, each page has it's own div-container. The application is almost finished and now I would like to add a slide-effect when navigating to another page.
My question is, how do I add page transitions within one page that contains several divs?
I have been looking at jQuery Mobile, but this seems to mess up my entire stylesheet. And furthermore, I only need the transitions part of jQuery Mobile, not the entire script. I've found this plugin http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/ but this does not seem to work for one page.
If you're using jQM you should restruct your HTML code so the tags correspond to what the framework needs to make function your transitions.
But I think your problem is with the Ajax calls, when changing from a page to another.
I have a website that implements jQuery plugins like horizontal sliders and other java script elements. After clicking on link that is towards the right of the website, the page will slide that panel in which the link is contained over and drop down additional text. It will also redirect to another page. I want the user to be able to return to the website exactly as it was seen before redirection.
I looked into deep linking but found it insufficient; from what I've seen it relies on Ajax which I would like to avoid. If it can be done only with jQuery that would be optimal. How could this be implemented?
For reference, I am using the Spry Sliding Panels to slide to the new panel, and jQuery's slideDown() and after both these actions are clicked I'd like to save the current page's state in the browser's history.