Professor Cloud Example HTML Below is a simple example HTML page which creates a carousel with 4 items. Please study the page as it contains useful comments and tips. You can see the same page working here. JavaScript Setup Parameters Setup parameters should appear in the JavaScript code block a the top of your page, as in this example: Any parameters not specified will have default values applied. CSS Setup Cloud Carousel does not need any specific CSS styles to operate. You may wish to set the initial display property to display:hidden for these items so they will automatically dissapear if JavaScript is disabled. Setting the container to overflow:scroll is a good idea as this will create a neat scrolling box with the images inside if JavaScript is disabled. It is advisable not to apply styles to the images used in the carousel. Useful website? Need Good Hosting? I use Host Gator for this site, and have found them to be good value and very reliable.
Automatically Convert MP3 links to Audio Players with Javascript in Share Yahoo have a nice little snippet of Javascript that will convert all MP3 (and some other) links on your web page into functional flash MP3 players. I’ve sourced some JavaScript code from that will do precisely the same thing… but instead of rendering a large player on your screen, it takes the minimalistic approach and simply creates a play/stop button to the left hand side of an active MP3 link. About a week ago I sent out an email to the mailing list with an enhanced version of what I’m describing below… giving users the option of player, a download link and so on. To clarify the functionality described above, the html text of: The <a href="file-1.mp3">quick</a> brown fox <a href="file-2.mp3">jumped</a> over the <a href="file-3.mp3">lazy</a> dog. … will be converted into: This code will work with MP3 links created using either the visual or ‘rich’ editor in WordPress (or most other platforms). You have two options to get this cool functionality to work. That’s it! January 6, 2011
jQuery UI Tab's in Drupal 7 Tutorial | Dan Silver's Blog Adding jQuery to websites allows them to be interactive and visually appealing. jQuery UI is now included in Drupal 7 and websites are starting to take advantage of this new feature. In this tutorial I will show you how to get jQuery UI tab's into a regular drupal node (page, article, etc). The end result of this tutorial will look like this: You can also try a live demo of jQuery UI tabs . In order to get this result we need to use some PHP and HTML. First, make sure the PHP filter module is enabled so we can execute PHP. <? drupal_add_library ( 'system' , 'ui.tabs' ); Now, we use jQuery to make a div, which will contain the jQuery UI tabs. drupal_add_js ( 'jQuery(document).ready(function(){ jQuery("#tabs").tabs(); ' , 'inline' ); Now we can construct the different tabs using HTML. <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> <li><a href="#tabs-3">Tab 3</a></li> Now, we can fill the tabs with content. Hello World 1! Hello World 2! Hello World 3! Tips
Drupal 7 jQuery Drupal Blog | Drupal 7 and jQuery UI (Accordion) Now that jQuery UI is included in D7 core, we'll see a lot more application style functions using the UI library. Here's a quick example for adding an accordion to node content (enable and select PHP filter) demonstrating how easy it is to add jQuery UI effects and widgets in Drupal 7. <?php drupal_add_library ( 'system' , 'ui.accordion' ); drupal_add_js ( 'jQuery(document).ready(function(){jQuery("#accordion").accordion();});' , 'inline' ); ?> <div id="accordion"> <h3><a href="#">Section 1</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h3><a href="#">Section 2</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h3><a href="#">Section 3</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Adding a JavaScript File to a Drupal Theme | Freestyle Systems Drupal comes with the excellent and very powerful jQuery JavaScript library. jQuery really reduces the learning curve when it comes to adding fancy JavaScript effects to a Drupal site. In this mini-tutorial I will show you how you can add a theme-based JavaScript file to your site so you can start to leverage the power of jQuery in your projects. Drupal 6 Drupal 6 already looks for a script.js file in the theme folder as explained in the handbook. Create a file named scripts.js and place it in your theme folder.Edit your theme's [theme-name].info file and add the following on a new line:Important: Go to Administer > Site building > Themes (admin/build/themes) and re-save the page to refresh the .info file cache. Drupal 5 Create a file named scripts.js and place it in your theme folder.Find the file template.php in your theme folder. function _phptemplate_variables($hook, $vars){if($hook == 'page'){ // Hook into color.module if (module_exists('color')) { _color_page_alter($vars); }
Free hosting Using the Views Slideshow Module in Drupal 7 Slideshows are one of the most popular things that people want on their website and the Views Slideshow Module is the most popular way to create slideshows in Drupal. So, it's no surprise that Views Slideshow is one of the most popular Drupal modules. Creating a Views Slideshow isn't too difficult, but there are a quite a few steps to go through. If you're a beginner, this will be a complete installation guide. In this tutorial we're going to build a slideshow that will show rotatings testimonials in a block on our site. Step 1. To start, you're going to need the following 5 or 6 modules to use Views Slideshow. You'll also need to install jQuery which will make the slideshow work. Be sure the Libraries Module is installed.You need to install the jQuery cycle .js file.The process is a little different than a module installation. Step 2. Go to Configuration > Image styles > Add style.After you click Add style you will be prompted to give the style a name. Step 3. Step 4. Step 5. Step 6.
Pure CSS Image Hover | Kyle Schaeffer - Web Design and SharePoint Branding Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s fairly easy to write a small script that swaps out images on mouseover, but there are a number of disadvantages to this approach that have pushed many web developers toward using a CSS-only method of achieving this exact same effect. This tutorial describes exactly how to implement a pure CSS image hover effect. The Image The biggest difference between a traditional JavaScript image hover and a pure CSS image hover is the image, itself. Let’s look at an image that could be used as a CSS hover image. Simplistic Markup As you can see, both static and hover images are contained within the same file. <a class="myButtonLink" href="#LinkURL">Leaf</a> The CSS As you can see, the HTML is extremely simple. The Result
How to Embed Almost Anything in your Website Learn how to embed videos, mp3 music, Flash videos (both swf and flv), pictures, fonts, spreadsheets, charts, maps and everything else into your blog or website. Learn how to embed almost anything in your HTML web pages from Flash videos to Spreadsheets to high resolution photographs to static images from Google Maps and more. Embed RSS Feeds in Web Pages Go to this page, replace the feed URL with your own feed, use the default color scheme or change it to something else and then click Get Code. You’ll get a JavaScript snippet that can be easily placed in the sidebar of your blog. If you like to embed feeds from multiple sources, merge all of them into one using Yahoo Pipes and then pass the combined feed to the Google Gadget. Embed High Quality or HD YouTube Videos To embed a high resolution version of YouTube clip in your web pages, first make sure that “Watch in High Quality” or “Watch in HD” link exists next to the YouTube player as most videos are only available in standard format.
Top 5 Online Tools to Make a Movie Online for Free | MakeUseOf So, after Mark showed you how make quick and professional videos on Windows Movie Maker, you think you’re cut out to be the next great online movie director? After shooting countless video clips and pictures, you now have to bring them all together with some video editing magic to create your movie. However, renting an editing room or buying propriety software might be just out of your price range. Free desktop software might not do because it might seem a little “too technical” for some of us or simply doesn’t have the feature you’re looking for. Thankfully, there are a lot of simple online tools to help you make a movie online for free. Here are 5 of the best I’ve found so far. One True Media One True media is a popular online application for creating videos, montages, and slideshows. One True Media has a wide selection of video transitions and themes that users can use with great effect. [NO LONGER WORKS] Jaycut Animoto MotionBox Shwup What do you think? Image Credits: Travis Hornung
How to embed Flash SWF file to Google Sites? This tutorial will show you how to insert Flash SWF file to Google Sites. Step 1: Make Flash SWF file. Firstly, please make your Flash file (.swf) with Adobe Flash Studio or Flash Banner Maker software, for example Aleo Flash Intro Banner Maker at . Step 2: Upload Flash SWF file to Google Sites as attachment 1. 3.