I have a script that rearranges elements on a page in a certain structure. It does this by manipulating the CSS with positioning values etc.
I want to offer users the possibility to view the page without it being affected by this script.
Could I fire off a function (on a click event) that "resets/cleans" the page from the interaction of the script? Or would I need to do a reload of the page?
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 fairly new to web development so I don't have much experience with any of this. I currently have a navbar at the top of my website (made with Foundation), but I don't want it to reload every time the page reloads. I've noticed on several websites that certain parts of the page are kept in place when links are clicked and the url changes. How can I achieve this?
Thanks
There are several ways to achieve this. Using AJAX calls is one of them, iframe another. You could even create a one page application and show/hide elements when certain buttons are clicked. This will however force you to load all the data at once so I won't recommend that (depending on the website).
A small article about how you can use the iframe option.
A small article about the AJAX option, they include a small demo to show how it works.
You can set an <iframe> in your code and have the links in your nav target it. When you click on a link, the <iframe> will load the new content, but the rest of your page will not change.
I need to figure out a way to only load certain elements of a page. I don't need any images and probably 90% of the whole page, just a couple of interactive buttons and such. If a specific example is needed, I need to only load things like the add to cart button on a nike.com page
The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.
I have a web page where I have two iframes. I set the url (location) of the iframes in the page onload event. This is done to "delay load" the content. That is, the main page content is rendered first, then the iframe content with e.g. Like buttons, trust logos etc. are displayed. This speeds up the page rendering considerably.
However...
Clicking the back button first removes the trust logo. Then another back button click removes the Like buttons. The third click finally takes the user to the previous page.
Is there any way to avoid the URLs of the iframes to go into the browser history, while maintaining the above functionality?
Thanks!
Avoid using iFrames, if you really want to improve rendering like this, use AJAX. However there are numerous other problems if your page actually renders slow, how large is it, and how is it structured?