I have created a preloader which works fine when loading the page first time:
http://vivule.ee/1
However, when navigating inside the page, the loader does not work as intended. You can see this very well when using FF. Instead of the loader it just displays empty background. I'm using ng-cloak, without it, instead of empty background it would show the content loading tags {{}}.
My loader works as follows - display loader until content is loaded, then hide loader with ng-hide. Can I instead of using ng-hide, somehow listen for ng-cloak, like when ng-cloak is activated it shows the loader and when content is loaded it hides it, because right now ng-clock seems to load BEFORE ng-hide.
Sorry if too confusing question :/
PS! To navigate inside the page scroll down to similar games and click on one.
I wasn't able to solve the problem using ng-cloak, instead I did this - the loader is displayed by default on the page. When angular loads the data I send jquery command to hide the loader (this is done in the myapp.controller). When I navigate inside the page, I unhide the loader with jquery(code is again in the myapp.controller) - NOTE! I unhide it BEFORE the new page is loaded.
Hide and unhide is done with simple display:none and display:block (unhide is done using jquery click).
$(".single_similar_game_container").click(function(e) {
if (e.button == 0) {
$("#spinner_bg").css("display", "block");
}
});
Please note, you can overwrite Angular's CSS classes and use the ng-cloak class to display page elements. For example:
body div.wrap.ng-cloak div.preloader { display: block !important; }
body div.wrap.ng-cloak div:not(.preloader) { display: none!important; }
Related
In a simple plugin for my wordpress site, I wrote code that sets up click events as follows:
$(document).ready(function() {
$("#myButton").click(function() {
//do stuff
});
});
This code works as expected when I load the relevant page directly. However, the way users are expected to access the page is through a link in the theme header. I am not really sure how page transitions in the theme work, but the end effect is that whenever a link is clicked, some animation happens, the page fades out, and the new page fades in. The problem is that $(document).ready() does not fire when the new page fades in, so the click handlers do not function.
How can I change the code so that the click handlers are registered at the time the new page fades in?
If it's necessary to see how the theme works, I am using the Bridge Theme. A demo version of the theme is available here.
UPDATE:
After playing with the theme page transitions a bit, I am suspecting that the theme is using ajax to get the new page content, fading out old page content, fading in new page content, then "artificially" modifying the url to show the new pages url.
If you bind your click event to the document it will apply to elements which are loaded or created after the document has loaded.
This can be done like so:
$(document).on('click', '#myButton', function() { /* ... */ });
you can use one of these methods:
The DOM way
window.onload = function() { // do stuff with the DOM }
The direct jQuery translation
$(document).ready(function() { // do stuff with the DOM });
The jQuery way
$(function() { // do stuff with the DOM });
I have some basic custom tabs setup that function using click events that show/hide DIVs.
FullCalendar isn't showing up on one of those tabs despite using the render function (docs).
$(".tabs .tab").click (e) ->
...
$("#calendar").fullCalendar "render"
The #calendar DIV is initially hidden, but from my understanding, the render function should force the calendar to render with each click. All of the other tabs work properly, so I know that it's not a problem with the show/hide functionality at all.
Does anyone know what might be going wrong here?
The problem ended up being related to the way I was showing/hiding DIVs-
The CSS selector that I was using to hide DIVs was too broad and ended up assigning display: none; to the calendar DIV (which was a child of the tab content DIVs).
The solution was to change:
$("#tab-contents div").hide()
To:
$("#tab-contents").children().hide
In the HTML the calendar was shown like this (in HAML):
#tab-contents
#tab-calendar
#calendar
#tab-other
...
Thanks for the help and suggestions, and I should have posted more code in the beginning.
There usually are problems with some scripts no being able to work correctly on hidden DIV's.
I usually load page with everything visible, and after about 200ms I hide everything, that needs to be hidden.
For bootstrap tabs, I set every tab container "active" class and for tabs menu, I use this trigger script.
setTimeout(function() {
$('.my-tabs-control a').first().click();
}, 200);
You could try this solution for your own script.
Currently I am using the twitter bootstrap tabs on a page with the following code. I added a bit of javascript/jquery to push hash tags in the url, so I can actually link to a tab. This works fine, but the when I load the first tab I see the whole page and then I am quickly shown just the first tab. Now, if I click tabs on the page everything works nicely and I am not shown the whole page again. This flash of data is annoying to say the least. Any ideas on what I am doing wrong?
Jade Template Code, compiles down to standard HTML
div(class="tabbable")
ul(id="myTab", class="nav nav-tabs")
li
a(href="#surveyEditData", data-toggle="tab") Survey
li
a(href="#surveyEditQuestions", data-toggle="tab") Questions
...etc...
JavaScript code:
$(function(){
// Function to activate the tab
function activateTab() {
var activeTab = $('[href=' + window.location.hash.replace('/', '') + ']');
activeTab && activeTab.tab('show');
}
// Trigger when the page loads
activateTab();
});
You are seeing the delay in the HTML being rendered before the Javascript is done executing.
To fix this, you need to put an initial CSS style such as fade or hide to all the other tabs, except the first one.
CSS rules are executed immediately during rendering, so there will be no delay for these rules.
I want apply load-mask in view page. while launching the application, some view pages are taking time to load data later it will display, so if its taking time to load in that time i want show load-mask to users with some messages like "loading....". from some sample i have applied load-mask, but it is shows that message every time whenever i hit that page. this is bad way because here setting time. i need apply load-mask like this if don't have data it should show the load-mask to the user, until page getting the data. please any one help me. how to achieve this one
My code is here: at controller level i am taking the id of load-mask and setting the property as shown below code
onCompanyPageLoad: function () {
var loader = Ext.getCmp('mask');
loader.setMessage("Loading...");
loader.setIndicator(true);
loader.setTransparent(false);
loader.show();
setTimeout(function () {
loader.hide();
}, 1000);
}
The answer of user978790 is formal way to show and hide a loading mask in Sencha Touch 2.
If you can't make it work, it's very likely that you're doing something like:
Ext.Viewport.setMasked({xtype:'loadmask',message:'your custom loadmask'});
... then do something here
Ext.Viewport.setMasked(false);
Note that Javascript is asynchronous, so it does NOT make sure that the code lines are run in above order. Then there is a possibily that Sencha Touch initializes your loading mask and destroys it right then. In order to use loading mask correctly:
Initialize a loading mask as above.
Put the Ext.Viewport.setMasked(false); in special functions which are ensured to be launched after loading mask initialization, eg. event handler, or success function of your JSONP/AJAX request.
I do it the following way:
Ext.Viewport.setMasked({xtype:'loadmask',message:'your custom loadmask'});
Then you can use
Ext.Viewport.setMasked(false);
To stop showing a loading mask
This also works on components if you only want to show a mask on part of a view
Just remove all this.I have nice idea how to use loader.First on main page html just add loader
<div id="loader"></div>//add id#loader with background loading image
after your page loads just add on contoller Ext.get('loader').destroy();//when you page full load then it will load your loading div
I found this nice jQuery preloader/progress bar, but I cannot get it to work as it is supposed to. The problem is that it first loads my page and after my whole page is loaded the 0%-100% bar displays quickly, after that it reloads my page again. So it does not show the progress bar BEFORE the page loads and it loads the page a second time as well.
Here is my implementation code:
<head>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").queryLoader2();
});
</script>
</head>
<body>
My content...No other reference in here for the Jquery preloader
</body>
Thanks for any help in advance.
I could be very, very wrong here, but in my opinion:
The plugin is flawed.
You have some issue in your page that causes a redirect.
I have created a test fiddle and found out the following:
If there are no images on the page, then the plugin's private function completeImageLoading(); is never called because it is only bound to the image elements. When there are no images -> there's no binding -> no triggering -> nothing completes -> you stay with overlay 0% as demonstrated by the fiddle that is NOT RUN (jsfiddle doesn't see relative images when the page is not run).
The plugin doesn't take into consideration remote images. So if you declare them like so <img src="http://example.com/image.jpg"> - then it won't work because the plugin doesn't recognize them. In fact it is using $.ajax to load images which, obviously, generates a error when trying to access another domain.
The plugin doesn't reload the page (at least in Google Chrome)... check your console output while in the fiddle. It displays the message once per click on Run.
Suggestions:
Make sure you provide at least one relative or background image (though I haven't tested backgrounds...) for the plugin to work.
Show us more code. The fiddle demonstrates that the plugin does NOT cause page reload (at least in Chrome... are you using another browser?). It must be something you made that interferes here.
Specify some options for the plugin (behaves weird when there are none).
Edit regarding preloader
Regarding preloader... if displaying progress is not mandatory for you, then you can just use a window.onload trick. On DOM ready $(...) you create an opaque page overlay with a "Please wait..." message and some animation if you fancy it. Then you wait for window.onload event which "fires at the end of the document loading process... when all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading." When window.onload triggers, you just remove your overlay and voila - the page is ready!
Edit 2 regarding preloader
Actually, you don't even need $(...)... what the hell was I thinking? Just create your overlay (a simple div with a unique id) in your html, style it so that it fills the screen and give it a z-index:1337 CSS attribute so that it covers the entire page. Then, on window.onload:
window.onload = function () {
// Grab a reference to your overlay element:
var overlay = document.getElementById('myOverlay');
// Check if the overlay really exists
// and if it is really appended to the DOM,
// because if not - removeChild throws an error
if (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
// Remove overlay from DOM:
overlay.parentNode.removeChild(overlay);
// Now trash it to free some resources:
overlay = null;
}
};
Of course, it's not really a preloader, but simply an imitation.
Here's a working fiddle you can play with.
P.S. I personally don't appreciate preloaders, but that's just me...
Try out this(Remove the document.ready event and simply call this):-
<script type="text/javascript">
$("body").queryLoader2();
</script>