Monthly Archives: May 2011

Yet More jQuery–Resize an Image Example

Leave a reply

I inherited a web part from a client’s old vendor and it has an image size problem.  The images should be 60×50 but for some odd reason, the original vendor forced them into 42×42, so they look squashed:

 

Good Image

Bad Image

Here’s the markup (somewhat simplified):

<table class=’extended-outlook’>
  <thead>
    <tr>
      <th  width=’100′>3 Tuesday</th>
    </tr>
  </thead>

  <tbody>
    <tr class=’forecast’>
      <td width=’100′>
        <ul>
          <li class=’high’>High: 72&deg;F</li>
          <li class=’low’>Low: 44&deg;F</li>
          <li class=’condition’>Sunny
            <img src=’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width=’42’ height=’42’ alt=” />
          </li>
        </ul>
      </td>
    </tr>

  </tbody>

</table>

You’ll note that even though the path to the image itself shows the proper dimension (60×50) the original vendor forced it in 42×42.  Why?  Crazy.

Anyway, I wanted a quick and easy solution to this issue and I turned to jQuery.  The trick was to locate all of the appropriate <img> tags.  I didn’t want to muck about with any other img tags (of which there are many).  This bit of jQuery did the trick:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
     $(document).ready(function () {

         $(‘li.condition > img’).each(function (index, item)
            {
             $(item).css("width", "60"); 
             $(item).css("height", "50");
            });
     }); // on document load
</script>

That bit of code finds the collection <li> tags whose class is “condition” and <img> children.  It then iterates through all of that.  Worked like a charm.

I could probably streamline it, but I never was a the kind of unix guy that solved π to 18 digits precision using sed and awk and I’m not that kind if jQuery guy either Smile.

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

Parsing XML with LINQ

Leave a reply

Here’s a quick example using LINQ to parse some  XML and get at the sweet, sweet attributes therein.

Here’s the XML I want to parse:

<?xml version="1.0" encoding="utf-8" ?>
<DeafultConfigurationSets>
  <PageLayouts>

    <PageLayout name="xyzzy">
      <Tabs>
        <Tab TabOrder="1" TabLabel="x" SharePointContentType="a" AdditionalConstraints="ac1"/>
        <Tab TabOrder="2" TabLabel="y" SharePointContentType="b" AdditionalConstraints="ac2"/>
      </Tabs>
    </PageLayout>

    <PageLayout name="xyzzy2">
      <Tabs>
        <Tab TabOrder="100" TabLabel="x" SharePointContentType="a" AdditionalConstraints="ac1"/>
        <Tab TabOrder="101" TabLabel="y" SharePointContentType="b" AdditionalConstraints="ac2"/>
        <Tab TabOrder="103" TabLabel="z" SharePointContentType="c" AdditionalConstraints="ac3"/>
      </Tabs>
    </PageLayout>

  </PageLayouts>
</DeafultConfigurationSets>

I want to build up some tabs at runtime by parsing the above.  My tabs depend upon a page layout.  If my page layout’s name is “xyzzy2” then I want to get tabs 100, 101 and 103 (the tabs in <PageLayout name=”xyzzy2”>).

Here’s the LINQ that does it:

var allTabs =
              from p in
                  XElement.Parse(theXmlToParse).
                  Elements("PageLayouts").
                  Elements("PageLayout")
              where (p.Attribute("name").Value.Equals("xyzzy2"))
              from m in p.Elements("Tabs").Elements("Tab")
              select m;

          Results.Text = string.Empty;

          foreach (var aTab in allTabs)
          {
              Results.Text +=
                  "Tab Order: " + aTab.Attribute("TabOrder").Value + " |" +
                  "Tab Label: " + aTab.Attribute("TabLabel").Value + " | " +
                  "SharePointContentType: " + aTab.Attribute("SharePointContentType").Value + " | " +
                  "AdditionalConstraints: " + aTab.Attribute("AdditionalConstraints").Value + "\r";
          }

In the above, the variable “theXmlToParse” is a string variable, but you can use the load() method on a stream if you like.

“Results” is a label on a web form and when this code executes, it looks like this:

SNAGHTML11cd2e7c

I haven’t worked out how to sort the results yet, so I’ll leave that for a future blog post.

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin