Footer template blinks even using ng-cloak in AngularJS - javascript

I'm sucessful create and display templates with some data retrieved from REST service using AngularJS but, when JSON response is still loading, the browser show the footer template at the top and, when response return the JSON data, the footer goes to the bottom.
This occurs very quickly, but the footer template blinks at the top of the page before goes to the bottom.
I've tried using the ng-cloak approach, unfortunately, the problem still happening. I put the CSS to ng-cloak as the API Reference recommend.
Here is my app code:
<body>
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ></footer>
I try put the ng-cloak on body tag, ng-view, footer, and also inside the ng-view html template. This code represents all attempts (Note: I've try to use separately and together, with ng-cloak class and not)
<body ng-cloak class="ng-cloak">
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ng-cloak class="ng-cloak"></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ng-cloak class="ng-cloak"></footer>
Unfortunately after all these changes, the footer template still blink on top before loading is complete.
Anyone can help me to fix this?
Is any Bootstrap trick to put the footer on bottom, even when the main div is without height? I've tried use the nav-fixed-bottom tag but I dont want to have the bottom fixed on screen when the page has high height values.
Thanks!!!

Have you double checked whether you have any CSS rules that may be conflicting with the ng-cloak rule? This could happen with other styles, libraries etc.
If you have any rules that conflict, just adding display:none; may not be enough.
See Angularjs - ng-cloak/ng-show elements blink
If this is the case, the solution is to use !important to overcome this:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}

ng-cloak and/or ng-bind can't help solve this problem, because this is not a "flash of uncompiled content" problem. Those directives are meant to hide content until Angular has had a chance to compile the HTML.
The problem you are trying to solve is more like: "I'm adding stuff to the page dynamically and stuff is moving around". If you want to show the footer only after the main content is loaded, I like the solution #Alex presented in his comment.

As Alex and Mark said, ng-cloak doesn't provide any benefit in this case. However I used something that worked for me and may also help others.
Initially, I don't display the footer.
.footer {
display: none;
}
then after the Angular is done with loading the content, the footer appears.
var app = angular.module('app', [...])
.run(function($rootScope) {
$rootScope.$on('$viewContentLoaded', function(event){
$('.footer').fadeIn(500);
});
});

Related

How to make JQuery UI Layout Plugin work inside Boostrap body-content div

We have been using JQuery UI Layout Plugin for most of our projects. We have started a new project that uses Bootstrap as the framework. We attempted a simple layout example, using Bootstrap containers, but the layout will not render, in fact no html is rendered. My feeling is that somehow Bootstrap and JQuery UI Layout are not playing nicely. Now, for the code:
This is what we are trying to do for HTML:
<div class="container body-content">
<div class="ui-layout-west">
<div>West</div>
</div>
<div class="ui-layout-center">
<div>Center</div>
</div>
</div>
This is what we are trying to do for Javascript:
$(document).ready(function(){
var globalLayout = $('div.body-content').layout();
});
However, the HTML doesn't render at all (we don't see the 'West' or 'Center' text). But if I change the HTML to no longer use the body-content div and use 'body' to create the layout, we are fine.
Working HTML:
<div class="container body-content"></div>
<div class="ui-layout-west"><div>West</div></div>
<div class="ui-layout-center"><div>Center</div></div>
Working JS:
$(document).ready(function(){
var globalLayout = $('body').layout();
});
Here is a JSFiddle of it not working and here is a JSFiddle of it working.
The issue seems to be with height calculations.
The following CSS adjustment helps in your demo although is not a perfect fix. With some additional CSS inspection I'm sure you will find the proper final adjustments to make
html,body, .container{height:100%}
http://jsfiddle.net/25m9qsar/1
This page at Bootstrap's site tells you how to circumvent the issue.
In short, box-sizing:border-box messes around some calculations.
If you want to test this quickly, go to your bootstrap css file and comment the lines that modify box-sizing, then refresh the page -- this worked well for me.
Just add this CSS snippet:
.ui-layout-container, .ui-layout-pane {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

nav going below content on browser resize

I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");

Applying Angular directive ngCloak to a single Controller

I was playing with this toy Angular JS application and tried to use the ngCloak directive to hide the templating markup at startup. When applied to the tag where I declare the app module, everything works fine:
<div ng-app="EditorErrante" ng-cloak>
but when I try to cloak only the second Controller:
<div id="stats" ng-controller="Statistiche" ng-cloak>
nothing happens the directive has no effect: I can still see the markup in the "stats" div before it gets processed.
I tried adding the directive as a class and copying the CSS rule in the stylesheet. Still nothing.
Anybody know why this happens?
Try this:
Add a style in your stylesheet:
.ng-cloak { display:none; }
Then use ng-cloak as a class instead of an attribute:
<div id="stats" ng-controller="Statistiche" class="ng-cloak">
e.g. http://plnkr.co/edit/xWPW2i?p=preview
should work now.
Remember, you can use directives as classes as well, not just attributes and elements.
Edit, just tested this, and you dont have to put it into a class. So just add the .ng-cloak style into your stylesheet.

Javascript output won't accept any CSS styling

I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.
There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom
The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.

including the header and footer in jquery mobile multiple page site

I am creating a jquery mobile web app which contains 3 pages, my header/nav for these pages doesnt change but in all the examples Ive seen the header and footer is added to each page. Is it possible just to add 1 nav and 1 footer then just switch the pages main content in and out like this structure:
<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>
Basically is there a way of just showing/hiding the main content and doing nothing with the header and footer?
Any advice on this would be great
Kyle
No, unfortunately JQM doesn't support this (yet), you'll need to add your role=header and role=footer on EVERY role=page you got (all 3 of them).
See documentation
I would stick to $.mobile.changePage() since that takes care of hashing and a lot of other events and not just use JQuery to .load() new content...
Hope this helps
Have a look at the load() method in jQuery -> http://api.jquery.com/load/
Here is an exmaple :
$('#navigation').click(function() {
$('#page1').load('page1.html');
});
This means that when something with an id of navigation is clicked it will call the load() function and replace the div with id of page1 with the contents of the loaded file.
you can use .load() in jQuery
for example in every page you will have this:
<div data-role="footer" class="ui-footer"></div>
now build this function:
function goTo(pageURL, transitionType) {
$.mobile.changePage(pageURL, transitionType);
$('.ui-footer').load('assets/includes/footer.html');
}
now when you move between pages, try onclick (or from code if you like) call:
goTo('home.html','slideup');
that would do the trick (this is what I use)
you can do the same for the headers as well.
keep in mind if the header or footer content changes for each version of the app (such as localization) you have to call this first, then fill in the localization text or anything else.
I hope this helps for your purpose

Categories