In one of our main projects we are using a custom TinyMCE plugin to allow the users to attach files to an email that is sent from our system.   The plugin pops up a modal and asks the user for information then inserts the entered data into the editor at the cursor.   This works perfectly well in most cases, except for IE11 where it inserts the text at the beginning of the editor.

We found a Stack Overflow post (TinyMCE – Inserting content at cursor position in IE doesn’t work) that gave the basics on how to fix it.   Here is what I ended up doing.

Create the plugin with the bookmark code:

tinymce.PluginManager.add('customattachment', function (editor, url) {
  var self = this;

  // ie11 does not retain the current cursor position when the attachment popup loads.  We need to retain the current position
  // and then restore it in the "InlineAttachment" function using the self.restoreBookmark() defined in this file.
  var bookmark;

  editor.addButton('insertcustomattachment', {
    title: "Insert Attachment",
    type: 'button',
    icon: 'attachment-ico',
    onclick: function (e) {
      //save bookmark
      bookmark = tinyMCE.activeEditor.selection.getBookmark();

      $.fancybox({
        content: "<iframe class=\"naked customattachment\" src=\"/attachment/upload/InlineAttachment/\" scrolling=\"no\" style=\"border:none; width:500px; min-height:250px; margin:15px;\"></iframe>",
        scrolling: 'no',
        padding: 0,
        margin: 0,
        onClosed: function () {
        }
      });

      // prevent bootstrap from hijacking the click (on Website | Home full-width pages)
      $('.fancybox-inner').find('iframe').on('focusin', function (evt) {
        var $ipt = $($(evt.target)[0].contentWindow.document).find('.custom-attachment-title').closest('form');
        if ($ipt.length) {
          evt.stopImmediatePropagation();
        }
      });

    },
  });
  self.restoreBookmark = function () {
    //restore bookmark
    return tinyMCE.activeEditor.selection.moveToBookmark(bookmark);
  }
});

Call the code to insert the attachment after the modal is closed:

  // Used in _komodal_tinymce for customattachment
  function InsertInlineAttachment(item) {
    tinyMCE.activeEditor.plugins["customattachment"].restoreBookmark();
    tinyMCE.activeEditor.execCommand('mceInsertContent', false, item.replace(/"/g, "'"));
    $.fancybox.close();
  }

Sometimes there is a need to work in two different versions of the same project, it can get complicated to keep track of which window you are in.

I just found a new extension to add my Visual Studio that changes the title bar to show the root path of the solution you are working in.

Once installed it looks like this

The key settings to set it up for our SVN file structure is this

I needed to add font awesome arrows to a jQuery.tablesorter table.  The css was a bit tricky and I don’t want to lose it.

    table.tablesorter thead tr th.headerSortUp:after,
    table.tablesorter thead tr th.headerSortDown:after,
    table.tablesorter thead tr th.header:after {
      font-family: FontAwesome;
    }
    table.tablesorter thead tr th.header:after {
      content: "\f0dc";
    }
    table.tablesorter thead tr th.headerSortUp:after {
      content: "\f0de";
    }
    table.tablesorter thead tr th.headerSortDown:after {
      content: "\f0dd";
    }

<table id="table" class="table tablesorter">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
        </tr>
        <tr>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
        </tr>
    </tbody>
</table>

I love working on teams that use MVC.  They always seem to be the ones willing to grab the latest technology and start using it.  I have worked in the past for places that say “We use the latest and greatest…” but when I have been there a while I find out that they really aren’t willing to upgrade anything.  Today I got to install Visual Studio 2012 and start using it.  Here are a few links to sites that had useful information:

Scott Hanselman is awesome.  Here is his article on Visual Studio.

Microsoft has a product guide for 2012.

These days most of my projects are done in .Net with MVC.  In order to get the pages to work properly I need to write a lot of javascript and jQuery.  I decided to take a course from  Benchmark Learning to help me improve my skills with it.  Here is a list of the resources I am using to improve my skills.

Benchmark course: Mastering jQuery

Official jQuery website

Html reference at W3Schools

Tutorials from the jQuery website

Free online fundamentals book by Rebecca Murphey

Hottest questions about jQuery on StackOverflow

John Resign video

In CSS, selectors are patterns used to select the element(s) you want to style.
The “CSS” column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).

I suck at writing JavaScript and jQuery and I need to change that.  Most of my career was Windows forms development and I kind of fell into web development.  Now I am playing catch-up and trying to learn as I go.  That means that I am writing alot of bad cut and paste code.  Here are a few webpages and code snippits that I found that were written well and I can use for reference.

Here is some proper jQuery that does a series of actions on a single item.  It came from here:

$('.nav a').click(function(e) {
   var anchor = $(this);

   anchor
      .hide()
     .css('color', 'red')
     .show();

   alert('something else');

   anchor.hide();
   e.preventDefault();
});

Jeremy McPeak wrote an interesting article on the nesting of JavaScript functions that got me thinking about how little I actually know about JavaScript.  Now I am off to look at JavaScript: The Good Parts by Douglas Crockford that I heard about on HanselMinutes a while back.