rounding to a specific number javascript

Wednesday, June 11th, 2008

Easy peasy lemon squeezy:

7 * Math.round(12 / 7); // returns 14
7 * Math.round(2 / 7); // returns 0

You might also want to check the value is a number too!

isFinite(parseFloat(value))

http://www.webveteran.com/blog/index.cfm/2007/2/19/JavaScript-Round-to-any-multiple-of-a-specific-number

Compressing CSS and JavaScipt with MSBuild

Monday, June 9th, 2008

Want to compress your CSS and Javascript files during your build process? Here is what you need.

Download CSSTidy, and add the executable somewhere on your build machine.

Download and install the MSBuild Community Tasks, or you can do just the Jazmin JSCompress task, though I didn’t do that so I don’t have any source XML for that.

To be clean, I added a Property for the location of CssTidy

<PropertyGroup>
<CssTidy>c:\BuildTools\CssTidy.exe</CssTidy>
</PropertyGroup>

Also I registered the MSBuildCommunityTasks

<!-- Required Import to use MSBuild Community Tasks -->
<Import Project=”$(MSBuildExtensionsPath)\MSBuildCommunityTasks\
MSBuild.Community.Tasks.Targets”/>

Then, build a list of all the files you want to compress.
<ItemGroup>
<CssFiles Include=”$(websitedir)\**\*.css”/>
<ScriptFiles Include=”$(websitedir)\**\*.js”/>
</ItemGroup>

$(websitedir) is just a variable for where the website is, obviously I could have used c:\inetpub\wwwroot or whatever instead.

Then I build two tasks, one that calls CssTidy…
<Target Name="compress_css">
<Attrib Files=”%(CssFiles.FullPath)” ReadOnly=”false”/>
<Exec Command=”$(CssTidy) %(CssFiles.FullPath) %(CssFiles.FullPath) –template=highest” />
</Target>

If your not familiar with the %() syntax, this causes MsBuild to iterate over each item in the CssFiles collection and run this tag for each instance. Otherwise I would get a semi-colon delimited list which nothing handles that well.

The Attrib tag makes everything write-able thus the ReadOnly=”false” attribute, this didn’t seem to be an issue for CssTidy, but it was for JSCompress and I put it here just incase it becomes an issue one day.

The Exec Line executes the CssTidy program, with the FullPath of the searched file (this is meta-data of the item), its included twice to represent the input and output. The –template=highest portion just says do your absolute best!

Then the you add one for JSCompress…
<Target Name="compress_js">
<Attrib Files=”%(ScriptFiles.FullPath)” ReadOnly=”false”/>
<JSCompress Files=”%(ScriptFiles.FullPath)”></JSCompress>
</Target>

Attrib we’ve been over, this is really important here, as JSCompress was failing on readOnly files.

Then I tell it to run the JSCompress tag for each of the ScriptFiles. I feel like I’m explaining exactly what your seeing and already understanding. I hate it when people do that.

Then you need to call these targets.
<CallTarget Targets="compress_css"/>
<CallTarget Targets=”compress_js”/>

Not much to it. Hopefully this helps you bring quick loading times to all the web surfers of the world.

Thanks from this link:

http://blackbeltcoder.net/2007/04/20/javascript-and-css-compression-in-msbuild/

debugging IE - var dump for javascript - sometime it is just needed with IE!

Monday, June 2nd, 2008

for (var member in object) {
alert(’Name: ‘ + member);
alert(’Value: ‘ + object[member]);
}

IE7 evalScripts with Prototype throws an error

Thursday, May 22nd, 2008

This is yet anther IE bug I have found whilst doing a lot of AJAX stuff with prototype recently. If you make and AJAX request such as AJAX.Update(blah blah and you set evalScripts: true then IE7 will throw a wobbly (great).

Basically if the JS has comments around it then IE blows up. I found this a useful link:

When using Ajax.Updater with the option evalScripts:true like:

  new Ajax.Updater( table_id+'tbody', '/someurl', {
    parameters : { 'table_id':table_id },
    evalScripts : true
  });

and response of /someurl contains the following script:

<script language="JavaScript" type="text/javascript">
<!--
alert( 'Hello' );
// -->
</script>

IE7 throws an error “Syntax error” in line 212 of prototype.js version 1.5.0 in function evalScripts.

If you try a non-commented script like:

<script language="JavaScript" type="text/javascript">
alert( 'Hello' );
</script>

it works. Firefox works whether the script is commented or not.

I am currently using JSF and Facelets for my web app that adds the comments around the JS for you - PAIN IN &^%$£

Not got a solution yet for JSF!

UPDATE!!

We tried to change myFaces so that it did not render the comments but thought that it was a bad idea and back tracked!

So the fix had to be in the JavaScript. We added the following to the Prototype class:

exec: function(code) {
  if ((code += '').blank()) return;
  var script;

  if (document.body) {
    script = new Element('script', { type:'text/javascript' });
    try {
      script.appendChild(document.createTextNode(code));
    } catch (e) { script.text = code; }
    ($$('head').first() || $(document.documentElement)).insert(script);
  }
  else {
    var scriptId = '__prototype_exec_script';
    document.write('<script id="'+ scriptId +'" type="text/javascript">'+ code +'<\/script>');
    script = $(scriptId);
  }
  script.remove();
  script.text = '';

},

And then changed where it evals the scripts to use this method instead. This does mean we cannot easily just upgrade the version of prototype we are using but to be honest I would rather it worked in the first place!

ID mangling in ASP.NET MasterPages

Monday, May 19th, 2008

This is fine if you just let .NET generate your client side script - but what if I want to write my own? What options do I have?

  1. Alter all your ID’s in your script as they will always be mangled the same! - I would rather not thanks..
  2. Change the ID’s in your script at runtime - not great but better
  3. Got any better ideas?

VB I know but you still get the idea:

Dim script As String = “[Label1ID].innerHTML = ‘boo!’;”
Dim scriptKey As String = “SayBoo”
Dim addScriptTags As Boolean = True

Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As EventArgs)

script = script.Replace(“[Label1ID]“, Label1.ClientID)

ClientScript.RegisterStartupScript( _
Me.GetType(), scriptKey, script, addScriptTags _
)

End Sub

Thanks to: http://www.odetocode.com/articles/450.aspx

Debugging JavaScript using Firefox plugin JavaScipt plugin by Venkman

Tuesday, May 13th, 2008

The Firefox plugin JavaScipt plugin by Venkman; yet another tool to learn - this was useful:

http://svendtofte.com/code/learning_venkman/venkmanwindows.php

Two way comminucation in Flash fscommand

Monday, May 12th, 2008

Interesting thing Thom brought up today. Two way communication from with the browser in flash - control flash from javascript.

This seemed to give the answers:

http://www.moock.org/webdesign/flash/fscommand/index.html

JavaScript can send commands to Flash by invoking built-in methods on embedded movie objects. Calling Flash methods works exactly like all calls to built-in methods on JavaScript objects (eg. document.write() or window.close()). From a developer point of view, this direction of communication is one sided–JavaScript methods control a Flash movie entirely in JavaScript, without requiring complementary code in the Flash movie.