Simple popups or hover overs

January 13, 2010 10:53 by bryan

Many a time you use the <a href'#' title='display a message' /> to display a message when you want some hover over text to display additional information, which is fine, but what if you want to display some more fancy text, lets say in HTML you are stuck.

So I went on the search to find something that was easy to implement.

I came across a number of different popups

Each having good coverage, but I ended up using overLIB mainly as Nadun at work found it very easy to use.

Here is how I have implement the library

I have implemented a simple jQuery version of the library, I am sure you could extend it to do a lot more, I always say KIS (Keep It Simple)

Add a tag class of overlib and popup tag which holds the popup information, simple, e.g.

<a href="#" class="overlib" popup="Hello World">Basic popup</a>

If you want to display HTML content in the popup, just added it to the popup tag

<a href="#" class="overlib" popup="<b>Bold</b> can be displayed too">HTML content</a>

I have also include in my sample the overlib_pagedefaults which sets a few things up for overLIB, but this is not required if you don't want to use it.

I have attached a fully working sample to make life easier.

overLib.zip (71.66 kb)


How to create a Carousel in a webpage

December 22, 2008 10:17 by bryan

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.

 

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

December 22, 2008 10:01 by bryan

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?

 


spammer-proof email address

February 27, 2007 14:45 by bryan