We Keep Coding

Create multi page design with single URL

My goal is to create multi screens in one single page.Depending upon the action the user will be able to navigate from one screen to another screen.I have shared the images below
When the user clicks on any of the categories ,it will navigate to a second screen.
While clicking back it will again comeback to the first screen without change in URL.I have tried creating a full page modal and could not achieve this kind of functionality.I am not sure whether it should be done as a modal with multiple screens.
Please suggest me any method I can achieve this.

What you are likely referring to is creating an SPA or Single Page Application. This can be done through 'Vanilla' JavaScript at great effort or via one of many JavaScript Libraries or Frameworks.
Reactjs, Angular and Vuejs are probably the most common.
IF you were to use Reactjs then you could use what's called React Router. React Router would do what you want to do very easily. Doing it in Vanilla JavaScript would require a great deal of work or it would be very ugly.
However you did ask, so one way of doing would be to use JavaScript to load an iFrame or to make a top level parent element display: none and another to then display:...
Also if you are thinking of something less hacky, but not something as sophisticated as React or it's peers, then check this link out for a relevant article. Perhaps it's a path forward that you would prefer.
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng

To help rookies like me, you can make a single page app or SPA, or a dynamic page that updates based on user actions with a single URL, in vanilla Javascript. You don't have to use a framework.
There are 3 concepts you need to understand:
The server doesn't see past the # in the URL
You need to tell your code what screen you want to display. Normally you would have URL.com/page-you-are-on and click a link to go to URL.com/page-you-want
However, in a single page app, you don't go to different URLs. So how does it work? You use a fragment identifier or a pound symbol. #
The # in the URL doesn't get recognized by the server. So URL.com/page#page1 and URL.com/page#page2 to the server is the exact same URL.com/page.
So you can use the URL to indicate to the server what page you want, in your single page app.
A Router can decide what to show based on the # URL fragment
So your page loads at URL.com/page#page-you-want. You need to inspect the URL and get the piece past the #. You inspect the URL, and split it on the #. That means you get page-you-want. Your code then uses that to decide what content to display. The function or file that does this is commonly called a router because it routes to the file or function you want displayed.
Once you know what to show, dynamically update the DOM
This is where the magic happens. Your website looks at the URL, gets everything past the #, sends it to function that decides what to display. You now need to display it.
The DOM has lots of functions and methods that help it update and create various things. It could be as simple as this:
function displayPageAbout() {
// the router calls this if the URL is URL.com/page#about
let pageSection = document.getElementById('pageSection') //this is where the page will be displayed
//create the div and give it content
let page = document.createElement('div');
page.textContent = 'This is the About Page'
//add the div to the spot on the page where the content should go
pageSection.appendChild(page);
}
That is basically it.
If found these two examples and tutorials useful in understanding what it is, and how it could work.
https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
Good luck!

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 UI - tabs - load data into a tab, without using IFRAME - Alternative options

I currently have a JSP page, containing a Jquery UI based accordion (based on left hand side of the page), that in turn when you select an option in this accordion, it launches a new tab (the tabs are based in the centre of the page)
The content that is loaded into my new tab, is from a JSP page that I have within my project. I am doing this with IFRAME, but I wonder if there is a way to load this JSP's data into the tab without it being an IFRAME?
This JSP contains a dynamic data, images and text.
It would be cleaner if it was output displayed within the tab itself and not an IFRAME - the usability for this isn't great.
What alternative options to IFRAME could I have for doing this?

You can use jQuery's load function, it is very simple and easy to use.
A good example of this can be seen here: http://jsfiddle.net/SO_AMK/TR2kn/ (click expand)
A simpler example: http://jsfiddle.net/SO_AMK/TR2kn/1/
But, please be warned that this cannot load data across domains so the data must be on your server (there are some workarounds but they get complicated)!

pager without javascript in asp.net

how to use Pager(GridView or ListView) with html link.
is that right that this code is not SEO friendly?
thanks.

You have two questions.
First:
You can implement a pager by using post-backs. Basically you will invoke a server call at each click of a link. And the server would reply with a new page of the dataset. But the asp.net controls submit the form using javascript. It looks like:
link text
So to not use the javascript at all, you could use a HTTP GET only method. This is just one way to do it.
So what you want generated is something that, it will pass to your server a page value using a query string parameter named 'page'.
You can handle that in your aspx page any way you see fit. But it needs to generate some thing like that.
page 2
In the page load of somepage.aspx you handle it.
protected void page_load(EventArgs e){
// check if the page parameter is set in the query string
if(Request.QueryString["page"] != null){
// page is the value of the requested page
var page = Request.QueryString["page"];
}
// bind you data to the control.
}
Then when binding the data to your GridView or ListView you filter the data based on the page requested.

#pre has a good answer for your first question.
Regarding your second about SEO and JavaScript:
JavaScript has to be used correctly. In other words, the html has to have the links and all of the pieces necessary to be read by a spider. If nav elements are injected via JavaScript then you can be assured that a spider will not see them.
You can certainly use JavaScript to change the styling, reposition the pager area or add other attributes but the base anchor tags with the appropriate href attributes have to be present.

How To Display List of Sites One At A Time

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.