Binding command

Bind different things to other things. Only your imagination sets the limit.

Basic Usage (HTML)

data-jkit="[binding:selector=#bindingsource;source=html;mode=html]"

Advanced Init (JavaScript)

$('#myelement').jKit('binding', { 'selector': '#bindingsource', 'source': 'html', 'mode': 'html' });

Options

Option	Values	Default	Description
selector	String: “#mydiv” or “#mydiv1\|#mydiv2\|#mydiv3” or “this”		DOM element to bind to
source	“text”, “html”, “val”, “attr.id”, “css.height”, “css.height.max”, “event.click”, “scroll.top”, “cleareance.bottom”, “has.text”	val	The binding values source
search	String		Use this in combination with the has.something source option
variable	String		Use this option if you want to bind to a JavaScript variable
mode	“text”, “html”, “val”, “attr.id”, “css.height”, or some custom function	text	Where to put the data we are bound to
interval	Int (-1 = no interval)	100	The update interval
math	String		Mathematical equation, for example: value*100 (value is always the binding value)
condition	String		For example: value>100 (value is always the binding value)
if	String		Set the output to this if the condition is met
else	String		Set the output to this if the condition is not met
speed	Int or “fast”, “slow” (Milliseconds)	0	Animate the changed CSS if speed is > 0 (only applicable if mode is css.x)
easing	Easing plugin option	linear	Easing used in case of a CSS animation
trigger	“yes” or “no”	no	Trigger an event with “valueX” and “notvalueX”, where X is the value, whenever the value changes
accuracy	Int, float or empty		Limit the accuracy of numeric values to size of this option
min	Int, float or empty		Limit anumeric value to this minimum
max	Int, float or empty		Limit a numeric value to this maximum
applyto	DOM nodes(s)		Where to apply the value, for example “each.div” or “children.p” or “#myelement”
delay	Int (Microseconds)	0	Delay before the comamnd is executed

Events

Event	Description
true	Triggered when a condition is met
false	Triggered when a condition is not met (only condition changes are triggered!)

Examples

Binding a custom function:

In this first example, we’re binding a custom function that counts the characters entered in a textfield:

Source:

<input type="text" id="bindingsource" value="test">
<span data-jkit="[binding:selector=#bindingsource;mode=bindingFilter]"></span>
<script>
	var bindingFilter = function(value, el){
		el.text(value.length+' chars entered');
	}
</script>

CSS binding:

In our next example, we are going to bind the width of the body (try resizing the browser window):

Body css.width:

Source:

Body css.width: <span data-jkit="[binding:selector=body;source=css.width;mode=text]"></span>

Multiple selectors:

How-to make three divs the same height:

klfhdkljsfhg jdfjg dfjhg jfdhgs djhgjh dsfhg jdfhsgjk hfjkghs djkfhgkfldshjfgh dfskjhg kfdhgsk kjls v cb fsgbh g bf gb gfsh ff gh h ft h dfg hgfdh gfd h hgf dh gf dh fgd df sd fa df as d f asd fdsafdsadfdfa dfsafdsa f dfsa ffdsa fsd f ds f sd af dsf

dhf kljdhgsjklfhglkfd shg ksl

fhjkldgh fdhgjlfdhs gdfhjg hfsdjhg jfdshg jfhdjls hgjh ghfdsjö hfk fg sdf g fd gs fg s f dfgsdg dfgs fd g fds gdfsg fd s fgd sfgdfsgfds fgdsgfds

Source:

<style>.mydivs{ float:left; margin-right: 10px; width: 28%; padding: 10px; background: #fff; }</style>
<div id="d1" class="mydivs" data-jkit="[binding:selector=#d1|#d2|#d3;source=css.height.max;mode=css.height]">
	<p>
		klfhdkljsfhg jdfjg dfjhg jfdhgs djhgjh dsfhg jdfhsgjk hfjkghs djkfhgkfldshjfgh dfskjhg kfdhgsk kjls v cb fsgbh g bf gb gfsh ff gh h ft h dfg hgfdh gfd h  hgf dh gf dh fgd df sd fa df as d f asd fdsafdsadfdfa  dfsafdsa f dfsa ffdsa fsd f ds f sd af dsf 
	</p>
</div>
<div id="d2" class="mydivs" data-jkit="[binding:selector=#d1|#d2|#d3;source=css.height.max;mode=css.height]">
	<p>
		dhf kljdhgsjklfhglkfd shg ksl
	</p>
</div>
<div id="d3" class="mydivs" data-jkit="[binding:selector=#d1|#d2|#d3;source=css.height.max;mode=css.height]">
	<p>
		 fhjkldgh fdhgjlfdhs gdfhjg hfsdjhg jfdshg jfhdjls hgjh ghfdsjö hfk fg sdf g fd gs fg s f dfgsdg  dfgs fd g fds gdfsg fd s fgd sfgdfsgfds fgdsgfds
	</p>
</div>

Multiple selectors 2:

Here’s the same example, but with only one command (possible since v1.2.4):

dhf kljdhgsjklfhglkfd shg ksl

fhjkldgh fdhgjlfdhs gdfhjg hfsdjhg jfdshg jfhdjls hgjh ghfdsjö hfk fg sdf g fd gs fg s f dfgsdg dfgs fd g fds gdfsg fd s fgd sfgdfsgfds fgdsgfds

Source:

<style>.mydivs{ float:left; margin-right: 10px; width: 28%; padding: 10px; background: #fff; }</style>
<div data-jkit="[binding:selector=children.div;source=css.height.max;mode=css.height;applyto=children.div;interval=-1]">
	<div class="mydivs">
		<p>
			klfhdkljsfhg jdfjg dfjhg jfdhgs djhgjh dsfhg jdfhsgjk hfjkghs djkfhgkfldshjfgh dfskjhg kfdhgsk kjls v cb fsgbh g bf gb gfsh ff gh h ft h dfg hgfdh gfd h  hgf dh gf dh fgd df sd fa df as d f asd fdsafdsadfdfa  dfsafdsa f dfsa ffdsa fsd f ds f sd af dsf 
		</p>
	</div>
	<div class="mydivs">
		<p>
			dhf kljdhgsjklfhglkfd shg ksl
		</p>
	</div>
	<div class="mydivs">
		<p>
			 fhjkldgh fdhgjlfdhs gdfhjg hfsdjhg jfdshg jfhdjls hgjh ghfdsjö hfk fg sdf g fd gs fg s f dfgsdg  dfgs fd g fds gdfsg fd s fgd sfgdfsgfds fgdsgfds
		</p>
	</div>
</div>

Hiding an empty div:

Here we’re going to hide an empty div with css.display:

Paragraph with content:

dfsadf dsf sdf dsf dsafsdf sdaf dsf dsafsda

Paragraph without content:

Source:

<strong>Paragraph with content:</strong><br />
<p class="demo" data-jkit="[binding:selector=this;source=text;mode=css.display]">
	dfsadf dsf sdf dsf dsafsdf sdaf dsf dsafsda
</p>
<strong>Paragraph without content:</strong><br />
<p class="demo" data-jkit="[binding:selector=this;source=text;mode=css.display]"></p>

Hide after click:

Here’s an example where we animate the CSS opacity on click:

Click me!

Source:

<p class="demobox" data-jkit="[binding:selector=this;source=event.click;mode=css.opacity;condition=value=1;if=0;speed=1000;interval=-1]">
	Click me!
</p>

Show only when completely inside the viewport:

This one uses clearence as its source:

0;if=1;else=0.2]">

Text search:

Searching for the string test and apply the number times 100 to the width:

Test the test test

Two testtest

Only one test

Source:

<div data-jkit="[binding:target=children;selector=this;source=has.text;search=test;mode=css.width;math=value*100]" class="test">
	<p style="background:#65BAE2">Test the test test</p>
	<p style="background:#C8295B">Two testtest</p>
	<p style="background:#BBD17C">Only one test</p>
</div>

Condition event:

Show some additional content when a specific element enters the viewport and hide it after it got out of the viewport:

reacting on viewport binding events 0;if=1;else=0.2]"> viewport detecting box

Has hash:

You can use the has.hash source option to display different content based on the current url hash:

Testlinks: test, example, whatever

#test

#example

Source:

Testlinks: <a href="#test">test</a>, <a href="#example">example</a>, <a href="#whatever">whatever</a>
<p class="demobox" data-jkit="[binding:selector=this;source=has.hash;mode=css.display.block;search=#test]">
	#test
</p>
<p class="demobox" data-jkit="[binding:selector=this;source=has.hash;mode=css.display.block;search=#example]">
	#example
</p>

Has hash events:

You can fire events with the has.* source feature, so yôu can combine the hash detection with the animation commands like this:

Testlinks: test, example, whatever

#test2

#example2

Source:

Testlinks: <a href="#test2">test</a>, <a href="#example2">example</a>, <a href="#whatever2">whatever</a>
<p class="demobox" data-jkit="[binding.test:selector=this;source=has.hash;mode=attr.jkit-hash;search=#test2][show:onevent=test.true][hide:onevent=test.false]">
	#test2
</p>
<p class="demobox" data-jkit="[binding.example:selector=this;source=has.hash;mode=attr.jkit-hash;search=#example2][show:onevent=example.true][hide:onevent=example.false]">
	#example2
</p>

Replacements

There are currently no replacements for this command.

[ Learn more about replacements ]

Discussions

Do you have questions or do you want to suggest new features? Than head over to our new community:

[ jKit Community ]

Hi, stranger

Content Summary

jKit Button

Binding command

Basic Usage (HTML)

Advanced Init (JavaScript)

Options

Events

Examples

Binding a custom function:

Source:

CSS binding:

Source:

Multiple selectors:

Source:

Multiple selectors 2:

Source:

Hiding an empty div:

Source:

Hide after click:

Source:

Show only when completely inside the viewport:

Text search:

Source:

Condition event:

Has hash:

Source:

Has hash events:

Source:

Replacements

Discussions