Pimped Quick Tabs Demo - QT, AJAX, Arguments, Views Theming, Google Charts [#494618]

I've spent the past days pimping my first real Quick Tabs implementation (http://observers.gohernandez.com/election/results/2005/kabul) and just wanted to share.

This proof of concept uses QT, AJAX, views, pass-through arguments, views theming, and Google Charts. It's a port of the 2005 Election Results for Afghanistan from an ASP/Access build I did on contract in 2005 (http://d8680609.u106.forthost.com/province.asp?ProvinceID=1).

Constructive feedback is always appreciated. For example, I know the CSS could be condensed a bit but it's my theme from the bottom up, and before I release it, I will definitely clean that up a bit.

Comment	File	Size	Author
#17	QT 01.png	30.5 KB	defconjuan
#17	QT 02.png	16.07 KB	defconjuan
#17	QT 03.png	105.05 KB	defconjuan
#17	QT 04.png	36.67 KB	defconjuan
#17	QT 05.png	59.98 KB	defconjuan
#17	QT 06.png	89.44 KB	defconjuan
#17	QT 07.png	43.05 KB	defconjuan
#17	QT 08.png	81.39 KB	defconjuan
#17	QT 09.png	84.36 KB	defconjuan
#17	QT 10.png	87.93 KB	defconjuan
#17	QT 11.png	62.12 KB	defconjuan

Comments

Comment #1

equalspeterd commented 22 June 2009 at 18:17

Any chance of posting a tutorial on how you accomplished this? It's a great example of composing multiple modules together for customized presentation.

Comment #2

abendy commented 5 March 2011 at 00:48

Would also love some tips on refreshing a view with ajax & view arguments

Comment #3

santam commented 5 March 2011 at 07:44

Hi a very very nice demonstration. And a very viable project indeed. As above a tutorial would be highly appreciated. This is a great way of demonstrating the flexibility of drupal too.

Comment #4

betovarg

he/him

Spanish

San José

commented 14 March 2011 at 16:54

Very nice indeed! i found this when googled for a demo, because the official demo is dead. Im downloading and installing.

Comment #5

pasqualle

🇭🇺 Budapest

commented 15 March 2011 at 08:58

changed QT demo link to this issue, till an official demo site is not functional..

Comment #6

defconjuan commented 4 April 2011 at 20:23

Awww.... I'm not sure when I can get to a demo but feel free to scrape the css/js/theme as you wish. I'm in the process of migrating servers and in doing so, I'm updating these sites from 6.04 to 6.20 (before the inevitable D7 migration) so hopefully soon, I'll have a 6.20 compliant version up.

Comment #7

sdrews commented 29 April 2011 at 18:25

Very nice work! I have a QT project and my problem is with equal columns. The heights of my two areas (left sidebar & main content) are calculated on load which works fine for the first/default tab view. But, the heights are not being adjusted as user click through the tabs - which have different heights. How do you control that function?

Comment #8

chaosmind commented 31 May 2011 at 22:18

I'm not sure if this is "constructive feedback," but that is completely awesome. and exactly what i was looking for, thanks!

and let me add a "bump" to that comment asking "Any chance of posting a tutorial on how you accomplished this?" a tutorial on how to recreate the functionality of that page would be most excellent.

Comment #9

js commented 1 June 2011 at 15:32

Very nice. What module, if any, did you use for Google Charts? Did you use Views for the charts?

Comment #10

bolo79 commented 31 August 2011 at 00:36

How did you alter the list classes for the tabs?

Comment #11

GreenLanterrn commented 22 January 2012 at 04:10

Great job,

& I add my voice to those who would love to have a detailed (or simple) tutorial on this views/qt integration and the google charts api usage is quite impressive as well

Awesome exercice

Comment #12

dubois commented 13 March 2012 at 10:17

Awesome and inspiring.

Comment #13

tcroarkin commented 30 May 2012 at 13:25

Looks very useful. Just wondering if the scripts associated with the charts run in the background when the tab is not open. I have charts that notify my when the values reach a certain level and would need to know when there is an issue whether the tab is open or not. Any input would be appreciated. Would also love a tutorial.

Comment #14

larkydoo commented 10 August 2012 at 20:37

Nice! Thanks for posting.

Comment #15

nandwabee commented 25 September 2012 at 10:45

Just curious.What did you use for the map there?Thanks

Comment #16

Nora McDougall commented 23 May 2013 at 17:29

I agree with the trend in the previous comments:
1. Way cool implementation
2. How did you do it?

Comment #17

defconjuan commented 26 May 2013 at 14:47

Status	File	Size
new	Step 11	62.12 KB
new	Step 10	87.93 KB
new	Step 09	84.36 KB
new	Step 08	81.39 KB
new	Step 07	43.05 KB
new	Step 06	89.44 KB
new	Step 05	59.98 KB
new	Step 04	36.67 KB
new	Step 03	105.05 KB
new	Step 02	16.07 KB
new	Step 01	30.5 KB

Here's some screenshots of the important steps and configs (which are basically the same in 7.x). The quicktab set in the demo below uses just 1 quick tab set, and 2 views.