angularjs ng-cloak is not working when page load - html

I am new to AngularJS and trying to fix the issue where some of the HTML code displays before ng-if condition gets evaluated. I am using ng-cloak as mentioned in many other stack over flow URLs but it still doesn't work for me. I am trying to load default image if actual image on URL is blank and when page loads, even if actual URL is there, it first blinks with default image and then loads the actual image because ng-cloak doesn't work correctly.
Please help.
I have below code and CSS etc.
Index.html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>Some App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="app">
some code here
<div ng-view></div>
</body>
</html>
other.html
<div class="content">
<div style="width: 100px; height: 40px;">
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" ng-cloak>
<img src="image/default.png">
</div>
</div>

You can apply ng-cloak in your body tag. So, you whole body will be displayed only after angular's compilation.
<body ng-cloak ng-app="app">
..
</body>
This will solve your issue.

I did it always on my <html> tag. Like <html ng-app="someApp" ng-cloak>

The timeout function will do what you want:
// timeout function will give some time for page load.
$timeout(function () {
//your page load
$("#panelTask").html(res);
});

the best solution is to have a loader while your app is waiting for the data. Instead of putting the ng-if on the flickering element, put in on the parent component and show a loader (it could like FB does a sort of mock of your UI).

I had to add :
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
to my css file for ng-cloak to work.
Like here :How to correctly use ng-cloak directive?

<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" class="ng-cloak">
<img src="image/default.png">
</div>

Related

Simple Sidebar Navigation to populate main content

First, I know this is very simple and I'm as baffled as you are that I can't figure it out on my own. I have no background in web development and need to use github pages to document a project. I've been spinning my wheels on this for an embarrassing amount of time.
The crux of the problem is that I'm trying to use nested iframes, but with each layer I get another scroll bar and nothing scrolls quite in sync. If I set scrolling="no" content is hidden. This is exacerbated when I use a frames for the side bar.
Index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="mainheader">
<b> My Project Name
</b>
</div>
<body>
<div class="topnav">
Overview
Model Concepts/Patterns
Data Lineage
Entity Details
Jargon Glossary
Example Demos
</div>
<!-- This creates a frame in the lower body, with an unwanted scroll bar, but it's not too bad. -->
<iframe name="main_body" src="overview.html" height="100%" width="100%">
</body>
</html>
It gets more problematic is trying to do the left sidebar. It looks like I just don't understand how heights are inherited between frames. The image shows how the sidebars keep stacking up, and the scrolling is just not quite in sync. I've tried bumping up the height to 100000 and hiding scrolling, but then horizontal scroll is also eliminated.
<!DOCTYPE html>
<html>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<body>
<div class="container" style="display: flex; height:100%;">
<div style="display:inline-block;">
<iframe
src="cs_entity_sidebar.html"
name="cs_entity_sidebar"
frameborder="0"
scrolling="no"
width="100%"
align="left">
</iframe>
</div>
<iframe class="second-row"
name="main_overview_content"
scrolling = "yes"
height=10000
align="left"
>
</iframe>
</div>
</html>
This site has a tutorial that is almost what I need, just a simple layout without frames
https://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
Operative snippet:
<div id="main-container">
<div id="sidebar">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
<div id="content">Content Area</div>
</div>
But how to I get "Content Area" to populate with the linked html? When I try to do this in my own html is just brings me to a separate window without the top navigation.
This question also gets pretty close, but doesn't cover how to get the links and navigation working.
Furthermore, I have read the jquery/ajax is the better approach here, but none of what I'm doing in ajax has an effect. I'm on a corporate vpn so I'm thinking there is some proxy issue.
Any help is appreciated.
Edit: Jquery/Ajax approach which is not working. It doesn't fail, the click just doesn't do anything. I've tried various sources, including the google library, but src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" is what I've seen working on other projects in my company.
Note the screenshot, nothing loaded above "Above this is from the script"
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function () {
$('#link1').click(function(){
$('#main_body').load('test.html');
});
});
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
<div>Above is loaded from script</div>
<div>Below is loaded from a frame</div>
<iframe src="test.html" ></iframe>
</body>
</html>
edit2: Inspect view error
If I'm understanding correctly, you are trying to make a website that lets users navigate to a new page without triggering a page refresh. This is a modern feature of dynamic websites.
For this purpose, it is definitely preferable to use jquery/ajax over iframe because of the many styling issues related to iframes (think about responsive mobile webpages). Here's a simple snippet for implementation using jquery/ajax
index.html:
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function () {
$('#link1').click(function(){
$('#main_body').load('overview.html');
});
});
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
</body>
</html>
overview.html:
<html>
<style>
#wrapper {
background-color: yellow;
height: 200px;
}
</style>
<div id="wrapper">
<p>Dynamically loaded webpage</p>
</div>
</html>
link to a demo
Note that there are some security concerns to consider when you dynamically load content. You can read more about this in this question: Dynamic html page creation with jquery
Edit: Your code works fine on an online text editor. Ajax only works if you host the webpages on a server where the page can be loaded with supported protocol schemes such as http/https.

Google Apps Script not loading jquery mobile css

I'm trying to learn to use jquery mobile with Google Apps Script, and my hosted page isn't loading the CSS for it, it seems like. This code should have a gray header and footer bar, and if I copy and paste the dev data-page section, it should still only show up once. Neither of those things happen.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Testing</h1>
</div>
<div data-role="main" class="ui-content">
<h1>Hello, World!</h1>
<p>Welcome to my page</p>
</div>
<div data-role="footer">
<h2>Testing More</h2>
</div>
</div>
</body>
</html>
What am I missing to make this work?
Note: I also tried with jquery 2.2.4 instead of 3.4.1.. no difference...
Figured it out... it's two part:
First, the hosted version of jquery mobile is 1.4.5, which is still incompatible with jquery 3.
Second, jquery has to be loaded BEFORE jquery mobile, so it had to go above it on the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
I think you should be using .ui-header or .ui-footer there are only two instances in the css that use data-role and they are here .ui-mobile [data-role=page],.ui-mobile [data-role=dialog],.ui-page {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display: none;
border: 0
}
if you add .ui-header {background-color:gray } to the css then the background of the header is gray.
You can see all of this very clear if you view sources and prettify the code in Chrome Developer Tools

different background images for different pages loaded using div tag

i am working on multipage application by loading mainpage.html into index.html by using tag i need background image different one for different html pages such as mainpage,page1,page2 etc.can any one help ??
index.html
<html>
<head>
<meta charset="UTF-8">
<title>wsdl Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!-- This is static header, it will be shown always -->
<div id="header">
<h1>WS DEMO</h1>
</div>
<div id="wrapper">
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pagePort").load(path + "pages/MainPage.html", function(){
$.getScript(path + "js/MainPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
body{
background: red;
}
<!-- begin snippet: js hide: false -->
//mainpage.html
<script>
$.getScript(path + "js/MainPage.js");
</script>
<p id="currentPage"></p>
<div class="container">
<label>username</label> <input type="text" id="username"><br><br>
<label>password</label> <input type="text" id="userpwd"><br><br>
<input type="submit" value="login" class="appButton" onclick="validate();">
</div>
<p id="mytable"></p>
If you mean you want a different background image applied to the body element but you only have control of a fragment of the page, a style element should work - you might need !important to override the default:
<div id="pageport">
<style>
body { background-image: url('images/newbg.jpg') !important; }
</style>
</div>
In connection with the comment I made I have decided to post my solution as an answer. My solution is rather simple, add a class to the body tag and then change the background using an external CSS file - based on the classes used.
e.g:
...
<body class="index">
...
//in the CSS:
body.index {
background: #F00;
}
Then simply in each of the different HTML pages, change the class of the body tag to suite the background you want.
Check this Plunk for live example
If you need any clarification, drop a comment and I'll get back to ya!

CSS file not getting loaded on IE 10 and Google Chrome

I have just started learning html and css.
I have an html file "index.html" with code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="title">My App</div>
<div class="app">
<div class="screenshot">image1</div>
<div class="description">text</div>
</div>
</body>
</html>
I have a css file "style.css" file with code:
.description {
color: red;
}
Both are in the same file location -
C:\Users\ravalesmita\Desktop\Portfolio\toplist\index.html
C:\Users\ravalesmita\Desktop\Portfolio\toplist\style.css
Using IE 10 and google chrome.
Expected: text should have red color when loaded on the browser.
Actual: text color doesn't change.
Can anyone point out why is the text within class description not showing red color?
Have you saved the file previously in another folder, before you made a change to red? If so the browser may be reading that file instead of the one you are wanting it to. Try running it like this. If it works its not finding your css file for some reason.
<!DOCTYPE html>
<html>
<head>
<style>
.description {
color: red;
}
</style>
</head>
<body>
<div class="title">My App</div>
<div class="app">
<div class="screenshot">image1</div>
<div class="description">text</div>
</div>
</body>
</html>

How can I choose who of the tabindex="0" start when the page load

Important note: all the indexes must be 0 (tabindex="0"), I can not use another numbers (like: tabindex="1",tabindex="2"...tabindex="n").
for example: my html code is:
<div tabindex="0">first</div>
<div tabindex="0">second</div>
<div tabindex="0">third</div>
<div tabindex="0">Etc...</div>
Now - I want to focus on the second div by default, so when I click on Tab - the focus will be on third div, and so on
<!DOCTYPE html>
<head>
<meta charset="utf-8"></meta>
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[tabindex='0']").eq(1).focus();
});
</script>
</head>
<body>
<div tabindex="0">first</div>
<div tabindex="0">Second</div>
<div tabindex="0">third</div>
<div tabindex="0">Etc...</div>
</body>
</html>
You can use jquery next function to get next sibling.
Here you have working example: https://jsfiddle.net/2muaxbbf/