Auto Expanding Div Columns (when floated div has no set size)

Usually 2 divs side-by-side (e.g. left menu and main content) will have the left div floated left with set size, the 2nd div also float with a left margin equal to the width of the left div.

When the left div has no set size (for example if it will contain an image of unknown width) you can still float it left, but instead of floating the 'main content' div, you can set overflow: hidden; in its CSS style (real implementation via external .css).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>   
    <div style="float: left">           
        <div style="width:200px; height:200px; background-color: Fuchsia"></div>        
    </div>

    <div style="overflow: hidden">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo sodales faucibus. Aenean ante nunc, porta nec lacinia dignissim, eleifend ut quam. Duis quam elit, condimentum ac hendrerit et, sodales semper arcu. Phasellus justo urna, porta quis vestibulum non, fringilla non est. Sed vestibulum bibendum feugiat. Vivamus porttitor justo at sem egestas ultricies vitae et mi. Ut mattis ante sed dui viverra vel scelerisque felis bibendum. Proin nec sapien id orci egestas eleifend. Sed facilisis erat in urna ullamcorper et suscipit urna luctus. Phasellus cursus consequat odio eget auctor. Curabitur eu ante nec lacus ultrices tristique.</p>
    </div>
</body>
</html>
 

SHARE:

Disable Grey Border On Focus Selected Anchor <a> Elements

When an <a> element is selected the browser can add a grey focus border around, the CSS outline:none; can be use to prevent it on standards browsers, for IE (except IE 8 when not in compatibility mode) adding the (non-standard) hidefocus="hidefocus" attribute to the <a> element seems to work. (Unsure what older versions of IE support this.) http://help.dottoro.com/lhgdtcso.php

SHARE:

Accessing Entity Framework Entities In EntityDataSource Data-Bound Controls

If using ASP.NET EntityDataSource and databound controls you may need to access the actual entity object being represented in the control, e.g. a data row in a table or a single entity in a FormView. The actual entity is not readily available however as it is automatically wrapped in a System.Web.UI.WebControls.EntityDataSourceWrapper which is not accessible. The extension method below allows you to gain access to the strongly typed, underlying entity. It is based on the article by Diego Vega which explains the wrapping behaviour in more detail. 

 /// <summary>
/// Gets the actual EF entity object that is being wrapped and databound.
/// </summary>
/// <example>
/// Advert ad = myFormView.DataItem.WrappedEntity<Advert>();
/// (where myFormView is databound to EntityDataSource returning Advert entity)
/// </example>
static class WrappedEFEntityExtensions
{
    public static TEntity WrappedEntity<TEntity>(this object dataItem) where TEntity : class
    {
        var entity = dataItem as TEntity;

        if (entity != null)
            return entity;

        var typeDescriptor = dataItem as ICustomTypeDescriptor;

        if (typeDescriptor != null)
            return (TEntity)typeDescriptor.GetPropertyOwner(null);

        return null;
    }
}

SHARE:

Quick and Dirty Image Loading Animation Without JavaScript

If you are display a set of images that potentially will take a while to be returned from the server (for example if pulling them out of a database via an .axd or .ashx) you can use css to to display a loading animation.

For example if you have a page of images using something like:

<img class='advertImage' alt="Car photo" src="AdvertImages.ashx?AdvertID=xxxx" width="250" height="187" />

You can define css as:

.advertImage
{
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../img/wait.gif');
}

This css is saying "use wait.gif image as the background of the img element, put it in the centre and have only one (i.e. no-repeat)".

One of the problems is that while the image is loading some browsers (e.g. Firefox) will display the alt description and an empty image icon in addition to the loading animation which looks pretty ugly - hence the quick and dirty.

SHARE:

JavaScript Enumerations

Rather than defining many JavaScript 'constants', e.g.

 

var CONST_DAY_OF_WEEK_MONDAY = 1;

var CONST_DAY_OF_WEEK_MONDAY = 2;

var CONST_DAY_OF_WEEK_MONDAY = 3;

etc.

You can alternatively declare:

var daysOfWeek= { monday: {}, tuesday: {}, wednesday: {} }; // etc.

And then you can use instead of integer constants, for example a function to alert if a day is Monday:

function alertMondays(today){

 if (today == daysOfWeek.monday)

   alert('Bad case of the Mondays');

}

SHARE:

Loading images into SQL Server Using Management Studio

If you are storing images in a SQL Server database you can use the following statement to insert data into a BLOB field (e.g. varbinary(max) ) of a table (Sql Server 2005+):

Assuming a table called AdvertImage with an identity col ("ID") a foreign key column ("FK_Advert") and a varbinary(max) col "JPEGImageData"; you could use the following SQL to insert a new row with the image "C:\motoimage\1.1.JPG" being loaded into the JPEGImageData and setting FK_Advert to 12345:

INSERT AdvertImage
(
    FK_Advert,
    JPEGImageData
)
SELECT 12345, JPEGImageData.*
FROM OPENROWSET
    (BULK 'C:\motoimage\1.1.JPG', SINGLE_BLOB) JPEGImageData

MSDN Link

 

Sidenote: everyone seems to have a different opinion on storing images (BLOBs) in a database, unfortunately a lot of the time the opinions are written in stone "never store images in the database, always just store the filename to the image on disk", etc. Like any problem you should weight up all the factors such as image size, read vs write volume, will be using a web farm (if so will the images stored on web server need replicating every time one is inserted or changed), how many users, criticality of db image references (e.g. medical images, etc)

There is a good MSDN article covering choice of BLOB types and considerations.

SHARE:

Don't Code Tired 1st Birthday

Don't Code Tired is a year old! For Year 2 I really want to ramp up the content, especially more tutorial style articles and end-to-end examples - I also intent to start producing tutorial videos this year, just have to find some good open source screen cast software. Another thing I want to get involved in is open source, either as regular contributor to existing project(s) or I have a couple of ideas for projects of my own.

SHARE:

Diagnosing WCF Problems Using SvcTraceViewer.exe

You can use Microsoft Service Trace Viewer (SvcTraceViewer.exe) to help diagnose problems with connections to your WCF services.

For example, if calling WCF service from the client using AJAX (or maybe AJAJ for JSON!) you might get a 500 Server Error, you set a breakpoint in you service but that is never hit, using SvcTraceViewer.exe you can attempt to get some more info.

Add the following to your app\web.config:

 <system.diagnostics>
  <sources>
    <source name="System.ServiceModel" switchValue="Verbose,ActivityTracing"
      propagateActivity="true">
      <listeners>
        <add type="System.Diagnostics.DefaultTraceListener" name="Default">
          <filter type="" />
        </add>
        <add name="ServiceModelTraceListener">
          <filter type="" />
        </add>
      </listeners>
    </source>
    <source name="System.ServiceModel.MessageLogging" switchValue="Verbose,ActivityTracing">
      <listeners>
        <add type="System.Diagnostics.DefaultTraceListener" name="Default">
          <filter type="" />
        </add>
        <add name="ServiceModelMessageLoggingListener">
          <filter type="" />
        </add>
      </listeners>
    </source>
  </sources>
  <sharedListeners>
    <add initializeData="MyWCFTraceLog.svclog"
      type="System.Diagnostics.XmlWriterTraceListener, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"
      name="ServiceModelTraceListener" traceOutputOptions="Timestamp">
      <filter type="" />
    </add>
    <add initializeData="MyWCFTraceLog.svclog"
      type="System.Diagnostics.XmlWriterTraceListener, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"
      name="ServiceModelMessageLoggingListener" traceOutputOptions="Timestamp">
      <filter type="" />
    </add>
  </sharedListeners>
  <trace autoflush="true" />
</system.diagnostics>

 

You can then launch SvcTraceViewer.exe from the Visual Studio command prompt, File-->Open and choose the log file (MyWCFTraceLog.svclog in the above config). You can supply a full path to the log file, e.g.:

 <add initializeData="c:\temp\MyWCFLogFiles\MyFooApp\MyWCFTraceLog.svclog"

 

SHARE: