Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Single-page Tab Switches

Featured Replies

Hello,

 

I'm not sure how to explain this so I'll take my time.

 

Let's suppose I have a web page where I want to display news of three different categories. Let's say; sports, concerts and music. The news would be presented inside a 'box'. This 'box' would have three tabs; one for each category mentioned. I want the box to display one category at a time, so the user needs only to click one of the tabs to see the 'box' display the appropriate news.

 

I want only the box to refresh, so the rest of the page stays the same. Is there a way to do this without frames, flash or javascript?

 

Here's an example:

 

post-10337-1236057666_thumb.png

 

Thanks in advance.

Well you have a few choices, i would go for one of the following:

 

JQuery (or other js framework) ajax requests: NETTUTS- how-to-create-a-slick-tabbed-content-area

 

Using a simple javascript show/hide div script that changes the style of the dive to show and hide.

 

Using a pre made javascript like above with some nicer features: Dynamic Driver - animated slide

 

I would go for number one

  • 3 months later...

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.