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 -
