Freeform control inside of panel -- How to trigger a DIV to hide.

[MichaelCarroll]

I have a panel that has a free-form container with HTML div elements. I have a button that can trigger these div elements to hide using the following example code:

<div id="pocketDrop" style="display: table; width: 100%">        <div class="tableBoxContainer" style="display: table-row;">
            <div class="tableBoxContainer" style="display: table-cell; width:35%">Pocket Drop</div>
            <div class="tableBoxContainer" style="display: table-cell; width:65%">{drop}</div>
        </div>
        <div class="tableBoxContainer" style="display: table-row;">
            <div lass="tableBoxContainer" style="display: table-cell; width:100%">{button:BTN_DROP}</div>
        </div>
    </div>

// display controlsvar ele = $('pocketDrop');
A5.u.element.hide(ele,{type: 'blind',duration: 'fast'} );

But what if I want to hide the div elements when the free-form container loads after the panel has become active. In other words how could I set a div to be hidden in in initial state as it is rendered?

Thanks,

Michael Carroll

[Davidk]

Re: Freeform control inside of panel -- How to trigger a DIV to hide.

How do you get to the PanelCard containing the FreeForm Container? If you're swiping from another PanelCard, then you could use the onSwipe event of this PanelCard to run your hide code. The onSwipe event can tell the direction you're swiping... which can help as well.

[MichaelCarroll]

Re: Freeform control inside of panel -- How to trigger a DIV to hide.

How do you get to the PanelCard containing the FreeForm Container? If you're swiping from another PanelCard, then you could use the onSwipe event of this PanelCard to run your hide code. The onSwipe event can tell the direction you're swiping... which can help as well.

David thanks for the reply. No, the user is clicking on a button to programmatically go to the next slide. So, once they are in the panel then I have buttons that are sliding Adobe Edge animations and hiding and revealing controls. This works just delightfully, but it is the initial state that is giving me issues as I am not finding a way to trigger it easily.

So I believe today I am going to use css to set the visibility of the div id to hidden and the display to none.

display: none;
visibility: hidden;

I will report back.

Thanks,

Michael Carroll

[Davidk]

Re: Freeform control inside of panel -- How to trigger a DIV to hide.

Ok... didn't know about the button or the animations or the slides. Not really sure what you're doing... but display and visibility will certainly hide stuff.

[MichaelCarroll]

Re: Freeform control inside of panel -- How to trigger a DIV to hide.

David,

Here is a transition image of what is going on with my project. Bear in mind that there is still graphic tweaks to be made as this is for functional programming to get the flow between the adobe edge animation and aa to be smooth.

configurator.png

Panels 4 and 5 in the attached image are in the same panel. As I do not want load the animation page a second time. So as the user clicks through the animation -- there is seven section of animation and information to be collected -- the information to by collected dynamically changes. Then a summary page.

So as this panel loads I need to have it trigger what <div> sections to display and as I navigate with the buttons to do the same.

Ok -- so

#pocketDrop {
    display: none;
visibility: hidden;
}

works as panel 4 loads, but using the button to trigger:

// display controls
var ele = $('dropShade');
A5.u.element.show(ele,{type: 'blind',duration: 'fast'} );

does not change its appearance.

Thanks looking as I publicly figure this out.

Michael Carroll

[MichaelCarroll]

Re: Freeform control inside of panel -- How to trigger a DIV to hide.

Ok so an update:

Need to have certain divs hidden and divs shown as the free-form container loads. Testing out the following.

Run jQuery command in script tags at the end of the HTML in the free-form container.

</div>
<script>
var $text = $('#pocketDrop');
$text.addClass('hide');
</script>

I have css that looks like this:

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

Does nothing, yet in Chrome I can add a class attribute of hide and it hides.

This code also works in a JSFiddle to hide and unhide a div.

So question?

Why won't a jQuery or Alphafive

var ele = $('pocketDrop');
A5.u.element.hide(ele,{type: 'blind',duration: 'fast'} );

work inside of the <script> tags in a free-form container.

If there is a better way to do this?

Thanks,

Michael Carroll

[MichaelCarroll]

Re: Freeform control inside of panel -- How to trigger a DIV to hide.

Ok figured this out.

It turned out to be so much easier than I thought.

I was able to use the standard A5 code.

var ele = $('pocketDrop');
A5.u.element.hide(ele,{type: 'blind',duration: 'fast'} );

I needed 5 divs to be hidden and one to show.

On the on-click for a button on a previous panel I was able to get it to trigger the divs in my free-form control to display correctly when the new panel came into view.

Easy.

Thanks,

Michael Carroll