PDA

View Full Version : Help with Ajax Tabs Content Script



southerncal
08-27-2010, 02:41 PM
1) Script Title: Ajax Tabs Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem: using the modernbricksmenu2 tabs

trying to get the pages to fade in and fade out as they are loaded.

Also set the width of the container to 645
<div id="flowerdivcontainer" class="flowerdivcontainer" style="border:1px solid #003399; width:645px; height: 323px; background-color: transparent; padding: 1px">
</div>
<div id="flowertabs" class="modernbricksmenu2" style="padding-left:2px;text-align:center;">

is there a way to have all the tabs to display the full width regardless of the text? so that the 6 tabs are the same total width of the container?

thank you

ddadmin
08-27-2010, 05:31 PM
Just to clarify, are you referring to Tabs Content script, or Ajax Tabs Content instead? Your title and link point to two different scripts.

southerncal
08-27-2010, 05:41 PM
pretty sure it is the same script I am looking at

Referring to:

Ajax Tabs Content Script (v 2.2)
Demo #2- Expanding of arbitrary DIVs on the page enabled

I am using this with the timing set to change tabs every 4.5 seconds, and just want the Ajaxed content to fade out/in as each page is accessed.

and the tab with equal to the content width, regardless of amount of text in the tabs

thank you

southerncal
09-03-2010, 03:09 PM
So is the fading in / out of the content possible with this script?

Thank you

ddadmin
09-05-2010, 12:51 AM
Enlisting the help of jQuery, this is relatively simple to do. You'd first add a reference to jQuery in the HEAD section of your page:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />

<script type="text/javascript" src="ajaxtabs/ajaxtabs.js">

/***********************************************
* Ajax Tabs Content script v2.2- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Then, use the below modified .js file. To modify the fade duration, try finding the two instances of fade() inside the file, and pass a number to both of them in terms of milliseconds, such as fade(1000).

Fixed attachment

southerncal
09-07-2010, 03:30 PM
thank you for your reply.

you said the below modified .js file

the only file below was a css file?

ddadmin
09-08-2010, 04:26 AM
Ops, I attached the wrong file. Fixed. :)

southerncal
09-08-2010, 01:48 PM
this version of the .js file has no instance of fade that i can locate.

i did a search in my editing program, and in notepad, then visually.

did i miss it???

ddadmin
09-11-2010, 08:10 PM
Strange, I guess I must have overwritten the modified .js file with the original at some point. I've redone the changes, and attached the modified .js file again (hopefully). :)

mwscrl
04-27-2011, 06:38 PM
Thank you, works perfectly!