I am just starting to learn HTML. I am trying to understand if it is possible to only have one element in the mainpage that can be use on every other pages instead of rewriting it onto every other single html file?
Thank you.
What you are talking about is called a component. A component is a reusable piece of small elements that you can use anywhere in your html. You can do it in two ways:
Server side: Make a function where you store that specific component.
Dynamic template: Use something like VueJS,ReactJS or AngulerJS to create and use a component where ever you like it. You can also use JS too. But I suggest VueJS,ReactJS or AngulerJS.
Related
I have the following scenario. I am writing a complex component that is using three-js:
The component manages complex mouse interactions and updates other elements in the DOM using two-ways data binding: variables, JSON objects, mouse interactions, etc.
I start using the component in few part of my application but I needed to substantially modified the threed-viewer.html so I made a copy of the whole component ending up having duplicates that are hard to maintain.
All flavours of the component share 80% of the javascript code and bindings but they have substantial UI differences. So I had the though of create different 3 basic component (minimal javascript code) that I can inject into the threed-viewer.html using a selector and a variable to decide which template to load:
this does not compile as the html files have all the variables and bindings from the original components but they are not present in the typescript files.
Another solution could be to have a single html managed via ngIf but it will result in a long, messy, difficult to manage file. Is this the only option I have in Angular. Any other idea?
Thank you.
You can have a shared service and then add three different components but js code won't be duplicated as it will be in the service.
Use two way bindings in all 3 components using the service variables, functions and objects
I have did long time ago - the pages and article editor. Two different templates, same code.
I used articles component as "parent", and extended it to news editor.
Looks like this:
#Component({template: 'blah blah blah'}) export class parent {}
#Component({template: 'blah2 blah2 blah2'}) export class child extends parent {}
Hopefully this is the solution you were looking for.
Two different components, two templates, one code.
Of course, you can have the "parent" abstract class for both where you can save all methods you need.
It's OOP baby ;)
I have a HTML page that displays a SVG element (a Business process diagram) using some javascript libraries. A String variable, say 'str' needs to be given to html function.
After reading this, I plan to use widgets. So far I understand that I need to copy all scripts to Widgets: Test. For creating the hook, I write
{{#widget:Test|str=UserTask_1}}
The problem is that UserTask_1 is a variable as well. It is different each time.
Can someone help how can I add this dynamic information to my hook? This hook is a hyperlink from a previous page. In the previous page, I send the str=UserTask_1 through JavaWiki Bot.
PS: I have come-across SMW for first time. Please excuse if my language is not very technical at the moment.
Thanks.
i created a site, And added pages to my site, since page size exceeds i need to create pagination in html i have created this method
123
in this way i created
Problem is when i add new page i need to replace all code again like this
1234
ever time when i add new page i need to replace all code is ther a way to do this without PHP
Can sombody help me any idea to do this in html
Do not re-invent the wheel. Use datatables, they provide sorting, pagination (client side and server side), export and a number of additional features.
http://datatables.net/
Include the files and just add this.
$(document).ready(function() {
$('#example').dataTable();
} );
This is a very basic and good example, you should go for it.
http://datatables.net/examples/data_sources/dom.html
This cannot be done purely in HTML. You must use something like PHP, or you could use Javascript.
You can make just one HTML file called "Pagination.html" include all your links there and then include that Pagination on every page using one of the following methods.
You can use Javascript: javascript
Or you can use html5: html5
Or there are also, others solutions to solve your problem like this: other
You better use some Javascript oriented solution, html5 support for including files still very poor.
unfortunately, this won't be possible without using some other technology that is not HTML. You can dynamically generate pages using javascript (JS), PHP or other technology, but not just raw HTML.
You can name your pages something like:
page_1.html
page_2.html
and then whichever editor you are using probably has a search & replace function, so you could use that to speed up things. I hope this helps.
I want to know how the coded-ui in web application utilizes DOM of that page. Or is it related to that page's rendered html is coming?
Edited: If suppose i have a grid having rows and column and i want to capture any particular column in it, then do coded-ui takes the help of the rendered html in this process (id,tagname etc) ?
you can utilize the htmlcontrols which is listed in below url:
https://msdn.microsoft.com/en-us/library/microsoft.visualstudio.testtools.uitesting.htmlcontrols.aspx
I used codedui jquery extensions available in NuGet here
. Once you will add this dll as a reference you can make use ExecuteScript() method for running a jquery script inside coded-ui. Similary you can make use of other built in members.
I am developing a project and find that there are elements that are common to all pages, I wonder if there is any way to define these elements generally and call them from your html to avoid having to define each of the pages. thank you very much for your help
test.html
<div>Menu</div>
When you need to have this menu, just call this code in your page:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
load()
Another option could be AngularJS, or just something like includes with PHP.
I don't know any way to do exactly this with pure HTML, but by mixing in a little server side script, you can. Just to give you an idea what it would look like:
This example uses PHP. If you are on a Microsoft server, you would need to translate this example into .NET or .aspx.
First, save the following to a file called "mytest.php" in the same folder as your other pages. (You can put it in a subfolder if you wish, but for this example I will keep it simple).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Just one line for this test. A little useless, but you can see the point.
Now, in the <head> tag of your HTML, you can do this (I added the <head> tags just so you can see it... You would not want to have TWO sets of <head> tags.)
<head>
<?php include 'mytest.php'; ?>
</head>
Now, visit the page and display the HTML and you should see that line incorporated into your HTML. Note that any document that contains PHP code (as above) must end with a .php extension.
As #loops suggested, I would highly recommend AngularJS for the rescue.
It's a great MVC framework built with JavaScript and no external dependencies.
It offers the possibility to create custom elements using their Directives
So you could create a new element <mymenu></mymenu> and you can give this new tag some behaviour as well as bind events to it.
AngularJS takes care of all the rest and your new tag will be available across all the pages of your application.
And yes, you are correct thinking that should be done on the client side rather than server side.
I am happy to provide a full working example for you once you get your head around the framework first. Otherwise I think it will be too much information at once ;)