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.
Related
On my site as the page is loading I noticed, on both mobile and desktop, that as I scroll the screen gets a gray box. It's very jarring. I also noticed it on my gallery page.
Any idea what's happening or try to fix it? I've never run into this issue on other sites.
What's happening is that you load EVERYTHING in your your <head> tag.
So what happens is that your browser is blocked by getting all of the files first, to be more precise 123 files. Then it tries to read everything and make sense of it. From what I've noticed there must be some jQuery for scrolling as well, which adds even more stress.
Try to put all of the <script> tags at the bottom of your body. This allows browser load them after it reads the styling and content. That's probably the quickest fix.
edit
Also there there are multiple copies of same file loaded and multiple versions of same plugins. They are blocking loading as well.
I have seen a method on Youtube and various other sites, which, upon changing to another page on the same server make the browser not directly redirect the user to the new page, but
stays on the same page until the new one is loaded
dynamically loads the new pages content seemingly without any idle time inbetween page changes
shows a progess bar on the top of the screen
leaves any html headers or other fixed content unchanged
In this gif you can see the animation on top of the page, upon changing the page, there is a progress bar and the new page is displayed seamless.
Here is where I am a little helpless, my attempts of finding something useful in this manner brought me practically nowhere, i do not know if there is a library/framework for this use that i simply cannot find or there is some messing around with dynamical page loading i do not know about.
How is such an effect achieved and what techonolgies are requiered?
You need a single page application framework. For example look at AngularJS
If you want, you can do it with pure JS code using AJAX.
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.
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 what is probably a very stupid question. I have been writing a Ruby On Rails app for the last few weeks, using the excellent Bootstrap/Twitter components to avoid me having to do anything artistic.
I noticed on that site, the navigation bar does not appear to ever reload.
http://twitter.github.com/bootstrap/javascript.html
Clicking on the links at the very top (Overview, Scaffolding, etc) causes the page to change, and the URL to change, but the topbar itself does not appear to reload.
I can't detect anything AJAX-y going on that would do this (using Chrome's dev toolbar etc). I can only imagine that it's:
An optical illusion, and it is reloading just it's so fast I can't see it. But then why does it not appear to reload at the same time as the content?
Some undetectable AJAX going on
Some sort of browser caching going on (can you do that for a rendered page element)
Something completely different
Any thoughts most welcome :)
The boostrap site's navbar does seem to be static during reloads but it isn't some clever js that is doing that. There is no hidden content that is being displayed.
What's happening here is a very fast page load. The guys at boostrap moved all their js links and scripts to the bottom of their html so their pages load faster, they even say that in their html. The pages load so much faster that certain elements like the navbar don't seem to change at all. I tried it on my on site and low and behold the static navbar illusion.
So maybe moving your js and scripts to the bottom of your html can help you achieve the same trick.
The entire page (each tab) is loaded, and hidden when the page loads.
The URL is changed using location.hash when the links are clicked (and JavaScript is blocking navigation).
When the hash is changed, the onhashchange event is ran, and the correct div is shown.
Here is an example: http://jsfiddle.net/uFgtS/ (Well, I guess you can't see the url change. Copy the HTML, CSS and JS into a file and run it.)