How To Display List of Sites One At A Time - javascript

I am looking for a way to display a list of websites one at a time from a URL list. I'm fine with a very manual solution, I found an AJAX solution where each "page" is displayed in a tab but it is very heavy because if I have 50 pages I want users to page through one at a time, this solution essentially pulls all 50 pages onto the one page. Do you know of a framework which does the same thing but only loads one page at a time? Thank you very much for the advice and help. Here is the site I found - http://css-tricks.com/jquery-ui-tabs-with-nextprevious/

You could load the URLs into an array and then create a 'next' button that loads the next url into a div; replacing the previous one.

do you require doing this will javascript?
might be easier to curl the pages using php, then echo this returned data as an eval-able array into the html. Then allow user to alter which part of the returned array you are looking at using a next and prev button.
if you pre-load each one it will be heavy as you have noted.

This idea is screaming for AJAX. With proper AJAX calls, you would only load a page once it has actually been selected by tab. Any previous page loaded into the area would need to be dumped. You shouldn't actually need to physically switch tabs if you're using the src attribute of an iframe, simply changing the src and forcing it to refresh itself should accomplish the trick. If you are performing a screen scrape through a remote web service, then you could simply use jQuery/AJAX to rewrite the innerHTML of the panel in question.

Related

What is preferred implementation of Chrome extension that catches and reads newly added list values on one specific web page?

I need to create a Chrome extension that will work only for one webpage with specific URL. It will monitor changes to list of items (orders) located on page and if new order appears, it will read some values from order and do something with them. It also may be neccessary to refresh the page from time to time (using timer, maybe).
What architechture will be suitable to accomplish such a task?
Now - to thoughts I have so far. I think now of using only one content script bound to page URL. Will it be enough? Or should I introduce some background script also? Or anything else?
As #wOxxOm said in the comments, creating one content script must be sufficient for reading the values and page refreshing.

How to create a page location in browser using javascript/jQuery?

I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D

How to keep div from reloading while navigating

My problem is rather simple, but I haven´t found a simple solution for it.
I would like keep one div element from reloading while navigating on other pages. So this one div element would be on the same spot and not to refresh, even when I´m going from page to page on my web pages. I have Soundcloud player in this div, which I want to keep from reloading. The idea is to keep it playing the same song while navigating trough other pages. The point is, everything else should be able to reload, while keeping this one div from not reloading.
How to do this in practise is my question?
The only way to accomplish something like that would be to load the pages via ajax, instead of a full round trip to the server.
If you reload the whole page, then you reload the whole page and you can't keep part of it.
You can either:
Use frames (obsolete) to display two pages at once
Only ever display one page but use XMLHttpRequest to fetch new data from the server, DOM to change the content of the page (leaving that one div alone) and use the History API (pushState and friends) to map the changes you are making with JS to real URLs (which, when requested, cause the server to load a page which is the same as the one you have created with your client side JS modifications).
you might want to look into single-page app frameworks, like Angular, to help you quickly establish that kind of front-end functionality you're looking for

jQuery pagination for json results

What is the best way of doing a pagination? I would also need to save the current page, so that when I click a link it would save the page I was on. So if I'm on page 2 of the pagination and click one link and then get back to pagination page it would remember that I was on page 2.
I get the results/data from Json request where I have offset and limit possibility.
$.getJSON(base_url+'/ajax/get_news/4/!OFFSET!/!LIMIT!/true', func...
Where !LIMIT! is how many results it shows and !OFFSET! is, well offset :D When I click a link, it makes that request, it goes throught the results and appends the result into page.
What is best way to save the page, cookies? Should I get all the results and then do the pagination somehow or do new request when user change page?
Some tutorial or "hands on" example would be awesome. Normal instructions/guides are difficult to undestand since my first language isn't english.
It appears you have two questions:
1) How to save page state (what page you are on): If the application must continue to use an ajax, then you should look at storing the state in the url as discribed here:
http://ajaxpatterns.org/Unique_URLs
2) Regarding where to do the pagination, I think it would depend on the size of the data to paginate. If it is small and you are not worried about the data changing on between paging, do it all in javascript. Otherwise, do it server-side.
Okey I should use the !OFFSET! and !LIMIT! to do the pagination. I just need change those numbers with pagination links (1 2 3 4 pages etc) to get the pagination to work I believe. But I dont know where to start :/

how does gmail retain the checkbox selections from page to page

in gmail if you check mark email 4 then move to different set of 50 or 25 records and mark selection 26 then both 4 and 26 are retained if you move back and forth.
How does google do this?
would it be possible to do something like this in a page that brings only 50 records and when NEXT is clicked...it again goes to DB to bring next set of 50 records.
You don't technically change pages, it's all the same page, the content is just changed dynamically with JavaScript.
Take a close look at the url. Only the hash part of it changes. Which means you don't really load new pages when you click things on Gmail. They just change the elements shown to you with javascript.
Similar thing could be done with page loads if you use localStorage or sessionStorage
You could do the page you're describing with Ajax techniques.
The inner pages are most likely loaded using AJAX. Kind of like iFrames, you monitor the links that are clicked and only load the inner part of what you're after so that you aren't loading things twice...
It's possible that these are saved in JavaScript or Cookies... I would probably store them as a JavaScript array of selected checkboxes personally... depending on how much load you're already giving to the user.

Categories