Solving development problems  |  About this blog

We experienced a problem using attr(“value”) JQuery function when selecting values that are not integers.

So if you have:

  <ul>
    <li id="li1" value="1">One</li>
    <li id="li2" value="2">Two</li>
    <li id="li3" value="3">Three</li>
    <li id="li4" value="4">Four</li>
  </ul>

It is working OK.

  $(function() {
    alert($('#li2').attr('value'));
  });

But if you have (string as values instead of integers):

  <ul>
    <li id="li1" value="One">One</li>
    <li id="li2" value="Two">Two</li>
    <li id="li3" value="Three">Three</li>
    <li id="li4" value="Four">Four</li>
  </ul>

This is not working.

  $(function() {
    alert($('#li2').attr('value'));
  });

Solution (rename value attribute to something else):

  <ul>
    <li id="li1" tag="One">One</li>
    <li id="li2" tag="Two">Two</li>
    <li id="li3" tag="Three">Three</li>
    <li id="li4" tag="Four">Four</li>
  </ul>

This is now OK.

  $(function() {
    alert($('#li2').attr('tag'));
  });

Conclusion:

Do not use reserved attributes as your custom attributes (where HTML element does not support them).

As written in this article …

$.fn.myFunction = function()
{
  return $(this).addClass('changed');
}

And now, use it like this:

$('.changePlease').myFunction();

<ul class="menu">
  <li class="page_item">First Item</li>
  <li class="page_item">Second Item</li>
  <li class="page_item">Third Item</li>
  <li class="page_item">Last Item</li>
</ul>

<script type="text/javascript">
  $(function()
  {
    //Add css classes to first and last item in the html list
    $('ul.menu li:first-child').addClass('first_item');
    $('ul.menu li:last-child').addClass('last_item');
  });
</script>

Model 1:

<img src="images/blank.gif" onload="replaceImage(this, 'your-image-url')" width="75" height="75" />

Use function to replaceImage:

function replaceImage(img, replacementImage)
{
  img.onload = null;
  img.src = replacementImage;
}

blank.gif is an 1px x 1px pixel transparent image. Basically, the idea is that this blank image is loaded and expanded to 75×75 (to preserve layout). That almost immediately fires the onload handler, which changes the image’s source to the desired image.

Model 2:

var img = new Image();
img.onError = function(){
  //error handling here
}
img.onLoad = function(){
  //success
containerForImg.removeClass('loading-image').append($(img));
}
img.onAbort = function(){
  //user clicked stop
}
img.src = "http://example.com"   //loading begins NOW!

References:

http://goo.by/wE3TFa
http://goo.by/w7AjZN
http://goo.by/w0CsbA

Background image animations:

$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})

Background transitions:

http://goo.by/wIJ6iD

Cool JQuery Animated robot:

TUTORIAL: http://goo.by/w4znKB
DEMO: http://goo.by/wmSMKs

Nice login page:

TUTORIAL: http://goo.by/wBrnQi
DEMO: http://goo.by/wdgmT1

Loading content:

TUTORIAL: http://goo.by/wn53Y0
DEMO: http://goo.by/wTGKDx

Imagine that you have combobox for countries and you want to load all cities for chosen country in other dependable combobox.
This is the way how you can do it.

//This occurs when country combobox changes -> filling cities on country change
$('select#CountryId').change(function()
{
	url = 'http://www.someurl.com/' + $('select#CountryId').val();
	var dataToSend='CityId=' + $('select#CityId').val();
	$.ajax(
	{
		type: "POST",
		url: url,
		data: dataToSend,
		async : false,
		cache : false,
		dataType: "json",
		success:function(data)
		{
			var options = '';
			var selectedText = '';
			$.each(data, function(index, val)
			{
				var selectedString = '';
				if (val.Selected == true)
				{
					selectedText = val.Text;
					selectedString = ' selected="selected"';
				}
				options += '
' + val.Text + '

';
			});
			$('select#CityId').html(options);
		}
	});
});