JQuery tab tool

Shicky

Shicky

Shicky

Associate
Joined
13 Jan 2007
Posts
2,424
Location
Belfast,Northern Ireland
This rather neat looking tabbed box thing:

http://flowplayer.org/tools/demos/tabs/index.htm

Was shown to me in another thread and I wanted to implement it for my website. I've referenced the CSS both inside and out of the flowplayer links but it never works and always looks a bit screwed up. I dont quite understand why as it seems it should work fine after getting the required files. No modding is needed on this right?
 
Think its basically wordpress causing issues from where im trying to link the files. Hopefully sort myself out this decade

*Thanks for the queryui, looks like you can do some interesting things with it.
 
I did try with the CDN link at first because my first attempts hadnt worked correctly, but I knew this was the wrong way to go about things - was just seeing what would happen.

I found something mentioning including it in wp_enqueue. Currently trying to get my head around how I am meant to be doing this and where to place my additional new files
 
Im still stuck on this, guides I found seemed to suggest all different means to including the javascript and css. Anyone know of a decent guide written in the correct way?

I've just loaded the css and js in the header.php and used the html stolen off the page source but this isnt working
 
gord said:
If all you have done is load the tools, css and put the html on your page then you are missing my step 4.

You need to execute the script too in order to make it actually work. This is usually done in the footer, before </body>. As long as you havnt changed any of the ids then you should be able to use their execution method, which would look something like.

Code: 
<script>
$("#demo img[title]").tooltip();
</script>
Click to expand...


I think i've done that just from using the info in the view source:

Code: 
<!-- This JavaScript snippet activates those tabs -->
<script>

// perform JavaScript after the document is scriptable.
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.panes > div");
});
</script>
 
Not hosted anywhere unfortunately, just using xamp light. At least I know for fact this should be driving me mental! Thanks for your efforts to help me out, im sure i shall get there and something ridiculous will be to blame
 
I was trying other stuff there so the code is monged more than previously. Tried to get it similar to how I had it before but have to do a runner for a few hours now.

Here is the view source from the page currently:

http://pastebin.com/eqmBQzXv

From a brief fly through the issue is that the tabs.css isnt loading in correctly...im not sure why. Also that random <p> and </p>'s are included in nasty places which i think is causing certain things not to function correctly
 
I didnt realise wordpress did that until looking at that briefly before putting it up here. At least now I know the issues. With the Jquery, I have it loaded in the header.php file then I thought the script being called later on was enough? Unsure what you mean with regards to the execute script, move it to the footer before the body tag?

Bit worried about this now with regards to needing to change the template, won't I need to create a bunch of different templates now for each product? Essentially this is a tab box I want after a product image and description to contain some specifications

Sorry for all that trouble over something so stupid
 
I think I've done everything you mentioned and im still unable to see why it isnt working.

The jquery tools and css are just linked on the page rather than from another file as I wasnt sure on placement just yet and figured it would be easier going with this until I fix it. Any ideas whats up?

I remember reading about using using a non conflict style to avoid it screwing up with other plugins/widgets, but im guessing this isn't to blame?

http://pastebin.com/rNfXri2Z
 
Last edited:
Managed to change that all but unfortunately it still didnt look right, infact now it seems just like list items that are hyperlinks and the various text is all underneath these three items.

Tried putting the enqueue in header.php but it made no difference. To make this better someone has now crashed the server, dammit!

*Didnt get a full play around before someone decided to destroy the server. Could be something simple messing it up so will get a chance to feel around more tomorrow. Thank you very much gord for taking the time to fix that all for me, much appreciated. Hope it all ends up sorted in the end
 
Last edited:
http://pastebin.com/BkjGBz4K

This is the current version, tidied it up a little so the problem still exists but looks a little more on track. Clicking a tab just moves it to the top of the page, tabs are also basically invisible.

Because the javascript call is done specifically with jQuery it doesnt cause a conflict right, or I need to change the bit inside the script also so it doesnt start with a $?
 
Unfortunately it still seems to act the same way. This is how it looks currently:

untitled.jpg


Think its best just quitting this angle? Quite annoying as I was very keen to get it in this project, would look pretty nice.
 
It goes to the css file itself. I assumed it just looked like it wasnt working as it links background images I dont have
 
Sorry clearly I am not too sharp this morning. This is the css file:

Code: 
/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	border-bottom:1px solid #666;	
	height:30px;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(/tools/img/tabs/blue.png) no-repeat -420px 0;
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 134px;
	text-align:center;	
	text-decoration:none;
	color:#333;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -420px -31px;	
	color:#fff;	
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -420px -62px;		
	cursor:default !important; 
	color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l 			{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */ 
.panes .pane {
	display:none;		
}
 
Sorry that was a bit dumb to miss. This is what I've got now:

untitled2.jpg


The red at the bottom is just a bit of the footer i didnt clip

Do you have any idea what the underlying problem is here?
 
Unfortunately my work blocks msn, scumbags! Skype works if that would do and here until 6.15pm or so. Skype name is shicky4.

Im a bit confused why it doesnt display the first pane of text and why when you click on a tab it flicks to the top of the page
 
Just a little follow up to this, all functions perfectly. However one issue there at the moment is the difference in height.

For example, some products require a pretty big table (greaters than 500pixels), other products only require 200pixels or less. So it looks a bit stupid and unbalanced with massive white space in a table under some. Is there a way to set my table to auto-adjust in height due to the content?
 
You must log in or register to reply here.
Back
Top Bottom