Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
single0speed

Need Help With Advanced Site Tabs GSAP

Recommended Posts

Hey guys I am Justin, first post here. The community over here seems to know there stuff so hopefully you can solve my problem with making tabs in GSAP

 

I am making this website like eBay, but much smaller scale. 

 

The top of the site is broken into three tabs. Browse / My Hub / Sell. 

 

If the user is in the browse tab he will be searching listings (this is also the default tab on the home page)

 

If the user is in My Hub he will be looking at account information and watchlist...

 

If the user is in sell he will be selling things ect. 

 

I can do simple tabs no worries but I need help with advanced tabs.

 

Each tab will have lots of links and links within links ect. But I want the tabs to act just like the tabs do in chrome, so the user can go to all different places in each tabbed section of the site and the other tabs will be right how they were...

 

This is so users can be browsing and decide to add funds, sell something, look at there account, update details.... they can then go back to where they were browsing. 

 

 

Maybe I can use browser cache for the other two tabs that are not used each time the used tab page loads. I would almost want it so the user could upload photos in the sell tab wile browsing listings in the sell tab. 

 

I don't know if it can be done, but I am looking forward to any advice/basic codepen.

Link to post
Share on other sites

Hi single0speed,

 

Welcome to the forums!

 

I am not sure what you mean by "advanced tabs". To me it sounds like your question is more related to UX flow and how to implement it than to animating something.

 

There's very limited resources by the GSAP guys for support, it's not feasible to be troubleshooting everything, they have to focus on the GSAP API and related questions.

 

Do you think you could setup a basic example of what you are looking to achieve, it's ok if it's not fully functional but it might help us understand what you are after and how GSAP can help you.

  • Like 2
Link to post
Share on other sites

Hey Dipscom

 

Ill look into UX Flow today.

 

Normal tabs allow you to split content on one page Ill put a link.

 

http://www.w3schools.com/w3css/w3css_tabulators.asp

 

I want mine to split content over a website. 

 

So the website is more like a fork that has 3 pages open at all times but the tab just selects the one you are after.  But once you load the first 3 simple pages you only ever load the one your on. 

 

I do understand this is not best practice for development and load times.. but on mobile its just amazing functionality that plenty of sites need it.

 

Here is a link to the site i'm working on too but it wont help you too much.

 

http://hawka.pythonanywhere.com/

 

I am not sure if it is a GSAP question? tabs are normally done with JavaScript so I figured it might be. 

 

I am also willing to put up some coin to who ever can solve it. Maybe a few 100. (hope I am allowed to do that, just let me know if I'm not and ill edit post.)

 

The coding team over here are like gurus so its my best bet in finding some insight into the problem. 

 

Cheers Justin

Link to post
Share on other sites

Hi single0speed,

 

As as I know there's no problem in offering little paid gigs here. This is not a bid/hire forum but there's the odd offer/request for help that bubbles up and I never seen anyone's being told off for that.

 

Hum... I don't think it's a GSAP question, it feels more like a general structure sort of question. I would be a dozen other questions before even considering giving you suggestion, some of them would even be about you and your skill set.

 

Having said that, I am on the lookout for some small scale pet project. I would be willing to try and help you if I can. Why don't you send me a private message with some contact detail?

Link to post
Share on other sites

Hey Dipscom

 

I made a basic Code pen so people know kinda what I'm after.

 

See the Pen WodNdY by single0speed (@single0speed) on CodePen

 

I am sure I will need lots of help with small scale things thought out this site build, Just finding the right people along the way. I am willing to pay good coin as I want this site to be lighting fast/safe/browser friendly.

 

I will try explain the tabs better. When ever the user is on the site they have there 3 options of browse / hub /  sell. I have this crafty idea that all three pages are pre-loaded/on one page. So a user can be browsing cars deep on the browse side for example then click on the hub page and it instantly loads as its a same page tab. 

 

I was thinking of using java script to update the url of the buy/sell/ hub to the current url on the hover tab(only the url on the tab when its not active). This means when the user clicks from buy over to sell there current browse tab was saved to the browse tab.... so they can sell a item then click on the browse tab and be back to were they was on the site and vise versa.... But the key part of getting the user back to the browse home area so that would be.

 

so the active/indented tab url for browse would be "www.hawka.co.nz/browse" and the non active not yet clicked on tab url would be there last page they visted "www.hawka.co.nz/browse/vehicles/cars/1982783"    This is developed to be suppper user friendly.

 

So they never lose there spot, they can sell, browse, update there address and other information all very fast and stream lined. People always develop desktop 1st but i am taking the mobile 1st approach as its pretty much the way. 

 

For the tabs I want no plugins or jQuery. Just minimal html/css/js

 

Sorry for the late reply have just being going hard learning JavaScript.

 

If you think you can do it, hit me up with a price. Sorry it is dam hard to explain the functionally of the tabs.

Link to post
Share on other sites

It looks like you want to have a tab system that instead of pulling in static content. It pulls in dynamic content via AJAX. is this correct?

Link to post
Share on other sites

Maybe, I am stuck between a rock and a hard place. I want the 3 tabs to load instantly so i guess my only option is a single page that contains the information of 3 pages at all times. But those 3 pages that that one page loads can be all different.

 

But you are right, a lot of the site will be AJAX. It is just not commonly done so i have my concerns 

 

I mean maybe a total ajax would be the way to go, its got me tossing and turning  :oops:

Link to post
Share on other sites

Sounds like you're trying to invent something that already exists, a single-page application (SPA). Here's a simple demo of a 4-page SPA using Angular 1.

See the Pen yebjQM?editors=0010 by osublake (@osublake) on CodePen

 

To see a SPA in action, check out Virgin America's site.

https://www.virginamerica.com/

 

I like to use Angular as a SPA framework, but for routing and state management, I use UI-Router. It also include a nice visual debugger.

 

 

kWKZ4pS.png

 

 

Demo of that...

https://plnkr.co/edit/Mc5q91?p=preview

 

My simple 4-page demo is kind of boring, so I added in some http services to hit an API for CodePen. 200 lines of code later, and I have a pretty good site.

 

vFicq6A.png

 

 

See the Pen 77b85cc0ac6660292ed27472419c204d?editors=0010 by osublake (@osublake) on CodePen

 

 

.

  • Like 6
Link to post
Share on other sites

Nice Work Blake.

 

But its still not quite what I am after. (just shoot me now :mrgreen: ) It is all about user flow. I made a image that hopefully will explain more. 

 

https://postimg.org/image/5dzsff8hp/

 

That image shows how the tabs would be used. 

 

                    Steps                                                                   Loading                        Tab

 

1. User starts off at the browse tab.                                  (page loads)             (Browse)

2. User looks at a car listing                                              (new page load)       (Browse)

3. User looks at his hub/account                                       (no loading)              (My Hub)

4. User looks at a account setting                                     (new page loads)      (My Hub)

5. User looks at sell tab                                                           (no loading)            (Sell)

6. User makes a listing                                                            (new page loads)    (Sell)

7. User looks back at his account settings from 4            (no loading)             (My Hub)

8. User looks back at the car listing from number 2         (no loading)             (Browse)

9. User clicks browse tab again = browse homepage      (page loads)            (Browse)

 

Hope that makes it more clear.  8-)

Link to post
Share on other sites

SPAs are all about user flow, and what you're asking is totally doable. Your image looks just like the visual debugger for UI-Router. Take a look at more advanced demo for it...
https://ui-router.github.io/sample-app-ng1/#/welcome
 
What's loaded, or not is totaly up to you. SPAs are based on an MV* pattern (MVC, MVVM), and the view (your html) is just a reflection of the view model. So you can destroy it, move it around, reload it, show it another tab, whatever. It's all created on the fly. The view is a just a facade. It's a dumb object. There usually isn't any logic in it. Everything is a reflection of the view-model. So in Angular, controllers are the view-model, and it describes what should be displayed.
 
A SPA framework should also handle caching, so some things can be loaded only once, and used throughout your app's lifespan. For example, you may want to get a list of all the names of all the states in the US. That list isn't going to change, so you can cache that request. Other things may need to be loaded fresh all the time, like a list of new auctions. It's all very flexible.
 
And you may not need to load everything via AJAX. Sockets would be particularly useful for an auction to get live updates on the current bid price.

 

Check out this chat demo with some draggable action. Open it up in multiple browser windows.   :-D

 

See the Pen c8fb3db6ce219285b6ecadfb8638d865?editors=0010 by osublake (@osublake) on CodePen


 

That's using a real-time database called Firebase.

.

  • Like 2
Link to post
Share on other sites

Interesting. Hmm seems like I need to learn a few more coding languages or earn much more to hire a expert  :?.  Web Sockets seem like they could work well.

 

Would it be weird doing a 1million page+ SPA  :-o ?  What are the load times like using dynamic content like that over static? 

 

And I do have one off topic question. 

 

How hard is it to make a listing search Algorithm that for example somebody searches for "Hard Drive"  and the outcome is  something like this

 

Slider 1 (cat) Used Hard Drives closing soon

Slider 2 (cat) Solid State

Slider 3 (cat) over 2TB

Slider 4 (cat) portable hdd

Slider 5 (cat) On sale hard drives

Slider 6 (cat) Hard Drive media player

Slider 7 (cat) Hard Drive the movie

Slider 8 (cat) Laptop Hd

 

http://hawka.pythonanywhere.com/ if you want to see what I mean about slider usability, just look in mobile sized screen.

 

So when the user searches it breaks up the most common possibility's into sliders and when the user finds the slider that is what they are looking for they can just slide very closely related listings and as you slide sockets load in more content.

 

It would have to take into account things Listing keywords, New or used, Popularity, location, Closing soon, best value for money, sales and even relevance on the users history purchases and price range they buy at.

 

To give a end result that you search and find just what you need in a matter of moments, even on mobile. 

Link to post
Share on other sites

A 1 million page SPA isn't out of the question. That's what they were designed for. There probably isn't much of speed difference in loading dynamic content over static. The speed gains come from not having to reload an entire page and rebuilding everything from scratch.

 

And creating a search isn't that hard, but this will depend on your database. Most SPA's use a NoSQL database, so everything is usually stored in a JSON format making it easy to search. So you don't have write super long queries or do a lot of table joins. MongoDB is probably the most popular NoSQL database. I like using Firebase because of the real-time data.

 

And a lot of filtering of a search can be done client side, speeding things up. So here's a really simple example based on your hard drive example. This isn't how you would really set an app up, but it shows you what's possible. The controller is the view-model, and it describes what should be displayed. Assume that a user did a search for hard drives, and it returned data for the categories and the different hard drives. Now we can display that data, and even do a local search based on the name of the hard drive.

 

See the Pen b482beeb19b0768c32e66dcda76985db by osublake (@osublake) on CodePen

 

 

That's a really simple example. You can chain multiple filters together. Here's a demo with 5000 records. Just press the refresh data button and have at it.

http://plnkr.co/edit/XV6HcmaQ8wEnoGSjDfM0?p=preview

 

.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×