Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jun 18th, 2012  |  syntax: JavaScript  |  size: 2.51 KB  |  hits: 21  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <head>
  3.   <title>myFavorites</title>
  4.   <style type="text/css">
  5.         * {
  6.                 margin     : 0;
  7.                 padding    : 0;                
  8.         }
  9.         #mainContainer {
  10.                 width      : 402px;
  11.                 height     : 200px;
  12.                 margin     : 10px auto;
  13.                 border     : 1px solid #000;
  14.         }
  15.         #leftContainer {
  16.                 width      : 150px;
  17.                 height     : 100px;
  18.                 float      : left;
  19.         }
  20.         #rightContainer {
  21.                 width      : 250px;
  22.                 height     : 200px;
  23.                 float      : left;
  24.                 border-left: 1px solid #000;
  25.         }
  26.         .clear {
  27.                 clear: both;
  28.         }
  29.         .content {
  30.                 padding: 5px;
  31.         }
  32.         .content button {
  33.                 margin: 3px;
  34.                 width: 100px;
  35.         }
  36.   </style>
  37. </head>
  38. <body>
  39.         <div id="mainContainer">
  40.                 <div id="leftContainer">
  41.                         <div class="content">
  42.                                 <button id="moviesButton">Load Favorite Movies</button>
  43.                                 <button id="foodsButton">Load Favorite Foods </button>
  44.                                 <button id="bandsButton">Load Favorite Bands </button>
  45.                         </div>
  46.                 </div>
  47.                 <div id="rightContainer">
  48.                         <div class="content">
  49.                        
  50.                         </div>
  51.                 </div>
  52.                 <div class="clear"> </div>
  53.         </div>
  54.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script>
  55.         <script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript"> </script>
  56.         <script id="favorites-template" type="x-handlebars-template">
  57.                 {{#whichFavorites}}
  58.                        
  59.                 {{/whichFavorites}}
  60.         </script>
  61.         <script type="text/javascript">
  62.                 function loadFavorites(whichFavorites){
  63.                         var movies = 'movies',
  64.                                 bands  = 'bands',
  65.                                 foods  = 'foods';
  66.                         $.getJSON('request.php', function(json) {
  67.                                 $.each(json.whichFavorites, function(i,myFavorite) {
  68.                                         var hFavorites  = '',
  69.                                                 theFavorite = myFavorite.FAVORITE,
  70.                                                 whyFavorite = myFavorite.WHY;
  71.                                                 hFavorites += '<p>Favorite' + whichFavorites + '</p>';
  72.                                                 hFavorites += '<p>' + whichFavorite + ': ' + theFavorite + '</p>';
  73.                                                 hFavorites += '<p>Why: ' + whyFavorite + '</p>';
  74.                                         return hFavorites;
  75.                                 });
  76.                         });
  77.                 };
  78.                
  79.                 $(document).ready(function(){
  80.                         var movies = 'movies',
  81.                                 foods  = 'foods',
  82.                                 bands  = 'bands';
  83.                         $('#moviesButton').live('click', function(){
  84.                                 $('#rightContainer .content').html(loadFavorites(movies));
  85.                         });
  86.                        
  87.                         $('#foodsButton').live('click', function(){
  88.                                 $('#rightContainer .content').html(loadFavorites(foods));
  89.                         });
  90.                        
  91.                         $('#bandsButton').live('click', function(){
  92.                                 $('#rightContainer .content').html(loadFavorites(bands));
  93.                         })             
  94.                 });
  95.         </script>
  96. </body>
create a new version of this paste RAW Paste Data