In my index.html I have a sidebar that needs to be displayed only for certain views and not for all. So this sidebar is inside index.html and below it is the ng-view div. Also a global controller is associated with the body tag.
<body ng-controller='init'>
<div class='sidebar' ng-show='sidedisplay'>
</div>
<div ng-view=''></div>
</body>
Inside my init controller by default I have : $scope.sidedisplay = false; console.log('Here');
Now when I run the project, the html loads and I see the sidebar and then after some 4-5 seconds i get here in the console log and the sidebar disappears. Why is the controller loading so much later than the HTML?? How can i rectify this?
You probably want to make use of ng-cloak.
Related
My main web page (index.html) follows a common structure (simplified):
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
<div id=mainContent>
...
</div>
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
The web server is well configured such that all the static files are cached and don't get reloaded on the client side if refreshing the page.
Upon choosing a link from the site, mainly from the 'menu' or the 'footer', I want to display different content within the div tag 'mainContent'. Page layout, CSS, fonts, scripts, menue, footer - all is the same. I have identified several means to achive this:
Construct a new subPage.html file copying everything from index.html, then rewrite the div 'mainContent'
with the desired other stuff and change page specifics like title, description etc.
Or use php to include the desired content in mainContent and to change the page specific values like 'title'.
Link from index.html goes to href="subpage.html".
Drawbacks:
Maintenance: when changing anything in the outside 'wrapper', I'll have to edit
every subPage.
no idea how to easily transport values from index.html
to subPage.html, beside cookie (not always permitted) or URL
parameters.
use a javascript onClick handler (event listener) to load requested content from server using XHttpsRequests and exchange the innerHtml of div mainContent.
Drawbacks:
no noscript version possible.
my changing content is probably not indexed by Google bot and alike, since it is not loaded with index.html. Would it change the situation if the 'alternativ content' was saved in .html files in the base directory, such that it would be browsable and discoverable?
Pre:
keeps javascript variables
no need to reload outer page, thus best user experience.
use a 2nd div 'mainContent2' with style="display: none". With a javascript onClick handler toggle display style of both mainContent divs to none <-> block.
Pre:
easy to implement.
all content loaded and thus SEO indexed.
Drawback:
Everything has to be loaded at once, so the index.html might get pretty big.
[4. iframe probably not an option (as the src attribut is static)]
I tend to opt to alternative #2.
Any other technics recommended? What is the 'best practice'? How is this generally done by the pros? Suggestions? Please elaborate.
I'll give you a few answers based on each option:
PHP
You can use PHP to import the header and footer instead of the main
content, that way you have just one file with a header and another
with a footer and all the pages that you create with different
contents will import the header and footer, avoiding duplications.
JS
Do you need a no-script version? I have never seen someone who disabled js but I don't know your app, it could be a pre-requirement.
You can use a modern js framework like Next + React / Nuxt + Vue / Remix / Svelte / ... There is a lot of options here that can provide you an SSR (Server Side Render) and make Google Bot happy
SPA
This seems to be a SPA. You can use some of the modern js frameworks that I mentioned in the second item. You need to think about lazing load the images too. I don't know how big is this content, but you can try google lighthouse to see if there is some problem with page size in this approach, also, you could enable the gzip on the server.
OR...
All of the above
You can use all of them together too. A frontend with a framework getting data from an API written with PHP, why not? PHP can validate the request type and delivery an HTML if it's the first request or a JSON if the application is already loaded.
Most common solution probably a variant of your option 1. But different then you think. Create a header.php with the content
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
and create a footer.php with the content:
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
Then create an index.php like
<?php include('header.php'); ?>
<div id=mainContent>
...content index page...
</div>
<?php include('footer.php'); ?>
And then create subpages like subpage.php
<?php include('header.php'); ?>
<div id=mainContent>
...content subpage...
</div>
<?php include('footer.php'); ?>
This way if anything in the header or footer needs to change you edit the header.php file and the changes will take effect on all pages because the header.php gets included on every page.
I have a nested HTML page as:
<html>
<body>
<div class="container">
<nav class="item_list">...</nav>
<article id="item_details">
<object type="text/html" data="detailsPage?key=document1">
<html>...</html>
</object>
</article>
</div>
</body>
</html>
Inside the main div (class="container") there's a item list on the left (nav class="item_list"). On the right side, it is an article with id item_details. Inside the article, it is a nested html page which shows the details of a selected item. In the nested html page, there's a form to add new item or delete an existing item. This action needs to refresh the nav part.
So my question is - how to refresh the nav part in response of a button click from the nested HTML page? More specifically, I'm using Vert.x as my server application toolkit, it the resolution is by Vert.X, it will be much more helpful.
Thanks in advance.
refresh the nav part in response of a button click from the nested HTML page?
Attach a button click listener as a javascript function
In that function make a request to your vert.x backend with the appropriate data
Return the new nav response you want from your vert.x backend
Use that data in javascript to refresh the nav part
Ps This has nothing to do with vert.x and is regular webapp design patterns
I'm pretty new to web design, and I'm trying to build a dashboard for a project. So far, I've got my UI looking like I want it to. It basically consists of a header bar, with a navigation bar on the left side with some options that the user can click on. I want a click on each item to change the content in the central area. The way I thought of was simply to use:
document.getElementById("central text element").innerHTML = "the HTML I want to change it to";
This approach, functionally, does everything I would like. The only problem is, the content I would like to insert is not short. For each of my options, I basically have to create individual HTML documents that I could edit the content in, then run it through a converter like this: https://tomeko.net/online_tools/cpp_text_escape.php?lang=en, then copy it in. As you can probably understand, this method is not very streamlined, as every time I want to make some changes to the code, I have to copy that chunk of code into this converter then paste it into the JavaScript function.
Is there a better way to achieve what I'm trying to do here?
There are several ways to do this:
The <template> element
If you want all the content to be loaded in the page, you can use <template>.
const content1 = document.getElementById("content1").content,
content2 = document.getElementById("content2").content,
div = document.getElementById("div");
function changeContent(content) {
const nodes = [...div.childNodes];
for (let node of nodes) {
node.remove();
}
div.appendChild(content.cloneNode(true));
}
document.getElementById("add-content1-btn").addEventListener("click", () => {
changeContent(content1);
});
document.getElementById("add-content2-btn").addEventListener("click", () => {
changeContent(content2);
});
#div {
border: 1px solid black
}
<template id="content1">
<p>
This is some HTML content. It won't be rendered unless you use JavaScript.
It supports <strong>markup</strong>, of course.
</p>
</template>
<template id="content2">
<p>
This is another HTML content.
</p>
<ul>
<li>Yes,</li>
<li>it</li>
<li>supports</li>
<li>lists.</li>
</ul>
</template>
<button id="add-content1-btn">Add content1 to div</button> <button id="add-content2-btn">Add content2 to div</button>
<div id="div"></div>
Loading pages with <iframe>
You can use <iframe> to load another page inside a page. This is a great approach if the content is really big, because the main page won't need to load that content unless requested. You can change the src attribute of the <iframe> dynamically to load different pages. Note that the page you load needs to be a full page, with its own CSS and all.
<iframe src="https://example.com/">
I was trying to insert another html page into an php page by using "include"
and that html page is having some stylesheets imported,
When I insert that page, it disturbs my PHP page..
How can I restrict the CSS for that particular page only?
place the imported page inside a container div, and then give it an id like:
<div id='included_page'> Your page goes here...</div>
Then add #included_page .someClass{mystyle: property;} to each and every style defined.i.e, increase the level.
Add a class or id to each <body> and write styles accordingly like below
HTML
<body class='home'>
Home page content
</body>
<body class='about'>
About page content
</body>
CSS
.home .someclass{
}
.about .someclass{
}
Try this.
In Page[restrict the CSS]:
<?php
$type = 'exclude';
inlcude('page_to_include.php');
page_to_include.php:
<?php
if(!isset($type) or ($type !== 'exclude')) {
// Things to be excluded from Page 1;
}
Ref: PHP - include a php file and also send query parameters
Hello!!
i have a question and i haven't found any solution for it anywhere...
So, I have a button that link to internal div page (#page2) with a very long list, I need that the internal div page will be "loaded" before the transition will start...
Here is a very simple Sample Code:
<!-- Page #1 -->
<!-- ... -->
<div data-role="content">
<p>View internal page: goto Page 2</p>
</div>
<!-- ... -->
<!-- Start of Page #2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<ul><li>...</li>
<li>...</li>
<!-- About 300+ of: <li>...</li> -->
</ul>
</div>
So, Clicking over The link to #page2 should give you jquery mobile "Loading..." And after it "loaded" the content the transition should begin..
The reason Im doing it in the same page it that im inserting to the page#2 div dynamically all facebook friends (Long list), and it take a long time from the Click and until the transition begin...
Here is a nice example of what i need:
http://www.mpdtunes.com
Just go to: Live Demo-> Login -> Click Artists...
Any suggestions are welcome!
Thank you very much!!!!
Basically you want to do this:
Use button like this:
goto Page 2
Add a click event to it:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#to-page2', function(){
// Load internal page content
});
});
Where #index is an id of your button containing page.
Show loading animation aka ajax loader
setTimeout(function(){
$.mobile.loading('show');
},1);
SetTimeout is needed because web-kit browsers have a problem with dynamically triggered ajax loader.
Load your internal page content. Now if you are using 1 HTML page with multiple pages you can append new content to listview immediately. This is because listview is already loaded into the DOM. If you are using several HTML pages then store your page content into localstorage variable.
Hide ajax loader, again with setTimeout.
Start page transition with:
$.mobile.changePage("#page2");
If you have 1 HTML page then this is it. If you have stored your page content inside a localstorage then you will need to load it during the pagebeforeshow event of a second page, like this:
$(document).on('pagebeforeshow', '#page2', function(){
// Load internal page content from local-storage and append it
});
Last step is listview page content initialization. For that look at my other answer, just look for a topic regarding listview.