jQuery YouTube Carousel

One of the sites I work on required a way to display YouTube videos on their site in a carousel like fashion. The biggest challenge that I had to look at was the coding language I could use. The site’s back-end end of does not allow for me to use PHP code, which is what I would have originally used to make this solution. Instead I took to the internet find a suitable Javascript/jQuery option and to my surprise there were none to be found.

I have done some work with embedding YouTube videos in the past so I figured I could make a slick jQuery plugin to insert code into a div on a page and provide the controls to switch between the videos. My goal was to make it so that all I would need to supply to file was the video ID list, video height, and video width. I combined what I created with jCarousel – Riding carousels with jQuery to form the plugin. This plugin is developed under the dual open source licenses from MIT and GPL.

View live example
Download the file for your own use
*Update: this project can now be found on my GitHub project page.

Once you download the file add the contents to your site. Make sure you include <link rel=”stylesheet” href=”path-to-css/youtubecarousel.css” type=”text/css”> to the head of the page and <script type=”text/javascript” src=”path-to-javascript/jquery.youtubecarousel.js”></script> to the footer of the page. You of course will need to include jQuery to the page in order for this to work. My suggestion is to grab the path file over at Google Libraries API and include that near the bottom of the page. Then all you have to do is place <div id=”yt_container”></div> somewhere in the body part of your document and everything should work for you.

Let me know of any problems or suggestions in the comments.

Internet Explorer and Ordered List Bug

Today, I happen to run into, what I thought, was a really strange  bug in Internet Explorer 7 and below. Since, it took me awhile to find an answer to this problem I thought I could shed some further light on it. The problem I ran into was Internet Explorer was not counting the items in an ordered list correctly. Instead of 1,2,3,4,5,6 IE was outputting 1,1,1,1,1,1. Further, the problem also made the numbered bullet appear towards the bottom of the list item when they contain multiple lines. I found the answer to my problem at kirupa.com.

The first problem of the miscounting can be solved by doing the following:

.container ol
{
   list-style-type: decimal;
}
.container ol li
{
   display: list-item; 
}

Then for the second problem where the numbers line up to the bottom of the list elements just add the code in red:

.container ol li
{
   display: list-item;
   vertical-align:top;
}

That should take care of that problem. I hope this helps you out and keeps some headaches away.

List elements in early versions of IE

Older versions of Internet Explorer present a problem to many web developers. These older versions don’t support much of the modern languages and especially most of CSS3. One of the most frustrating things I have faced is making list element align horizontally next to each other. This technique is relatively commonly seen in many modern websites. Unfortunately early version s of IE do not support the easy way to do this, display: inline or display: inline-block. Using this without any other code will result in something like this:

 

IE fix for list elements

Now there are many options to fix this including adding libraries to make IE think it is a more modern browser. However, if you are like me you are probably including several libraries to make your site function just the way you like it. So adding another library is just going to slow down the site more. I found a simple solution just zoom: 1; and *display: inline; to your CSS code. This will be added along with your normal display: inline or display: inline-block. This result in it looking something like this:


IE fix for list elements

 

 

There you go problem solved! Hope this helped someone.

Javascript and AJAX

Over the last couple of weeks I have learned mountains of new information about Javascript and AJAX. The more I learn the more I am falling in love with these languages. I really feel like I can tackle some larger and more modern projects now. My language of choice has always been PHP, which is relatively flexible when building sites. However, these two languages allow for smoother and unique user experiences.

Currently, I am in the process of adding functionalities, provided by these languages, to the wine map. I hope to have all functions and features of the page self contained along with an auto updating map. Users will be able to go to this application and be able to see information change based on the active of other users without ever having to push refresh. As I develop the map further I keep thinking that it should be turned into a consumer focused product. So expect these bigger changes and the release of the new consumer app this summer.

Speaking on the subject of Javascript I am working on a new project. The client informed me that one thing they really wanted was an interactive site with animation videos. I will be honest, I am not a large supporter of Flash which is what is commonly used when designing these features. I feel Flash has its place on the internet, such as games, but I feel it is a soon to be dead technology. My biggest problem with flash is that it is not searchable by search engines. So when adding flash to a site the web developer needs to think of sneaky ways to improve SEO. I digress. For my client I am implementing a unique javascript library which allows for much of the functionality that you may experience with a product like Flash. This is what I’m talking about when I say flexibility with these two languages. What is your favorite web technology?