Form's Toggle show/hide UX

Notice: This thread is very old.
medhi
Generous Backer | 255
+
0
-

I've been thinking about forms' toggle UX. Its show/hide behavior is little bit confusing, because it's very easy to miss the showing or hiding part of a form. I would prefer a more UX-friendly effect, like sliding. Goal is to make the user notice, that something was hidden or shown.

What do you think?

David Grudl
Nette Core | 8082
+
0
-

I prefer sliding too. It can be created using CSS3 transitions.

Jan Tvrdík
Nette guru | 2595
+
0
-

Or you can set Nette.toggle to custom function which can do whatever you prefer.

David Grudl
Nette Core | 8082
+
0
-

CSS3 transitions requires own Nette.toggle too. Toggling property display should be changed to toggling class.

David Grudl
Nette Core | 8082
+
0
-

What about enhance native Nette.toggle with class names toggling? It can be enabled via:

$form->elementPrototype->attrs['data-nette-toggle-class'] = TRUE;

and styled:

form.toggleName-on input {
	opacity: 0;
}

form.toggleName-off input {
	opacity: 1;
	transition: opacity 2s;
}
Nette.toggle = function(id, visible, form) {
	if (form.getAttribute('data-nette-toggle-class') !== null) {
		form.className = form.className.replace(new RegExp('\\s*\\b' + id + '-o(n|ff)\\b', 'g'), '') + ' ' + id + (visible ? '-on' : '-off');
	} else if (elem = document.getElementById(id)) {
		var elem;
		elem.style.display = visible ? '' : 'none';
	}
};
Jan Tvrdík
Nette guru | 2595
+
0
-

That seems useful, I'm just not sure if it is wise to base the class name on id.

medhi
Generous Backer | 255
+
0
-

Are we talking about something, which will be integrated into the framework or I have to set this on my own? Because I don't understand it :)

Jan Tvrdík
Nette guru | 2595
+
0
-

@medhi: For now you need to implement different toggle behavior on you own. @David is suggesting that it may be useful to implement support for class toggling directly in the framework.