JavaScript (Spartan) Property Toggler

Troy III 0 Tallied Votes 242 Views Share

!below is the code snippet
This is a multi-use property toggler. In the given example we are toggling a sub property of an element.

e -is the property owner to be targeted;
p - is the property name to be set;
v - is the property value;

henceforward changing the class-name of the property owner instead; - would look like this:

toggleProp(this,"className","newCls")

meaning that the target element can delegate the behavior instruction to some other element, while the event itself can remain bonded to a simple on/off button, i.e.:

toggleProp(reciever,"className","newCls")

Works in all browsers, in all manners except Firefox v(9.0.1) when used on style properties exhibiting a randomly appearing bug already filed at [ Bugzilla@Mozilla – Bug 720129 ], causing the toggle behavior to stop functioning in an toggle-on state.

<!doctype html>
<html>
<head>
<title>Toggler</title>
</head>
<body>

<div onclick='toggleProp(this.style, "backgroundColor","blue")'> Inline call for togle </div>
<div id=toggler> script call for togler </div>

<script>
	toggleProp=
	/*b.b Troy III p.a.e*/
	function(e,p,v){e[p]==v?e[p]=e.b:(e.b=e[p],e[p]=v)}

	document.
		getElementById('toggler').
			setAttribute('onclick', 'toggleProp(this.style, "backgroundColor","red")');
</script>
</body>
</html>
Airshow 416 WiFi Lounge Lizard Team Colleague

Troy,

Reuse of e.b can cause cross-talk with multiple uses on the same element.

Try this fiddle.

Airshow

Troy III 272 Posting Pro

Troy,

Reuse of e.b can cause cross-talk with multiple uses on the same element.

Try this fiddle.

Airshow

I should have mentioned that the "spartan toggle" is a single purpose switch.

A definition of a toggle is a two-state util (button) with a single (hardwired) purpose.
A two-state dedicated single-purpose util.

Switch: [purpose] // purpose = [power]
State: ON/FF

Once dedicated to [power] it gets hardwired to becoming an exclusive two-state power switch. Shouldn't be able to use the same button to switch audio[on:off] with it, and it cannot have more than two states.

Therefore if the switch purpose is a given it will become a color-switcher explicit; The color becomes the purpose of the switch. Where the off status is not a new mode, the Off mode is simply off, where off is an existing/default/unaffected state of the thing.
This is why you should be able to switch between modes, but not between purposes of the same element; [it can be used as a weak security feature too; meaning, the external script will not be able to modify the purpose of the switch with ease].

Troy III 272 Posting Pro

coming back from fiddle...
I notice that you've been trying to use the toggle as a hover utility also. But there's a problem with the approach, besides using the wrong tool for the job you have a three-state hover subject.
I haven't seen a three-state hover element either, a hover element has its initial and hovered property. There's no purpose in having an initial black element which turns blue on hover-in but red on hover-out and stays that way.
So to make it simple, although the spartan toggle was not meant to be used on sub-properties even though the example given is demonstrating its limits and doing exactly that, and especially not as hover utility, if properly applied it can be used to some extent as a 'normal' hover two-state utility too.

I remember the headache with hover functions in their debut times, !the hover default property needs to be set on style element in order to work.

/*
csss
#toggler{color:#09f}
for html
<div id="toggler">Script call for toggler</div>​
*/
toggleProp=
    /*b.b Troy III p.a.e*/
    function(e,p,v){
        e[p]==v ? e[p]=e.b : (e.b=e[p],e[p]=v);
    };

	var t = document.getElementById('toggler');
	t.setAttribute('onclick', 'toggleProp(this.style, "backgroundColor", "red")');
	t.setAttribute('onmouseover', 'toggleProp(this.style, "color", "green")');  
	t.setAttribute('onmouseout',  'toggleProp(this.style, "color", "green")');

Having a toggler at hand, brings up the idea of an event named "onhover" so that the redundant code like:
t.setAttribute('onmouseover', 'toggleProp(this.style, "color", "green")'); t.setAttribute('onmouseout', 'toggleProp(this.style, "color", "green")')
could be merged into a single line expression as in:
t.setAttribute('onhover', 'toggleProp(this.style, "color", "green")');

Dual purpose switch achieved but the coder should keep in mind a precaution that the initial property of the switch should be defined on the style element.

Airshow 416 WiFi Lounge Lizard Team Colleague

Troy, the fiddle was totally contrived just to demonstrate that e.b could be fooled.

As I put the fiddle together, I wondered if e.b could be initialised as a namespace (ie. a native javascript object), in which you could store one value per CSS property.

It will look something like this:

function(e,p,v){
        if(!e.b) { e.b = {}; }
        e[p]==v ? e[p]=e.b[p] : (e.b[p]=e[p],e[p]=v);
    };

I've not tested this and it may not work because element.style.b = {} is probably illegal. But you should be able to work with a property of the element itself rather than element.style . With HTML5, you could use a "data-" property.

If this could be made to work, then you would have the means to toggle as many CSS properties as you want, independently.

Airshow

Troy III 272 Posting Pro

Troy, the fiddle was totally contrived just to demonstrate that e.b could be fooled.

As I put the fiddle together, I wondered if e.b could be initialised as a namespace (ie. a native javascript object), in which you could store one value per CSS property.

It will look something like this:

function(e,p,v){
        if(!e.b) { e.b = {}; }
        e[p]==v ? e[p]=e.b[p] : (e.b[p]=e[p],e[p]=v);
    };

I've not tested this and it may not work because element.style.b = {} is probably illegal. But you should be able to work with a property of the element itself rather than element.style . With HTML5, you could use a "data-" property.

If this could be made to work, then you would have the means to toggle as many CSS properties as you want, independently.

Airshow

Of course, introducing a relay-object will allow more wires to be added to the switch.

decriptive form:

toggleXprop=
	function(owner, property, value) {
		owner.mneme||(owner.mneme={});
		owner[property]==value?
		owner[property] = owner.mneme[property]:
		(owner.mneme[property]=owner[property], owner[property]=value);
	}

lib. ver.:

toggleXprop=
	function(o,p,v){
		o.m||(o.m={});
		o[p]==v?o[p]=o.m[p]:(o.m[p]=o[p],o[p]=v);
	}

*Interestingly - we came up with exactly the same line of code in the main.
Anyway, this is a/the second grade function..., and only a half way there. Practice will reveal the third and final demand for completion.

But I still don't understand why would you use toggle for a hover effect?!

Airshow 416 WiFi Lounge Lizard Team Colleague

Looks good.

But I still don't understand why would you use toggle for a hover effect?!

Pure lack of imagination :-/

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.