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.
Related
I'm putting together a page for a school and it contains jquery tabs, with a bit of style.
The page works perfectly in dreamweaver, but when I upload it to the page the tabs will only very rarely render with styles.
They appear to just not take the css or js, so I experimented with forcing it to render after the entire page loads, but it could very well be that it needs to render BEFORE the page loads. I know it works because occasionally i see them as tabs, and then after a reload they disappear and don't come back till I reload another 20 times.
Here are a few options of the js I've used:
$(window).load(function() {
$("div.Tabs1").tabs();
});
and
$("div.Tabs1").tabs();
etc.
I've tried bind, load etc. and it just wont render the tabs consistently.
Should I be rendering before or after the page load?
Annoyingly it will render some other tabs in the UI of the page I'm tweaking in my style. (I'm putting the page into a learning management system). This works consistently. It just doesn't like mine.
Any thoughts would be great.
I'm fairly new to web development so I don't have much experience with any of this. I currently have a navbar at the top of my website (made with Foundation), but I don't want it to reload every time the page reloads. I've noticed on several websites that certain parts of the page are kept in place when links are clicked and the url changes. How can I achieve this?
Thanks
There are several ways to achieve this. Using AJAX calls is one of them, iframe another. You could even create a one page application and show/hide elements when certain buttons are clicked. This will however force you to load all the data at once so I won't recommend that (depending on the website).
A small article about how you can use the iframe option.
A small article about the AJAX option, they include a small demo to show how it works.
You can set an <iframe> in your code and have the links in your nav target it. When you click on a link, the <iframe> will load the new content, but the rest of your page will not change.
I have created a website that has 5 different 'pages' all on one page, so it is a single page scrolling navigation website. Instead of the users browsers loading the whole page when they load the site, is there a way in which you can load the different virtual 'pages' as the user scrolls down to them? From here I could animate the elements when they load.
If you're looking for an out of the box option, I would check out LazyLoadXT.
I used it on a site where I wanted divs to load as I went along. I'm sure with a little working you can get it to work by calling divs.
I'm currently working on the web-site using Polymer, Jekyll and Github pages. But I'm facing one big issue. When switching between pages there is a white screen showing every time, which is not correct behavior. I would like to always see the header section and left menu (without flash) even when switching between the pages.
The web-site is not vulcanized yet (there were another issues with that), so it is not very fast, but this should not be a reason. I was playing with the imports in <head> section and scripts, but nothing helps. Seems that the page actually renders only after DomContentLoaded event.
Any suggestions?
The web-site can be checked on this url and the source code is also available on GitHub.
If you refer to the transition when navigating between pages — the Polymer website feels faster because they don't do full page loads. Instead, they use AJAX to load the new pages and modify your URL bar with the help of the History API to make it look like you went from page A to page B. The term for this kind of thing is Single-page application.
Hi.
I'm new to Java/AJAX etc.
I have a page with links down the left and a DIV on the right.
I want content (other pages) to load in the DIV when users click on the links on the left... beginner AJAX stuff I guess.
I played around with a few JQery plugins and found one that allows pages to load with a fade effect, which is perfect. I have a problem though:
The plugin works fine when I click links on the parent page, but when I click links in one of the loaded pages, after one link deep, it breaks out of the div and replaces my parent page. (This issue was described on the plugin page, supposedly solved, but is still cropping up on my page). I suspect it has something to do with the "bind" variable.
I've uploaded a stripped down example of my site here:
This is the plugin website: www.thecreativeoutfit.com/index.php?view=Simple-AJAX-Content-Changer-with-EZJax (Because I'm a new user I can't add any more links, sorry for the long-hand).
For those who are willing to look at my site or the plugin, I'd appreciate your insight.
If that's a hassle maybe you could recommend a similar simple ajax plugin that allows the loading of content with a fade-in effect, but also allows links within the loaded content to stay contained within the original div.
Many thanks!
Max
I was going to post a comment but it got too long so, what the heck..
Your website worked just fine for me (except for the pages that were not available) in Firefox running on Windows XP.
However, I would strongly recommend against that type of design - it will be a pain for you to maintain in the long run and it is generally considered bad design because it is against the functioning principles of the web: different pages of your website should be represented by distinct URLs which users of your site could use to link to. It also breaks browser back button functionality which is a big usability issue (at least for me).
Plus, it will not be SEO friendly - which means that search engines like Google won't think highly of your website - which means that you won't show up in searches.
You nested pages are breaking because the JavaScript click events are not being reattached to the paging controls after the first page causing the normal href attribute to be used.