AMAZING!
Thanks for the help (and even as a designer I think I completely
understand what's going on here!)
Well done all - much appreciated!
On Nov 21, 12:26 pm, nwhite <[EMAIL PROTECTED]> wrote:
> 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 -- Hide quoted text -
>
> - Show quoted text -
