PREFACE: I have an AngularJS application with a controller. In the view of this controller I fill a ng-repeat with a list using a JSON object. If I have a slow device such as a phone, the render can be so slow that I can view an empty page for a while before the content arrives some seconds later.
QUESTION: How can I show a pre-load while I wait for the render? Is there some trick or event I can bind to to show a "Waiting" row then hide this row and show the list rendered (when complete).
Thanks all.
P.S. Without jQuery and friends, AngularJS only.
use ng-cloak
plnkr: http://plnkr.co/edit/lgNSdTrMMexHykUBIqnT?p=preview
this example is very much applicable and is NOT LIMITED to ng-repeat, if you download this be reasonable -- put a comment please
NOTE: this Genius example is working, put a comment please if you will downvote it
althought the example uses manual bootstrapping, the behavior is the same. it just use manual bootstrap to demonstrate what it would look like if angularjs is not done bootstrapping yet.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script>
function jsBootStrap() {
console.log('bootstrapping');
angular.bootstrap(document);
}
angular.module("ng").run(function($rootScope){
$rootScope.DisplayMyData = "AngularJS Loves Noypi";
});
</script>
<style>
.preview{
display:none;
}
.ng-cloak.preview {
color:blue;
display:block!important;
}
.ng-cloak.realview {
display:none;
}
</style>
</head>
<body>
<div class="ng-cloak preview">
I was shown before AngularJS. <br/>
Credits <u>ngtutorial.com/learn/bootstrap</u>.
</div>
<div class="ng-cloak realview">
<span ng-repeat="i in [1,2,3,4]">
{{$index}} = {{DisplayMyData}}<br/>
</span><br/>
</div>
<button onclick="jsBootStrap()">bootstrap document</button>
</body>
</html>
how about
<p ng-show="list.length<1">Waiting...</p>
show loading until data is not load
<p ng-hide="list.length">Loading... or here can set a loading image path in img tag</p>
when json data find it will show
<p ng-show="list.length">
<div ng-repeat="list">// your json data in list
</div>
</p>
Related
I've been trying to automatically go to the bottom of the web page upon page load. On the get AND the post, in fact, no matter how the view has been called, it has to go automatically to the bottom of the page.
I want to do it with javascript.
Seemed like something simple, something I could find in here easily. Well this looks like it :
Set page scroll position on page load of MVC app
There is only one problem... The answer doesn't put the javascript solution in context. And without context... I have no idea where to put these line, no matter what I try...
I won't play all day to know how to accomplish this, so HERE'S A CONTEXT :
#model WhateverModelYouWant
#{
ViewBag.Title = "Formulaire de reprise";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
document.getElementById("ImportantStuff").scrollIntoView();
</script>
<h2> TITLE OF THE VIEW <h2>
<div> Lots of content here </div>
<div> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
<input type="submit" value="ImportantButton" >
Needless to say this doesn't make the page scroll anywhere... Thanks in advance.
ERROR :
In your example nothing can be scrolled anyway because everything is in the visible area. Apart from that mituw16 already gave you the right solution. Here is an example how to use the scrollIntoView function.
<script type="text/javascript">
function scrollToImportantStuff() {
document.getElementById('ImportantStuff').scrollIntoView()
}
window.onload = scrollToImportantStuff;
</script>
<h2> TITLE OF THE VIEW <h2>
<input type="button" onclick="document.getElementById('ImportantStuff').scrollIntoView()" value="Scroll ImportantStuff into View" />
<div style="height:500px;"> Lots of content here </div>
<div style="height:500px;"> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
This doesn't really have anything to with MVC. It is accomplished with javascript.
document.getElementById("ImportantStuff").scrollIntoView();
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
I'm still new to web development (coming from desktop development) and my new boss already gave me a project.
I have to surround our company logo with images that link to other products of ours.
While I think I can surround the image with the logos, I want to add some text to the logos, to make it less confusing. I can imagine it to be quite... weird, for lack of a better word, if it's just a product's logo and nothing to tell the user what it is.
I have basic knowledge of PHP (I know how functions, constructors, classes, variables, etc. work, but have no real experience in it), but I don't know if this will help me in any way.
Here's an example of what I want to do (pseudo):
func onMouseOver(object m_obj)
m_obj.showCaption();
m_obj.border = new Border(Effects.Glow, Colors.Blue);
end
I have no better way of demonstrating it, so sorry if it seems somewhat confusing.
If you're a Firefox user, open a new tab and hover over one of those images, I'm trying to achieve something similar to that.
The code:
<head>
<title>NetWork Team Vorschau</title>
<link rel="stylesheet" type="text/css" href="index_style.css" >
</head>
<body>
<div class="container" >
<input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" /> <!-- I want this to show text when hovered over -->
<img class="nwt_img" src="http://www.nwt.de/images/networkteam.png" />
</div>
</body>
</html>
Cheers in advance for any and all helpful answers or pointers in the right direction!
Simply in CSS:
.one:hover::after {
content:"Text when hovered";
position:absolute;
left:0;
}
<div class="container">
<div class="one">
<input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" />
</div>
</div>
JDFiddle
EDIT: + one with glowing effect perhaps
JSFiddle
I think that you can put
<title>Your text</title>
inside <img> tag.
You need to use JavaScript method (onmouseover) or a jQuery method (.mouseover()). jQuery is the most used JavaScript Framework, check in the official page. JavaScript run in the client side, in the browser.
Regards
So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
And here is the CSS that is supposed to hide everything except the div with the id "results_page" (of course the buttons in that div are also supposed to be hidden in print).
#media print {
*{
background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
display:none;
}
div#fullpage #results_page{
display:block;
}
#result_image,
#result_text {
float: none;
margin: 50px;
}
}
The javascript function is pretty simple, depending on what button the user clicks it adds the "unprintable" class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
So, given all of this, what could be causing the empty page my printer spits out?
For anyone who is having this problem(especially if using bootstrap), it may be a CSS issue and NOT a javascript issue.
My dilemma was that we had a print button towards the top of the page that called "window.print()" function. And it resulted in a blank print preview page. The weird part was that is was working completely fine several weeks ago.
So first, like many threads have mentioned, check that this is not a javascript issue indeed. My call to window.print() did truly bring up the print preview window(meaning we weren't accidentally overriding the print function with another variable somewhere.)
The issue was with Bootstrap's container and container-fluids classes not displaying for print modes. Apparently these classes are being told to be not displayable on print styles(presumably from bootstrap style sheet).
All I had to do was add the following CSS print rules:
.container, .container-fluid {
width: auto;
display: block!important;
}
and it displayed again! This is also hinted at through bootstrap documentation here: http://getbootstrap.com/getting-started/#support-printing
So in a nutshell, check if the CSS is the issue, and stop blaming that poor Javascript.
Here you go:
function print_stadtarchiv(print_picture) {
if(!print_picture) $('#result_image').addClass('unprintable');
return window.print();
}
It also looks like you have no DOCTYPE or html tags... This is likely to cause all sorts of rendering/not-rendering based issues.
<!DOCTYPE html>
<html>
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
</html>
To anyone having the same problem: I couldn't figure out what was causing it, but I could get it done using the window.frame approach elaborated in this answer.
Lets see if I can describe my setup here...
I'm designing an angular app, as of now everything is all one page. Basically, when the user clicks a button, the controller sets which
"<ng-include>"
tag is visible. So my html looks something like this.
<html ng-app= "myApp">
<head>
<!-- header stuff -->
<!-- all the includes and everything -->
</head>
<body>
<div>
<!-- page nav bar, its a lot of html but it works -->
</div>
<!-- content area -->
<div ng-show= "showHome">
<ng-include= "home.html">
</div>
<div ng-show= "showProfile">
<ng-include= "profile.html">
</div>
<!-- etc... -->
</body>
</html>
And then in my controller, I'm just setting the proper "showHome", "showProfile", etc... as appropriate. My question is, this seems like a terrible way to scale, and this is my first attempt at an app like this.
So to reiterate. I want to give the user the appearance of a single page app, while swapping in html templates. Any ideas? Multiple pages would be ok, but I want to keep the same navbar at the top of every page.
I'd use ui-router instead.
It is a popular alternative for ngRoute and supports nested templates really well.
I have a twitter share button and a facebook share button in my blog page. The twitter counter always shows, but the facebook one only shows when you post something, and then goes away when the page is refreshed and does not show up again until something is posted. I want it to show all the time as to adhere to design cohesiveness.
<div id="share_stuff">
<div class="share_buttons">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class="share_buttons">
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
</div>
The page needs to be shared at least 3 times before the counter appears.
More information can be found here:
http://wiki.developers.facebook.com/index.php/Talk:Facebook_Share#Counter_only_displays_on_interaction
From what i can tell the official facebook share works in the way you have described above by design. If you use http://www.fbshare.me instead it will show you the count on page load etc.
Try this
http://addthis.com
The easiest way to do it for me was to add a css rule above your button:
<style>
.fb_share_no_count {
display: block !important;
}
</style>
<div>
<a name="fb_share" type="box_count" expr:share_url="data:post.url" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
This blog has the answer, you have to hack the FB.Share JS file and change one parameter, I can vouch this works as of this writing.
http://kopepasah.com/social-media/facebook/facebook-share-count-button/