Suppose i have 4 html pages say a.html,b.html,c.html and d.html.
Initially when i run the program i load a.html, when the user scrolls to the top and if it is already the top the alert says "you have reached the top of the page and this is the first page".
Now when i scroll dowm, using the js way of detecting page end, when i reach page bottom i call the next page and load the next page that is b.html.
In this way when it reaches d.html and you scroll down to the end of the page its will alert you that "you have reached the page end and this is the last page".
Same method is used when i scroll up and when it reached the page top, js will call the previous page function and it will load the previous page.
in here i will load the previous page bottom first. this is also working fine(but there is no continuity)
This strategy is working fine. But i need a mechanism to load these html pages continuously so that it will load the webpages in a neat fashion as if i open a pdf doc in a doc viewer.
Like the next and previous page swaps are smooth rather that opening it as a new page(this is very important in the case of previous page calls).
Is there any library in jquery or java script for this functionality?
someone please help. I searched a lot for this functionality
If you want to load HTML documents onto a webpage, you can use jQuery's .load() function.
Syntax:
// $ is the same as jQuery
$(element).load(documentURL);
Here, .load() gets the HTML from the document and puts this HTML into the element specified. To get specific elements in an HTML document, just locate them as you do in CSS. If you wanted to get the header from the document:
$("#result").load("myDocument.html header");
Remember: If you are loading the HTML on the DOM page load, use $(document).ready();. Here's an example:
$(document).ready(function() {
$("#result").load("myDoc.html body main");
});
Related
I'm using Selenium to scrape a webpage. Initially, when you navigate to the web page, the page contains about 10 items. As you scroll to bottom of the page, the page continuously loads more items (via AJAX / Javascript) until page has been fully loaded. Once the page is fully loaded I scrape data from each item in list.
Occasionally, I need to delete an item from the page. This causes the page to completely reload/refresh to it's original state with the initial 10 items - forcing me to repeatedly scroll to end of page which is very time consuming. In other words, if the page has a total of 500 items and I need to delete 50 item at various (and unknown) locations through the list I will need to reload entire list of approx. 500 item 50 times.
Since the page is being reloaded via ajax / js I thought I could solve this problem by disabling Javscript on this specific page. I was able to accomplish this by following this answer on stackoverflow. However, it is a catch 22 situation - since once I disable javascript the page will no longer load new items when I scroll to the bottom. I need to first load all items on page via Javascript and then disable js so the page does not automatically refresh itself when an item is deleted.
Initially, I thought I could scroll to end of page (while have js is enabled) and then disable js once I hit the bottom of page so that as I loop through items on page and delete item, page will not be forced to refresh. However, based on my testing I found that once js is enabled before page is loaded it can no longer be disabled before you navigate to a different page.
My question is: Is there a way for me to temporarily block (or disable) Javascript execution after a page has loaded so that the page is not refreshed (yet still allow me to scroll to end of page via js)?
I'm using Awesomium on c# to load html page. Once Awesomium loads, then I execute the javascript to remove any other elements except the article that I needed.
The only problem is that it first shows the whole page and then remove less than 1 sec. There is a blink of change.
How can I not showing the page unless JS is completed?
Currently I overlay a rectangle on top of the browser once OnLoadingFrameComplete then remove the overlay and display browser...
Thanks
You pass your URL to Awesomium to load your view (html). I am sure you have an access to your view (html) in your project directory, so you can add style of display:none to that section of the page in html part and then in your JS once your JS is completed show that section that is hidden.
I am trying to run a JS script on a website (not my own) and I want it to refresh the website, in order to check for updates. However, I have only found code online for reloading the entire page (location.reload(true), etc...), which clears any code that I have running through the console. I am new to JS so is there any way to refresh a page and keep the JS code running? Also might there be a way to only reload load a certain portion of the page?
Basically,
Reload website without stopping code
Using jQuery you can easily load any part of a page from a URL using AJAX. To fill the body element with the contents of a URL:
$('body').load('/page');
Your URL can respond with the segment of HTML you want to render, or you can request a full web page and grab just the segment you want buy adding a selector:
$('body').load('/page body');
The page isn't technically refreshed, just the HTML content inside the body (or whatever element you select) is replaced. Any previously loaded header content like JS remains and keeps running.
There is no way to actually refresh the entire page without stopping the execution of the JavaScript code.
For doing updates on the page there would be two possibilities:
Use of AJAX (Asynchronous JavaScript and XML) to check for new updates on the page. There are some very good tutorials out there on the internet – just google »AJAX JavaScript«.
Use of IFRAME. Make a page and stuck all the stuff in it and then put that page in an iframe and then reload the iframe instead of reloading the entire page.
Hope I could help you.
I have content. They are all different (generated from widgets on Wordpress), and they all need to be pulled apart and concatenated in various ways. Basically on window.load, the javascript loops through each of the widgets, takes out the content, then puts them in clean containers in a specific order, then fades them in nicely. This works perfectly.
In comes Twitter. Twitter has a script that loads an iframe. The Twitter script is inside a widget. I'm doing the same thing, taking the contents of the widget and dumping it into a new container. This causes it such that I'm taking the Twitter script and putting it into a new container before the iframe has loaded. Somewhere along this journey, the iframe never loads. I don't want to manipulate the content inside the iframe by an means, I just want it to load in the container I choose.
My question is: is this process wrong? Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container? It seems as if the iframe doesn't load until the page is loaded, but my javascript is interrupting the load process and stopping.
I'm not sure if I'm explaining this correctly, nor do I have example code that is in simplified form. Is this question answerable without these things? Thanks for the help in advance.
Edit: Taking out window.onload solved the problem. Meaning, window.load was probably interrupting the iframe from loading. However, window.load is necessary. Any other ideas?
So, the answer to my question :
Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container?
No. Currently, there's no way to do this. See reference The Twitter script was firing right away, and the window.onload was being rightfully interrupting.
The Twitter embed script is in two parts: an element and the inline script. My workaround was to keep the script inside the javascript, and keep the element in the widget (so the client can switch off, have multiple twitter account embeds, etc). Then, after the DOM elements are finished shuffling around and into their respective containers, I insert the script into the widget for twitter.
The iframe load, and tada! No more half-loaded twitter iframe.
A customer's site we show in an iFrame is extremely slow (~7s).
We can only provide a JavaScript file the customer will include, but he won't do more than that.
Is it possible for me to hook to all events (forms submitted, links clicked) and display a nice loading animation until the page is fully loaded?
Or can I universally ajax-ify his site?
Once your page is unloaded and the other page starts loading, the code from the original page is no longer available or running so it can't be doing anything and the content from the original page has been cleared so it can't be showing anything.
In that same situation, the next page is in the process of being loaded and it's code is not yet running.
Thus, you cannot use normal page javascript to run something throughout the loading of a new page. To do something like this, you would either have to use frames with progress showing in one frame while content loading in another frame or perhaps use a browser plug-in.
You can know when a page is being unloaded with the beforeunload event, but as soon as the next page starts to load, any code assigned to this will no longer be running and the current document will have been cleared.