I worked on a little startpage for my browser. Now I would like to make some changes to it, so it updates the index.html file depending on a text file, when this got changed. What whould be an efficiant way to solve this problem?
My approach would be to create a text file and read line by line from it and update the html file. In the text file I would store the links shown on my startpage - I thought maybe something like this:
|cat_media
https://mailbox.org,mail
https://netflix.com,netflix
...
http://crunchyroll.com,crunchy
https://jott-uh-be.bandcamp.com,bc
|cat_social
https://pr0gramm.com,pr0
https://stackoverflow.com,stackoverflow
https://twitter.com,twitter
https://instagram.com,insta
When the line starts with the symbol |, it creates a new <div> with the class category and the string in that line (e.G. class= 'category cat_media'). Otherwise, if the line starts with http, it will add a href-link (e.G. <a href='https://mailbox.org'>mail</a>) to the html-code.
I got this website hosted on my raspberry pi with nginx and uploaded it to my github pages.
You don't have to update the index.html file.
You can create dynamic content.
You can use PHP:
You can learn it here:
https://www.w3schools.com/php/default.asp
And here is how to read a file
http://php.net/manual/en/function.fread.php
Or if you cant use PHP you can use Javascript:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(() => {
$.ajax({
url:'your-config-file.xt',
success: function (data){
console.log(data); //this is the config file. just for loop it and modify the dom
}
});
});
</script>
But your config file must contains the string how the links should be shown.
For example:
|catergory one
yt: https://www.youtube.com
Related
I have a requirement to display rtf file in my HTML. I am using object tag to embed my file into html.
When I use below code showing the plugin is not supported. Is there any way I can display rtf type document in my HTML
<object data="assets/display.rtf" type="application/rtf"></object>
Note: I am able to display PDF file with the same approach
After trying a lot found something.
First i downloaded the rtf.js from this link. rtf.js . Then went through this link. getting started with rtf.js. (download entire dist folder and place it into your html folder. dist folder doesn't contain jquery min js plz download it. and include all the script files in your html). Below is the code i modified. (Entire rtf will be converted into objects). Along with the following code please include the default code given by rtf.js.(Please make sure your rtf file is in proper way.)
const rtf =
`{\\rtf1\\ansi\\ansicpg1252\\deff0\\deflang1033{\\fonttbl{\\f0\\fnil\\fcharset0 Calibri;}}
{\\*\\generator Msftedit 5.41.21.2510;}\\viewkind4\\uc1\\pard\\sa200\\sl276\\slmult1\\lang9\\f0\\fs22 This \\fs44 is \\fs22 a \\b simple \\ul one \\i paragraph \\ulnone\\b0 document\\i0 .\\par
{\\colortbl;\\red0\\green0\\blue0;\\red255\\green0\\blue0;}
This line is the default color\\line
\\cf2
This line is red\\line
\\cf1
This line is the default color
}
}`;
<div id="display">
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
doc.render().then(function(htmlElements) {
//console.log(meta);
//console.log(htmlElements);
console.log(htmlElements);
var display = document.getElementById("display");
for(var i=0;i<htmlElements.length;i++){
//console.log(htmlElements[i][0].innerHTML);
display.innerHTML+=htmlElements[i][0].innerHTML; //RENDERING ALL DIVS INTO display DIV
}
}).catch(error => console.error(error))
</script>
I am a technical writer and in the process of importing our content (HTM) into a new platform (Still HTM format). During this process I also want to use Prettyphoto to give users the ability to click on screenshots to vew a bigger version.
I have this now in my html code:
<a rel="prettyPhoto" href="images/xxxxxxx"><img src="images/23456.png" class="screenshot" alt="some alt text" />
There are thousands of files and each file could have many such images in them. where the name of the image changes but the href="images/xxxxxxx is the same
I need the xxxxxxx for each instance to be replaced by the png filename 23456.png or whatever that may be.
Is there an easy way to do this and how?
Thanking all in advance
You could use jQuery for that. The function loops all items with the class screenshot. Read the src property and puts that in the parent href.
<script type="text/javascript">
$(document).ready(function () {
$('.screenshot').each(function () {
$(this).parent().prop('href', $(this).prop('src'));
});
});
</script>
However this is no SEO friendly. If you want the href to be available in the source you are gonna need a server side solution with some programming.
Very basic question about html.
Because the <body> is too long, I want to divide the file into multiple files. It is not about using iframe etc, but just want to include multiple text files to create <body> of the html file.
Thank you!
You can do it using jQuery:
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#ContentToInclude").load("b.txt or b.html");
});
</script>
</head>
And load it in HTML:
<body>
<div id="ContentToInclude"></div>
</body>
Just change the extension to .php instead of .html. Then you can just put, for example, your whole head inside the file head.php( or head.inc).
The whole thing would look something like this then:
<!DOCTYPE html>
<?php
include 'head.php';
?>
<body>
<!-- stuff in here -->
</body>
<html>
You can obviously split your body up into seperate pieces like this:
<body>
<?php
include 'firstPart.php';
?>
<!-- some other stuff -->
</body>
You can easily break your code in multiple files, Then create one file with .php extension and include them all!
With only HTML it would not be possible you need to add some JavaScript to be able to do so.
Using a data attribute with the Fetch API and some async functions you could do it as follow:
HTML file:
<div data-src="./PATH/filename.html"></div>
This element will receive as HTML content the content of the file specified in its data-src attribute.
Now the JavaScript:
async function getFileContentAsText(file) {
const response = await fetch(file);
const fileContent = await response.text();
return fileContent;
}
async function insertContentsFromFiles() {
const tbl = document.querySelectorAll('[data-src]'); // get elements with the data attribute "data-src"
for (var i=0; i < tbl.length; i++) // loop over the elements contained in tbl
tbl[i].innerHTML = await getFileContentAsText(tbl[i].dataset.src);
}
// dont forget to call the function to insert the files content into the elements
insertContentsFromFiles();
When the insertContentsFromFiles() method will be called it will first retrieve all the elements that have the data attribute data-src then we loop over these elements using their data-src value with the getFileContentAsText() method to affect their innerHTML property as the content of the file specified in the data attribute.
As we are using querySelectorAll() to get the elements with the data-src attribute the above JavaScript code will work for an unlimited amount of elements as long as they have that data attribute.
Note: In its current state the above JavaScript code is not optimized for loading a big amount of files as it process the files to be loaded one by one. If you are interested in solving this issue you may want to use promise.all() and update the insertContentsFromFiles() method to parallelize the files loading by taking advantage of the asynchronous operations.
Warning: If you plan to use elements that are in the loaded files from JavaScript you will have to retrieve them after they have been loaded into the page otherwise they will have an undefined value. To do so you can dispatch an event when a file has been loaded so you can attach specific functionnalities to the page based on the triggered events.
I am using this cool script http://qpoit.com/marcofolio_demo/apple_search/ however when I click on a search result, I want it to be added as html content to an id which I will use like . I know this is done with $("#displayContent").html(data); however I need the content of search result that I clicked on to be and not all the results found. Please help
The rpc.php-file of the search, contains the function, which generates the output of the search.
In line 29, change the content to a JavaScript-function, which does this work for you.
// Used in line 29 in rpc.php
echo '<a href="'.$result->url.'">';
// Change it to something like
echo '<a onclick="applyContent('.$result->url.')">'
After that, head back to the index.html (or the file in which you are using the apple-search), make sure jQuery is loaded and add something like this:
<script type="text/javascript">
// Use the same function name, as in the php-file
function applyContent (resultURL) {
// Use jQuerys get-function to get the content of the file you've found in the search
$.get(resultURL, function(data) {
// Change '#finalResult' to the css-selector, of the element, which should contain the result at the end
$('#finalResult').html(data);
});
}
</script>
Once you click on a search-result, it should make it the content of #finalResult, or whatever element you choose.
The problem is that the JpGraph is not displayed correctly on my web-page. The strange thing is that if I run the above code in isolation, then it works. But if I insert it in my main code, it fails producing the above-shown message.
P.S. I'm using 'ob_start();', but it does not solve the problem.
// A new graph with automatic size
$graph = new GanttGraph (0,0, "auto");
// A new activity on row '0'
$activity = new GanttBar (0,"Project", "2001-12-21", "2002-02-20");
$graph->Add( $activity);
// Display the Gantt chart
$graph->Stroke();
?>
</div>
JpGraph Error: HTTP headers have already been sent.
Caused by output from file index.php at line 85.
Explanation:
HTTP headers have already been sent back to the browser indicating the data as text before the library got a chance to send it's image HTTP header to this browser. This makes it impossible for the library to send back image data to the browser (since that would be interpretated as text by the browser and show up as junk text).
Most likely you have some text in your script before the call to Graph::Stroke(). If this texts gets sent back to the browser the browser will assume that all data is plain text. Look for any text, even spaces and newlines, that might have been sent back to the browser.
For example it is a common mistake to leave a blank line before the opening "<?php".
JpGraphs can't exist in files with html. They have to be in a pure php file. To get around this, I created a seperate file that generates the graph, and made the whole thing a function. At the end, change
$graph->Stroke();
to
$graph->Stroke(".<filepaht>.jpg");
Then, in your index.php page, reference the image file.
So, what it looks like you need is,
createjpgraph.php:
<?php
function GenGraph (<input variables>) {
// A new graph with automatic size
$graph = new GanttGraph (0,0, "auto");
// A new activity on row '0'
$activity = new GanttBar (0,"Project", "2001-12-21", "2002-02-20");
$graph->Add( $activity);
// Display the Gantt chart
$graph->Stroke("./foler/file.jpg");
}
?>
index.php:
...
<div>
...
<?php
include 'createjpgraph.php';
GenerateGraph(<variables>);
?>
<img src=\"./folder/file.jpg\" />
</div>
Hope this works for you.
You can even do it in the same html document - first writing the graph to a file, then displaying it ...
//Code generating your graph here ...
// Finally output the image to a file
$graph->Stroke("/var/www/html/tmp/out.jpg");
//end of php code
?>
<!-- now include the newly generated image in the HTML -->
<img src="/tmp/out.jpg">
</body>
</html>
It is seem that the jpeg file that is being created by the function cannot be over written in my case...
to do overwrite it..
I changed my JPGraph file gd_image.inc.php .. you have to comment out the line
that says JpGraphError::RaiseL(25111,$aStrokeFileName)