#my-element {
	background: #82c9ef; /* Old browsers */
	/* background gradient for cross-browser compatibility */
	background:  -moz-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* FF3.6+ */
	background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%, #82c9ef), color-stop(100%, #59ACD9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* Chrome10+,Safari5.1+ */
	background-image:  -ms-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* IE10+ */
	background: -o-linear-gradient(top, #82c9ef 0%, #59ACD9 100%); /* Opera11.10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c9ef', endColorstr='#59ACD9', GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #82c9ef 0%,#59ACD9 100%); /* W3C */
	/* border radius for cross-compatibility */
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

Example (pure CSS3 and IE gradient filter)

So how do you fix it? SVG of course!

Interestingly enough, Microsoft has a website specifically designed for this problem. Using the their tool, you can specify your gradients and it will automatically generate the SVG source and CSS markup needed. In IE9, you can clear the filter, assuming you need a border-radius, and use the SVG CSS markup the site generates for you. This creates the exact same gradient you specify with pure CSS3 markup, but allows for a border-radius in IE9.

The beauty of this is that it is compatible with all modern browsers. The background gradient is fluid and there’s not a visible difference between the SVG markup and the CSS3 markup. You could, theoretically, use this as a workable solution for all desktop browsers. The only flaw I have found is noted below, under ‘Issues’.

/* you can remove all CSS code not needed since we're targeting IE */
#my-element {
	background: transparent none; /* reset the background, just in case */
	filter: ''; /* clear the filter since it's the reason for the border-radius missing */
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5ODEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiM4MkM5RUYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM1OUFDRDkiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c5ODEpIiAvPgo8L3N2Zz4=');
}

Example Fixed in IE9 (Removed cross-browser CSS3 and IE gradient filter)

Are there any issues with this method?

The only issue I have found so far is that the SVG markup kills performance in Chrome. I’m not sure if this because of the UI I have built specifically for tnyb.it’s new design or if it’s just a Chrome bug, but it brings Chrome to a hault. Until I can test more thoroughly, I’m only using the SVG markup in IE9 and sticking with CSS3 markup for all other browsers. I’m trying to move away from images as much as possible and only use them for logos/icons/etc. If it’s a background, there’s no reason you can’t use CSS these days.

For those without IE9, here’s a before and after

There is no CSS required for this plugin to work. The only CSS I recommend is setting the collapsible elements to ‘display: none’. This will keep the browser from rendering them initially causing that jittery appearance when the page first loads for the user.

You can view the code below, with an example following:

HTML:

<div id="content-container">
	<!-- subsection of content container accordion 1 and 2 -->
	<div class="sub-content">
		<!-- Clickable headers (the actual anchor tags) that trigger the accordion -->
		<div class="accordion-headers">
			<a href="#" class="clickable-header-accordion-1">Click Me</a>
			<a href="#" class="clickable-header-accordion-2">Click Me</a>
		</div>
		<!-- Accordion 1 header shows/hides this group -->
		<ul class="collapsible accordion1-collapsibles">
			<li>First Accordion :: Item 1</li>
			<li>First Accordion :: Item 2</li>
			<li>First Accordion :: Item 3</li>
			<li>First Accordion :: Item 4</li>
		</ul>
		<!-- Accordion 2 header shows/hides this group -->
		<ul class="collapsible accordion2-collapsibles">
			<li>Second Accordion :: Item 1</li>
			<li>Second Accordion :: Item 2</li>
			<li>Second Accordion :: Item 3</li>
			<li>Second Accordion :: Item 4</li>
		</ul>
	</div>
	<!-- // -->

	<!-- next subsection of content container accordion 1 and 2 -->
	<div class="sub-content">
		<!-- Clickable headers (the actual anchor tags) that trigger the accordion -->
		<div class="accordion-headers">
			<a href="#" class="clickable-header-accordion-1">Click Me</a>
			<a href="#" class="clickable-header-accordion-2">Click Me</a>
		</div>
		<!-- Accordion 1 header shows/hides this group -->
		<ul class="collapsible accordion1-collapsibles">
			<li>First Accordion :: Item 1</li>
			<li>First Accordion :: Item 2</li>
			<li>First Accordion :: Item 3</li>
			<li>First Accordion :: Item 4</li>
		</ul>
		<!-- Accordion 2 header shows/hides this group -->
		<ul class="collapsible accordion2-collapsibles">
			<li>Second Accordion :: Item 1</li>
			<li>Second Accordion :: Item 2</li>
			<li>Second Accordion :: Item 3</li>
			<li>Second Accordion :: Item 4</li>
		</ul>
	</div>
	<!-- // -->
</div>

Again, please note: The CSS that is recommended is setting the collapsible elements to ‘disaply: none;’. Aside from that, there is no additional CSS required other than what is needed for your design.

jQuery and Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multi-accordion.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var accordions = [
		{
			'parent'      : '.sub-content',                  // parent element containing the clickable header and collapsible
			'header'      : '.clickable-header-accordion-1', // clickable header
			'collapsible' : '.accordion1-collapsibles'        // collapsible element
		},
		{
			'parent'      : '.sub-content',                      // parent element containing the clickable header and collapsible
			'header'      : '.clickable-header-accordion-2',     // clickable header
			'collapsible' : '.accordion2-collapsibles',          // collapsible element
			'afterclose'  : function() { alert('after close'); },// callback that is fired onced the accordion is closed
			'afteropen'   : function() { alert('after open'); }  // callback that is fired after the accordion is opened
		}
	];
	$().accordion(accordions);
});
</script>

Working Example:

You can view a working example at http://jjis.me/jquery.multi-accordion.html

Download the jQuery Multi-Accordion plugin

• http://omgwtfis.it
• http://imtell.in
• http://tnyb.it
• http://tnyb.us
• http://jjis.me
• http://doesnickelbacksuck.com
• http://doesjustinbiebersuck.com
• http://doyouprefer.it
• http://do-u.me
• http://4wrds.me

XDA Forum Thread
Change Log on XDA

Downloads

0.1.4.10

• WretchedBlues Sweetened Theme [bottom status bar [all densities]]
  (Status bar mod credited to brianf21 over at XDA Developers)

0.1.3.27

• WretchedBlues Sweetened Theme [bottom status bar [all densities]]
  (Status bar mod credited to brianf21 over at XDA Developers)
• Revert from Sweetened to unModded WretchedBlues
• WretchedBlues unModded Theme [all densities]

0.1.2

• WretchedBlues Theme [no additional mods [all densities]]
• WretchedBlues Sweetened Theme [bottom status bar [all densities]]
  Status bar mod credited to brianf21 over at XDA Developers

0.1.1

• WretchedBlues Theme [no additional mods [all densities]]
• WretchedBlues Sweetened Theme [bottom status bar [all densities]]
  Status bar mod credited to brianf21 over at XDA Developers

0.1.1

• WretchedBlues Theme [no additional mods]
• WretchedBlues Theme 0.1.1 [no additional mods [all densities]]
• WretchedBlues Theme [Softkeys Mod]
• WretchedBlues Theme [Mapped Vol +- Keys]
• WretchedBlues Theme [Remove Softkeys Mod from theme]
• WretchedBlues Theme [Remove Key Mapping from theme]

Modders

Here are links to my most recent framework-res files

• WretchedBlues unModded
• WretchedBlues Sweetened

Screenies

MDPI Version (deprecated – no longer supported)

You will be redirect automatically in just a second.

Internet Explorer post standard jQuery fadeIn() method

In searching for a solution, I stumbled across a rather simple removeFilter() method someone created. This worked nice, but it meant you had to do chaining or a callback in order for the fadeIn() to work and then have the filter removed so the fonts would smooth. I’m lazy and I like to do everything in a single method if I can. So, let combine the fadeIn/fadeOut methods in to a single method and add the filter removal as well.

(function($) {
	 $.fn.removeFilter = function() {
		if ($.browser.msie) {
			x = this.get(0)
			x.style.removeAttribute("filter");
		 }
	 }
})(jQuery);

(function($){
	 $.fn.fadeToggle = function(options) {
		  options  = typeof(options) != 'undefined'?options:'';
		  speed    = typeof(options.speed)!='undefined'?options.speed:'';
		  easing   = typeof(options.easing)!='undefined'?options.easing:'';
		  callback = typeof(options.callback)!='undefined'?options.callback:'';
		  callback = function(callback) {
			   $(this).removeFilter();
			   callback;
		  }

		  this.animate(
			   {opacity: 'toggle'},
			   speed,
			   easing,
			   callback
		  );
	 }
})(jQuery);

Use:

// normal speed
$('#objectId').fadeToggle();

// set fade in/out speed
$('#objectId').fadeToggle({ speed: 'fast' });

Internet Explorer post fadeToggle() method

Using removeFilter() method as a standalone method

There may instances where you just need to remove the filter. In that case, the following works:

// as callback within fadeIn() method
$('#objectId').fadeIn('fast', function() {
        $(this).removeFilter();
});

// simply remove the filer on a specific object or objects
$('#objectId').removeFilter();

As it’s been pointed out to me, Nar is supposedly a dead ringer for me. What do you guys think?

Nar

Tori

Mick

I mean, I love Mashable, but come on.

Click the image to enlarge.

	/* ***********************************************************
	* START :::
	*	64bit encodes images for CSS embedding
        *      Alternatively, if you are not using PNGs, you can specify the Mime Type
        *      PNG is the default mime
	*********************************************************** */
	function data_url($file, $mime='') {  

		$mime = empty($mime) ? 'image/png' : $mime;

		$contents = file_get_contents($file);
		$base64   = base64_encode($contents);
		return ('data:' . $mime . ';base64,' . $base64);
	}
	/* ***********************************************************
	* END :::
	*********************************************************** */

In the CSS style sheet

You would need to either tell your server to process files with the .css extension or save your CSS files with the .php extension. It’s your call.

 body { background-image: url('<?php echo data_url('http://domain.com/images/file.png'); ?>') no-repeat; }

/* output code would be something like */
body { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAIAAACTCYeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI5JREFUeNrs2sENACEIRUF1LY0mqRbb2OQPHUwexIu7qlbq3JmJxZ8VPMorr7zy8NZeeXhrrzw8vJtXHh4eHh7eU6c8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8fMj4kAQPDw8P76lTHh7ezSsPb+2Vh7f2yiv/7/mS8dHlo2d3dyz+CTAAYEXI+4xG4igAAAAASUVORK5CYII=') no-repeat; }

Within HTML img tags

<img src="<?php echo data_url('http://domain.com/images/file.png'); ?>" border=0 />

<!-- output code would be something like --> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAIAAACTCYeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI5JREFUeNrs2sENACEIRUF1LY0mqRbb2OQPHUwexIu7qlbq3JmJxZ8VPMorr7zy8NZeeXhrrzw8vJtXHh4eHh7eU6c8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8fMj4kAQPDw8P76lTHh7ezSsPb+2Vh7f2yiv/7/mS8dHlo2d3dyz+CTAAYEXI+4xG4igAAAAASUVORK5CYII=" border=0 />