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.

 

How to remove the dotted outline when you click on button or anchor tag


It is quite common fact that due to paddings, we tend to blow the control to larger sizes. Say a menu item, which is a simple anchor tag, inside an ordered list; you will blow the anchor to such a level that on click of it, there appears an outline with dotted line, which looks awkward.

The fix for this:

a { outline:none; }

Bear in mind that this styling literally uses the “outline” CSS property. Outline is very similar to the “border” property, with two important differences:

  • Outline goes around the entire object (much like using just “border”), but you may not be specific about sides. “Outline-left” does not exist.
  • Outline value is not a part of the box model. Border is calculated into the total width of the box, whereas outline is not. This is important so that layouts don’t get bumped around when the outline is applied and removed.

Wrap text through CSS


Wrapping text through CSS is quite a necessary evil when your Analyst come up with jargons that stretches 15-20 charactors… 😉

So here’s the deal. If you need to wrap text through CSS, you can use the CSS selector defined below:

Wrap words through CSS

/* In CSS */
.wrapword{
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 white-space: pre-wrap;       /* css-3 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* In HTML */
<td class=”wrapword”> … </td>

Hope this helps!

Changing scroll bar color in Gecko Browsers


Although this is not recommended by W3C, out of popular interest, i feel like posting the solution to this problem. The problem, being the fact that IE went ahead and allowed people to customise its scrollbars, while the gecko browsers like Firefox, Opera does not allow user styles to custom browser styles. 

For IE scrollbar settings, you can use the following properties:

scrollbar-arrow-color
scrollbar-base-color
scrollbar-dark-shadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-shadow-color
scrollbar-track-color

For Gecko-browsers, you can use the FlexiScroll. Its free for commercial use:

http://www.hesido.com/web.php?page=customscrollbar

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.

Large CSS background moves on resize, in IE 8


This post is in continuation to the a solution given by webdesignerWall, regarding the use of large CSS backgrounds in your website. You can check the site below:

http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

The solution he states is that of using display:table; for body tag wherein you are specifying your large background.

The solution works quite fine! But when it comes to IE 8 – unfortunately, you end up in a mess.

I have a small work around for this issue. It works totally cool in almost all the browsers.

Solution:

All you need to do is load the same image twice – one for the body, and the other for a header div container. Difference being the body will be showing the full width of 100% but the header container will show only say 1000px, of center of the image.

Have a look at the CSS to get an idea:

body {
background:url(Images/bg.png) no-repeat center top;
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
width:100%;
}
#ms-container
{
background:url(Images/bg.png) no-repeat center top;
margin:0 auto;
position:relative;
width:1000px;
}

Trick here is – during resizing to higher resolution, the background keeps showing, while the center section remains steady, you get a continuous image- actually overlapping, one with 1000px centered to your screen, while the other being the big image, 100% to the body, in its full glory.

And when you resize to smaller resolution, the 1000px guy comes into play, while the body background image keeps on moving in the behind (who cares 😉 all you see is the div container, which is stationary)

Worked successfully in almost all the browsers. But do verify it.

One note:Ensure that you play with paddings, borders, positioning and any css property that can shift the div container position by a pixel or two. You dont wanna show the end user that you are loading two images. Also, site performance wud be affected a bit. Can’t help it.

Hope this solves the problem!

Third party tool styles overriding my styles?


You might come across this scenario wherein, you want to override a css class of a third party add-in, but still not able to apply your styles. Well the reason is nothing but the concept of cascading coming into play. In this case, your third party selectors have the higher precedence over your site stylesheet.

Well the fix is pretty simple and useful. Use the !important property with the respective css property you want to override in your stylesheet.

For example, i would like to override the css selector named ‘dxic’ of a third party tool, i use in my web site. I would simply define the selector as below:

.dxic

{

width:200px;

border:1px solid #333;

}

But for some reason, it does not get applied. The web site still displays the style defined by the third party tool stylesheet. The concept is that of cascading here. The solution to this problem would look something like below:

.dxic

{

width:200px !important;

border:1px solid #333 !important;

}

Voila! Now, my styles will have precedence over the styles defined by the third party tool.