Heltblank

jQuery curvycorners

I started using http://www.curvycorners.net/ on a project of mine, but @oliverGristDev mentioned on Twitter the div problem with this solution, and suggested CSS3. But as we all now lte ie 8 dosen’t support that.

To please all this became the solution:

    <!--[if lte IE 8]>
        <script src="/scripts/curvycorners.src.js" type="text/javascript"></script>
        <script src="/scripts/helpforIE.js" type="text/javascript"></script>
    <![endif]-->

The helpforIE.js file looks like this:

curvyCorners.addEvent(window, 'load', initCorners);

function initCorners() {
    var settings = {
        tl: { radius: 10 },
        tr: { radius: 10 },
        bl: { radius: 10 },
        br: { radius: 10 },
        antiAlias: true
    }

    curvyCorners(settings, "div.inner");
}

And to ensure the other browsers just added a tiny line in my CSS:

div.inner { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

Works with Internet Explorer and the others. Hurray!

Add Email as Node

Email as Node adds a macro for adding emails to your Umbraco tree as nodes. It’s a simple add newsletter email macro.

More info here: http://our.umbraco.org/projects/website-utilities/add-email-as-node

Audio Player for Umbraco

A simple audioplayer for Umbraco

More info here: http://our.umbraco.org/projects/website-utilities/audio-player

Simple CSS/jQuery drop shadow

This code show how to create a very simple drop shadow effect to all images with a given css class.

First give the images you want the shadow for the class “contentimage”.

Then some jQuery:

$('.contentimage').wrap("<span class='wrap1'><span class='wrap2'><span class='wrap3'></span></span></span>");

Then some css:

 .wrap1, .wrap2, .wrap3 { display: block; }
 .wrap1 { border: 1px solid #DDD; }
 .wrap2 { border: 1px solid #BBB; } 
 .wrap3 { border: 1px solid #999; }

.NET UserControl displaing a Twitter Search (Atom feed)

This sample code shows how to add a Twitter rss, or to be exact atom feed to a .NET page/usercontrol.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml.Linq;
using Stormberg.Util;
using System.ServiceModel.Syndication;
using System.Xml;

namespace HeltBlank.social
{
    public partial class twitter : System.Web.UI.UserControl
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            //Semicolon seperated string with searchwords; ex "@ravnevand;#ravnevand"
            if (TwitterSearch != null)
            {
                List lst = new List();

                string[] split = TwitterSearch.ToString().Split(';');

                foreach (string s in split)
                {
                    AddRange(lst, s);
                }

                if (lst.Count() > 0)
                {
                    rep.DataSource = (from p in lst orderby p.Date descending select p).Take(10);
                    rep.DataBind();
                }
            }
            else
                this.Visible = false;
        }

        private void AddRange(List lst, string searchword)
        {
            if (searchword.Trim() != string.Empty)
            {
                XmlReader reader = XmlReader.Create(@"http://search.twitter.com/search.atom?q=" + HttpUtility.UrlEncode(searchword.Trim()));
                SyndicationFeed feed = SyndicationFeed.Load(reader);

                if (feed != null && feed.Items.Count() > 0)
                {
                    var sotcPosts = from entry in feed.Items
                                    from a in entry.Authors
                                    select new RssPost
                                    {
                                        Title = entry.Title.Text,
                                        Link = (from p in entry.Links where p.RelationshipType == "alternate" select p.Uri).FirstOrDefault().ToString(),
                                        Image = (from p in entry.Links where p.RelationshipType == "image" select p.Uri).FirstOrDefault().ToString(),
                                        Date = entry.PublishDate.DateTime,
                                        Author = a.Name,
                                        AuthorUri = a.Uri
                                    };

                    if (sotcPosts.Count() > 0)
                    {
                        lst.AddRange(sotcPosts);
                    }
                }
            }
        }

        //Use this in your repeater itemtemplate like this:
        //<%# AuthorLink(Eval("Author"), Eval("AuthorUri")) %>

        protected string AuthorLink(object author, object url)
        {
            string a = author.ToString();
            string username = a.Substring(0, a.IndexOf(" ")).Trim();
            a = a.Replace(username, string.Empty).Replace("(", string.Empty).Replace(")", string.Empty).Trim();

            return iRec.Util.XHTML.Link(url.ToString(), string.Empty, a, a);
        }

        //Use this in your repeater itemtemplate like this:
        //<%# TimeAgo((DateTime)Eval("Date")) %>
        protected string TimeAgo(DateTime d)
        {
            TimeSpan ts = DateTime.Now - d;

            if(ts.Days > 1)
                return "ca " + ts.Days + " days";
            if (ts.Days == 1)
                return "ca 1 day";

            if (ts.Hours > 1)
                return "ca " + ts.Hours + " hours";
            if (ts.Hours == 1)
                return "ca 1 hour";

            if (ts.Minutes > 1)
                return ts.Minutes + " minutes";
            if (ts.Minutes == 1)
                return "1 minute";

            if (ts.Minutes > 1)
                return ts.Seconds + " seconds";

            return ts.Seconds + " second";
        }

        public object TwitterSearch { get; set; }
    }


    public class RssPost
    {
        public string Link { get; set; }
        public string Title { get; set; }
        public string Lead { get; set; }
        public string Image { get; set; }
        public string Author { get; set; }
        public string AuthorUri { get; set; }
        public DateTime Date { get; set; }
    }
}

Tutorial: jQuery Coverslide integrated with Umbraco

This tutorial show how to integrate the jQuery Coverslide found here: http://dev.jqueryui.com/browser/branches/labs/powella/coverslide?rev=2701, with Umbraco.

First you need to download the zip file, you’ll need almost all the files.

Add the following files to your “scripts” folder:

• jquery-1.3.2.min.js (if you haven’t jquery allready)
• jquery.bounds.js
• jquery-ui-1.7.1.custom.min.js
• ui.coverslide.js

Copy the folowing file to your css folder:

• base.css

Add the references to your head section of your master.

Then create a usercontrol looking like this, let’s call it “coverslide.ascx”:

<asp:Repeater  ID="rep" runat="server">     
<HeaderTemplate>         
<div class="ui-coverslide ui-coverslide-stack">            
 <ul id="stack">    
 </HeaderTemplate>     
<ItemTemplate>        
 <li>            
 <img src='<%#  Eval("FilePath") %>' alt='<%# Eval("Text") %>' />        
 </li>     
</ItemTemplate>     
<FooterTemplate>        
 </ul>
 </div>         
<div id="scrollbar">         </div>     
</FooterTemplate>
 </asp:Repeater>

The codebehind should look identical to to the codebehind file described earlier in “MediaFolderContent”:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using umbraco.presentation.nodeFactory;
using umbraco.cms.businesslogic.media;

namespace HeltBlank.UmbracoModules
{
    public partial class MediaFolderContent : System.Web.UI.UserControl
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            Media med = new Media(MediaFolderID);

            var lst = from p in med.Children
                      where p.getProperty("umbracoFile") != null
                      orderby p.Text
                      select new { Text = p.Text, FilePath = p.getProperty("umbracoFile").Value };

            rep.DataSource = lst;
            rep.DataBind();

        }

        public int MediaFolderID { get; set; } //type: mediaCurrent
    }
}

 Then in umbraco do the following:

• Create a macro with the usercontrol you just created
• Add a property to the macro called MediaFolderID, type: mediaCurrent
• Add the macro to your template or the rich text editor
• Select a folder containing images
• Save, and you’re good to go

Sources: http://dev.jqueryui.com/browser/branches/labs/powella/coverslide?rev=2701