Thanks again for the help - however, I'm still a bit lost.
I did as you said with the placement of
<script type="text/javascript">
document.body.className = 'jsActive'
</script>
And set up the class in the css.
I think I did that part right because the accordian has completely
disappeared.
However, when you say:
"After your initialization you can remove the jsActive from your body
again."
How do I remove the jsActive? I'm guessing that is another script,
but as I said VERY much a novice with JS (I'm a graphic designer who
on occasions is required to teach myself backend stuff - thank
goodness for google and the web!!!)
AND - thanks again for your help.
On Nov 21, 10:26 am, eskimoblood <[EMAIL PROTECTED]> wrote:
> Place the script direct behind the opening body tag:
>
> <body>
> <script type="text/javascript">
> document.body.className = 'jsActive'
> </script>
>
> now you know that js is available. In your css file you have put this
> snippet:
>
> .jsActive .accordionContent {
> position: absolute;
> top: -100000px;
>
> }
>
> This will position your accordion content outside the viewable part of
> the screen (but keeping its dimension, which is needed to initialize
> the accordion), when ever javascript is activated. After your
> initialization you can remove the jsActive from your body again.
>
> On 21 Nov., 15:56,mshetler<[EMAIL PROTECTED]> wrote:
>
>
>
> > eskimoblood,
>
> > I'm very much a novice when it comes to javascript - can you explain
> > the first part a bit more. Where does this code go? In the main
> > page, the javascript page, etc? I should note I'm linking to the
> > javascript externally in the <head>.
>
> > I think I understand where to place the css. The page is actually a
> > coldfusion page and the elements are called in as templates. So,
> > there is a header, a content section, and a few other columns. One of
> > the columns calls in the accordion which is its own CFtemplate file.
> > The accordion has its own css page (external), so I'm guessing I place
> > the css in that.
>
> > Any help is greatly appreciated!
>
> > On Nov 21, 3:27 am, eskimoblood <[EMAIL PROTECTED]> wrote:
>
> > > I'm using a simple document.body.className = 'jsActive' script direct
> > > after the opening body tag and this piece of css :
> > > .jsActive .accordionContent {
> > > position: absolute;
> > > top: -100000px;
>
> > > }
>
> > > On 20 Nov., 22:29,mshetler<[EMAIL PROTECTED]> wrote:
>
> > > > I'm having the same issue of all the content of the accordion being
> > > > visible on page load. Once the page loads it works perfectly.
>
> > > > Did you ever find a good solution?
>
> > > > On Oct 21, 2:05 pm, keif <[EMAIL PROTECTED]> wrote:
>
> > > > > Move your JS to the header.
>
> > > > > I'm assuming you have your page set out like:
> > > > > [css]
> > > > > [/head]
> > > > > [body]
> > > > > [content]
> > > > > [scripts]
> > > > > [/body]
>
> > > > > I've found that be moving the library to the header, along with the
> > > > > domready events, they're executed faster than in the footer.
>
> > > > > (The pages used for these tests were both simple text, and a page with
> > > > > OMG HUGE PNGS).
>
> > > > > On Oct 20, 3:57 pm, Sapslabs <[EMAIL PROTECTED]> wrote:
>
> > > > > > I have this code executed on the domready function
>
> > > > > > window.addEvent('domready', function() {
>
> > > > > > var fx = [];
> > > > > > $$('.contentholder').each(function(item, index){
> > > > > > var index = fx.length;
> > > > > > myid = item.id;
>
> > > > > > fx[myid] = new Fx.Slide(item.id);
> > > > > > fx[myid].hide()
> > > > > > });
>
> > > > > > $$('.acclinks').each(function(item, index){
> > > > > > item.addEvent('click', function(el){
> > > > > > myid = item.id;
> > > > > > myid = myid.replace(/_button/g, "_content");
> > > > > > fx[myid].toggle();
> > > > > > });
> > > > > > });
>
> > > > > > });
>
> > > > > > This will get all the links with the class acclinks and make them
> > > > > > toggle their specific div. The code works perfectly (is like an
> > > > > >accordionbut each element is independent form one another so that I
> > > > > > can have any number of them open at one time). The problem is that
> > > > > > as
> > > > > > soon as the page loads, I see all the content and then it quickly
> > > > > > gets
> > > > > > hidden byt the function.
>
> > > > > > Is there any way to assure that the DOM is loaded, javascript loaded
> > > > > > and function called, before the rest of the page? I want the page to
> > > > > > load with everything hidden at once since I don't want the user to
> > > > > > see
> > > > > > the content flash and then disappear.
>
> > > > > > Thanks- Hide quoted text -
>
> > > > > - Show quoted text -- Hide quoted text -
>
> > > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -
