Saturday, July 20, 2013

Javascript to Dynamically Change the Background Color of an Element for IE


You can change the background color easily in Chrome, Safari and Firefox.

But for IE, you cannot change it using the easy way like the other browsers are doing it.

Here's the solution (simplified for easy reference):

var ie = (navigator.userAgent.indexOf("MSIE") != -1);

if (!ie) {
   document.getElementById('MyElemID').style.backgroundColor = "#AABBCC";
}
else {
   document.getElementById('MyElemID').style.backgroundColor = "rgb('AA','BB','CC')";
}


Therefore, if you want to accommodate for all browsers, one needs to think of color as RGB components. You either break up the RGB component to suit IE's requirement or combine RGB components into a string to suit the need of Chrome, Safari or Firefox.

Updated on 4th of August 2013:
It is better to use rgb(170,187,204) instead of rgb('AA','BB','CC') stated earlier.



Read More »

Tuesday, June 18, 2013

How to Suppress Default IIS Error and Display PHP Error Instead?


Ever wonder how to make IIS to show the PHP errors instead of its default "semi" blue-screen error page? So that it is easier to debug your PHP codes?

The answer is simple. Just go to your php.ini (mine is in C:\Program Files (x86)\PHP), change display_errors from Off to On. Reboot your PC. (I've tried just restarting the IIS service, it won't use the new PHP setting yet)

Walla! That simple!

If you want to turn off the error/warning altogether, you can always add "error_reporting = 0;" in your PHP script. For example, PHP script to spit out headers, JSON/XML/Binary data.



This following is the screen capture of the php.ini file:


You need to run this editor as Administrator to save this file as php.ini is a system file.

Read More »

Wednesday, March 20, 2013

Protect Your External CSS and Javascript Codes? Possible?


Actually there is no way to protect your Javascript or CSS from being seen.

I've explained a way to sort of protect it from Safari/Firefox/IE in:


http://webtrick101.blogspot.com/2012/08/protect-your-css-and-javascript-codes.html


Nevertheless Chrome can easily show your CSS/Javascript codes to the world.


Since there is no way to block it, you might as well minify your Javascript/CSS codes. In that way, your codes will be harder to be understood and may sway some programmers from getting what they want easily.


Here's a simple way to minify it before you show it to the world using PHP:


Please remove all the comments from your CSS/Javascript codes before using the following minification codes.



For mycss.php:

<?php

error_reporting(0); // make sure it is not reporting any warning that will ruin the output
if (preg_match('/xxx.xxx.xxx.xxx/',$_SERVER['REMOTE_ADDR'])) {

$css = <<<MYCSS
a {text-decoration:none;color:#777777;}
.
.
.
MYCSS;

echo(preg_replace('/[\r\n\t]/','',$css)); // simple minification

}

?>



For myjs.php:

<?php

error_reporting(0); // make sure it is not reporting any warning that will ruin the output
if (preg_match('/xxx.xxx.xxx.xxx/',$_SERVER['REMOTE_ADDR'])) {

$js = <<<MYJS
var ie=0;
.
.
.
MYJS;

header("Content-type: application/x-javascript"); // to make sure browser sees it as js
echo(preg_replace('/[\r\n\t]/','',$js)); // simple minification

}


?>


Please note that this is just a simple minification to remove newlines and tabs using PHP's preg_replace. Spaces are not removed due to the 'var ' problem. If the spaces are removed, 'var' will merge with the variable name next to it. This can be solved by several filters to remove other spaces but it is not the purpose of this post to go deep into minification. I better call it "mini minification"! :)

P/S: If you want to retain your comments before sending to the minification process, this can be achieved by removing all the comments using preg_match before the minification.

UPDATE on 1st of April 2013
You can remove the javascript comments by using this preg_replace in PHP:
$js = preg_replace('|//[^\r^\n]+(\r\n)|','',$js);

UPDATE on 17th of April 2013
Sorry if you were using a Unix/Linux based web server, you'll need these to get rid of the comments instead of the codes above:
$js = preg_replace('|//[^\n]+(\n)|','',$js);

To simplify the consistency between both server platforms (MS/Linux), include both filter codes above to remove the comments before minify your javascript.

Read More »

Saturday, March 9, 2013

Weird Javascript setInterval Scenarios in Chrome

This is a weird case.


function dummy() {
.
.
.
}

setInterval(dummy, 1000); // This will WORK in non-Object-Oriented Function
setInterval(dummy(), 1000); // This will not work as it has too many brackets
setInterval("dummy", 1000); // This will not work
setInterval("dummy()", 1000); // This will work even in a Object Oriented Function



I found when I tried to set an interval loop to a OO (Objected Oriented) Function as follows:



function dummy() {
.
.
.
   this.action1 = function() {

      .
      .
      .
   }
.
.
.
}

setInterval(dummy.action1, 1000); // This will NOT work in Object Oriented Function
setInterval(dummy.action1(), 1000); // This will not work as it has too many brackets
setInterval("dummy.action1", 1000); // This will not work
setInterval("dummy.action1()", 1000); // This will work even in a Object Oriented Function



The function without the quotes and bracket will not work. But it works well in a normal non-OO funtion.
This may be something trivial but it is interesting. I haven't tried anything other than Chrome yet. Maybe other browsers are not giving this problem.
Read More »

Wednesday, February 27, 2013

The Curious Case of Missing 'px' in Javascript for Chrome/Safari/Firefox


When one uses the transitional DOCTYPE in Chrome/Safari/Firefox, your Javascript assignment of value to marginTop or top will not be successful if you left out the 'px'.

For example, if you want to move a dummy DIV to a height of 100 pixel from the top, you might do this:


document.getElementById('dummy').style.top = 100;



It will work if you are not using the transitional DOCTYPE. If you are using the transitional DOCTYPE, you need to assign it with a 'px' at the end:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> .
.
.
document.getElementById('dummy').style.top = 100 + 'px';



in order to make it work for Chrome/Safari/Firefox.

As for IE, it will work whether it is in transitional (quirks) mode or not.

Read More »

Friday, February 1, 2013

Javascript to Change Div & Body Style in IFrame

Before showing the codes, here are the conditions that these codes WON'T work:
  • Run with Chrome in localhost environment
  • Cross domain for the main HTML and dummy.html in your iframe. These codes have to comply with the same domain policy or hackers will be very happy if it is not


The Main HTML:


<iframe id="myFrame" scrolling="no" style="overflow: hidden; height: 580px; width: 325px;"
src="dummy.html"></iframe>

<script>

function changeColor() {

    document.getElementById('myFrame').contentWindow.document.getElementById('divInDummy').
style.backgroundColor = '#123456'; // myFrame is the name of your iframe,
divInDummy is the DIV name in the iframe


    document.getElementById('myFrame').contentWindow.document.body.style.backgroundColor = "#234567";
// change the body color of iframe

}

changeColor();

</script>




The dummy.html:



<html>

<body bgcolor="#ccaaee">

Hello World! My name is dummy.html
<div id=divInDummy style="background:#55aadd;width:120px;height:120px">
<table><tr><td><br> <br><br>I am inside a DIV<br><br>
</td></tr></table>
</div>

</body>

</html>



If you think the dummy.html is not able to load before you call the script, you can put it in an interval loop to make sure the function is called successfully eventually. Here's the code: setInterval('changeColor()', 1000);

Read More »

Thursday, January 31, 2013

Facebook Fan/Like Box External CSS No Longer Supported?





Updated: 8th of September 2013
After several months of waiting, FB no longer supports external CSS as of today. Here's my alternative to change the border color of the like box:
http://webtrick101.blogspot.com/2013/09/latest-method-to-change-facebook-like.html





Updated: 27th of February 2013
As of yesterday, this method is no longer working. Let's wait for a few more days and see if Facebook turns this feature back on.



Updated: 1st of March 2013 (Not Working Anymore)
If you use http://www.facebook.com/plugins/likebox.php instead of http://www.connect.facebook.com/widgets/fan.php as your like box script, you can still control the color of the iframe by adding the border style to it. As of now, the external CSS is still not supported.





Actually it is still supported but the method used has changed.

Here's the latest format/method:


<iframe style="height: 400px; width: 310px; border: 0" src="http://www.connect.facebook.com/widgets/fan.php?href=[FAN PAGE URL]&colorscheme=light&show_faces=true&stream=true&header=false&css=[CSS URL]"></iframe>


Instead of using <fb:fan> tag, iframe is used. As for the [FAN PAGE URL], you can put something like http%3A%2F%2Fwww.facebook.com%2FmyFBpage. Please note that %3A means ':', %2F means '/'. The same goes for the CSS URL. Just point to a css file.

Enjoy!
Read More »

Wednesday, January 2, 2013

Happy 2013! The Winners and Losers of Browsers

My first post in 2013! Web developers' number one concern is always the browser popularity. We simply cannot afford to develop a web page that only runs well on a browser that is seldom used by the public.

Here's the latest stat from WikiMedia as of October 2012 for non-mobile browser:



The winner is Google for 2012!!!

As for the mobile version, my guess is either Google or Apple. I think they are in stiff competition something like 50/50. But for America, I think Apple Safari won the competition where iPad and iPhone are very popular. As for the rest of the world, Google has the edge.

Let see how this competition turns out later part of 2013.

Have a enjoyable 2013! Happy coding!

Read More »