Category Archives: jQuery

jQuery pop up message box sliding from left to right and positioning horizontally at the center

Just wrote a simple sliding box script to make a message box appear sliding from left to the middle of web page. The box appears once a day. The first appearance is logged into a browser cookie, so if user opens the same website and if cookie was expired it appears again. Continue reading

Form DOM element not recognized (created) in ajax form in IE when placed with end tag missing

Skipping a form end tag </form> costed me almost a day (i had to go to bed abandoning the fixing for some time though;)). I had been using ajaxForm with jQuery to submit ajax form which was placed on a popup dialog box opened through ajax. The form worked well in Mozilla Firefox, Google Chrome, Safari but did not work in Internet Explorer 7 & 8 (IE7 & IE8 ; i didn’t test in other versions of IE but perhaps they would not work either). The IE simply would not create the <form> tag at all so if you try to alert $(“#formID”).length it would return always 0(zero). It started to work fine (in IE) when i placed </form> to mark the end of the form (i know it was a mistake to not to place it there though). Continue reading

Fix to jQuery plugin does not work on ajax loaded content

I had been loading table records through ajax pagination using jquery. Some of the urls/links (View Details, Edit and Delete) in loaded content had been using thickbox to handle respective requests. Although, if i did’t use the ajax to load records these links would work fine and thickbox would open. But once i introduced ajax they suddenly stopped working. Continue reading

A note on DOM elements’ changed scope when using thickbox with jQuery

A similar situation may arise (atleast for me it did) when you try to invoke jQuery’s “thickbox” in conjunction with a custom onclick firing. I would explain it with the help of an example:

I have a div element (with id “myBlockTOShow”, i would say it “#myBlockTOShow” in this post further) which i display/present as a “thickbox” when a href tag/link is clicked. Here is how the div element looks like: Continue reading

How to prevent parent’s onclick event from firing when a child tag is clicked with jquery?

Generally, Javascript events bubble (listen) to the highest point in the DOM to which a click event had been attached. So even if you don’t have any other explicitly click-able elements in the div, every child element of the div would bubble their click event up the DOM to until the DIV’s click event handler catches it. Continue reading

Setting Style/CSS of select options using jQuery

This is how i set style (color here) of all of the options of a select list using jQuery.

In my case i had select options like this:

<select id=”select_list_id”>
<option value=”#595959″>Grey</option>
<option value=”#000000″>Black</option>
<option value=”#036″>Blue</option>
<option value=”#363″>Green</option>
<option value=”#632423″>Red</option>
<option value=”#403152″>Purple</option>
<option value=”#E36C0A”>Orange</option>
</select>

Follwoing the jQuery code i used to set color of options above:

  $(document).ready(function(){
	$('#select_list_id option', this).each(	
		function ()	{
			$(this).css({'color':$(this).val()});
		}
	)
  });

Autocomplete=”off” workaround / fix for valid XHTML

Add an onload function similar to the following to <head> section of your web page.

<script type="text/javascript">
function onload_call() {
if (!document.getElementById) return false;
var f = document.getElementById('field_name');
f.setAttribute("autocomplete", "off");
}
</script>

Continue reading

How to position a pop up element on mouse position coordinates with jquery

Here is a simple yet useful trick to position a tooltip (a div element etc) near the mouse click or pointer position using jQuery. In the example here, we have a tool tip (div) with id “tooltip”, a href tag, on clicking which the pop up is positioned and a snippet of code to place anywhere on the page. Obviousaly this small function can be used to return mouse event coordinates by makeing slightest changes.

I have not tested this code jquery version prior to 1.3.2.

So, here is the javascript code:

$(document).ready(function()  {
  $("#tooltip_link").click(function(e){
    var x = e.pageX;
    var y = e.pageY;
    alert(x +', '+ y);
    $("#tooltip").css({"top":y, "left":x, "position":"absolute"});
    $(this).unbind('click');
  });
}

The code line below is used to stop click event when action is already over:

$(this).unbind('click');

And href and div tag html code:

CLICK




Once there was a man who lived in a forest. He ate in the forest and slept in the forest. He was very happy living in the forest. At last he died in the forest. No one knows why the man lived in the forest. I know this is not a happy story. The end!