Website Design | Search Optimization | Social Media | Benzing Technologies » Javascript / AJAX http://www.benzingtech.com Your Technology Partner Thu, 29 Jul 2010 13:24:01 +0000 http://wordpress.org/?v=9320 en hourly 1 SWFaddress solves Flash SEO problems http://www.benzingtech.com/swfaddress-solves-flash-seo-problems/ http://www.benzingtech.com/swfaddress-solves-flash-seo-problems/#comments Thu, 08 Oct 2009 12:53:50 +0000 Rusty http://www.benzingtech.com/?p=925 One of the biggest draw backs of flash is using back and forward buttons in the browser and Search Engine Optimization in the URL’s. Well now look no further. Introducing SWFaddress – a small JavaScript library that lets you create virtual URLs for Flash and Ajax. SWFaddress has been around…

]]> One of the biggest draw backs of flash is using back and forward buttons in the browser and Search Engine Optimization in the URL’s. Well now look no further. Introducing SWFaddress – a small JavaScript library that lets you create virtual URLs for Flash and Ajax. SWFaddress has been around since 2006, and surprisingly not all Flash sites are utilizing this tool.

However, SWFAddress is really only as good as your implementation of it. A sloppy implementation makes it more of a liability than a benefit. So let’s show you the right way to get it working.

SWFAddress can be quickly added to a Website that uses SWFObject only by inserting the JavaScript files into your header section like this:

<script src="swfobject/swfobject.js" type="text/javascript"><!--mce:0--></script>
<script src="swfaddress/swfaddress.js" type="text/javascript"><!--mce:1--></script>

Now the internal implementation of SWFAddress is somewhat simple and straight forward. Once a Flash movie containing the library is embedded in an HTML page, it automatically initializes itself and provides the developer with notification of state changes that need to be implemented. This might not be the easiest task for everybody, but SWFAddress streamlines the process by fully supporting testing workflow inside the Flash Program and Standalone Player. URL changes can be invoked from mouse-click events, frame actions, or HTML links.

Here is sample code that can be added to a MovieClip button:

this.onRelease = function () {
 
      SWFAddress.setValue("/portfolio");
}

For links in HTML-formatted TextFields, the following approach should be used:

<a href="asfunction:SWFAddress.setValue,/portfolio/">Go to Portfolio</a>

SWFAddress has a single onChange event where the navigation logic needs to be coded. The complexity may vary depending on the Website, but if it’s planned from the beginning, it may improve maintainability by centralizing all the controller actions.

Here is an example of a running logic for the onChange event:

SWFAddress.onChange = function () {
 
      var navigation = new Object();
      navigation.home = {frame: 1, title: "Welcome"};
      navigation.about = {frame: 10, title: "About Us"};
      navigation.contact = {frame: 20, title: "Contact Us"};
 
      var value = SWFAddress.getValue();
 
      website_mc.gotoAndStop(navigation[value].frame);
 
      SWFAddress.setTitle(navigation[value].title);
}

The setTitle method allows you to add unique titles to every section of the Website and they will appear in the browser’s titlebar. It should be used inside the onChange event in order to correctly display the initial title value when the page loads.

With SEO in mind SWFaddress covers this flawlessly. It enables the generation of real links that expose the appropriate content to search engines. The magic happens with some interesting URL rewriting and some trivial server-side code. The following is an example how it works for a Website located at http://www.domain.com that contains a portfolio section.

SWFAddress uses http://www.domain.com/#/portfolio/. The URL that can get indexed is http://www.domain.com/portfolio/ and therefore it should exist as a link in the HTML code of the page. When someone visits the indexed address, the rewriting functionality makes a redirect to the URL that SWFAddress expects. Everything happens on the server side so no user interaction is required.

The situation is different when the same link is followed by a search engine bot (spider). In this case the address is rewritten without any redirection to http://www.domain.com/?swfaddress=/portfolio/. The page that handles all this should use a server-side technology in order to generate the appropriate content depending on the “swfaddress” parameter value.

Page requests containing GET parameters (?var=something) such as http://www.domain.com/#/portfolio/?desc=true&year=2001 are handled similarly. The search engines will index http://www.domain.com/portfolio/?desc=true&year=2001 and the script will expect http://www.domain.com/?swfaddress=/portfolio/&desc=true&year=2001.

The result is a fully indexed Flash Website with deep linking support. This works great and the result is even better. Now we can all have search engine friendly Flash sites. YAY!

While this approach improves the usability of Flash content over the Web, it also requires an additional effort, such as some manual work for static html websites and some smart code for dynamic ones. The best case will be a Flash Content Management System that automates the whole process.

SWFaddress promises to continue adding interesting functionality like AJAX support, transparent user tracking with Google Analytics, and enhanced event handling. It should definitely be considered for your next Flash project.

Download SWFaddress: HERE
View an Example Site: HERE

Related Blogs

Related Blogs

]]> http://www.benzingtech.com/swfaddress-solves-flash-seo-problems/feed/ 0 Tracking outgoing links with Google Analytics and jQuery http://www.benzingtech.com/tracking-outgoing-links-google-analytics-jquery/ http://www.benzingtech.com/tracking-outgoing-links-google-analytics-jquery/#comments Mon, 14 Sep 2009 18:13:28 +0000 Rusty http://www.benzingtech.com/?p=868 When looking for an easy way to track outgoing links in Google Analytics with jQuery I came across this plugin. However, I needed a more flexible way of link tracking, with more control on which links to track and in what format.

For those reasons I use a small jQuery…

]]> When looking for an easy way to track outgoing links in Google Analytics with jQuery I came across this plugin. However, I needed a more flexible way of link tracking, with more control on which links to track and in what format.

For those reasons I use a small jQuery plugin written by Gerry Vandermaesen. Usage is simple:

$('a[rel=external]').gaLinkTrack();

Of course you can modify the selector to your needs, but (for now) you can only track links.

Inside Google Analytics, the tracked link takes the format “/{rel}/{domain}/{page}” by default. If no rel attribute is present, it defaults to “external”. You can change the format of the tracked links by passing the path option:

$('a[rel=download]').gaLinkTrack( { path: '/downloads/{page}' } );

When specifying the path format you can use any of the following placeholders: {rel}, {domain}, {page}. You can specify a default value for any of the placeholders (notably {rel}) as illustrated here:

$('a.download').gaLinkTrack( { path: '/{rel:download}/{page}' } );

This is a first version so feedback and suggestions are more than welcome. Things still to come: proper handling of email links, more options for customizing the tracked path, and more…

Download the full source code (jquery-galinktrack-1.0.js) or the minified version (jquery-galinktrack-1.0.min.js).

Related Blogs

]]> http://www.benzingtech.com/tracking-outgoing-links-google-analytics-jquery/feed/ 0 jQuery with other frameworks without conflicts http://www.benzingtech.com/jquery-frameworks-conflicts/ http://www.benzingtech.com/jquery-frameworks-conflicts/#comments Wed, 09 Sep 2009 23:05:22 +0000 Rusty http://www.benzingtech.com/?p=864 While jQuery is certainly a popular JavaScript framework, it’s by no means the only game in town. Other frameworks such as Prototype, MooTools, Dojo and many others all have their own strengths, weaknesses, and devoted groupies.

Generally speaking, these frameworks all play well together — you can mix and match…

]]> While jQuery is certainly a popular JavaScript framework, it’s by no means the only game in town. Other frameworks such as Prototype, MooTools, Dojo and many others all have their own strengths, weaknesses, and devoted groupies.

Generally speaking, these frameworks all play well together — you can mix and match framework functionality to your heart’s content, as long as you don’t mind the additional overhead of loading several libraries simultaneously. So you have a calendar widget in jQuery that you love, but you’re already using Prototype to animate your navigation bar? Don’t be shy… use both!

Of course, every once in a while you can run in to problems when combining JS frameworks — particularly (in my experience) when combining jQuery and Prototype. Luckily, jQuery was kind enough to provide us with a workaround.

The Problem: Sharing Syntax

The most common compatibility problem stems from both jQuery and Prototype using the same shortcut syntax: namely, the $().doSomething syntax. Here’s a sample line of code in jQuery:

$('#myelement').addClass('active');

And the same functionality in Prototype:

$('myelement').addClassName('active');

Note the basic similarity? Both frameworks claim the dollar sign notation for themselves, which can wreak havoc on snippets of code dropped willy-nilly into a website. If your jQuery code is grabbed up by Prototype, things will stop working fast. And similarly, if your Prototype code is snagged by jQuery, not even the awesome power of jQuery will be enough to overcome the code confusion.

The Solution: noConflict Mode

But not to worry! jQuery has provided us with a workaround called “noConflict mode.”

By default, there are two equally correct ways to call a jQuery function — the dollar sign notation, and “jQuery” notation:

$('#myelement').show();
jQuery('#myelement').show();

Both of the lines above do exactly the same thing. However, most people use and prefer the dollar sign notation. Why? Probably because it’s shorter, and if web developers didn’t care about brevity in their code, they probably wouldn’t have used a framework in the first place.

Of course, just using the longer jQuery notation isn’t enough. If jQuery has already claimed the dollar sign for itself, any Prototype functionality relying on that notation will still be grabbed by jQuery.

This is where the noConflict function comes in handy. Simply run the following line after both Prototype and jQuery have been loaded:

jQuery.noConflict();

This will cause jQuery to give up the dollar-sign notation, allowing the other library to take it over. And you can still use your jQuery snippet, provided you change all instances of $() to jQuery().
Keeping it Short

The noConflict mode does have one other bit of functionality that I’ve found useful in some of my projects: you can select a different variable to use instead of the standard “jQuery”. The usage looks like this:

var $j = jQuery.noConflict();

Now in addition to using the default jQuery() notation, I can also use the shorter $j() notation. This allows me to avoid running into problems with other frameworks, while still enjoying almost the same conciseness in my code.

Related Blogs

]]> http://www.benzingtech.com/jquery-frameworks-conflicts/feed/ 0 Introducing jQuery $(document).ready() http://www.benzingtech.com/introducing-jquery-document-ready/ http://www.benzingtech.com/introducing-jquery-document-ready/#comments Sat, 05 Sep 2009 22:10:48 +0000 Rusty http://www.benzingtech.com/?p=859 This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

JavaScript:

…
]]>
			This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.


JavaScript:


$(document).ready(function() {
 // put all your jQuery goodness in here.
});


The $(document).ready() function has a ton of advantages over other ways of getting events to work. First of all, you don’t have to put any “behavioral” markup in the HTML. You can separate all of your javascript/jQuery into a separate file where it’s easier to maintain and where it can stay out of the way of the content. I never did like seeing all those “javascript:void()” messages in the status bar when I would hover over a link. That’s what happens when you attach the event directly inside an <a href> tag.


On some pages that use traditional javascript, you’ll see an “onload” attribute in the <body> tag. The problem with this is that it’s limited to only one function. Oh yeah, and it adds “behavioral” markup to the content again. Jeremy Keith’s excellent book, DOM Scripting, showed me how to create an addLoadEvent function to a separate javascript file that allows for multiple functions to be loaded inside it. But it requires a fair amount of code for something that should be rather straightforward. Also, it triggers those events when the window loads, which leads me to another advantage of $(document).ready().


With $(document).ready(), you can get your events to load or fire or whatever you want them to do before the window loads. Everything that you stick inside its brackets is ready to go at the earliest possible moment — as soon as the DOM is registered by the browser, which allows for some nice hiding and showing effects and other stuff immediately when the user first sees the page elements.


It might help the absolute beginners to see an example of the <head> where you would include your scripts. Note that CSS stylesheets come before the jQuery file, and the jQuery file comes before your custom script:



&lt; !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"><!--mce:0--></script>
  <script src="yourcustomscript.js" type="text/javascript"><!--mce:1--></script>
 
  <!-- the body of your document goes here -->



It is in “yourcustomscript.js” that you would place your script inside the $(document).ready() block.


Related Blogs



]]>
			http://www.benzingtech.com/introducing-jquery-document-ready/feed/
		0
		
		
		Create a jQuery draggable sitemap
		http://www.benzingtech.com/create-jquery-draggable-sitemap/
		http://www.benzingtech.com/create-jquery-draggable-sitemap/#comments
		Thu, 03 Sep 2009 14:49:52 +0000
		Rusty
				
		
		

		http://www.benzingtech.com/?p=848
		There are a handful of javascript libraries and plugins available that attempt this task, but none of them worked flawlessly with our HTML. The real issue here is that javascript alone cannot produce a slick solution, the HTML and CSS need to be carefully constructed to ensure that the experience…
]]>
			There are a handful of javascript libraries and plugins available that attempt this task, but none of them worked flawlessly with our HTML. The real issue here is that javascript alone cannot produce a slick solution, the HTML and CSS need to be carefully constructed to ensure that the experience is seamless and pleasant.

The HTML.


Our HTML consists of nested unordered lists, with each list item containing a definition list for the title, page type, publish status, and action links for editing or deleting the page. The feature for expanding and collapsing child pages already existed, making things extra fun.



<ul id="sitemap">
	<li>
<dl>
<dt><a href="#">expand/collapse</a> <a href="#">Page Title</a></dt>
<dd>Text Page</dd>
<dd>Published</dd>
<dd><a href="#">delete</a></dd>
</dl>
<ul><!--child pages--></ul>
</li>
</ul>



The requirements.


The behaviour had to intuitive for the user, they need to be able to reorder pages and move entire sections to new parents. It had to be clear to the user where a page would end up when they dropped it (ie. between pages or as a child page).

Simplifying the task.


When one page is dropped over another page, there are three possible outcomes. The page can end up before, after or as a child. This gets particularly tricky at the boundary point between the last child of a sub list and the following sibling. If the resulting location of where a page ends up is the difference of a couple of pixels, the user could become frustrated. We decided to simplfy the problem so that a page could be dropped only before items or as children of items. The only limitation here is that you couldn’t easily drop an item as the last child of a list, but this is only a minor issue as moving the last child up would achieve the same result. You can also drop an item on the parent to cause it to become the last child, but this isn’t so obvious really.


This means for each item on our list we now need to identify two areas where the user can drop the page, on the page to be a child, and above the page to be a sibling.

The javascript.


The great thing about jQuery / jQuery UI is how it lets me write the code I want to write, and takes care of cross-browser behaviours and gaps in DOM manipulation. Anyone who has attempted at creating drag and drop functionality for a website will be well aware of the headaches involved in getting everything to work smoothly across browsers. jQuery UI seems to handle this brilliantly.


The first thing I want to do is create a div inside the list item to act as a dropzone for placing items as siblings.



$('#sitemap li').prepend('
 
');



piece of cake.


To allow an item to be dragged, we simply call the draggable() function on the items that can be dragged.



$('#sitemap li').draggable({
    handle: ' &gt; dl',
    opacity: .8,
    addClasses: false,
    helper: 'clone',
    zIndex: 100
});



As we are dealing with nested lists, it is important that only the definition list inside our list item acts as a handle, otherwise our old friend Internet Explorer can get a little confused over who’s meant to be moving and who should be staying where they are. By specifying ‘clone’ we create a duplicate list item that follows the mouse, while the original item waits patiently for us to decide where it should belong. An opacity of 0.8 and a high zIndex keeps the clone on top of everyone else and slightly opaque. It’s the little touches that really count.


The magic.



$('#sitemap dl, #sitemap .dropzone').droppable({
    accept: '#sitemap li',
    tolerance: 'pointer',
    drop: function(e, ui) {
        var li = $(this).parent();
        var child = !$(this).hasClass('dropzone');
        //If this is our first child, we'll need a ul to drop into.
        if (child &amp;&amp; li.children('ul').length == 0) {
            li.append('
<ul>');
        }
        //ui.draggable is our reference to the item that's been dragged.
        if (child) {
            li.children('ul').append(ui.draggable);
        }
        else {
            li.before(ui.draggable);
        }
        //reset our background colours.
        li.find('dl,.dropzone').css({ backgroundColor: '', borderColor: '' });
    },
    over: function() {
        $(this).filter('dl').css({ backgroundColor: '#ccc' });
        $(this).filter('.dropzone').css({ borderColor: '#aaa' });
    },
    out: function() {
        $(this).filter('dl').css({ backgroundColor: '' });
        $(this).filter('.dropzone').css({ borderColor: '' });
    }
});</ul>



Ok. That’s a fair chunk of code, let’s break it down.

We only want to accept sitemap list items, we don’t care about other items they care to drop here.


The tolerance specifys the drop item to be the element under mouse pointer, we’re expecting the user to place their mouse where the item should end up.


When the drop happens, this is how we decide what to do:

We set the variable ‘li’ to be the parent of the dropzone (as both the definition list and the dropzone div are children of the list item). This is just for convenience.


When the user drops the page, we need to decide what they landed on, if it has a class ‘dropzone’ then we are placing the dropped item before us. Otherwise we are placing this as a child.


As the item is being dragged around, it is imperitive to give an indication as to where it will end up. We can do this by conditionally applying a background colour to whichever item we are hovering over. For the ‘dropzone’, we instead apply a border colour, as we want it to display as a solid line between the two items.


At this point we can also fire off our update in an ajax post to the server, in order to commit the change.


The CSS.


The secret to the interface working really well is CSS. By making sure we have the right paddings and heights in the right places we give the user enough space to comfortably drop items. If we keep the space around the definition list tight, and apply a 4px border plus 6px height to the ‘dropzone’ div, we give the user 10 pixels of droppable area. This is plenty to guarantee the user will be comfortable. The 4px border gives us a strong, clear indication that the item will be dropped as a sibling.


Related Blogs



]]>
			http://www.benzingtech.com/create-jquery-draggable-sitemap/feed/
		1
		
		
		Creating a jQuery RSS Aggregator (reader)
		http://www.benzingtech.com/creating-a-jquery-rss-aggregator-reader/
		http://www.benzingtech.com/creating-a-jquery-rss-aggregator-reader/#comments
		Tue, 01 Sep 2009 22:26:14 +0000
		Rusty
				
		
		
		

		http://benzingtech.com/?p=838
		Chad Udell with Visual Rinse wrote a fantastic tutorial on creating a jQuery RSS Feed Reader using a PHP proxy to bypass browser security displaying any xml feed using AJAX.


Read more on his blog post http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/


Related Blogs


Related Blogs on jquery
jQuery Image Zoom Plugin
Movie Posters


Related
…
]]>
			Chad Udell with Visual Rinse wrote a fantastic tutorial on creating a jQuery RSS Feed Reader using a PHP proxy to bypass browser security displaying any xml feed using AJAX.


Read more on his blog post http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/


Related Blogs



    

  • Related Blogs on jquery rss aggregator
    • 



]]>
			http://www.benzingtech.com/creating-a-jquery-rss-aggregator-reader/feed/
		5
		
		
		jQuery Anything Slider Plugin
		http://www.benzingtech.com/jquery-anything-slider-plugin/
		http://www.benzingtech.com/jquery-anything-slider-plugin/#comments
		Wed, 26 Aug 2009 18:17:06 +0000
		Rusty
				
		
		

		http://benzingtech.com/?p=825
		Originally Posted at CSS-Tricks


Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it’s got lots of cool features.


Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A “featured content” slider, a “start/stop slider“, and “moving boxes“. Each…
]]>
			Originally Posted at CSS-Tricks


Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it’s got lots of cool features.


Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A “featured content” slider, a “start/stop slider“, and “moving boxes“. Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want them to do X, Y, and Z in addition to what they already did.


This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.


anythingslider-example


[VIEW DEMO]      [DOWNLOAD]


Features


    

  •  Slides are HTML Content (can be anything)
    • 

  •  Next Slide / Previous Slide Arrows
    • 

  •  Navigation tabs are built and added dynamically (any number of slides)
    • 

  •  Optional custom function for formatting navigation text
    • 

  •  Auto-playing (optional feature, can start playing or stopped)
    • 

  •  Each slide has a hashtag (can link directly to specific slides)
    • 

  •  Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
    • 

  •  Multiple sliders allowable per-page (hashtags only work on first)
    • 

  •  Pauses autoPlay on hover (option)
    • 

  • Link to specific slides from static text links
    • 



Usage & Options (defaults)



$('.anythingSlider').anythingSlider({
        easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
        startStopped: false,            // If autoPlay is on, this can force it to start stopped
        delay: 3000,                    // How long between slide transitions in AutoPlay mode
        animationTime: 600,             // How long the slide transition takes
        hashTags: true,                 // Should links change the hashtag in the URL?
        buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Start",             // Start text
        stopText: "Stop",               // Stop text
        navigationFormatter: null       // Details at the top of the file on this use (advanced use)
});



Customization


Adding/Removing Slides

Just add or remove more  


  • 

    items from the list inside  
    

    , everything else happens automatically.
    

    Adjusting Size
    
For example, if you wanted to make the slides 580px wide instead of 680px wide, you just need to change some CSS. Change the width of .anythingSlider ul li to 580px, change the width of .anythingSlider .wrapper to 580px, and reduce the width of .anythingSlider 100px to 660px.
    

    Linking Directly To Slides from Static Links
    
Target the link using and ID or Class (or whatever), and apply a click handler. Then call the plugin function and pass it a number of the slide you are trying to link to:
    


    $("#slide-jump").click(function(e){
    $('.anythingSlider').anythingSlider(6);
    e.preventDefault();
});
    


    Related Blogs
    


]]>    
			http://www.benzingtech.com/jquery-anything-slider-plugin/feed/
		0
		    
		
		jQuery Media : A Fun Tutorial on Sounds, Video, & Roll Overs
		http://www.benzingtech.com/jquery-media-a-fun-tutorial-on-sounds-video-roll-overs/
		http://www.benzingtech.com/jquery-media-a-fun-tutorial-on-sounds-video-roll-overs/#comments
		Mon, 03 Aug 2009 15:45:58 +0000
		Rusty
				
		
		
		
		

		http://benzingtech.com/?p=557
		This article was written out of joy in finding out that jQuery has the capabilities to play sounds and music on your website. Hurray! I love the possibilities of javascript and xml and embrace it as much as I can without making the website too overwhelming with AJAX or non-search…
    ]]>    
			This article was written out of joy in finding out that jQuery has the capabilities to play sounds and music on your website. Hurray! I love the possibilities of javascript and xml and embrace it as much as I can without making the website too overwhelming with AJAX or non-search friendly.
    

    We want to start by making sure you have the required libraries. Starting with the latest jQuery. You will also need the Media plugin. For the sounds example towards the bottom you will need the Sound plugin.
    

    Playing Media Files
    

    Let’s start with a basic html page which will house our media player.
    


    1
2
3
4
5
6
7
8
9
10
11
12
13

             <!--
         This is where we link to our media file it supports:
          Quicktime aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3pg
          Flash	flv, mp3, swf
          Windows Media Player 	asx, asf, avi, wma, wmv
          Real Player	ra, ram, rm, rpm, rv, smi, smil
          Silverlight	xaml
          iframe	html, pdf
         -->
 
This is my example jquery music player.
 
         <a class="media" href="path/to/sound.wav">media file</a>
    


    With our html page built out we add our jQuery scripts between our header tags:
    


    1
2
3
4

    <script src="path/to/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="path/to/jquery.metadata.js" type="text/javascript"><!--mce:1--></script>
<script src="path/to/jquery.media.js" type="text/javascript"><!--mce:2--></script>
<script type="text/javascript"><!--mce:3--></script>
    


    With this setup your media file link will be converted into a media player where visitors can now listen or view your media file. keep in mind if you use mp3 or flash video you will need a media player. You can download it here.
    

    VIEW THE DEMO
    

    Let’s get into more advanced options. Now these options can be provided using an options object or by using the jQuery Metadata Plugin which can be downloaded in the beginning of this tutorial.
    

    The following options are provided by the media player plugin by default:
    


    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

    // global defautls; override as needed
$.fn.media.defaults = {
    preferMeta:    1,         // true if markup metadata takes precedence over options object
    autoplay:      0,         // normalized cross-player setting
    bgColor:       '#ffffff', // background color
    params:        {},        // added to object element as param elements; added to embed element as attrs
    attrs:         {},        // added to object and embed elements as attrs
    flashvars:     {},        // added to flash content as flashvars param/attr
    flashVersion:  '7',       // required flash version
 
    // default flash video and mp3 player
    // @see: http://jeroenwijering.com/?item=Flash_Media_Player
    flvPlayer:     'mediaplayer.swf',
    mp3Player:     'mediaplayer.swf',
 
    // Silverlight options
    // @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
    silverlight: {
        inplaceInstallPrompt: 'true', // display in-place install prompt?
        isWindowless:         'true', // windowless mode (false for wrapping markup)
        framerate:            '24',   // maximum framerate
        version:              '0.9',  // Silverlight version
        onError:              null,   // onError callback
        onLoad:               null,   // onLoad callback
        initParams:           null,   // object init params
        userContext:          null    // callback arg passed to the load callback
    }
};
    


    Any global settings can be explicitly overridden by simply changing its value. For example:
    


    1
2

    // change default flash player
$.fn.media.defaults.flvPlayer = 'myCoolPlayer.swf';
    


    So let’s use a couple of these options to get some different results. Going back to our header tag scripts we change the options to display a video.
    


    1
2
3
4

    <script src="path/to/jquery.js" type="text/javascript"><!--mce:4--></script>
<script src="path/to/jquery.metadata.js" type="text/javascript"><!--mce:5--></script>
<script src="path/to/jquery.media.js" type="text/javascript"><!--mce:6--></script>
<script type="text/javascript"><!--mce:7--></script>
    


    Now that you understand how to use this media plugin there are tons of available options and dynamic capabilities to really make this a marvelous contribution to the jQuery library.
    

    Roll Over Sounds
    

    Perhaps you would like to perform roll over sounds or onclick sounds using jQuery. This can be done pretty easily using the Sounds plugin which you can download in the beginning of this tutorial. Let’s start with a full source example page.
    


    1
2
3
4
5
6
7
8

     
<script src="path/to/jquery.js" type="text/javascript"><!--mce:8--></script>
<script src="path/to/jquery.sound.js" type="text/javascript"><!--mce:9--></script>
<script type="text/javascript"><!--mce:10--></script>
 
This is my example jquery sounds on rollover.
 
         <a class="rollover" href="#">mouse over sound</a>
    


    You should have a great understanding how these plugins can help enhance your website to play your media content or cool rollover sounds. If you have any questions or still need help feel free to comment.
    

    Related Blogs
    



]]>    
			http://www.benzingtech.com/jquery-media-a-fun-tutorial-on-sounds-video-roll-overs/feed/
		1
		    
		
		Advanced jQuery Form with Validation
		http://www.benzingtech.com/advanced-jquery-form-with-validation/
		http://www.benzingtech.com/advanced-jquery-form-with-validation/#comments
		Sun, 02 Aug 2009 02:20:31 +0000
		Rusty
				
		
		

		http://benzingtech.com/?p=530
		With technologies such as AJAX (Asynchronous Javascript And XML) the web is getting many new ways to enhance the user experience. And one way to do this is a simple contact form. Being able to have people contact you online without getting them lost in your website.
    

    This is where…
    ]]>    
			With technologies such as AJAX (Asynchronous Javascript And XML) the web is getting many new ways to enhance the user experience. And one way to do this is a simple contact form. Being able to have people contact you online without getting them lost in your website.
    

    This is where AJAX steps in and is our savor. Lets start with compiling what we need. First make sure you have the latest jQuery edition. Then you will also need jQuery Form to help with the validation and submission of the form. Now that we have our libraries. Let’s start coding!
    

    1. Add a form to your page. Just a normal form, no special markup required:
    


    <form id="myForm" action="sendmail.php" method="post">
    Name:
<input name="name" type="text" />
    E-Mail:
<input name="email" type="text" />
    Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
    


    2. Include the jQuery and Form Plugin files and a short script to initialize the form when the DOM is ready:
    


        <script src="path/to/jquery.js" type="text/javascript"><!--mce:0--></script>
    <script src="path/to/jquery.form.js" type="text/javascript"><!--mce:1--></script>
    <script type="text/javascript"><!--mce:2--></script>
    


    That’s It! Now let’s customize and make this more advanced.
    

    We start with our jQuery code on our submission page. I will try to explain the code in detail at each line to help you understand the process.
    


    <script src="path/to/jquery.js" type="text/javascript"><!--mce:3--></script>
<script src="path/to/jquery.form.js" type="text/javascript"><!--mce:4--></script>
<script type="text/javascript"><!--mce:5--></script>
    


    Now lets write out the sendmail.php file:
    


    // Check that there is content being submitted to this file.
if(!empty($_POST['name']) &amp;&amp; !empty($_POST['email'])) {
 
// Put submitted values into variables to use in the build out of the email.
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];
 
$to = "receiver@email.com";  // Who the email goes to
$subject = "Your Email Subject"; // Your mail subject
 
// Build the headers to help avoid going to spam folder
$headers = "From: sender@email.com\r\n";
$headers .= "Reply-To: ".$email."\r\n";
$headers .= "Return-Path: sender@email.com\r\n";
 
$html = "Name: ".$name."\r\n"; // Add name
$html .= "Email: ".$email."\r\n"; // Add email
$html .= "Comment: ".$comment."\r\n\r\n";  // Add form comments
$html .= "IP Address: ".$_SERVER['REMOTE_ADDR']."\r\n";  // Add IP Address
$html .= "Date: ".date('m/d/y g:i:s a')."\r\n";  // Add Date this was created
 
// Send mail and check to see if it was successful or not
 if(mail($to,$subject,$html,$headers)) {
   // The mail was sent successfully
   die("success"); // This is the value returned
 } else {
   // The mail failed to send due to either your server settings or incorrect headers or email address.
   die("fail"); // This is the value returned
 }
 
} else {
   // No values were submitted... exit
   die("exit"); // This is the value returned
}
    


    We’re Done! This is a bit more advanced tactic for using jQuery Form and has a very easy user interface experience with a message fading in and out with a success or failure. I hope this helps you create jQuery Forms easier and more efficient.
    

    Related Blogs
    


]]>    
			http://www.benzingtech.com/advanced-jquery-form-with-validation/feed/
		2