How to handle large html text page using javascript? - javascript

I have a huge(around 20mB) html page which is nothing but pure text. It is a log file for some code running on a server. Now, I am trying to write a chrome plugin which automatically parses this page when someone opens it and adds appropriate links according to my need at certain places.
The page looks like this
<html><head></head><body><pre> 20mB of pure text </pre></body></html>
So, two questions, second dependent on first, which would help me.
(I am using pure javascript till now. No libraries yet.)
1) How do I parse the page?
2) There is some information in the first 3-4 lines. How do I easily get those first few lines and get the data out of it ( if parsing the whole page is not going to be easy)?

What are you trying to parse the page for, are you creating a summary?
for Starters, you can get the first 4 lines by adding an id to the pre tag and doing this:
var first4Lines = document.getElementById("theIdTagOfThePre").innerHTML.split("\n",4);
if that didnt work right you have to switch the '\n' to a '\r\n'.

Related

How do I "load" another HTML file?

Hey so I'm making some software that will have 4 different steps.
load
edit item 1
edit item 2
submit to an online storage
Since item 1 and item 2 are large items to be edited I wanted a separate page.
I also wanted a separate page to submit both items so they know it's being submitted and user receives further instructions.
I used to just let it just redirect the user to the next page, but I found it took 2-5 seconds to load each page, and I rather have it a fluid process.
Since Im using electron.js I am using require to load the JS part of the webpages.
But cant find a way to load the HTML and load the JS parts that effect the HTML (JS needs the webpage's DOM).
I've attempted using Jquery but all I accomplished was getting the html in a string format.
Been trying to find a way to use ajax, but so far everywhere I've looked its for including the html into a different html page.
I am new to both Jquery and ajax and just looked at them today. So maybe I am missing something about them. But cannot find any tutorials/documentary for loading another page.

Pagination with lot of pages

Hi i got a question about pagination. First of all, im new at html and javascript.
Ok, here is my doubt. Im building a website from cero. Im not using any web editor.
I filled the index.html with enough content (based on what i think is enough).
Now i want to add a new page with new content, and this page will be my new index.html, and the first index.html will be page-2.html (for example).
And I will be adding a new page like every 3 days, so what happens when I got more than 30 or 40 pages?
I know how to do a pagination, but i want to know if there`s a way to have a pagination without having to change name of pages every time?
Like a dynamic pagination or something like that. I dont know how to do it. I have been searching but I found nothing.
-Is there a way to do it with javascript?
-I don´t have knowledge about PHP.
-Thanks for your answer in advance.
Consider the datatables.net library. It paginates for you: https://datatables.net/reference/api/
Only javascript solution :
You don't have to rename pages nor having multiple pages.
What you need to do is create a sinlge long pages with content separated liek this for exemple
<article>
Content 1
</article>
<article>
Content 2
</article>
...
And then simply do a pagination since you know how to do that.
And display element like, first of pagination show article 1 to 5
and display:none the other etc...
However this is clearly not a good idea mostly due to time of loading. The way you should do is to use php and sql to store your content in database and display it calling the server (with php).

Taking url from XML and making Javascript hyperlinks

I've got a task I need to complete for an interview and I'm having issues with one annoying part. I have to create a portfolio site that displays 8 images at a time on the front page. These images need to be hyperlinks.
All the data I need (image location, url, title etc) is stored in an XML file. I've got all this data out and have successfully created a pagination Javascript animation that displays 8 images on a page with their relevant title.
What I'm struggling to do is make the images into hyperlinks, I'm sure the answer is staring me in the face but every time I try and add the hyperlinks it either stops displaying images or displays images but breaks the pagination and animation.
I've included the HTML, JS and CSS below, obviously given I haven't attached the XML you won't be able to see anything. I'm hoping some will know how to do this though!
Let me know if the XML is required..
http://jsfiddle.net/gFg56/1/ - Code
What its meant to look like with the images on the front page:
This should work
$('#portfolio-item').append('<li><img src="' + image + '" alt="' + title + '"></li>');
If it doesn't, can you post the error you get?
Bye
Do the images need to be hyperlinks really or just behave like them? Isn't the issue here based on the fact that you have to prevent the default behaviour of the hyperlink so you can handle the rendering in JavaScript and perhaps navigate to the linked URL using JavaScript?

jquery .html doesn't process certain tags and functions

At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div

how load some js(or any other) files dynamically & indicate percentage of loaded data?

I've a html page which must load many heavy js files at the begining. It usualy takes a lot to load all of them & user can`t see how much of these data is loaded & how much has remained!
So i need to add a simple progress bar using javascript(I mean some way to indicate amount of loaded & remaining data, the graphical presentation is not important at all, it can be as simple as a number between 1 to 100!)
I need something like this pseudo:
var filesToLoad = ['jsFilepath/s1.js', 'jsFilepath/s2.js', 'jsFilepath/s3.js'];
showProgressBarAndBeginLoadFiles(filesToLoad);
Any idea ?
You could put ten calls to a JavaScript function like updateProgressBar(percentage) through the files s1.js, s2.js s3.js. In updateProgressBar function you could fill div with some indicator of the current status of the JavaScript load. Not the cleanest way to do it but I think it would work. Not sure if you are able to add stuff to s1.js, s2.js, s3.js in your example.

Categories