window.addEvent('domready',function(){
new Accordian();
$(document.body).removeClass('jsActive');
});
On Fri, Nov 21, 2008 at 12:15 PM, mshetler <[EMAIL PROTECTED]>wrote:
>
> 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 -
