Avivo Tech Blog » jquery

JQuery problem with attr(“value”)

Avivo — Fri, 11 Mar 2011 14:10:23 +0000

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

So if you have:

  
    One
    Two
    Three
    Four

It is working OK.

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

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

  
    One
    Two
    Three
    Four

This is not working.

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

Solution (rename value attribute to something else):

  
    One
    Two
    Three
    Four

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).

Create your own JQuery function

Avivo — Thu, 17 Feb 2011 18:05:21 +0000

As written in this article …

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

And now, use it like this:

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

How to select first and last child / element with JQuery

Avivo — Tue, 15 Feb 2011 23:03:52 +0000


  First Item
  Second Item
  Third Item
  Last Item

Preloading images with JavaScript (JQuery) and JQuery cool animations and effects

Avivo — Wed, 12 Jan 2011 16:29:02 +0000

Model 1:

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})
})

Use Ajax and JQuery to load dependable combobox values onchange event

Avivo — Thu, 21 Oct 2010 16:49:35 +0000

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 += '


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

Prevent link click with JQuery, avoid the javascript:void(0)

Avivo — Wed, 10 Mar 2010 12:52:19 +0000

It is forbidden to use:

Some text

Instead of that use JQuery to simulate link and you can put in href attribute whatever you want:

Some text

And in JQuery use this:

$("#myLink").click(function(e) {
  //
  //do something
  //

  //Prevent event propagation and click
  e.preventDefault();
});

How to center div using JQuery

Avivo — Fri, 29 Jan 2010 17:55:53 +0000

How can you center div or how can you center div inside another div?

This is a common problem.

For example, you have a paging with different number of pages and you need to center whole paging div inside parent div container.

JQuery is helpful there.

Look first at the picture (we want to center this paging control inside parent div control)

Center paging control

If you have paging div:

You can use JQuery syntax:

$("#paging").css('left',($("#paging").width() -
  ($(".jPag-control-front").position().left +
   $(".jPag-control-front").width())) / 2);

What does this JQuery command do?

$(“#paging”) – finds div with id=”paging”
$(“#paging”).css(‘left’, 50); – move left “paging” div for 50px
$(“.jPag-control-front”).position().left – finds left distance for div element that has css class=”jPag-control-front” from the beginning of “paging” div
So, you get the left distance of Last element (div that has css class=”jPag-control-front” ) and you add the width of Last element to this left offset and then you substract this sum from parent div width and, at the end, you divide all this by two to get the blank space you need to move you paging div from the left.