I have a really simple Html web site (No server side code). Instead of replicate some HTML, I decided to use angularJs. Using some directives and some partial views, I could re-use some code without replicate it.
I created a directive for preloader, but I have a problem.. The preloader is shown a bit later than the loading of the page... What I mean is that some images and text are loaded, then the preloader appear, and finally when the document is ready the preloader disappear... It's really annoying!!
I would like that the preloader appeared immediately before of everything, but perhaps in that moment angular has not been loaded yet. I don't know If I am clear.
In any case, here you can see what I mean:
the example
Here my code:
HTML PAGE
<head>
...
<script src="/js/angularjs-1.4.8.min.js"></script>
<script src="/js/angularjs/app.js"></script>
<script src="/js/angularjs/directives/preloader.js"></script>
</head>
<body ng-app="renovahaus">
<rh-preloader></rh-preloader>
...
</body>
JS - DIRECTIVE
angular.module('renovahaus')
.directive('rhPreloader', ['$document', function ($document) {
return {
restrict: 'E',
replace: true,
templateUrl: '/partial_views/directives/templates/preloader.html',
link: function (scope, element, attr) {
$document.ready(function () {
/*will first fade out the loading animation*/
$(element).find("#status").fadeOut();
/*will fade out the whole DIV that covers the website.*/
$(element).delay(1000).fadeOut("slow");
$("body").css('overflow-y', 'visible');
$("body").css('position', 'relative');
});
}
};
}]);
HTML - TEMPLATE DIRECTIVE
<div class="preloader">
<div id="status"></div>
<div id="loading-center">
<div id="loading-center-absolute">
<div class="object" id="object_four"></div>
<div class="object" id="object_three"></div>
<div class="object" id="object_two"></div>
<div class="object" id="object_one"></div>
</div>
</div>
</div>
thank you
Some possibilities to try :
Add the class ng-cloak to your <div id="wrapper">
Put your whole Page (except the preloader) in a ng-include ? All the dom from the div with id "wrapper".
Otherwise you could use the route module of angular which will contains a template where all your content will be.
I have modified the div with id "wrapper" in order to be hidden (visibility: hidden) and in orderd to be shown when the preloader disapper. Surely not the correct way to approach, but solved my problem.
Related
The following script is the most common I found to be used for managing the preloader but does this actually work or is it just some stuff we display for few seconds and assume the content of the site would have been loaded by then?
Here is that script.
$(document).ready(function() {
$(window).on('load', function() {
$('.loader').fadeOut(); // will first fade out the loading animation
$('.preloader').delay(1000).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(1500).css({'overflow':'visible'});
});
});
and then the HTML
<body>
<div class="preloader">
<div class="loader"> .... </div>
</div>
<div class="content">...</div>
Another thing i would like to ask is if we can have a simple preloader that actually works with just JavaScript instead of jQuery.... there seems to be some problem displayed in console when using the latest version of jQuery
Thanks in advance
Description: I am trying to fadeIn() my container using jquery, but it doesn't work. I'm kinda new to it, only fresh out of codeacademy jquery course.
Problem: the method I wrote in myScript.js file doesn't seem to work. The syntax looks to be ok compared to other examples. I got my js file linked to the html file like this:
<script type="text/javascript" src="/Content/js/myScript.js"></script>
This is my index.cshtml file where I created a container for some navigation:
<div class="container" id="fade">
//some other buttons, divs, etc
</div>
This is my custom js file that I included:
$(document).ready(function () {
$('#fade').fadeIn('slow');
});
You should hide the div by default if you want to fade it in, otherwise it is already showing and fading in won't do anything. If that's the case, your html should look like this:
<div class="container" id="fade" style="display: none;">
//some other buttons, divs, etc
</div>
Make sure your #fade element is hidden when the page loads.
HTML
<div class="container" id="fade">
//some other buttons, divs, etc
</div>
CSS
#fade { display: none }
JS
$(document).ready(function () {
$('#fade').fadeIn('slow');
});
I have this code that shows contents outside of the ng-controller.
HTML
<div class="btn-group companyName">
<!-- buttons -->
</div>
<div class="col-lg-12 col-lg-md-12 col-sm-12" ng-controller="TopicsCtrl">
<div class="faq-breadcrumbs">
<!-- contents -->
</div>
</div>
JS
angular.module('sample').controller('TopicsCtrl', function ($scope) {
//how to hide first div?
};
The top div is inside the site's header, so it is shown in all pages of the site. The second div is only shown if I am in the FAQ page. Now I don't want the first div to show on the header whenever I am in the FAQ page. How can this be done? Can anyone help me? Thank you very much.
The angular way to do this would be to create a directive that manipulates the DOM and will hide the element on the page when the route is on the FAQ page. In order to do this you will have to increase the scope of your app to include the header.
If you can't do that, I would suggest just going the javascript/jquery way and hiding the companyName div when the location is at faq. Something like this could work.
$(document).ready(function() {
if(location.pathname == 'faq'){
$('.companyName').css('display', 'none');
}
}
This solution does pose the problem of potentially showing information before the document is completely loaded.
Hello stackoverflow community. I am using lightGallery plug-in and have a problems with making it running with external kind of button in my case anchor tag, can you suggest what have i done wrong or maybe any other way to get it working right.
HTML
Enter full screen view
<div class="owl-carousel" id="selector1">
<div class="item" data-src="img/1.jpg" name="fullscreen"><img src="img/1.jpg">
</div>
JavaScript
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
$('#selector1').lightGallery({
selector: '.item'
});
lightGallery plug-in: http://sachinchoolur.github.io/lightGallery/docs/#installation
Here are some things that might/will cause problems:
The href attribute does not work like that. The link will just open another website. Instead you need to execute some javascript to activate the fullscreen mode, when the link is clicked.
You have two opening <div> tags, but only one closing. Also, you should close the <img> tag.
You probably want all of your posted javascript in the $(document).ready(function() {}); function
There is no element with the id lightgallery.
I don't know anything about the data-src attribute.
This should fix most of the problems, however it will not enable the fullscreen functionality:
html
<div class="owl-carousel" id="lightgallery">
<div class="item" data-src="img/1.jpg">
<img src="img/1.jpg" />
</div>
</div>
javascript
$(document).ready(function() {
$('#lightgallery').lightGallery({
selector: '.item'
});
});
I'm using PJAX for a project.
I have a container called #icerikAlani to load its content with PJAX.
Here is the basic layout:
<div class="container" id="icerikAlani" data-pjax-container>
<!-- NIVO SLIDER -->
<div class="row">
<div class="col-md-8">
<div id="slider" class="nivoSlider"> SLIDER CONTENT HERE... </div>
</div>
</div>
<!-- SCROLLING LOGOS -->
<div class="row">
<div class="col-md-12">
<div id="logoParade"> SCROLLING LOGOS HERE... </div>
</div>
</div>
</div>
This container has two other script tags in it which are for Nivo Slider and Smooth Div Scroller plugins.
The problem is, when I navigate to a page and return to homepage, script tags stop working.
I tried to solve this problem by using pjax:end statement but I couldn't make it work, then I tried pjax:success as below bu still no luck. (as I read here: Where to put the page-initialize javascript when using pjax?)
Is there a way for using these scripts without reloading the page?
This is the script about PJAX and Smooth Div Scroller script:
<script type="text/javascript">
$(document).pjax('a','[data-pjax-container]', { fragment: "#icerikAlani" } );
//THIS IS HOW I ACTIVATE PJAX
$(document).on('pjax:beforeSend', function() {
$('#icerikAlani').fadeOut(50);
});
//WORKS...
$(document).on('pjax:end', function() {
$('#icerikAlani').fadeIn(400);
});
//WORKS...
$(document).on('ready pjax:success', function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
//FAILS...
});
</script>
You can check the full code here
Because I'm not experienced about javascript, this problem stands like a wall against me before finishing the project. Hope to find something works both with the slider and the scroller.
Possibly your script causes an error.
Try Firefox and Firebug and see if you find something...