I currently have dashboard showing health of production as whole and all specific services. But it takes a lot of unnecessary time to get to specific service.
I tried to solve this issue by adding Markdown Tile with html text that includes javascript function to scroll to specific spot on dashboard (on top of page in example):
<html>
<body>
<button onclick="scrollToTop()">
Click to scroll to top
</button>
<script>
function scrollToTop() {
window.scrollTo(0, 0);
}
</script>
</body>
</html>
But this seems to only scroll in this specific tile not whole window.
Only other solution I can think of is creating single dashboard for specific service and travel to them using link option in markdown(but this would create quite lot dashboards...)
My question is if my javascript solution is possible and I used it wrongly or there is different approach how to achieve it.
HTML content of the markdown tile is pre-processed by the Azure portal before it's rendered. This is done to make sure that customizations won't affect the security or layout of the portal. During that pre-processing, any part of the HTML that poses a potential threat is removed.
The following types of content aren't allowed by the portal:
<script> tags and inline JavaScript evaluations
<iframe> tags
<style> tags
So your JavaScript solution is not possible with the current version of Azure Portal.
As an alternative, you can break down all tiles into logical groups and place them on separate dashboards. If there are too many dashboards and it is difficult to navigate between them using the standard dropdown menu, you can create a special dashboard for navigation and put all required links into one or multiple markdown tiles. Here is a simple example of how content of such markdown tiles can look like:
<a href='https://portal.azure.com/#URL_1'>Dashboard 1</a>
<br/>
<a href='https://portal.azure.com/#URL_2'>Dashboard 2</a>
<br/>
<a href='https://portal.azure.com/#URL_3'>Dashboard 3</a>
Related
I am using jupyter notebook to develop a sort of proof of concept for a project of mine, right now I have the 2 pages loaded in the same iframe in one jupyter notebook cell. Right now I don't know what approach to take to solve the communication between these 2 pages in the same widget.
My 2 pages:
<!DOCTYPE html>
<!-- PAGE 1 -->
<html>
<body>
<button type="button" class="snd_Button">Click</button>
</body>
</html>
---------------
<!DOCTYPE html>
<!-- PAGE 2 -->
<html>
<body>
<h1 class ="Listener">I must react.</h1>
</body>
</html>
As you can see they are quite simple, what I wanted to know is what would be a good approach to communicate between them. I want to make so that when I click on the button of page 1, the text of page 2 dinamically changes.
I am planning on using javascript and searched solutions around it but I am not sure of how to continue, as I am new in JS programming and not familiar with its libraries (I've found some frameowrks like node.js or electron but I am not sure they should be applied here).
HTML doesn't support modifying the contents of another html page in this way. You'll likely need some server-side code to facilitate this.
In your case, I'd recommend using Websockets. There are plenty of youtube tutorials for similar functionality - search "Websockets Chat App" which should give you a good understanding of how to fire an event on one page, and then listen for that event on the second page.
Edit: You mentioned you have two pages rendering inside the same iframe - that doesn't sound right as iframes can only point to a single source.
In the case that you want to interact between an iframe and its HTML parent, maybe using cross-document messaging like this will work
I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. I want to create a single site menu. So if i press on a list item the browser should open an other content but on the same page. I tried using css with targets but everytime i click a new target the tagets will overlap and the old content will not disappear. I tried using Javascript with innerHTML but in javascript i need to write the whole page in a single line (.innerHTML ='websitecode') this will create a horrible overview.
Is there any other possibility to create something like this? Maybe with the require() / involve() function in php?
Thank you
From your question, what I understood is you want menu navigation without loading the content again.
`http://codepen.io/ArslanRafique/pen/raZybL`
Above is the snippet, I recently developed, simple menu navigation by using simple CSS and HTML. You can achieve simple menu navigation by using HTML label and can swap your views accordingly.
Please have a look at shared snippet, hope it will help you.
Sounds like you would like to create a single page web application:
There are many great javascript frameworks for this, try angular.
https://www.airpair.com/angularjs/building-angularjs-app-tutorial
Put your menu in the header file, and the content you want to replace in to views.
Or use angular UI-router https://github.com/angular-ui/ui-router/wiki
There are few possibilities to achieve your goal.
The simple and not so elegant one would be to generate the complete content and set anchors on the page. From the menu the user can call the anchors and will be brought to a desired part of the page. Example:
<!-- Menu -->
<ul>
<li>About us</li>
<li>Products</li>
</ul>
<!-- Page contents -->
<div id="aboutus">This is about us.</div>
<div id="products">Our products.</div>
More elegant, sophisticated and professional approach would be creating a SPA (single page application). It would include some techniques like AJAX, where you can load (or remove) contents on the page without refreshing.
There are many modern JS frameworks that can help you, for example AngularJS, ReactJS, etc.
Wikipedia offers also more information on SPA:
https://en.wikipedia.org/wiki/Single-page_application
So Arlan's version looks a lot prettier, but you can also use javaScript with divs that you can hide or display with functions. You can format the divs in your css with whatever you want. May get a little clunky if you have a long menu...
<div id="divOne">This will show some text</div>
<div id="divTwo"><p>This will show even more text</p><p>I may even format it differently</p>
</div>
<div id="divThree">This shows text that is different from the other two</div>
var formatOne = document.getElementById("button1"); //create handle for first button
formatOne.onclick = function() { //add functionality
document.getElementById("divOne").style.display = "block";
document.getElementById("divTwo").style.display = "none";
document.getElementById("divThree").style.display = "none";
}
Jsfiddle to show the functionality.
https://jsfiddle.net/lattivalidus/s7a9dLe7/
I´m starting to develop a Chrome App just to test it.
It seems that this kind of applications (desktop app at the end) must be developped with the single-page concept in mind.
But my application consists of three pages or "sections": One to control a web-cam, another to watch a streaming and the last to control a videoconference.
I´ve been reading and coding a bit within the Chrome Platform developing center, and just could find basic tutorials with one .html page.
So, my question is: What is the best way to load different .html pages (because i need to show different UI sections) in a Chrome App? I´ve seen that Google uses AngularJS to implement an MVC pattern, but i don´t know how to change from one view to another (thinking of views as .html pages) in that scenario (because i´ve never used AngularJS).
Thanks!
Is there a specific reason you need multiple HTML pages? It's pretty straightforward to do something like this:
<html>
<body>
<div id="tab_1">Section One</div>
<div id="tab_2">Section Two</div>
<div id="tab_3">Section Three</div>
</body>
</html>
and then show/hide each div according to which part of your app you want to show. CSS frameworks like Bootstrap are designed to work well this this kind of approach, turning the set of divs into a pane with a left nav, or a content area with a tab strip, all of which match the needs of a typical app UI.
So I have a nav bar that I want to link to different pages that all look the same but have one different section on them. When I came to creating the links I realized that it will only link to the other page but not the specific section on the page . So basically I had the idea of an anchor tag but linking to another page.
I did it this way because I have a basic knowledge of coding and don't know how to use php and javascript. Is there a way to do this with what I have? Or do I have to try a different method entirely?
I am just learning javascript now so that can be an option. I heard you could do something with arrays? (But not any jquery as we are not allowed to use that for our assignment) I've also heard about iframes also but I don't know too much about them.
CODE:
HTML
<nav>
<ul>
<li>TOURS,PRICES & STANDARD FLIGHTS</li>
<li>MEET THE STAFF</li>
<li>CHARTERS</li>
</ul>
</nav>
if your page toursprices.html contains a div with id "abc", and you want to link to that section, you just have to write the href like this:
TOURS,PRICES & STANDARD FLIGHTS
You can use:
<a id="different_section_1">Different Section</a>
in the target page and in the navbar use:
Page
But if your pages are essentially the same with one area that changes. You'd probably be better of using an iframe or switching out blocks with javascript.
As "user3472089" said you can point the a certain element through its id.
I use this at the top of my gallery:
And at the bottom I just put a link or a simulated button that leads to that anchor:
<a href="#top">
<div id="top_anchor">
UP
</div>
</a>
On my HTML index page, I am using a popup javascript code that has something like
<li> <font color ="#000"> » </font> <font color ="#ccc">
Some text</font><b>, XYX, Country</b></li>
<li><font color ="#000"> » </font><a href ="secondpage.php" alt="Blog" />
I used a free xml-sitemap generator and strangely, the second li which is a regular a href URL and shows up in the sitemap as a linked page. However, the first one which calls the page using a javascript function does not show up.
This got me thinking,
Would this impact SEO results, would search engines also skip JS code and hence not crawl the linked pages which open in a popup?
Or is this an issue with the sitemap generator that does not understand JS and I have to manually create it?
Totally new to this. Was hoping to get some advise .
thanks!
Ryan
answer will vary based of crawlers, but you should keep your markup readable and less dynamic in areas you want crawler to read or you can follow the guidelines provided. For specific answer to your question:
Since 2009 Google looks for and finds OnClick links in any and all HTML tags. When found they will add the URL to their crawl.
If there is sensible "anchor" text then the text of the element will be used as anchor text.
The OnClick link also passes PageRank.
For more info:
http://www.searchenginepeople.com/blog/onclick.html
http://seogadget.com/google-does-not-crawl-hidden-java-onclick/