• Create Project
  • Search for People
  • Play Skillsrank
  • Saved Favorites
  • Community Friends
  • Activity Log
  • Developer Console
  • Programming Help
  • Advanced Topics
  • Internal API
  • WebScript Guide
  • What's Popular
  • Search by Tags
    •  
    Source: site.view [edit]
    Function name: searchCartoonsRender
    Arguments: data
    Description: User interface for search results. Shows thumbnails, tag cloud, etc.
    Page type: html
    Render function:  
    Module: perfectCartoon

    Page source:

    <html>
  <head>
    
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-3VR6Q448NJ"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-3VR6Q448NJ');
    </script>
    
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Perfect Cartoon | Find the Cartoon you need!</title>
    <meta name="google-site-verification" content="ey35GN3S1ZrMy99oclxNeynKrvGJIbK_nL3gWmq3pUQ" />
    <meta name="google-site-verification" content="vC66bKnlgijT8LHGfD8WY9evCbkymBpORKya5-PLmnI" />
    
    <!-- Social Share metadata -->
    <meta property="og:image" content="http://perfectcartoon.com/images/socialshare.png" />
    <meta property="og:image:width" content="661" />    
    <meta property="og:image:height" content="465" />
    <meta name="twitter:card" content="The World's First Cartoon Search Engine">
    <meta name="twitter:url" content="http://www.perfectcartoon.com">    
    <meta name="twitter:title" content="Find the Perfect Cartoon for your Business Presentation">
    <meta name="twitter:description" content="With the Perfect Cartoon, you can search 10,000 of the world's best cartoons, organized by category, author, and keyword.  Add humor to your presentation or your day, a great cartoon makes everything better!">
    <meta name="twitter:image" content="http://perfectcartoon.com/images/socialshare.png">
    
    <link rel="stylesheet" href="/css/basic.css" type="text/css" />
    <link rel="icon" type="image/png" href="/images/cartoon-video.png">  
    <webl>WubCall("perfectCartoon.css", []);</webl>
    <webl>var db = data.db ? "production";
          if db == "staging" then
             "";
          else
             `<meta name="pinterest" content="nopin" />`
          end;
    </webl>

    <!-- JQuery: Used for autocomplete and image rollover -->
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>        
    <script type="text/javascript" src="/js/jquery.galleriffic.js"></script>
    <script type="text/javascript" src="/js/jquery.opacityrollover.js"></script>
        
    <!-- We only want the thumbnails to display when javascript is disabled -->
    <script type="text/javascript">
      document.write('<style>.noscript { display: none; }</style>');
    </script>      
    
    <style>
#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
    width:400px;
	}

    </style>
    
    <script type="text/javascript">
  $(function() {
    var catTags = [
        <webl>
          var html = "";
          var lst = data.tags ? [];
          if (data.lang == "fr") then
             lst = data.tagsfr ? [];
          end;
          every tag in lst do
              if (html != "") then
                 html = html + ", "
              end;
              html = html + `"` + tag + `"`
          end;
          html;
        </webl>    
    ];
    $( "#catTags" ).autocomplete({
      source: catTags
    });
  });
  $(function() {
    var authorTags = [
        <webl>
          var html = "";
          every author in data.authors do
              if (html != "") then
                 html = html + ", "
              end;
              html = html + `"` + author + `"`
          end;
          html;
        </webl>    
    ];
    $( "#authorTags" ).autocomplete({
      source: authorTags
    });
  });      
  </script>
  </head>
  <body>
    <div id="page">
      <div id="container">

        <webl>
          var url1 = `/doit/searchCartoons("` + data.q + `","","","","`;
          var url2 = `","` + data.db + `")`;
          `<!-- div id="flags"><a href='` + url1 + "en" + url2 + `'><img src="/images/eng_flag.gif" alt="English"></a>&nbsp;
                        <a href='` + url1 + "fr" + url2 + `'><img src="/images/fr_flag.gif" alt="Francais"></a>
          </div--> <!-- Flags -->`
        </webl>
        
        
        <webl>
           var html = "";         
           var db = data.db ? "production";
           //         <!-- Display STAGING banner -->
           if db == "staging" then
              html = "<h2>STAGING DATABASE!</h2>\n"
           end;
          
           var dbg = data.debug ? "";
           if (dbg != "") then
               html = html + "<h3>Debug: " + dbg + "</h3>\n";
           end;
          
           if (data.lang == "en") then  
          html = html + "
          <img width='100%' src='/images/Adobe.png'></img>
          <div class='leftBox'><p>&nbsp;</p><img src='/images/manleft.png' width=100><br>
              <a href='https://humorpoint.com/the-perfect-cartoon/'><img width='100px' src='/images/cartoon-video.jpg' target='_blank'></a></div>
                         <div class='middleBox'><a href='/'><img width=550 class='centered' src='/images/perfect-cartoon-logo-final.png'></a>
                              <b>Brought to you by <a target='_blank' href='http://www.humorpoint.com'>HumorPoint</a></b>       
                         <p style='font-size:6px'>&nbsp;</p>" + 
                           "<center><a href='http://www.perfectcartoon.com/category/Teasers'><img width=450px src='/images/PerfectCartoonDirections.png'></a></center>\n";
           elsif (data.lang == "fr") then
              html = html + "<div class='leftBox'>Recherchez par mot, sujet, légende, catégorie ou auteur. Cliquez sur la vignette pour aller au dessin animé.</div>
                           <div class='middleBox'><b>Pr&eacute;sent&eacute; par <a target='_blank' href='http://www.humorpoint.com'>HumorPoint</a></b>
                             <p>&nbsp;</p>" + 
                       "<center><b>Sujet, Cat&eacute;gorie, Auteur ou HumorPoint que vous souhaitez faire</b></center>\n";
           end; 

           var searchStr = "Search...";
           var advSearchStr = "Advanced Search";
           var captionStr = "Caption...";
           var authorStr = "Author...";
           var categoryStr = "Category...";
           if (data.lang == "fr") then
              searchStr = "Chercher...";
              advSearchStr = "Recherch&eacute;e avancee";
              captionStr = "L&eacute;gende...";
              authorStr = "Auteur...";
              categoryStr = "Cat&eacute;gorie...";
           end;
          
           var searchField = searchStr;
           var author = authorStr;
           var caption = captionStr;
           var tags = categoryStr;
          
           if data.q != `` then 
              searchField = data.q
           end;
           if data.c != `` then 
              caption = data.c
           end;
           if data.t != `` then 
              tags = data.t
           end;
           if data.a != `` then 
              author = data.a
           end;
          
           html = html + `        
        <form class="searchform" action="/doit/" method="get">
           <input name="cmdline" value='searchCartoons(query, "", "", "", lang, db)' type="hidden"/>
           <input name="lang" value="` + data.lang + `" type="hidden" />
           <input name="db" value="` + data.db + `" type="hidden" />
           <input class="searchfield" name="query" type="text" value="` + searchField + `" 
                onfocus="if (this.value == '` + searchStr + `') {this.value = '';}" onblur="if (this.value == '') {this.value = '` + searchStr + `';}" />
          <input class="searchbutton" type="submit" value="Go" style="cursor:pointer;" />
        </form>          
        
        <a class="toggleAdvanced" onclick='$("#advancedSearch").fadeToggle(600);'>` + advSearchStr + `</a>
        <div id="advancedSearch">
           <form class="searchform" action="/doit/" method="get" style="width:400;">
              <input name="cmdline" value='searchCartoons("", caption, tags, author, lang, db)' type="hidden"/>
              <input name="lang" value="` + data.lang + `" type="hidden" />
              <input name="db" value="` + data.db + `" type="hidden" />

              <input class="searchfield" name="caption" id="caption" style="width:120;" 
                   value="` + caption + `"
                   onfocus="if (this.value == '` + captionStr + `') {this.value = '';}" onblur="if (this.value == '') {this.value = '` + captionStr + `';}" />

              <input class="searchfield" name="tags" id="catTags" style="width:120;" 
                   value="` + tags + `"
                   onfocus="if (this.value == '` + categoryStr + `') {this.value = '';}" onblur="if (this.value == '') {this.value = '` + categoryStr + `';}" />

             <input class="searchfield" name="author" id="authorTags" style="width:120;" 
                   value="` + author + `"
                   onfocus="if (this.value == '` + authorStr + `') {this.value = '';}" onblur="if (this.value == '') {this.value = '` + authorStr + `';}" />

   	         <input class="searchbutton" type="submit" value="Go" style="cursor:pointer;" />
           </form>
       </div>`;                    
          
           var embed = data.embed ? false;
           if (embed) then
              html = "";
           end;          
           html;                    
        </webl>
        
      </div>  <!-- middle box -->
          <div class='rightBox'><p>&nbsp;</p><img width=100 src='/images/womanright.jpg'><br><a href="/site/cartoonTopics"><img width='100px' src='/images/cartoon-categories.jpg'></a></div>

      <div style="clear: both;"></div>        
  

        <!-- Quotation and Cartoon of the day -->
        <webl>
           // Quote
           var html = "";
          // if (data.quote != nil) then
          //   html = html + `<hr><div class="quotation">
          //       <span id="quote"><a target="_blank" href="` + data.quote.url + `">` + data.quote.quote + `</a></span><br>
          //          <span id="author"> -- ` + data.quote.author + `</span></div>`
          //  end;
          
           // Cartoon of the day
           if (data.feature != nil) then
             if (!data.showTips) then
                 data.feature.title = "";
             end;
             html = html + `<p id="featured"><a 
                onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false"
                onclick="window.open('` + data.feature.pageUrl + `');" href="` + data.feature.pageUrl + 
              `" title="` + Wub_ReplaceAll(data.feature.title, `"`, `&quot;`) + `">
                <img id="bigphoto" oncontextmenu="return false;" width='600' src="` + data.feature.imgUrl + `" />
              </a>`;
           else
             html = html + "";
           end;    

           var embed = data.embed ? false;
           if (embed) then
               html = "<b>Perfect Cartoon: " + data.q + "</b>\n";
           end;          
           html;
        </webl>
        
        
        <!-- Start Advanced Gallery Html Containers -->
        <div id="gallery" class="content">
          <div id="controls" class="controls"></div>
          <!-- div id="caption" class="caption-container"></div -->
          
           <webl>
             var html;
             if (data.res != nil and data.res != []) then
             // html = `Cartoons open in:  <input type="radio" name="openWindow" id="newWindow" value="new" checked>New Window
             //                   <input type="radio" name="openWindow" id="sameWindow" value="same">Same Window`;
             //   if (data.lang == "fr") then
             //     html = `Cartoons s'ouvrent dans:  <input type="radio" name="openWindow" id="newWindow" value="new" checked>une nouvelle fenetre
             //                   <input type="radio" name="openWindow" id="sameWindow" value="same">la meme fenetre`;
             //   end;
                html = ""
             else
                html = "<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>"
             end;
             var embed = data.embed ? false;
             if (embed) then
                html = "";
             end;          
             html;          
          </webl>
        </div>  <!-- gallery -->
        <div id="slideshow">
          <img width='600' />
        </div>
        <div id="thumbs" class="navigation">
          <ul class="thumbs noscript">
            
            
            <webl>
                var html = "";
                var db = (data.db ? "production");
                var res = data.res ? [];
                if res == nil then
                   res = []
                end;
                every r in res do           
                   var fTitle = r.text ? "";
                   var fImgUrl = r.imgUrl ? "";
                   var fNewYorker = r.newYorker ? "no";
                   var fHandScore = r.handScore ? "0";
                   var fTags = r.tags ? "";
                   var fAuthor = r.author ? "";
                   var fPageUrl = r.pageUrl ? "";
                   var fTextFr = r.textfr ? "";
                   if (data.showTips == false) or (data.showTips=="nonNY" and fNewYorker=="yes") then
                      fTitle = "";
                   end;
                   var titleToShow = fTitle;
                   if (data.lang == "fr") then
                      titleToShow = fTextFr;
                   end;
                   var handScore = " (" + ToString(fHandScore) + ")\n" + fTags;
                   if db != "staging" then
                      handScore = ""
                   end;
                   var deg = ToString(Wub_RandomInt(10) - 5);
                   var rot = "-webkit-transform:rotate(" + deg + "deg); -moz-transform:rotate(" + deg + 
                     "deg); -o-transform:rotate(" + deg + "deg); transform:rotate(" + deg + "deg);";
                   html = html + `
            <li>
              <a class="thumb preview" name="leaf" style="` + rot + `" 
                 onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false"
                 href2="` + fImgUrl + `"
                 onclick="window.open('` + fPageUrl + `','_blank');" href="` + fPageUrl + 
                          `" title="` + Wub_ReplaceAll(titleToShow + " By " + ToString(fAuthor) + handScore, `"`, `&quot;`) + `">
                <img src="` + fImgUrl + `" />
              </a>
              <div class="caption">
                 <div class="image-title">` + titleToShow + `</div>
                 <div class="image-desc">` + fTags + `</div>
              </div>    
<br>
            </li>
`;              
                end;
                html;
            </webl>


          </ul>
        </div>  <!-- thumbs -->

        <div style="clear: both;"></div>

      </div>  <!-- container -->
    </div>  <!-- page -->

    <div id="footer">
       <webl>
		  var dc = Wub_GetDateTimeStr();
		  dc = Select(dc, Str_IndexOf("/", dc)+1, Size(dc));
		  dc = Select(dc, Str_IndexOf("/", dc)+1, Size(dc));
		  dc = "20" + Select(dc, 0, Str_IndexOf(" ", dc));
          var html = `&copy; ` + dc + ` www.perfectcartoon.com`;
          var embed = data.embed ? false;
          if (embed) then
             html = "";
          end;          
          html;
       </webl>
    </div>

    <script type="text/javascript">

       this.imagePreview = function(){	
	       /* CONFIG */
		
       		xOffset = 10;
       		yOffset = 10;
		
		       // these 2 variable determine popup's distance from the cursor
       		// you might want to adjust to get the right result
		
       	/* END CONFIG */

// .css("top",(e.pageY - xOffset) + "px")
// .css("left",(e.pageX + yOffset) + "px")

       	$("a.preview").hover(function(e){
		       this.t = this.title;
       		this.title = "";	
		       var c = (this.t != "") ? "<br/>" + this.t : "";
       		$("body").append("<p id='preview'><img src='"+ this.children[0].src +"' alt='Image preview' width=400 />"+ c +"</p>");								 
		       $("#preview")
                 // .css("top", (window.pageYOffset + 10) + "px")
                 // .css("left", if (e.pageX < document.body.clientWidth / 2) { "10px"} else { (document.body.clientWidth / 2) + "px" })
                 // .css("left",(document.body.clientWidth / 2 - 200) + "px")
                 // .css("top",(window.pageYOffset + 10) + "px")
                 .css("top",(window.pageYOffset + 25) + "px")
                 .css("left",((document.body.clientWidth / 2) > e.pageX ? document.body.clientWidth / 2 : document.body.clientWidth / 2 - 410) + "px")
       			.fadeIn("fast");						
           },
       	function(){
		       this.title = this.t;	
       		$("#preview").remove();
           });	
       	$("a.preview").mousemove(function(e){
		       $("#preview")
                 .css("top",(window.pageYOffset + 25) + "px")
                 .css("left",((document.body.clientWidth / 2) > e.pageX ? document.body.clientWidth / 2 : document.body.clientWidth / 2 - 410) + "px")
       	});			
       };

      jQuery(document).ready(function($) {

        // We only want these styles applied when javascript is enabled
        $('div.navigation').css({'width' : '1000px', 'float' : 'left'});
        $('div.content').css('display', 'block');
       
        // Initially set opacity on thumbs and add
        // additional styling for hover effect on thumbs
        var onMouseOutOpacity = 0.67;
        $('#thumbs ul.thumbs li').opacityrollover({
          mouseOutOpacity:   onMouseOutOpacity,
          mouseOverOpacity:  1.0,
          fadeSpeed:         'fast',
          exemptionSelector: '.selected'
        });

        $('body').on('contextmenu', 'img', function(e){ return false; });
                 
        <webl>
           var dr = data.roamOver ? false;
           if dr then
             "imagePreview();\n"
           else
             ""
           end;
        </webl>

        if ( <webl>(data.c != "") or (data.t != "") or (data.a != "");</webl> ) {
           $('#advancedSearch').css('display', 'inline');
        }
                 
        document.body.style.webkitTouchCallout='none';

        // Initialize Advanced Galleriffic Gallery
        var gallery = $('#thumbs').galleriffic({
          delay:                     2500,
          numThumbs:                 8,
          preloadAhead:              8,
          enableTopPager:            true,
          enableBottomPager:         false,
          maxPagesToShow:            10,
          imageContainerSel:         '#slideshow',
          controlsContainerSel:      '#controls',
          captionContainerSel:       '#caption',
          loadingContainerSel:       '#loading',
          renderSSControls:          false,
          renderNavControls:         false,
          playLinkText:              'Play Slideshow',
          pauseLinkText:             'Pause Slideshow',
          prevLinkText:              '&lsaquo; Previous Cartoon',
          nextLinkText:              'Next Cartoon &rsaquo;',
          nextPageLinkText:          'Next &rsaquo;',
          prevPageLinkText:          '&lsaquo; Prev',
          enableHistory:             false,
          enableKeyboardNavigation:  false,
          autoStart:                 false,
          syncTransitions:           true,
          defaultTransitionDuration: 900,
          onSlideChange:             function(prevIndex, nextIndex) {
            // 'this' refers to the gallery, which is an extension of $('#thumbs')
            this.find('ul.thumbs').children()
              .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
              .eq(nextIndex).fadeTo('fast', 1.0);
          },
          onPageTransitionOut:       function(callback) {
            this.fadeTo('fast', 0.0, callback);
          },
          onPageTransitionIn:        function() {
            this.fadeTo('fast', 1.0);
          }
        });
      });
    </script>
  </body>
</html>