jQuery Plugin: Page Size Analyzer for Page Performance Monitoring


One of my senior Technical Architect asked me if i could come up with some useful widget that could help him display the page size of the current page. I thought of writing a jQuery plugin that could do this job. I am sharing it here. Do read the notes carefully before using it.

Screenshot:

Features v1.0:

  • Totally unobtrusive
  • Gives the result in KB or bytes according to the page size
  • Page Size displayed in red or green depending on the threshold value set
  • No server post done to retrieve the page size.

Known Issues:

  • Page size is an approximate value. Double-chords(“) associated with the ID, script tags are excluded in this calculation. I am working on a fix for this.

How to use?

  • Load your jquery using the script tag.

<script language=”javascript” src=”jquery-1.4.2.min.js” type=”text/javascript”></script>

  • Load this plugin using the script tag.

<script language=”javascript” src=”pagesize.js” type=”text/javascript”></script>

  • Invoke the script and set the appropriate parameters

<script language=”javascript” type=”text/javascript”>
$(document).ready(function(){
var res= $(“html”).html();
$(“html”).pagesize({pagecontrol:”mydiv”,threshold:50,decimalplace:3}); //threshold value is in KB; decimalplace is for the number of decimal places for the page size
});
</script>

  • Place a control (div or span) on the page wherein the page size should be displayed.

<span id=”mydiv”></span>

Complete source code:

<html>
<head>
<script language=”javascript” src=”jquery-1.4.2.min.js” type=”text/javascript”></script>
<script language=”javascript” src=”pagesize.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
$(document).ready(function(){
var res= $(“html”).html();
$(“html”).pagesize({pagecontrol:”mydiv”,threshold:50,decimalplace:3});
});
</script>
</head>
<body>
<span id=”mydiv”></span>
</body>
</html>

Downloads:

Demo [Remove the .pdf part from the filename]

Pagesize.js [Remove the .pdf part from the filename]

How to remove “Open” button from File Download Dialog options you get in your browser?


I received one client requirement sometime back asking for removing the “Open” button from the File Download popup you get when you are trying to download any file which cannot be viewed directly on the browser.

Inorder to remove the “Open” button, you can make use of one of the  “meta” tags HTML has given us.

<meta name=”DownloadOptions” content=”noopen”/>

Add this meta tag in your <head> tag and voila…. you can get rid of the”Open” button. See below:

 

Bat file to rename .js file to another format and back to .js


I faced a lot of issues with my mail exchange server quarantining my js files when i mail it my client. The way out of it was by renaming the .js file to .bak. But as the number of js files increased, it became a tedious process. So I thought of creating a bat file which could do two operations for me:

  1. Convert the .js files to .bak files
  2. Convert the .bak files to .js files

Here is the code you can use for these operations:

Convert .js to .bak (create_jstobak.bat):

@echo on
echo “This will convert all the .bak files to javascript(.js) files
rem Set CURRENTDIR=%CD%
rem ren “%CURRENTDIR%\javascript_files\*.bak” “*.js”
for /f “delims=” %%i in (‘dir /ad/s/b’) do ren “%%i\*.bak” “*.js”
 pause

Convert .bak to .js (create_baktojs.bat):

@echo on
echo “This will convert all the javascript(.js) files to .bak files
rem Set CURRENTDIR=%CD%
rem ren “%CURRENTDIR%\javascript_files\*.js” “*.bak”
for /f “delims=” %%i in (‘dir /ad/s/b’) do ren “%%i\*.js” “*.bak”
 pause

Remember:

  • Correct the path given in the snippet above
  • You can convert it to any other extension like .x or .y or .xyz instead of using bak
  • Save the above text in a notepad file as a “.bat” file.
  • Place the bat file in the appropriate location. Accordingly change the path mentioned in Line no. 4

Hope this helps!!

‘Add to Favourites’ button javascript


Here is a simple code, that i found useful from dynamicdrive. You can use for ‘Add to Favourites’ button in HTML. Add them in your head tag:

<script type=”text/javascript”>

/***********************************************
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function bookmarksite(title, url){
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, “”)
}

</script>

You can then call this javascript in your button ‘onclick’ event like this:

javascript:bookmarksite(‘site_title’, ‘site_URL’)

Demo