<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:pingback="http://madskills.com/public/xml/rss/module/pingback/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0">
  <channel>
    <title>JohnArmitage.net - code</title>
    <link>http://www.johnarmitage.net/word/</link>
    <description />
    <language>en-us</language>
    <copyright>John Armitage</copyright>
    <lastBuildDate>Fri, 18 Aug 2006 13:45:23 GMT</lastBuildDate>
    <generator>newtelligence dasBlog 1.9.6264.0</generator>
    <managingEditor>blog@johnarmitage.net</managingEditor>
    <webMaster>blog@johnarmitage.net</webMaster>
    <item>
      <trackback:ping>http://www.johnarmitage.net/word/Trackback.aspx?guid=aae86c97-eea1-47fd-897a-bd5188d168b5</trackback:ping>
      <pingback:server>http://www.johnarmitage.net/word/pingback.aspx</pingback:server>
      <pingback:target>http://www.johnarmitage.net/word/PermaLink,guid,aae86c97-eea1-47fd-897a-bd5188d168b5.aspx</pingback:target>
      <dc:creator>John</dc:creator>
      <wfw:comment>http://www.johnarmitage.net/word/CommentView,guid,aae86c97-eea1-47fd-897a-bd5188d168b5.aspx</wfw:comment>
      <wfw:commentRss>http://www.johnarmitage.net/word/SyndicationService.asmx/GetEntryCommentsRss?guid=aae86c97-eea1-47fd-897a-bd5188d168b5</wfw:commentRss>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>
Ok, so this isn't so much "Smooth" in the sense that it's a really slick piece of
code.  Rather it's "Smooth" because it took me way to long too figure it out
and I thought that I better write it down somewhere that google has a chance of indexing
it.  That way a month from now when I may have forgotten this, I'll be able to
look it up. 
</p>
        <p>
I'm working on this project where I show users an image and they can perform some
zoom in type action where they click on the image and drag a rectangle, or they click
on a bunch of points to draw lines allowing them to draw their own shape.  This
is basically all accomplished with javascript.  Good.  Not hard to figure
out.  When they are done drawing their shape, I am clicking on a button in the
background (by using javascript) to force a postback so that I can call some web service
in the code behind and reload the image.  Note that this isn't a full Page postback,
since I'm using an <a href="http://anthem-dot-net.sourceforge.net/">anthem</a>:button.
</p>
        <p>
Ok, so all is well, I get the new image url, I load it up.  Done!  Not quite. 
Because in my case, I'm doing some fancy fade in from a placeholder image that lets
the user know that something is going on.  Ok, so I need to get back to running
some javascript.  Stick it in the window.onload event.  Yeah.....no. 
Not so much.  This is where anthem causes a problem because the page isn't actually
reloading.  Just my image....which did I mention is an anthem:image?  So
the obvious solution now is to put my javascript method call in the
image's onload event.  Sounds like a good idea, right?  Well it is, but
the only tricky part is, how do you do it?
</p>
        <p>
This doesn't work:<br /></p>
        <p>
          <span style="FONT-SIZE: 11px; COLOR: black; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent">
            <font color="#000080">&lt;</font>
            <font color="#a52a2a">anthem:image</font>
            <font color="#ff0000">onload=</font>
            <span style="FONT-SIZE: 11px; COLOR: #666666; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #e4e4e4">
              <font color="#000080">"FancyFadeIn()"&gt;</font>
            </span>
            <font color="#000080"> &lt;/</font>
            <font color="#a52a2a">anthem:image</font>
            <font color="#000080">&gt;</font>
          </span>
        </p>
        <p>
That's because an anthem:image doesn't play the onload game that way.  BUT if
you really know what's going on, you'll know that when everything is said and done
that &lt;anthem:image&gt; ends up as an &lt;img&gt; which does have an onload event. 
To add that attribute using the Language of the Gods VB.NET, you do something like
this:
</p>
        <p>
          <span style="FONT-SIZE: 11px; COLOR: black; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent">
            <span style="FONT-SIZE: 11px; COLOR: blue; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent">Me</span>.mapImage.Attributes.<span style="FONT-SIZE: 11px; COLOR: blue; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent">Add</span>(<span style="FONT-SIZE: 11px; COLOR: #666666; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #e4e4e4">"onload"</span>, <span style="FONT-SIZE: 11px; COLOR: #666666; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #e4e4e4">"FancyFadeIn()"</span>)</span>
        </p>
        <p>
          <span style="FONT-SIZE: 11px; COLOR: black; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent">
            <font face="Verdana" size="2">Now
when the image reloads, the fade in javascript is called and everything is right
with the world.</font>
          </span>
        </p>
        <img width="0" height="0" src="http://www.johnarmitage.net/word/aggbug.ashx?id=aae86c97-eea1-47fd-897a-bd5188d168b5" />
      </body>
      <title>Smooth Code Move of the Week</title>
      <guid isPermaLink="false">http://www.johnarmitage.net/word/PermaLink,guid,aae86c97-eea1-47fd-897a-bd5188d168b5.aspx</guid>
      <link>http://www.johnarmitage.net/word/PermaLink,guid,aae86c97-eea1-47fd-897a-bd5188d168b5.aspx</link>
      <pubDate>Fri, 18 Aug 2006 13:45:23 GMT</pubDate>
      <description>&lt;p&gt;
Ok, so this isn't so much "Smooth" in the sense that it's a really slick piece of
code.&amp;nbsp; Rather it's "Smooth" because it took me way to long too figure it out
and I thought that I better write it down somewhere that google has a chance of indexing
it.&amp;nbsp; That way a month from now when I may have forgotten this, I'll be able to
look it up.&amp;nbsp;
&lt;/p&gt;
&lt;p&gt;
I'm working on this project where I show users an image and they can perform some
zoom in type action where they click on the image and drag a rectangle, or they click
on a bunch of points to draw lines allowing them to draw their own shape.&amp;nbsp; This
is basically all accomplished with javascript.&amp;nbsp; Good.&amp;nbsp; Not hard to figure
out.&amp;nbsp; When they are done drawing their shape, I am clicking on a button in the
background (by using javascript) to force a postback so that I can call some web service
in the code behind and reload the image.&amp;nbsp; Note that this isn't a full Page postback,
since I'm using an &lt;a href="http://anthem-dot-net.sourceforge.net/"&gt;anthem&lt;/a&gt;:button.
&lt;/p&gt;
&lt;p&gt;
Ok, so all is well, I get the new image url, I load it up.&amp;nbsp; Done!&amp;nbsp; Not quite.&amp;nbsp;
Because in my case, I'm doing some fancy fade in from a placeholder image that lets
the user know that something is going on.&amp;nbsp; Ok, so I need to get back to running
some javascript.&amp;nbsp; Stick it in the window.onload event.&amp;nbsp; Yeah.....no.&amp;nbsp;
Not so much.&amp;nbsp; This is where anthem causes a problem because the page isn't actually
reloading.&amp;nbsp; Just my image....which did I mention is an anthem:image?&amp;nbsp; So
the obvious solution now is to put&amp;nbsp;my javascript&amp;nbsp;method call&amp;nbsp;in the
image's onload event.&amp;nbsp; Sounds like a good idea, right?&amp;nbsp; Well it is, but
the only tricky part is, how do you do it?
&lt;/p&gt;
&lt;p&gt;
This doesn't work:&lt;br&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;span style="FONT-SIZE: 11px; COLOR: black; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent"&gt;&lt;font color=#000080&gt;&amp;lt;&lt;/font&gt;&lt;font color=#a52a2a&gt;anthem:image&lt;/font&gt; &lt;font color=#ff0000&gt;onload=&lt;/font&gt;&lt;span style="FONT-SIZE: 11px; COLOR: #666666; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #e4e4e4"&gt;&lt;font color=#000080&gt;"FancyFadeIn()"&amp;gt;&lt;/font&gt;&lt;/span&gt;&lt;font color=#000080&gt; &amp;lt;/&lt;/font&gt;&lt;font color=#a52a2a&gt;anthem:image&lt;/font&gt;&lt;font color=#000080&gt;&amp;gt;&lt;/font&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;
That's because an anthem:image doesn't play the onload game that way.&amp;nbsp; BUT if
you really know what's going on, you'll know that when everything is said and done
that &amp;lt;anthem:image&amp;gt; ends up as an &amp;lt;img&amp;gt; which does have an onload event.&amp;nbsp;
To add that attribute using the Language of the Gods VB.NET, you do something like
this:
&lt;/p&gt;
&lt;p&gt;
&lt;span style="FONT-SIZE: 11px; COLOR: black; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent"&gt;&lt;span style="FONT-SIZE: 11px; COLOR: blue; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent"&gt;Me&lt;/span&gt;.mapImage.Attributes.&lt;span style="FONT-SIZE: 11px; COLOR: blue; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent"&gt;Add&lt;/span&gt;(&lt;span style="FONT-SIZE: 11px; COLOR: #666666; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #e4e4e4"&gt;"onload"&lt;/span&gt;, &lt;span style="FONT-SIZE: 11px; COLOR: #666666; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #e4e4e4"&gt;"FancyFadeIn()"&lt;/span&gt;)&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;span style="FONT-SIZE: 11px; COLOR: black; FONT-FAMILY: Courier New; BACKGROUND-COLOR: transparent"&gt;&lt;font face=Verdana size=2&gt;Now
when the&amp;nbsp;image reloads, the fade in javascript is called and everything is right
with the world.&lt;/font&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;img width="0" height="0" src="http://www.johnarmitage.net/word/aggbug.ashx?id=aae86c97-eea1-47fd-897a-bd5188d168b5" /&gt;</description>
      <comments>http://www.johnarmitage.net/word/CommentView,guid,aae86c97-eea1-47fd-897a-bd5188d168b5.aspx</comments>
      <category>duh;code;anthem</category>
    </item>
  </channel>
</rss>