nstielau/tmp_no_conflict_jquery.html

## tmp_no_conflict_jquery.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="plugin_functions-Type" plugin_functions="text/html; charset=utf-8">
	<title>jQuery noConflict() for third-party-widgets</title>
	<!-- Date: 2010-09-12 -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/JavaScript"></script>
</head>
<body>

<p>This method allows multiple of the same widgets to be loaded on the same page.</p>

  <!-- Begin Widget -->
    <!-- import your jQuery --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/JavaScript"></script>
    <!-- import your jQuery plugins (after your jquery, before noConflict(true)) --><script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js" type="text/JavaScript"></script>
    <!-- your widget markup --><div id="widget_some_markup"></div>
    <!-- your widget script -->
    <script type="text/javascript">
      // change your jQuery var name, and run some awesome code when loaded.
      jQuery.noConflict(true)(document).ready( function(tmpjQuery) {
        tmpjQuery('#content').append("Working it with a local, non-conflicting jQuery");
      });
    </script>
  <!-- End Widget -->

  <!-- Begin Webpage content -->
  <div id="content"></div>
  <!-- End Webpage content -->

</body>
</html>

## widgets_with_jquery.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="plugin_functions-Type" plugin_functions="text/html; charset=utf-8">
	<title>jQuery noConflict() for third-party-widgets</title>
	<!-- Date: 2010-09-12 -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/JavaScript"></script>
</head>
<body>

  <!-- Begin Widget -->
    <!-- import your jQuery --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/JavaScript"></script>
    <!-- import your jQuery plugins (after your jquery, before noConflict(true)) --><script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js" type="text/JavaScript"></script>
    <!-- your widget markup --><div id="widget_some_markup"></div>
    <!-- your widget script -->
    <script type="text/javascript">
      // change your jQuery var name, and run some awesome code when loaded.
      var widget_jQuery = jQuery.noConflict(true);
      widget_jQuery(document).ready( function($) {
        //do Stuff
      });
    </script>
  <!-- End Widget -->

  <!-- Begin Webpage content -->
  <div style="width: 500px">
    <h3>jQuery noConflict() for third-party-widgets</h3>
    <p>
      This is an example of a webpage that has a third-party widget (HTML/JavaScript) embedded on it.
    </p>
    <p>
      The widget loads it's own version of jQuery, since it doesn't know if the parent page has jQuery, or if it has the correct version.
    </p>
    <p>
      The widget then uses the jQuery.noConflict() call to prevent a conflict between the jQuery that the website owner placed on the website, and the jQuery that the widget injects.
    </p>
    <p>
      If you re-order 1) the widget's jQuery import, 2) the widget's jQuery plugin import, and 3) the noConflict() call, you will see different results below, indicating a conflict between the existing jQuery, and the widget jQuery.
    </p>
  </div>
  <div id="variables">
    <h4>jQuery Variables:</h4>
  </div>
  <div id="plugin_functions">
    <h4>jQuery Plugin Functions:</h4>
  </div>
  <script type="text/javascript">
    $('#variables').append("$.fn.jquery = " + $.fn.jquery + "<br/>");
    $('#variables').append("jQuery.fn.jquery = " + jQuery.fn.jquery + "<br/>");
    $('#variables').append("widget_jQuery.fn.jquery = " + widget_jQuery.fn.jquery + "<br/>");
    $('#plugin_functions').append("$.fn.cycle = " + typeof($.fn.cycle) + "<br/>");
    $('#plugin_functions').append("jQuery.fn.cycle = " + typeof(jQuery.fn.cycle) + "<br/>");
    $('#plugin_functions').append("widget_jQuery.fn.cycle = " + typeof(widget_jQuery.fn.cycle) + "<br/>");
  </script>
  <!-- End Webpage content -->

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="plugin_functions-Type" plugin_functions="text/html; charset=utf-8">
	<title>jQuery noConflict() for third-party-widgets</title>
	<!-- Date: 2010-09-12 -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/JavaScript"></script>
	</head>
	<body>

	<p>This method allows multiple of the same widgets to be loaded on the same page.</p>

	<!-- Begin Widget -->
	<!-- import your jQuery --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/JavaScript"></script>
	<!-- import your jQuery plugins (after your jquery, before noConflict(true)) --><script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js" type="text/JavaScript"></script>
	<!-- your widget markup --><div id="widget_some_markup"></div>
	<!-- your widget script -->
	<script type="text/javascript">
	// change your jQuery var name, and run some awesome code when loaded.
	jQuery.noConflict(true)(document).ready( function(tmpjQuery) {
	tmpjQuery('#content').append("Working it with a local, non-conflicting jQuery");
	});
	</script>
	<!-- End Widget -->

	<!-- Begin Webpage content -->
	<div id="content"></div>
	<!-- End Webpage content -->

	</body>
	</html>