In my previous post, I needed to embed Flash object. To do that, the post needs to have two inline JavaScript code blocks embedded inside.

This two code blocks apparently killed my RSS Feed! I didn’t know about this, until I visited my LinkedIn page. LinkedIn page was prompting me to enter my WordPress blog URL address. Hmm.. that’s weird. I remember I have done that immediately when I created my LinkedIn account. I squinted my eyes to find any error messages. Below the WordPress form, I saw broken red lines with varying degree of thickness. Apparently the error message was outside the DIV’s visible area. The error message reads “Error in parsing http://sodeve.net?feed=rss2”.

Here’s the offending inline codes:

<script type="text/javascript"> 
		var swfVersionStr = "10.2.0"; var xiSwfUrlStr = "/swf/playerProductInstall.swf"; 
		var flashvars = {}; var params = {}; 
		params.quality = "high"; params.bgcolor = "#3a3737"; 
		params.allowscriptaccess = "always"; params.allowfullscreen = "true"; 
		var attributes = {}; attributes.id = "SertifikasiDownloader"; 
		attributes.name = "SertifikasiDownloader"; attributes.align = "left"; 
		swfobject.embedSWF("/swf/Downloader.swf", "flashSertifikasiDownloader", "493", "332", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); 
		swfobject.createCSS("#flashSertifikasiDownloader", "display:block;text-align:left;");
</script>

And

<script type="text/javascript">
		var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
		document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
			+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>

Btw, please note that I made the JavaScript codes in multiple lines to make it readable. In its original form, each code block will be merged into a single line.

When I opened up this blog’s RSS Feed URL using Google Chrome, it spitted back red rectangle error message back at me. I opened the same URL with Safari, and it simply give up without even telling what’s the source of the error. Still not satisfied, I launched both IE9 and Firefox to the same URL.

Surprise surprise, these two browsers didn’t report any error. IE9 incompletely renderred the XML as a full-page of words without any arrangement. But it actually stopped rendering the content half-way. Perhaps it saw the error, got depressed, then perhaps go hiding somewhere trying to get high. Great, IE9, your act is just like Towelie.

If IE9 is like Towelie, I think Firefox is like Eddie Mora from Limitless. Although there’s error in the feed, it is still showing everything perfectly. And by perfectly, I mean everything. The FeedBurner’s favicon, the layout, the form to subscribe to the feed.

Last but not least, Opera. I think Opera is the most informative among all. It prompted the error, described what kind of error is it, which location the error was triggered from, and it even shown the part of the XML code where the error is originated.

Based on this razor-sharp information from Opera, I look into the XML file. I found out that the second JavaScript code block was auto-encapsulated inside CDATA section. But why only the second code block was auto-encapsulated? What makes the first code block so special (or not so special, depending on your today’s mood) that it wasn’t auto-encapsulated?

Anyway, I solved this issue by taking out both code blocks, and put them into two separate external .js file. Yes, this is actually the recommended practice should you ever need to include JavaScript code in your WordPress blog post. Why didn’t I do it in the first place? In my defense, the inline JavaScript code did work. As long as you make them in one single line.

What I did’t realize was that I accidentally depended on a ‘hack’, deprecated-method, or whatever it is that now WordPress (or W3 Total Cache) doesn’t support. I am not sure whether I should call this a bug. What do you think?

Moral of the story, use the recommended best practice when doing something, but don’t stop yourself from hacking 🙂 Show me your hand if your’re agree!

Cheers!

The screenshots from the browsers:
[nggallery id=5]

What a weird title for a solution that I don’t think many people would need 🙂 But apparently I needed it. So after scratching my head for non-dandruff-related cause, I found out how to do it.

Just a short background story. We have ASP.NET MVC application already deployed in the production server. Unfortunately, the launch date of the application is still days ahead. So instead of showing the application, a countdown page is more appropriate.

So somebody come up with the countdown page. Sadly, it was in PHP. It was a quite challenge to make IIS serve the index.php. I tried set the IIS’ default document priority, but it didn’t work.

Then I realized that Global.asax is overriding IIS behavior. Since the index.php needs a few .js files, .css and few .png images, I amended the Global.asax.cs into something like this:

protected void Application_AuthenticateRequest(object sender, System.EventArgs e)
{
	string url = HttpContext.Current.Request.RawUrl.ToLower();
	if (!(url.EndsWith("index.php") 
		|| url.EndsWith(".js") 
		|| url.EndsWith(".css")
		|| url.EndsWith(".png")))
	{
		Response.Redirect("http://www.project.com/index.php", true);
	}
	//.....
	//Your exisiting code
	//....
}

To deploy this solution, first I recompile the project. Then I backup my original dll by renaming it into .bak file. Lastly, I copied the newly compiled dll into the Server’s bin folder.

This way, it would be a minor change on the launch date D-Day. I could simply delete the application’s main dll file, and rename the existing .bak file into .dll.

I hope it helps. Cheers!

jQuery makes a lot of things easier. I have blogged before about creating collapsible/expandable box. But jQuery make that blog post obsolete and too ‘dirty’.

After consulting with Google, it pointed out a great website that teaches tips & tricks on Javascript. I modified his project to suit what I need. Below is the code, and after it, you could find the Live Demo.

Original Code

<html>
	<head>
		<title>Test JQuery</title>
		<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
		<script type="text/javascript">
			$(function() {
			$('div.sdvExp')
				.css("cursor","pointer")
				.attr("title","Click to expand/collapse")
				.click(function(){
					$(this).siblings('.child-'+this.id).toggle();
				});
			$('div[class^=child-]').hide();
		});
		</script>
	</head>
	<body>
		<div class="sdvExp" id="div1">
			<p>Lorem Ipsum</p>
		</div>
		<div class="child-div1">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui,
			vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
			turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla. 
			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
			Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum.
			Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero. 
			Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio. 
			Suspendisse laoreet volutpat adipiscing.
		</div>
	</body>
</html>

Live Demo

Making it Work in WordPress

To make the box working in WordPress, please observe the following source code and follow the three steps:

<!-- STEP 1: Create the control DIV. Its class name should be sdvExp. It also must have an ID (e.g. sdvExp1958) -->
<div class="sdvExp" style="background:#333;border:1px" id="sdvExp1958"><p>Expandable/Collapsible Box Demo</p></div>

<!-- STEP 2: Create the content DIV. Its class name should be child-{control-div-ID} (e.g. child-sdvExp1958) --> 
<div class="child-sdvExp1958">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui, vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum. Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero. Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio. Suspendisse laoreet volutpat adipiscing.
</div>

<!-- STEP 3: Add the following code -->
<script type="text/javascript" src="https://sodeve.net/js/sodeve.expander.js"></script>

If you follow three steps above, you should get your expandable/collapsible box working.

Good luck!