Show Hide

This add-in lets you show and hide blocks of text with 'More' and 'Less' links. A typical example would in a FAQ page where you show a brief description with a link to show more detailed information. Like this:

It adds an icon to the Standard Toolbar and an entry in the Help menu.

Three files are added to your site: jQuery 1.7.min, xpand.js, which controls the show/hide action (and can be modified to alter the effects if you are familiar with or want to experiment with jQuery) and xpand.css, which defines styles for the initially hidden text and the 'more' and 'less' links. These styles can be changed to suit your own needs.

Note that if you want the 'More' link to display as shown above, rather than on a new line, the <div> holding the 'More' link AND the preceding paragraph should both be styled to display 'inline'.

Download the ShowHide add-in  Total downloads: 2863

HTML5 Placeholder Add-In

HTML5 adds the 'placeholder' attribute to <input> tags, allowing you to display a watermark prompt. This can be useful for form input in small spaces, where you can still have labels for accessibility hidden outside the viewport. Most HTML5 browsers support this but if the page is viewed in an older browser, the watermark is lost.

This simple add-in adds the 'placeholder' attribute to input tags but importantly uses a JQuery 'shim' to enable browsers that don't support it to show the placeholder. Forms do not submit the placeholder data and browsers that do support 'placeholder' don't use the 'shim'.

Download the HTML5 Placeholder Add-In  (Now updated for SP2 and earlier) Total downloads: 3531

WinPop Add-In

The WinPop add-in creates accessible pop-up windows. By accessible I mean that they can be read by screen readers and that they still work (in full browser size) when the user has JavaScript support turned off.

It has the normal options for pop-up windows and allows them to be created from text, existing links or images.

Download the WinPop Add-In Total downloads: 3451

WordPaste Add-In

[Note: V1.6 released June 2011. This resolves the issues raised by users to date and makes some chnages needed for EW V4 SP2. If you are using another version please upgrade to this new one. Uninstall the old one first via 'Tools - Add-Ins'].

A question that's often asked is "how do I paste text into Expression Web from a MS Word™ document, without bring all the proprietary html tags with it?"

The simplest way is to paste the text into NotePad first and then into EW, but this doesn't bring over any html, just plain text. The 'Paste Text' option in EW isn't much better.

This add-in pastes the text and the outline HTML, giving a very much better result. (Note that it won't paste images from a document).

It's been tested with MS Word™ 2003, 2007, 2010 and 2013.

Comment from one user:

"Just thought I’d pass on a word of thanks once again for your little Word insert utility for EW. We use it so much here that it’s in danger of being worn out! We don’t know where we’d be without it."

Notes:

One thing that I've noticed is that Word doesn't always use <ul> or <ol> for lists, and sometimes uses a combination of symbol fonts and padding to achieve the same effect. At present the add-in does not handle this and you may need to add lists manually after copying.

Feedback:

Although I've tested it with a variety of document types I'm sure there will be things you'll find it won't handle, so please use the feedback link in the add-in to report these.

TIP: When you've pasted the Word content, use 'Reformat HTML' from the right-click menu in EW to tidy the html layout up.

Download the WordPaste Add-In from the MSDN Gallery (Now updated for SP2, and earlier)

AddFeed Add-In

Important: Because of changes to the Twitter API, which now requires authentication for all requests, the Twitter Feed part of this add-in no longer works.  I hope to release a revised version soon. March 2013

---

Do you want to display a Twitter or RSS feed on your site? This V4 add-in lets you do that, with configurable display options.

The new entry on the Insert Menu launches a dialog to select the type of feed you want,

And then further dialogs allowing you to set the options.

  

It enables you to preview the feed before applying it to the page, so that the effect of displaying the various options can be seen.

This is a beta version with the limitation that it will only add one feed per page, and one feed style per site, although both of these can be overcome with a few manual changes to the web page.

Note: This add-in effectively supersedes the previous TwitterFeed.

Download the AddFeed Add-In (now updated for SP2, and earlier)  Total downloads: 5080

'Close All' Add-In

This simple add-in allows you to close all open pages in EW with one click. It puts the following icon on both the Standard and Common toolbars

As you'd expect, it gives the normal dialog asking whether you want to save any pages that have unsaved changes.

Download the Close-All Add-In Total downloads: 3163

Copyright Notice Add-In

Most web sites need a copyright notice. If the site is ASP.Net or PHP based, you can create this notice server-side and have the date automatically updated, but if it's an HTML site you may just have a static notice that needs updating every year. And how many sites do you see with an out-of-date notice? Lots of them!

This add-in creates a JavaScript based copyright notice that always updates to the current year and also creates a static notice, without the year, for the very small percentage of users that don't have JavaScript enabled.

A new entry is created in the "Insert" menu to use the add-in.

Clicking the entry brings up the following dialog:

Be aware that the copyright text will not show in EW's design view, only in a browser, because it's generated by JavaScript.

The <div> that is created has an ID of "ewCopy" which can be used to style the Copyright Notice; perhaps to give it a small font size, or different colour.

Download the Copyright Notice Add-In from the MSDN Gallery

 

Sub / Sup Text Add-In

If you frequently need to add <sub> or <sup> tags to your page content, you may miss the ability to do that from a toolbar in Expression Web V4 (or V3). The add-in restores this functionality by putting two new buttons on the "Standard" toolbar. You may need to use "View - Toolbars" to enable this toolbar if you don't already use it.

Select text in either Design, Split or Code view and click the icon to create the <sub> or <sup> text. Select the same text and click again to return the text to normal case.

The selection of text needs to be accurate and undoing the action may fail if the selection is not exactly on the relevant text.

Download the Sup/Sup Text Add-in Total downloads: 2693

Add-In Model

EW V4 has an add-in model which allows developers and users to build add-ins using XML, HTML and JavaScript. This is a powerful feature which will enable a rich variety of add-ins to be created.

For a semi-tutorial showing how a 'Bing Map' add-in was created see this post on the Expression Web Team Blog

The documentation for the Add-In Model is available on line at Expression Web SDK

There's also an 'Add-In Builder' add-in and a blog post showing how to use it.

If you need to use managed code for your add-in, this blog post will get you started.

Commercial Add-Ins

Ajatix have two CSS Menu add-ins, one for pure css menus and the second for JavaScript enhanced menus. They also have add-ins that creates a Lightbox Gallery and an Image/Banner Rotator. (These work in FP2003 and all versions of Expression Web).