November 19, 2008 01:54am pst

07.02.2008 at 07:42PM PDT, ID: 23535699

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.2

Dynamic Tabing with Querystring...

Asked by bdobyns in JavaScript, Hypertext Markup Language (HTML), Asynchronous Javascript and XML (AJAX)

Tags: Javascript, Any

Hello Experts,

I have a video page that plays videos based on a playlist. There are two main tabs that when clicked, display a certain number of channels. One tab is for instructional videos and the other tab is for events. Within these tabs are the buttons that we call "channels". The script below writes the buttons (channels), controls the hover behavior and makes the first channel listed in the code the "active" channel, which means that the button has a certain style applied to it and any content for the active tab gets viewed first on the page. If the user clicks on another channel, then that button becomes active and the same thing happens.

Here is how the script is called from the page: (3 channels)
<script language="Javascript">
bktButton('btn_foo1', 'econtainer'); (name of button graphic, name of the div which holds the button)
bktButton('btn_foo2', 'econtainer');
bktButton('btn_foo3', 'econtainer');
</script>

What I need for the script to do is this:

When a call to the page looks like --> www.domain.com/video/?c=foo3
the button in the querystring (foo3) needs to be the active button no matter where it is in the code. We use AJAX so that can be an acceptable solution.

I hope that is enough information. There will be extra points if I can get this solution by Saturday or Sunday at the latest. Let me know if you have any questions.

Thanks Experts,
BradStart Free Trial

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:

           
           
             <script language="JavaScript">
function bktButton (btn, parentDiv) {
	document.write(
		'<div class="navtab" onmouseover="bktHover(this, true);" onmouseout="bktHover(this, false);" onclick="bktActive(this, \''+parentDiv+'\');">'
			+'<img src="http://i.cdn.turner.com/pga/.element/img/1.0/sect/video/'+btn+'.gif" />'
			+'<img src="http://i.cdn.turner.com/pga/.element/img/1.0/sect/video/'+btn+'_hover.gif" class="hover" />'
			+'<img src="http://i.cdn.turner.com/pga/.element/img/1.0/sect/video/'+btn+'_on.gif" class="on" />'
		+'</div>'
	);
}
 
function bktHover (node, mode) {
	if (mode === null) mode = true;
	var hover = getElementByClass('hover', 'img', node);
	if (mode) show(hover);
	else hide(hover);
}
 
function bktActive (node, parentDiv) {
	if (window.event) {
		window.event.cancelBubble = true;
	}
 
	topDiv = $(parentDiv);
	btns = getElementsByClass('navtab','div', topDiv);
	btnPics = getElementsByClass('on','img', topDiv);
	panes = getElementsByClass('pane','div', topDiv);
 
	// turn all buttons "off"
	for (var j=0; j<btnPics.length; j++) hide(btnPics[j]);
	// turn current "on"
	show(getElementByClass('on', 'img', node));
	var i=0;
	for (i=0; i<btns.length; i++) {
		if (btns[i] === node) break;
	}
	for (var j=0; j<panes.length; j++) {
		if(j==i) show(panes[j]);
		else hide(panes[j]);
	}
}
<script>
           
         

Keywords: Dynamic Tabing with Querystring...

	Title
1	:hover z-index for a popup div insid…
2	hover effect on a particular cell
3	div tag
4	CSS - Hover Issue in IE6
5	:hover on div
6	Passing Variable using QueryString usi…

Loading Advertisement...

20080716-EE-VQP-32 - Hierarchy / EE_QW_2_20070628

1. hielo 3,400,788
2. mplungjan 881,618
3. b0lsc0tt 637,497
4. Zvonko 457,922
5. wilq32 320,040
6. scrathcyboy 249,049
7. Lolly-Ink 235,507
8. Kravimir 230,700
9. HonorGod 210,541
10. JohnSixkiller 186,039
11. logudotcom 162,676
12. LordOfPo... 151,812
13. GreenGho... 151,584
14. sh0e 141,554
15. Badotz 125,081
16. third 121,391
17. MMDevelo... 116,021
18. pratima_... 88,606
19. TimCottee 84,060
20. Roonaan 80,773
21. hernst42 78,852
22. ziffgone 76,125
23. contactka... 75,935
24. neeraj523 74,368
25. Ray_Pas... 74,010

1. Zvonko 6,377,438
2. mplungjan 4,675,462
3. hielo 3,601,354
4. b0lsc0tt 1,416,611
5. devic 1,313,415
6. Gwynfor... 1,304,602
7. third 1,287,043
8. archrajan 1,212,417
9. pravinasar 973,571
10. Roonaan 925,808
11. Zyloch 911,093
12. Batalf 873,511
13. knightEkni... 861,184
14. amit_g 676,996
15. basicinsti... 618,955
16. HonorGod 579,216
17. dakyd 577,760
18. CJ_S 549,361
19. gops1 544,262
20. callrs 523,535
21. jaysolomon 488,264
22. stanscott2 435,346
23. dbritt 429,998
24. fritz_the... 401,297
24. TName 401,297

Dynamic Tabing with Querystring...

Asked by bdobyns in JavaScript, Hypertext Markup Language (HTML), Asynchronous Javascript and XML (AJAX)

Tags: Javascript, Any

About this solution