This project is archived and is in readonly mode.

#843 ✓invalid
ely

hide command not triggered fast enough

Reported by ely | February 7th, 2010 @ 08:04 AM | in 2.0 (closed)

Hi,
I have a div which i need to hide on page load (afterwards toggled on slide).
problem is that the div is shown briefly before being hidden if page is not already cached.
this is mainly an issue for opera, also bad on chrome and safari and firefox.
on IE works fine.

I tested this on several machines all fairly strong.

the URL:
elysarig.com

heres the js code (you can see that i've put the hide command first):

window.addEvent('domready', function() {

var archiveSlide = new Fx.Slide('archive').hide(); //used for vertical

var status = {
    'true': 'open',
    'false': 'close'
};

    openForm="no";
var memory = "url(images//circle.gif)";//this is used for rollover effect   


//used for image preloading

Image1= new Image(162,46)
Image1.src = "images//circle.gif"

Image2 = new Image(162,46)
Image2.src = "images//circle_h.gif"

Image3 = new Image(162,46)
Image3.src = "images//circle_mid.gif"

//--end

//-vertical

$('v_toggle').addEvent('click', function(e){
    e.stop();
    archiveSlide.toggle();

    if( status[archiveSlide.open] == "close" ){ //if archive is closed
        $('v_toggle').setStyle('background-image', 'url(images//circle_h.gif)'); //set dark bg
        memory = "url(images//circle_h.gif)"//remember for rollout
        }

});

$('v_toggle').addEvent('mouseenter', function(e){ //on rollover
    e.stop();
    $('v_toggle').setStyle('background-image', 'url(images//circle_mid.gif)'); //set rollover bg
});

$('v_toggle').addEvent('mouseleave', function(e){ //on rollout
    e.stop();
    $('v_toggle').setStyle('background-image', memory); //set to remembered bg
});

// When Vertical Slide ends its transition, we check for its status
archiveSlide.addEvent('complete', function() {
    if( status[archiveSlide.open] == "close" ){ //if archive is open
        $('v_toggle').setStyle('background-image', 'url(images//circle.gif)'); //set light bg
        memory = "url(images//circle.gif)"//remember for rollout
        };
});


//--horizontal
var textSlide = new Fx.Slide('text', {mode: 'horizontal'});
var formSlide = new Fx.Slide('form', {mode: 'horizontal'}).hide();

//when clicking on "say hi"
$('h_slidein').addEvent('click', function(e){
    e.stop();
    textSlide.slideOut();
    openForm="yes";
    });

// after clicking "say hi", textSlide finishes sliding out, then formSlide will slide in.
textSlide.addEvent('complete', function() {
    if(openForm=="yes"){
        formSlide.slideIn();
        };
    });

// when clicking on "back"
$('h_slideout').addEvent('click', function(e){
    e.stop();
    formSlide.slideOut();
    openForm="no";
});


// after clicking "back", formSlide finishes sliding out, then textSlide will slide in.
formSlide.addEvent('complete', function() {
    if(openForm=="no"){
        textSlide.slideIn();
        };
    });

});


I guess the problem is that the page finishes loading before the script is triggered...
what to do?

Comments and changes to this ticket

  • fakedarren

    fakedarren February 7th, 2010 @ 08:59 AM

    • State changed from “new” to “invalid”

    I would set the element in the CSS to be visibility: hidden and then change that to visible at the end of your script above. Setting to display: none won't work because the Slide will not be able to calculate a height.

  • ely

    ely February 8th, 2010 @ 12:22 PM

    thanks for the advice, i did it and it does help a bit. I just wish there was a way to solve this completely.
    thanks anyway

  • ely

    ely February 8th, 2010 @ 12:44 PM

    update:
    yay I fixed it.
    I set the problematic div to display:none in the css.
    in the js i set it to display:block on DOM ready, and immediately hide it with the fx.slide hide command.

    SOLVED

  • John Phelps

    John Phelps March 14th, 2011 @ 10:49 PM

    • Milestone order changed from “0” to “0”

    I've tried lots of solutions without luck, but ely's fix seems to work 100% on all platforms. Many thanks. Here's my usage for a help menu that slides from the top of the page. (vertical_slide div set to display:none in css)

    window.addEvent('domready',
    function() {

    var myVerticalSlide = new Fx.Slide('vertical_slide').hide();
    document.getElementById('vertical_slide').style.display='block'
    myVerticalSlide.hide();
    $('v_toggle').addEvent('click', function(e){
        e.stop();
        myVerticalSlide.toggle();
    });
    });
    

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

People watching this ticket

Pages