To replace javascript alert with CFMessagebox

Before my development, I've already used native javascript alert for client side validation message. Some people might complaint why I used native javascript alert instead of jQuery dialogbox, it's because of I don't want to include so many script tags and CSS tags for jQuery mobile.

Today, I've got an idea to replace native javascript alert with cfmessagebox. This function will support to display cfmessagebox instead of javascript alert whenever we have put javascript alert in our coding.

[More]

Get Javascript value from Coldfusion in same page

Today, I've found funny resolution to get javascript value from Coldfusion in same page without reloading. I'm not sure whether it might be useful or not, but for me it's kinda useful.

Usage

view plain print about
1<cfsavecontent variable="JSvalue">
2    <script>
3        var whatisyourname = "ppshein";
4        document.write(whatisyourname);
5    </script>
6</cfsavecontent>
7
8<cfoutput>#JSvalue#</cfoutput>

get Table height with javascript

Normally, it's hard to get table height with javascript because javascript cannot read or retrieve table as follow

view plain print about
1<table id="tableID">
2    <tr>
3        <td>Height</td>
4    </tr>
5</table>
6
7<script>
8<!--
9    getTableHeight = document.getElementById("tableID").offsetHeight;
10    alert(getTableHeight)
11 -->

12</script>

[More]

Iframe location for firefox

I oddly know how to use iframe location in firefox. Honestly, most of our projects are based on Internet Explorer. It's because of ActiveX controls. Why I know how to use iframe location in firefox is because of my junior asked me how to do like that.

view plain print about
1<!--- for IE --->
2window.frames[iframeName].location = url;
3
4<!--- for Firefox --->
5document.getElementById(iframeId).src = url;

Credit : http://www.dyn-web.com/tutorials/iframes

Using parseFloat function in Javascript

Today, I found one of weird problem in my project about using parseFloat() function of Javascript. The usage of parseFloat() function parses a string and returns a floating point number.

example usage of parseFloat()

view plain print about
1document.write(parseFloat("10.33"));
2<!--- return value is "10.33" --->
3
4document.write(parseFloat("I AM PPSHEIN"));
5<!--- return value is "NaN" --->

[More]

Download Facebook Video Part 2

I wrote how to download Facebook video Download Facebook video without installing addons in my old post. At that time, Facebook using "embed" tag as displaying their video and it's easy to get original mp4 video from Facebook. Yesterday, one commenter wrote that he cannot download Facebook video regarding the instruction of my previous post. I was confused and cannot understand why he cannot download at all. That's why I've open Facebook video page and reviewed source code of it. Oddly, Facebook don't use "embed" tag as displaying their video anymore and changed their coding for using javascript as displaying. That's why I need to find out how to download original mp4 file of this movie from Facebook again.

[More]

Decimal format in Javascript

It's odd that I've recently known how to do decimal format in javascript. Because, in the new change requests of our projects, I need to do on-the-fly calculation total amount once users change quantity. It seems so simple to use the built-in function of javascript but value parsing via javascript it a bit touch.

Here is the example.

view plain print about
1<!---
2    Please assume that "56.50" is in document.myForm.txtPrice.value
3    and quantity is 5.
4--->

It's the wrong using of fetching decimal value in JS.

view plain print about
1var getPrice = parseInt(document.myForm.txtPrice.value);

[More]

Change jQueryMobile Select Box active style color in iPad safari

Today, I'm very happy that I can change jQueryMobile select Box active style color in iPad safari. Because, current active style ".ui-btn-active" is 100% working for other inputs like text, radio and checkbox but for select box, it doesn't completely work in iPad safari. My boss told me that I need to change all of active input color to "dark blue" instead of default color. That's why I need to change and already played in existing jQueryMobile stylesheet file. But it doesn't work at all. That's why I think I need to hack jQueryMobile existing javascript. After 30 minutes, I found that there are three places I need to change in jQueryMobile existing stylesheet.

The first part is I need to add new class name for active select box in stylesheet.

view plain print about
1.ui-select-active {color:#0000a0; text-shadow: 0 -1px 1px #ffffff;}

[More]

Display image when completely loaded with Javascript

Today, I need to test some simple javascript coding to detect image manipulation. As we all know, we cannot detect Image width and height with javascript or jQuery before which isn't completely loaded. Now what I want to do is just put loading text and don't show image while it's not completely loaded. It's quite simple and I feel what I want to do might be useful for my future projects. Because I feel displaying image while loading is annoying and shouldn't be good for our clients. That's why I have an idea to do like that.

view plain print about
1<img id="imageid" src="very_big_image.jpg">
2<span id="loadText"></span>
3
4/* Below part is Javascript Coding */
5document.onreadystatechange=function()
6{
7    /*
8        if page/dom/image is completely loaded,
9        show image and remove loading text.
10    */

11    if (document.readyState == "complete")
12        {
13            document.getElementById("imageid").style.display = "inline";
14            document.getElementById("loadText").innerHTML = "";
15        }
16}
17/* hide image and display loading while loading */
18document.getElementById("imageid").style.display = "none";
19document.getElementById("loadText").innerHTML = "Loading...";

To save data into localStorage when Offline

Today I've found how to save the information of your data when offline (when your internet connection is disconnect). That's same as when Google email work. It's very useful to use because our submitted data is sometimes lost when our connection is disconnect or offline. Using this feature in HTML5 can prevent these bad situation. The important part is we need to check whether our browser can support "localStorage" or not. If not support, cannot develop anymore. If support, let's go.

First of all, we need to create manifest file for "localStorage". It's the main part to let browser know our application will be using "localStorage". So, we need to add all of files name we will be using into this manifest file as follow. Current my simple application, I've used 2 files called index.html and lc.js. So, I need to add as follow

view plain print about
1CACHE MANIFEST
2index.html
3lc.js

Now I need to let our clients know he/she is now online or office with following javascript.

view plain print about
1navigator.onLine ? "online" :"offline"

After that, I need to create index.html file. As HTML5 standard, I need to follow the rule of HTML5.

view plain print about
1<!DOCTYPE HTML>
2<html manifest="/loc.manifest">

[More]

More Entries

Top of Page