5 Replies - 490 Views - Last Post: 23 July 2014 - 12:50 PM

#1 Roosta  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 23-July 14

Clicking a tab without going to a new page?

Posted 23 July 2014 - 12:06 PM

Struggling to find any good tutorials or information explaining this on the web. I'm sure there is but I'm just having trouble trying to search for it in Google.

What I want to do is within my web page have information that's sorted by tabs but the page doesn't need to be reloaded when the user selects a tab. For example say I had statistics on the weather this year a user could just flick through the tabs or drop down menu to select the month to view the data for that month. The old data would be replaced by the new but the page wouldn't need to be reloaded.

I've seen this used on multiple websites (usually in drop down menus) but can't seem to find any tutorials on how to do it.

Is This A Good Question/Topic? 0
  • +

Replies To: Clicking a tab without going to a new page?

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3805
  • View blog
  • Posts: 13,487
  • Joined: 12-December 12

Re: Clicking a tab without going to a new page?

Posted 23 July 2014 - 12:12 PM

What sort of tabs? How are you creating them?

Some code would help.

And where is the data coming from that you wish to display?
Was This Post Helpful? 0
  • +
  • -

#3 Roosta  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 23-July 14

Re: Clicking a tab without going to a new page?

Posted 23 July 2014 - 12:20 PM

I haven't started coding it yet. Just trying to find a tutorial so I can start or at least know it's possible.

Maybe it's no possible and it's only something I've imagined. Here's a link to a site that's a perfect example of what I want to do; http://www.nfl.com/p...2506364/profile

At the top of the player profile you can switch between "Profile/Career Stats/Game Logs/Game Splits/Situational Stats". However when you choose one the whole page reloads.

What I want to know is if it's possible to switch through tabs like that without having the page reload?

Sorry if this is confusing, I'm just starting out.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3805
  • View blog
  • Posts: 13,487
  • Joined: 12-December 12

Re: Clicking a tab without going to a new page?

Posted 23 July 2014 - 12:41 PM

Yes, it is possible to tab through the data without loading a new page.

If their isn't too much data then all the data can be loaded in the page and some of it can be hidden. Then Javascript can be used to hide, and unhide, relevant parts of the page.

(It is even possible to achieve with CSS3 only if that is something that you want to research.)

If there is too much data then Ajax calls can be made to retrieve data from a central (web-server) location. This requires a server-side language to process the request, such as PHP, ASP.NET, Java, Python, etc..

The first option can be achieved with pure (vanilla) Javascript, and you might search for tutorials or code samples for this, but if jQuery interests you, then it has tabs in jQuery-UI. It is better to study the fundamentals of JS first though, before delving into jQuery, but I felt obliged to mention this plug-in.

This post has been edited by andrewsw: 23 July 2014 - 12:45 PM

Was This Post Helpful? 0
  • +
  • -

#5 Roosta  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 23-July 14

Re: Clicking a tab without going to a new page?

Posted 23 July 2014 - 12:48 PM

Sweet thanks for the in-depth response. So far I've only taught myself HTML & CSS, it seems like Javascript & PHP are the next logical steps.

Again, appreciate the response.

This post has been edited by andrewsw: 23 July 2014 - 12:50 PM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3805
  • View blog
  • Posts: 13,487
  • Joined: 12-December 12

Re: Clicking a tab without going to a new page?

Posted 23 July 2014 - 12:50 PM

You are welcome.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1