Selecting a complex jQuery selector present in a page


Most of time, the moment we see a complex ID like ‘ctl00_m_g_f368f5ab_d679_4436_a6da_938c6bfcd60a_ctl00_SearchCheckBox’ we faint… ūüėČ

And what we end up is start finding some parent which has an ID or see if there is a css class defined for this control. Targeting a control using its parent is good and performance-wise effective. However, using a css class for targeting a control is not advisable.

To work with a control which has a full-grown id like the one mentioned above, all you need is to make use of the CSS 3 selector. Before i proceed, let me clear a wrong notion here…

CSS 3 won’t work in IE6.0 [period], but CSS 3 selectors when used in jQuery on an IE 6 browser will work [period]

Solution:

$(“[id$=_SearchCheckBox]”).css(‘color’,’#737373′);

Steps to write:

$(“”).css(‘color’,’#737373′); //This is what you want at the end

$(“[]“).css(‘color’,’#737373′); //Add square brakets inside

$(“[id$=]”).css(‘color’,’#737373′); //Add id$= inside the square brackets

$(“[id$=_SearchCheckBox]”).css(‘color’,’#737373′); //Add your tail end of your id

Note:

$ in regular expression, is used to match a text that ends with a particular string. You can refer the CSS 3.0 Cheat Sheets to see the other possible options.

 

Solve Flickering jQuery accordion issue in MOSS 2007


MOSS 2007 for the simple reason of missing a DOCTYPE can screw up the smoothness of animations created through jQuery. One of my situations didn’t allow me to add DOCTYPE to my master and my clients ended up seeing flickering animation of the accordion. Seriously that was irritating. Being an ardent admirer and an evangelist of jQuery, it gave me a shock. But after some level of problem analysis and testing, i was able to get hold of a workaround.

One piece of advice: If you could add a DOCTYPE to your masterpage, you can very well get rid of this flickering issue.

Solution:

The sliding down effect of accordion was firing the callback once, while slidingup was triggering the callback twice. That was the catch. All i did was introduce a delay during the slide up operation, so that the first callback is veiled and only one invoke is visible.

Code Fix:

//Pause method which is to be used for the accordion slideup veil

var speed = 300;

function pausejs(millis) {
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while (curDate – date < millis);
}

$(“#accordion h2”).live(‘click’, function() {
$(“#accordion div”).slideUp(speed);¬†¬†¬†¬† //slide up all the accordion children
        pausejs(speed);      //introduce a delay before the next code is executed
if ($(this).next().is(“:hidden”)) {¬†¬†¬†¬†¬†¬†//opens up¬†the respective child
$(this).next().slideDown(speed);
}
});

Explanation:

On clicking any of h2 (accordion headers), slide up all the accordion content/children. Then open up the respective accordion content/children. But before you open up / slideDown the respective child, ensure that the slideUp operation was complete. For this we introduce the delay.

You can also try using the callback argument of the slideUp(speed, callbackfunction) and invoke the slideDown of the respective child on completion of slideUp operation. However, since i did not find the flickering issue not getting resolved, i did not go ahead with that.

How to enable javascript in various browsers – help file


This is a help reference for those sites, which are javascript critical. You can use this in a page to which you redirect in your javascript disabled scenario.

Microsoft Internet Explorer
1. On the Tools dropdown menu, click Internet Options, and then click the Security tab.
2. Click on the earth ¬ęInternet¬Ľ icon, and then the Custom Level button.
3. Scroll to the bottom of the Settings list, and locate the section named Scripting.
4. Under the subsection Active Scripting, click Enable. Click OK.
5. Answer Yes to the confirm box that pops up. Click OK.
6. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

Firefox
1. Go to the ¬ęEdit¬Ľ drop-down menu and click on ¬ęPreferences‚Ķ¬Ľ.
2. In the ¬ęCategory¬Ľ list, click on ¬ęAdvanced¬Ľ.
3. Click on ¬ęScripts & Plugins¬Ľ.
3 Click the ¬ęActivate Javascript for¬Ľ option, and then click okay.
4. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

Netscape Navigator
1. Go to the ¬ęEdit¬Ľ drop-down menu and click on ¬ęPreferences‚Ķ¬Ľ.
2. In the ¬ęCategory¬Ľ list, click on ¬ęAdvanced¬Ľ.
3 Click the ¬ęEnable Javascript for Navigator¬Ľ option, and then click okay.
4. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

Safari
1. Click the Settings (gear symbol) icon in the browser and go to “Preferences”. or press (Ctrl + ,) in your keyboard.
2. Go to the “Security” tab.
3. Check the “Enable Javascript” check box.
4. Close the popup window.
5. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

You can use this content in the page, to which you redirect under noscript scenarios. Hope this helps.

Best PNG Fix for IE 6


PNG fix for IE6 has always been messier than expected. There has been lot of out of the box solutions available on the net. However, the best that worked for me was the “DD Belated PNG” fix.

It is a simple PNG fix specific for IE 6. I would recommend you to load it with an IE 6 specific check, as I found some issues with the script on IE8. So, getting back to the point, follow the steps below:

  • Download the DD_BelatedPNG.js file from here.
  • Register the script in your site as shown below:

<!–[if IE 6]>
<script src=”DD_belatedPNG.js”></script>
<script>
  /* EXAMPLE */
¬†¬†DD_belatedPNG.fix(‘.png_bg’);
  
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]–>

  • To know more about the possibilites and known issues, i would recommend you to go through this site.
  • You can use it over special css selectors too. For instance, you have a css selector as below:

ul#mainnav li#subnav a:hover { background: url(‘images/nav-hover.png’) no-repeat center center;}

In this case, you can do a png fix by calling the DD_belatedPNG fix statement below:

DD_belatedPNG.fix(‘li#subnav a:hover’); // for some reason, it is not accepting 3 levels of hierarchy.

 

This post is just a drop in the ocean. After a lot of thought process, i ended up using this PNG fix, which has been good to me. Take this as a reference, go through Drew Dillers site and get rid of the messy IE6 PNG issue.