Ajax Tabs Content script- no resize, por favor ^_^

1) Script Title: Ajax Tabs Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tent/index.htm

3) Describe problem: This script looks really neat and I would love to insert it into my page, but I need it to be a controlled size. I'm a bit of a beginner, and I'm sure there is just some easy line of script I have to add, but I would really appreciate the help.
I just need the external pages that load into the tabbed area to remain a certain size and be scrollable, either by bars or "up" "down" buttons.
Gracias ahead of time!

PLEASE: Include the URL to your problematic webpage that you want help with.

No script code is required for this, use the style rules. Find this in ajaxtabs.css (it's at the bottom in the default version):

Code:

---

.contentstyle{
border: 1px solid gray;
width: 450px;
margin-bottom: 1em; padding: 10px;
}

---

Set the width and height as desired and the overflow to auto, ex:

Code:

---

.contentstyle {
border:1px solid gray;
width:450px;
height:500px;
overflow:auto;
margin-bottom:1em;
padding:10px;
}

---

That worked perfectly!!!
Thanks so much John!

By the way, did I read somewhere that the external content you include can't have its own javascript? I've been fiddling with my pages and the javascript on the external pages doesn't seem to be working.

Quote:

---

Originally Posted by erinmc5

That worked perfectly!!!
Thanks so much John!

By the way, did I read somewhere that the external content you include can't have its own javascript? I've been fiddling with my pages and the javascript on the external pages doesn't seem to be working.

---

You're welcome. Now, a seemingly simple question and a seemingly simple answer - yes they can. But, it is not that simple. If you read the 'more information' section and beyond on the demo page, it explains how to include external scripts and stylesheets for each content piece if desired but, this is tricky because (and I'm not sure how much of this the demo page makes clear) what actually happens when you use this 'rev' attribute is that the script and/or css is added as an external file to the 'top' page. If this is all that is required to get your scripts working for the loaded content, fine but - be aware, once loaded, there is no provision for removing them, so - they will, wherever applicable, effect all loaded content and all content on the 'top' page. Also, notice I said:

"If this is all that is required to get your scripts working for the loaded content, fine"

In many cases a script needs to initialize its content and/or perform actions onload in order to work. Special steps must often be taken to insure that these sort of events occur at an appropriate time or else, things still won't work as expected. How this is worked out (if needed) depends upon the scripts and the content involved.

Wow! Ok, so I'll just take that as a "no, you don't want to really try that" ^_^
Way over my head.
Thanx again!

Well, I didn't mean to give that impression but, depending upon the script, it can get rather involved. I have been able to get some fairly complex scripts to work with the AJAX type scripts. If your script is straightforward, it could work just by using AJAX Tab's rev attribute to add it to the page. Sometimes all you need to do is to put the script on the 'top' page. It all depends.

HEY Everybody , it's reallly urgent here !
am trying to modify the script to be like the yahoo main page http://yahoo.com contents tab ! I changed it to mouse over but the differenrence is that all buttons have
the same size ( I need it) and that the content style opens smoothly and slowly and it appear only after a the click or the mouse over ( I need it too ) ? is there anyone who can help ?? I really really need this modification !!! :) I will be grateful if someone can help !!
THANKS

Il be grateful if someone can help me to give
the all tabs the same size !
THANKS

Quote:

---

Originally Posted by richarawad

Il be grateful if someone can help me to give
the all tabs the same size !
THANKS

---

What do you mean exactly? The only ways I see to get the tabs, the things that you click on, to be the same size (width, the heights are already identical) would be to have their text all be the same length or padded out with non-breaking spaces ( ) or be individually styled.

Is this even what you are talking about?

Quote:

---

Originally Posted by jscheuer1

What do you mean exactly? The only ways I see to get the tabs, the things that you click on, to be the same size (width, the heights are already identical) would be to have their text all be the same length or padded out with non-breaking spaces ( ) or be individually styled.

Is this even what you are talking about?

---

first of all , i have changed the .js script and had the tabs working on
mouseover, the second step is to add a css part in order to have the same
size for all tabs and not by adding   as a html , i want it standard and
the size must me the same whatever the length of the characters is ! is it
doable ? and then i want to have tabs like buttons , and when the mouse
is over the tabs will open ! i'll be working on , if someone can help me to
get the result faster , i will be grateful too ... Thanks for your interest guys!

Actually, I didn't think that this could be done but, by adding the red style rules as shown, it seems to work out:

Code:

---

.shadetabs li a{
float:left;
width:160px;
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

---

and:

Code:

---

.contentstyle{
clear:left;
border: 1px solid gray;
width: 450px;
margin-bottom: 1em; padding: 10px;
}

---

Quote:

---

Originally Posted by jscheuer1

Actually, I didn't think that this could be done but, by adding the red style rules as shown, it seems to work out:

Code:

---

.shadetabs li a{
float:left;
width:160px;
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

---

and:

Code:

---

.contentstyle{
clear:left;
border: 1px solid gray;
width: 450px;
margin-bottom: 1em; padding: 10px;
}

---

---

Thanks a lot MAN , it really works ! so can i ask a new question ?
can we hide the content area until the mouse is over the tab ?
so tabs will look like buttons ????? and when the mouse is over or the
tab is clicked , the content area will be shown and the link will be loaded
inside ????? doable ?? THANKS for your help ! i highly appreciate that
Rawn!

I don't have time at the moment to work this out but, it is certainly doable. It would help me, for when I get around to it, to know which way you want the content area to be:

1 ) A reserved space (blank until filled but without a border).

2 ) A space that pushes other content out of its way when being shown.

or:

3 ) A space that, when seen, covers other content.

Quote:

---

Originally Posted by jscheuer1

I don't have time at the moment to work this out but, it is certainly doable. It would help me, for when I get around to it, to know which way you want the content area to be:

1 ) A reserved space (blank until filled but without a border).

2 ) A space that pushes other content out of its way when being shown.

or:

3 ) A space that, when seen, covers other content.

---

OK thanks John ! .. anyways when ill finish i will upload the code
to the website !!! :)

Hey Guys !! at : http://www.yahoo.fr there is an ajax script
it;s like content tabs , it 's really great and useful , i was trying to steal it
by getting all js and css files but it doesnt work ! is there any way ??
it doesnt work offline ? anyone can get it ???
Thanks anyways !

Any idea why this won't work w/ Safari? Everything seems to work except the window size...the window won't resize, it is always the same size, and gets scrollbars.

Hmmm...just for kicks, I loaded the tutorial url up in Safari...the tabs there get resized. Odd. Must be something w/ my stylesheet. But it's working fine on all my other browsers both on PC and Mac.

Forget it...all fixed. had padding:10px; listed twice.

Thanks,
jH

Ok, this is still in regards to this content script, but I have a slightly different question:

I see that a 'rev' is used to call in stylesheets/js that you'd like applied to the externally loaded .html pages.

Is that something that can be done elsewhere also? I'd like to use ThickBox or LightBoxGoneWild or iBox to pop up content. I'd like to be able to pop up the exact same external html files that I've already prepared for this Ajax Content script. However, those pages don't have stylesheets associated with them since I'm using the 'rev' tag.

Any solutions?