by ·4 Comments

Today I worked with two elements with same ids but in different forms, and found strange jquery selector engine behavior. Actually I can undrestand that, because by w3c you cant place two elements with same ids on same page.

Description: Two froms with element with same id in both of them, trying to use jquery selector to choose one of them like this $(“#formid #elemid”). Result will be null.

Example:

HTML:

<form id="form1" method="post" action="/">
<input type="text" class="inputtext" id="text1" name="text1" value=""/>
<input type="text" class="inputtext" id="text2" name="text2" value=""/>
<input type="text" class="button" id="btn1" value="press me"/>
</form>

<form id=”form2″ method=”post” action=”/”>
<input type=”text” class=”inputtext” id=”text1″ name=”text1″ value=””/>
<input type=”text” class=”inputtext” id=”text2″ name=”text3″ value=””/>
<input type=”text” class=”button” id=”btn2″ value=”press me2″/>
</form>

* This source code was highlighted with Source Code Highlighter.

Javascript:

$('#btn1').click(function() {
if (!$('#form1 #text1').val()) {
$('#form1 #text1').css('border','1px solid red');
}
if (!$('#form1 #text2').val()) {
$('#form1 #text2').css('border','1px solid red');
}
});

$(‘#btn2’).click(function() {
if (!$(‘#form2 #text1’).val()) {
$(‘#form2 #text1’).css(‘border’,‘1px solid red’);
}
if (!$(‘#form2 #text2’).val()) {
$(‘#form2 #text4’).css(‘border’,‘1px solid red’);
}
});

* This source code was highlighted with Source Code Highlighter.

by ·37 Comments

fcbkListSelection – fancy item selector (like facebook friends selector) with wide range of options.

If you have any comments or requests, please post them and I will try to include all the requested features in the upcoming release.

HowTo:

1) HTML stracture:

<ul id="ulid">
<li>regular content <input type="hidden" value="value" /></li>
<li>preselected content <input type="hidden" value="value" checked="checked" /></li>
<li>regular content <input type="hidden" value="value" /></li>
</ul>

* This source code was highlighted with Source Code Highlighter.

2) Javascript:

<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
//id(ul id),width,height(element height),row(elements in row)
$.fcbkListSelection(id[ul id],width,height[element height],row[elements in row]);
});
</script>

* This source code was highlighted with Source Code Highlighter.

Changelog:
– 1.1: added preselected items
– 1.0: project started

Download: Download fcbkListSelection

Demo: Demo fcbkListSelection

Github: http://github.com/emposha/fcbkListSelection

by ·12 Comments

Another Ie6 png fix that use Jquery selectors.  Just include Jquery 1.2.x and jqPngFix for automatic fix of all png images on page.

Performance test for 10 png images on page:

How to use:

<script language="JavaScript">
$(document).ready(function() {
  if ($.browser.msie && $.browser.version == '6.0') {
    jqPngFix();
  }
});
</script> * This source code was highlighted with Source Code Highlighter.

Download script: jqPngFix.zip