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.
Related
Okay, my english is not the greatest so I apologize in advance. Question is really stupid and I dont know how that is called but I will try to explain it here better. So I am making a template for one restourant and menus are changing every week. So is it possible to write paragraphs somewhere else ( in separated place (external or internal)) and then "call them" somewhere in .html.
Example. making methods in C# and then calling them anywhere when we want to
In my opinion the simplest method will be to use php.
Then in place with menu you can only use something like this:
<?php inlcude('menus/file.php');
And on server create a folder menus where you wil put php files with html.
All files can be simple html. There is no need to learn php just in place you want to call a file use code i placed earlier.
HTML doesn't have a good way to achieve this (although iframe exists).
This sort of thing is generally handled by software that generates the HTML, either when the page is requested (via something like the very basic SSI support in some webservers to full on server side programming (which you could use C# for)) or at publication time (via a build tool such as Gulp).
You could use jQuery to achieve it (if it is a simple website and simple menu), read more the related function on http://api.jquery.com/load/
You may also read a simple here: HTML File including another HTML file
I may also include a very basic example for you
main.html
<body>
<header>Some header</header>
<content>
<main class="the-menu"></main>
</content>
<script>
$(".the-menu").load("menu.html");
</script>
</body>
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 making a website which will have lots of photographs. When a user clicks on a particular photo, a new page will be loaded with that photo being displayed bigger in size. There is a next button which will take the user to another page where there is another photograph. Therefore, my website will have lots of sub webpages( a little more than the number of photographs I have on the website). So is it usually how these kinds of websites are made,i.e., with lots of webpages or is there any other alternative for it?
No, that's not the usual aproach, al least on these days.
When we encounter with a similar situation like your case, we usually try to make it dynamic.
For example, if you need to show a lot of photos with the same markup and format, maybe the best option is to have a template with a variable.
The variable will be the photo url and the template will be everything surrounding it.
The page is the same, but only the photo changes.
There are a lot of advantages of doing this. Mainteneance, simplicity, work-load, cache...
Of course that can be use in another cases, like viewing a new details, when you would have only a ViewNew page, and you pass a parameter with the identifier of the new so you can show the correct request.
There are plenty ways to achieve this, most of them require server side code, to handle and process the request, like:
PHP
ASP/ASP.NET
Java
ColdFusion
Perl
Ruby
Phyton
...
But, some of this operations, could be also achieve by javascrip, a client side script code.
You could work with pure javascript or use a framework to make things easy and compatible. Here's some examples of javascript frameworks:
jQuery
YUI
Mootools
Dojo
Midori
...
I don't know if you want a particular examples using one of this languages or only know alternatives. If you need examples or need more information I'll be pleased of provide some.
Also, It's common that even if you are using a server side code, use javascript too, because can handle the behaviour on the website and/or make ajax request for asyncronous requests.
EXAMPLES
JavaScript simple:
jsFiddle
HTML:
<div>
<button id="previous" onClick="previousImg();">Previous</button>
<button id="next" onClick="nextImg();">Next</button>
</div>
<div>
<img id="imgViewer" src="http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-1-icon.png" />
</div>
JavaScript:
var imgUrlTemplate = 'http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-$number$-icon.png';
var imgCounter = 1;
var imgViewerNode = document.getElementById("imgViewer");
function previousImg() {
if(imgCounter > 1) {
imgCounter--;
imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
function nextImg() {
if(imgCounter < 9) {
imgCounter++; imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
If you have 1 html page and in that you write the PHP include 'photographlink' in the body with a case system of some sort. It will use 1 html page and it will include a different photograph depending on which photograpg is clicked
http://www.php.net/manual/en/function.include.php
I think the better way is to use javascript, my tip is to use jQuery framework to dynamically load and visualize images. You can find in the web some plugins that can simplify your life.
demo of one plugin
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 ;)
I'm trying to add localization support to a Google Chrome Web App and, while it is easy to define strings for manifest and CSS files, it is somewhat more difficult for HTML pages.
In the manifest and in CSS files I can simply define localization strings like so:
__MSG_name__
but this doesn't work with HTML pages.
I can make a JavaScript function to fire onload that does the job like so:
document.title = chrome.i18n.getMessage("name");
document.querySelector("span.name").innerHTML = chrome.i18n.getMessage("name");
but this seems awfully ineffecient. Furthermore, I would like to be able to specify the page metadata; application-name and description, pulling the values from the localization files. What would be the best way of doing all this?
Thanks for your help.
Please refer to this documentation:
http://code.google.com/chrome/extensions/i18n.html
If you want to add localized content within HTML, you would need to do it via JavaScript as you mentioned before. That is the only way you can do it.
chrome.i18n.getMessage("name")
It isn't inefficient to do that, you can place your JavaScript at the end of the document (right before the end body tag) and it will fill up the text with respect to the locale.
Dunno if i understand exactly what you are trying to do but you could dynamically retrieve the LANG attribute (using .getAttribute("lang") or .lang) of the targeted tag and serve accordingly the proper values.