How to create a Carousel in a webpage

The latest fad is to create Carousels to display images, and allow for easy navigation.  I have not been able to find any .NET controls to enable you to create a Carousel on a web page.

[usercontrol:~/User controls/carousel.ascx]  

So I set myself the task of generating a web page control to allow for easy, managed code, configuration of a Carousel Control in .NET

First I went on the hunt for a simple javaScript Carousel that I could use, I found a lovely Carousel by Doug Greenall, the information on his blog goes in to great detail of how the Carousel works, but this was not intention to go in to detail about the inner working of a Carousel.

So I downloaded Doug Greenall's Carousel and then went to adapt the javaScript code to create a single DLL Control that could be reused.

The end product is a small DLL that can be dragged and dropped in to your ASP.NET application or Website

Carousel.dll (21.50 kb)

The project solution was generated using Visual Studio 2008 Pro,with a Target Framework of ".NET Framework 2.0"

Carousel.zip (191.73 kb)

 

How to use the Carousel

Okay, so now I've built the Carousel Control, you now want to to know how to use it?

  • First create a new WebSite
  • Add the Carousel.dll or a project reference to your website
  • On the web page register the control (or add it to your web.config)

  • Then add the control to the page, as seen below

 

  • Next in the code behind you need to add to the CarouselDetail collection, which will add the images, links to the Carousel

 

And that is it, the more you add to the CarouselDetail collection the more items will appear on the Carousel.

Embedding javascript in an assembly

I've always been able to create a standalone DLL control that can be reused in other web applications.  I've never really found out how to embed other resources, or more to the point JavaScript files.

Until now

Here's how to embed the file:

  1. Create a js file such as carousel.js
  2. In Visual Studio, select the file in Solution Explorer and change the Build Action property to "Embedded Resource"
  3. Build the project and the carousel.js file is now part of the assembly (you don't need to distibute the js file now it's part of the assembly)

Now to get the resource out using code:

So if we have a resource named Control.carousel.js we can use the following to include it in our page:

System.IO.Stream script = Assembly.GetExecutingAssembly().GetManifestResourceStream("Control.carousel.js");
System.IO.StreamReader sr = new System.IO.StreamReader(script);
Page.ClientScript.RegisterClientScriptBlock(GetType(), "carousel", sr.ReadToEnd().ToString(), true);
sr.Close();

The above code injects the embedded file in to the page, how easy could it be?

 

Small free and replacement for Notepad

Do you still use Notepad that ships with Windows?

I did, until I found NotePad2, it’s fast, it’s easy to use, and more to the point it works.

I’ve been using it for the past 2 months, and I have not got any clue to the features, but what I like about it is it just works and is a very good replacement for the standard Windows Notepad. 

Here are the features, cribbed from the NotePad2 Website:

Customizable syntax highlighting: 

  • HTML, XML, CSS, JavaScript, VBScript, ASP, PHP, CSS, Perl/CGI
  • C/C++, C#, Java, VB, Pascal, Assembler, SQL, Python, NSIS
  • INI, REG, INF, BAT, DIFF
  • Drag & drop text editing inside and outside Notepad2
  • Basic regular expression search and replace
  • Useful word, line and block editing shortcuts
  • Rectangular selection (Alt+Mouse)
  • Brace matching, auto indent, long line marker, zoom functions
  • Support for Unicode, UTF-8, Unix and Mac text files
  • Open shell links
  • Mostly adjustable
  • Auto indentation
  • Bracket matching
  • Encoding conversion between ASCII, UTF-8 and UTF-16 formats
  • Multiple undo/redo; rectangular block selection
  • Newline conversion, between DOS (CR/LF), Unix (LF) and Mac (CR) formats 

How to Replace notepad with notepad2 in Vista?

  1. First you need to download notepad2 from here
  2. First you need to Rename Notepad2.exe to notepad.exe.
  3. Find c:\windows\notepad.exe and c:\windows\system32\notepad.exe and set the owner to ‘Administrators’, and grant Administrators full control.
  4. Using Windows Explorer, drag and drop the renamed notepad2.exe to c:\windows and c:\windows\system32.
  5. Optional replace the permissions on the new notepad.exe to Read & Execute and Read.
 
Another one to look at is Notepad++, it has a lovely set of plugins such as XML have a look at Tim Almonds post on the XML plugin

My Theme made it in to the BlogEngine Themes

After my work creating the Mad Tri web site, I submitted the theme it to the BlogEngine team a few months ago and they have included it in their Theme pack, what a lovely surprise.

The BlogEngine team are going to be working hard over Christmas, with updating the BlogEngine and release a new release. more…

I too are going to the working over the Christmas on an Enhanced Newsletter and a Resource Editor to enable changes to Internationalization from the web, power to the BlogEngine 

Page Notifications

The purpose of the class is to allow the application to display information to the end user.

All that is required is for the calling application to set the Message in the PageNotifications class, e.g.

GradWeb.Web.Core.PageNotifications.Message= "Hello Page Notifier";

The theme of the application will handle the rest, as the design will have positioned and created CSS information to display the message.

Over the course of a page you can add as many message as you like and then will be added to the message.

NOTE

When the page is reloaded the message/'s will be reset.

Edit

Design Considerations

The Page Notification control produces the following HTML

<div class="notificationgroup"><div class="notification">Hello Page Notifier</div><div class="notification">Message 2</div></div>

In order to change the look and feel you will require the following style sheet information

notificationgroup{}notification{}