I am making a sort of "html app" which involves a very large number of seperate .html files. The 'app' is a sort of 'pro tips' thing, where on every page, is a life tip. I am wondering if there is a code for opening the next html file within the same directory, instead of changing the next tip's in each html file to open it.
Example:
Next Tip
Then in the next tip's html file I would have to put:
Next Tip
And so on:
Next Tip
Sorry if I am not being clear enough.
If you want a client-side only solution this might work for your scenario. Give the a tag an id and add the script part to very page. It will parse your current filename, parses the number from it, adds one and buildsup the next url, replacing that value on your a tag
<html>
<head>
<script src="nav.js"></script>
</head>
<body>
<!-- REMEMBER TO PUT THE ID ON IT -->
<a id="next" href="n.html">next</a>
</body>
</html>
and create a new file called nav.js in your folder and add this code to it:
window.onload = function() {
var a=document.getElementById('next'),
l=document.location.href,
s=Math.max(l.lastIndexOf('\\'),l.lastIndexOf('/')),
d=l.indexOf('.'),
f=l.substring(s+1,l.indexOf('.')),
p=l.substring(0,s+1),
e=l.substring(s+1+f.length, l.length),
n=parseInt(f,10) + 1;
if (a) {
a.href= p + n.toString()+e;
}
};
You could rename all the files into an ordered way, for example tip1.htm, tip2.htm, etc. with Bulk Rename Utility or Ant Renamer if you don't want to get your hands dirty with lots of CMD and PowerShell. After that, add this php code to your main page:
<?php
$file="";
$counter=0;
$arr=array('tip','0','.htm');
function next_file()
{
$counter=$counter+1;
$arr[1]=streval($counter);
include(join("", $arr));
}
?>
Then just call the next_file() function every time the user clicks on the link.
If you have files 1.html, 2.html, etc. this will work.
On your html pages include a blank div (where you want the link to be):
<div id="link"></div>
Include a separate javascript file in the pages:
<script src="app.js"></script>
And then write this in that javascript file:
window.onload = function() {
var maxPages = 3;
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var thenumber = filename.replace(".html", "");
thenumber++;
if (thenumber > maxPages) {
document.getElementById("link").innerHTML = 'Next Tip';
} else {
document.getElementById("link").innerHTML = 'Next Tip';
}
}
Set maxPages so when you get to the end of all the tips, you will go back to the beginning.
Related
I am having troubles passing 1 variable (dateToExport) into an HTML "showConflict_HTML" and then running a function/script within that HTML by passing dateToExport.
1 Script ("exportButton")
1 HTML ("showConflict_HTML")
The Process goes like this:
The script "exportButton" runs passing (dateToExport) into it
And then the "showConflict_HTML" html pops up in which the user clicks a button "Yes, Overwrite and Export"
The script "exportButton" then runs again and passes the dateToExport into it again
When I click the "Yes, Overwrite and Export", nothing happens and the "google.script.run.exportOrderData(1, dateToExport_captured);" does not run in the HTML. Also there is no error given so I can not figure out why. Anyone have any idea why?
function exportOrderData(override, dateToExport) {
if(override == 1){
execute_exportOrderData();
easterEgg = 1;
}
else if(override == 0){
var userInterface = HtmlService
.createHtmlOutputFromFile('showConflict_HTML');
userInterface.dateToExportFromServerTemplate = dateToExport;
SpreadsheetApp.getUi()
.showModelessDialog(userInterface, 'Existing Customer Order(s) on ' + dateWithConflict);
}
}
<!-- "showConflict_HTML". This HTML file is will run the exportOrderData function once the Override button ("my_button") has been clicked !-->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet">
</head>
<body>
<button id='my_button'>Yes, Overwrite and Export</button>
<script>
`THIS SHOULD PASS THE dateToExport Varaible so we can access it in this HTML Script`
var dateToExport_captured = dateToExportFromServerTemplate;
// Once the Button is Clicked, the following occurs
document.getElementById('my_button').addEventListener('click', _ => {
// Once the Button is Clicked, the Loading Circle Effect Function will start running here
google.script.run.loadingCircleEffect();
google.script.run.exportOrderData(1, dateToExport_captured);
});
</script>
</body>
</html>
function exportOrderData(override, dateToExport) {
Try using force-printing scriptlets in your HTML, along the lines of this:
var dateToExport_captured = <?!= JSON.stringify(dateToExportFromServerTemplate) ?>;
Notes:
JSON.stringify can be omitted if your value is a string or a number.
Per the documentation, you should NOT use this technique if dateToExport comes from untrusted users. If it's your own system that generates it then you should be fine.
Although this is not an answer it may shed some light on what is wrong with your code.
To pass dateToExportFromServerTemplate to the html page you need to change the code in exportOrderData as below using templated html createTemplateFromFile
var userInterface = HtmlService.createTemplateFromFile('showConflict_HTML');
userInterface.dateToExportFromServerTemplate = dateToExport;
userInterface = userInterface.evaluate();
For the page to receive the variable you need to use a scriptlet.
var dateToExport_captured = <?= dateToExportFromServerTemplate ?>
But what I don't understand is dateToExportFromServerTemplate never changes so why display a new page?
So I was able to fix this by using localStorage.setItem('dateToExport_transfer',dt) in the HTML where the user selects the date and then in my "showConflict_HTML" HTML I call var dateToExport_captured = localStorage.getItem('dateToExport_transfer') to grab that date from the other HTML.
On the html for my page I have a <script id="pagedata"></script> element which I would like to add an element to only if a certain partial is rendered. In my layout.cshtml I have the following:
#if (Brand != null)
{
#Html.Partial("_UseApp");
}
And in my _UseApp.cshtml:
#{
var iosAppUrl = // retrieve iosLink from our CRM database
var androidUrl = // retrieve android link from our CRM database
// Here I want to add the above variables to the <script id=pagedata> in the html page. Something
like this:
PageData.AddPageData("appstore", iosAppUrl);
PageData.AddPageData("playstore", androidUrl);
I cannot work out how to do this - I set breakpoints in the UseApp.cshtml file and the file is being called, but I don't know how to add these script elements. I don't want to just add them into the layout file because I want to keep the app logic separate. Can anyone help? Thanks
My approach to this would be to use jQuery, as reading HTML elements in C# is rather difficult.
In the script below, it checks if the HTML exists, and if it does, we will assign an attribute to it. The second argument in attr() will be your link, note that you can use C# to get the value from your Db, by using the model or ViewBag.
#section Scripts{
<script>
$(document).ready(function () { // on ready
if ($("#replaceWithYourId").length) { // check if ID exists
$("#pagedata").attr("data-playstore", "link") // use jQuery attr method.
}
});
</script>
}
I'm writing a book using HTML. If I write it in one html file, the whole code becomes long, so I want to save each chapters to different files and load them in main html. I mean there are files like chapter1.html, chapter2.html, ... and I want to include the contents of them in the other file main.html.
Is this possible?
If you wish to do this dynamically. you can use javascript instead of <iframe>. Save the HTML content you want to include inside content.html
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("data-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("data-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
}
</script>
You can Add it to the HTML page Later like below.
<div data-include-html="content.html"></div>
You could use iframe to embed each page into main.html
For example:
<iframe src="chapter1.html"></iframe>
<iframe src="chapter2.html"></iframe>
You could also create it into a slideshow, so that it looks more like a book.
That depends on what you want to achieve. In general it's not bad to split the content by Chapters and just link to them. That way the reader isn't overwhelmed and if the book is large it reduces loading time.
Where and how do you want to publish that book? HTML provides multiple means to do what you want (Frames and iFrames, both not that "cool" nowadays), however if you're using some Server Side Scripting (like a CMS), you could use other means there.
Or you could have seperated html files and then use some simple concatenation (like with batch/linux shell) to generate a the big output html then.
I'm writing a very simple HTML file that contains some tables.
I'm trying to have a cell value, which is basically a link. by clicking on the link I'd like to open a file in an excel application in a specific sheet and row.
Notes:
windows environment
HTML is opened by a standard browser
the file exists locally (simple path: C:\test.xlsx)
excel application path is unknown
I'd like to keep the HTML file as simple as possible. good design is not a top priority. just need to make it happen.
(low priority) if excel instance (for a specific file) is already open, I'd like to change the active sheet and highlight the row in the open instance
<HTML>
<HEAD>
<Title>Excel Linking Example</Title>
</HEAD>
<body>
<p>
<a href="http://localhost/excel/asheet.xls#Sheet2!D4">
This link will open the Excel file to the second page with the focus on
cell D4</a>.
<a href="http://localhost/excel/asheet.xls#TableName">
This link will set the focus on a named area of the spreadsheet
</a>.
</p>
<form>
<input type=button
value="Via Jscript"
onclick='location.href = "asheet.xls#TableName"'>
</form>
</body>
</html>
source: http://support.microsoft.com/kb/197922
I solved it using javascript:
<script type="text/javascript">
function open_excel_file(path,sheet,f_range)
{
if (!window.ActiveXObject)
{
alert ("Your browser does not support this feature.\n"
"Please re-open this file using IE browser.");
return;
}
fso = new ActiveXObject("Scripting.FileSystemObject");
if (!fso.FileExists(path))
alert("Cannot open file.\nFile '" + path + "' doesn't exist.");
else
{
var myApp = new ActiveXObject("Excel.Application");
if (myApp != null)
{
myApp.visible = true;
Book = myApp.workbooks.open(path);
var excel_sheet = Book.Worksheets(sheet).Activate;
myApp.range(f_range).Select;
}
else {
alert ("Cannot open Excel application");
}
}
}
</script>
usage example:
<button onclick="open_excel_file('f1.csv', 's1', 'A1:Z7');">Open</button>
I was trying to develop a Chrome extension that can display me the last 3 news from a soccer news site (obviously the page is not open in any tab), by refreshing every 5 minutes. My ideea was to load the page inside an iframe and, once the page is loaded, access the page DOM and extract only the text nodes with the news. I've tried in many ways using ready and load functions, I tried to follow this solutions here but i always get warnings. My question is: is there a way I can do that without having troubles with cross-domain security? Are there any simple examples i can use?
Here's how you could do it using JQuery (please keep in mind I dont know JQuery, just saw this approach somewhere and thought it might work for you).
I put this in a popup and it worked....
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
function renderNews(newsList){
$('#news').html('');
$(newsList).each(function(i,item){
var link = document.createElement('a');
$(link).attr('href',item.link);
$(link).html(item.description);
$(link).click(function(){
chrome.tabs.create({url:$(this).attr('href')});
});
var linksDate = document.createElement('span');
//$(linksDate).text(item.date);
$(linksDate).text(item.day + '-' + item.month + ' ' + item.hour + ':' + item.minute+' - ');
var listItem = document.createElement('li');
$(listItem).append(linksDate).append(link);
$("#news").append(listItem);
});
}
function getNews() {
$.get("http://www.milannews.it/?action=search§ion=32", null, function(data, textStatus)
{
if(data) {
var news=$(data).find(".list").find('li').slice(0,3) ;
$("#status").text('');
var newsList=[];
$(news).each(function(i, item){
var newsItem={};
newsItem.description=$(item).find('a').html();
newsItem.link='http://www.milannews.it/'+$(item).find('a').attr('href');
newsItem.date=$(item).find('span').first().text();
newsItem.day=newsItem.date.split(' ')[0].split('.')[0];
newsItem.month=newsItem.date.split(' ')[0].split('.')[1];
newsItem.hour=newsItem.date.split(' ')[1].split(':')[0];
newsItem.minute=newsItem.date.split(' ')[1].split(':')[1];
newsList[i]=newsItem;
});
renderNews(newsList);
localStorage.setItem('oldNews',JSON.stringify(newsList));
}
});
}
function onPageLoad(){
if (localStorage["oldNews"]!=null) renderNews(JSON.parse(localStorage["oldNews"]));
getNews();
}
</script>
</head>
<body onload="onPageLoad();" style="width: 700px">
<ul id="news"></ul>
<div id="status">Checking for new news...</div>
</body>
</html>
And dont forget to put the urls your getting with the xhr stuff in the permissions part of your manifest....
http://code.google.com/chrome/extensions/xhr.html
Use xhr to load the page and use jQuery or a regex to parse the raw HTML for the data you are looking for.
Keep in mind that the destination site may not want to you access their site in such an automated fashion. Be respectful of their site and resources.