hide / show objects..

[TinTin]

Is there an easy way to hide / show objects? and other attributes for an object?

Have to say this is the best app out there by far for Rapid HTML5 app dev.


Great work all.

[Gaev]

TinTin:

Is there an easy way to hide / show objects?

Try something like this ...

Code: Select all

BeginJS
   $('#PushButton22').hide();
EndJS


... replace PushButton22 with name of your object ... .use show() (instead of .hide()) to make it visible again.

and other attributes for an object?

If you can define the object's properties with a NeoAppbuilder variable (e.g. property called Caption) … then, a change in the specified variable (using SetVar) will result in a change to this property.

[TinTin]

thanks Gaev, I'll have a play

[TinTin]

Gaev are we able to change opacity (style) properties for objects as yet?


Something like..

BeginJS
$('#image1').style.opacity("0.3");
EndJS

[Gaev]

TinTin:

Gaev are we able to change opacity (style) properties for objects as yet?

Any of these will work ...

Code: Select all

BeginJS
   $('#PushButton22').css({ opacity: 0.3 });
EndJS


Code: Select all

BeginJS
   $('#PushButton22').fadeTo( "slow" , 0.3);
EndJS


Code: Select all

SetAttribute "PushButton22" "opacity" "0.4"


[luishp]

This will surelly work too:

Code: Select all

document.getElementById("objectId").style.opacity="0.5"

It seems confusing but we are just using JQuery, NeoAppBuilder or pure JavaScript sintax.
Of course the easier but more limited right now is NeoAppBuilder approach.

[Gaev]

It seems confusing but we are just using JQuery, NeoAppBuilder or pure JavaScript sintax.

When faced with the luxury of multiple choices, I tend to lean towards NeoAppBuilder commands and then jQuery ... as both can be relied upon to take care of the "inconsistencies of some/older Browsers"

Of course the easier but more limited right now is NeoAppBuilder approach.

Agreed ... but even now, developers can build their own commands using the facilities afforded by (javascript) Subroutine and (javascript) Libraries ... and then code stuff like ...

Code: Select all

GoSub "HideObject" "abcd"
GoSub "FadeObject" "pqrs" "0.3" "slow"
or
gkHideObject("abcd");
gkFadeObject("pqrs","0.3","slow");


[TinTin]

Wonderful, works a treat for each attribute now - Thanks very much.

Now time to have a play with Phonegap build. for those that are interested they have a BETA simulator app for desktop, ios and android which allows you to
see how well the native app performs once it's built from what I can work out.

The dev time using this new tool (and I've been a previous user of NB too) is really promising, am looking forward to the additional objects as they appear especially
a Grid / Table

[TinTin]

can we hide container objects yet? or will it mean hiding every element within the container separately..

I've just tried the Javascript method below for containers which isn't liking it..

BeginJS
$('#container').Hide();
EndJS

[TinTin]

for now I'mgetting round by resizing the element at runtime for anyone else who is wanting to show/hide containers.

cheers

[Gaev]

TinTin:

I've just tried the Javascript method below for containers which isn't liking it..
BeginJS
$('#container').Hide();
EndJS

Javascript is CASE SENSITIVE ... Hide() is NOT hide() ... this worked for me ...

Code: Select all

BeginJS
$('#myDiv').hide();
EndJS

[TinTin]

my bad GAEV , you shine again with your Javascript, I can now add transitions for my hide and show event now .. woo hoo

[TinTin]

I'm using (in my old dev environment) CSS rule to disable text selection highlighting within the app,

I added this in the style of each object (that I didn't want to be highlight-able)

https://developer.mozilla.org/en-US/doc ... ser-select

Is there an easy way to include this? Assuming it can be added in the CSS properties area for the project

Lots of questions, and GAEV I owe you a beer,


Cheers

[Gaev]

TinTin:

Note the warning on the referenced web page ...

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

So, it will not work in older Browsers ... and may become problematic in the future.

Having said that ...

1) This command in the click event code section of a PushButton worked (when App was run in my Firefox Browser) ...

Code: Select all

SetAttribute "Paragraph3" "-moz-user-select" "none"


You can also place it in the page-enter code section.

I did not try ...

Code: Select all

SetAttribute "Paragraph3" "-webkit-user-select" "none"
SetAttribute "Paragraph3" "-ms-user-select" "none"


2) It should also be possible to ...

a) setup Prpoperties >>> Advanced >>> css-class ... e.g. unselectable

b) attach your own css file ... Project >>> Properties >>> Libraries ... with this code ...

Code: Select all

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}


... but I have not tried it.

[TinTin]

works perfectly - I've also managed to stop dragging of images (ghost image) by using

SetAttribute "image1" "-webkit-user-drag" "none"

It's working in Chrome and Safari, so am very happy!

cheers and thanks for your help