cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="background-blur"></div>
<div id="init"><span><i class="glyphicon glyphicon-search"></i> Wikipedia</span></div>
  <div class="search hidden">
<input type="text" placeholder="Search Wikipedia" class="searchfld">
    </div>
    <div class="results">
    </div>

            
          
!
            
              .background-blur {
  background-image: url(http://en.wikipedia.com/static/images/project-logos/enwiki-2x.png); 
  background-size: cover;
  display: block;
  height: 1000px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  z-index: -1;
  opacity: 0.4;
}
.search {
  width: 360px;
  margin-left: auto;
  margin-right: auto;
  background-color: green;
  height: 42px;
  z-index: 3;
  border-radius: 8px;
  margin-top: 300px;
}
.topy {
  margin-top: 30px;
  margin-left: 30px;
}
.searchfld {
  margin: 2px;
  height: 37px;
  padding: 3px;
  width: 355px;
  line-height: 26px;
  font-size: 22px;
  opacity: 0.85;
  border-radius: 8px;
}
.hidden {
  display: none;
}
#init {
  z-index: 0;
  margin-top: 300px;
  width: 220px;
  margin-left: auto;
  margin-right: auto;
  color: green;
  font-size: 40px;
  text-align: center;
  border: 5px solid green;
  border-radius: 8px;
  padding: 15px;
  background-color: rgba(224,255,224, 0.5);
}
#init:hover {
  cursor: pointer; 
  cursor: hand; 
}
ul.ui-widget-content {
  z-index: 3;
  background-color: #eeffee;
  width: 350px;
  overflow: hidden;
  top: 0 !important;
  font-size: 18px;
}
ul.ui-widget-content li {
  border: 1px solid #eeffee;
}

ul.ui-widget-content li:hover, ul.ui-widget-content li.ui-state-focus {
  border: 1px solid green;
}

.ui-helper-hidden-accessible {
  display: none;
}
.results {
  z-index: 4;
}
.article {
  border-radius: 8px;
  border: 1px solid green;
  margin: 15px 30px;
  padding: 0 15px 5px 15px;
  z-index: 4;
  background-color: rgba(255,255,255, 0.6);
}
.article h4 {
  margin-top: 12px;
}
.article h4 a {
  color: green;
}
.article:hover {
  background-color: rgba(224,255,224, 0.5);
}
.outside {
  margin-left: 2000px;
  width: 1000px;
}
            
          
!
            
              $(document).ready(function() {
  
  // Show input field
  $('#init').click(reinit);

  // Handle Enter key
  $('.searchfld').bind('keypress',function (event){
       if (event.keyCode === 13){
          getSearchResults(event.target.value);
       }
    });

  // Reset field 
  $('.searchfld').on('focus',reset);
  $('.searchfld').click(reset);
  
  // Autocomplete on search filed using jquery ui
  $(".searchfld").autocomplete({
     select: function( event, ui ) {
       getSearchResults(event.target.value);
     },
     source: function(request, response) {
        $.ajax({
            url: "http://en.wikipedia.org/w/api.php",
            dataType: "jsonp",
            data: {
                'action': "opensearch",
                'format': "json",
                'search': request.term
            },
            success: function(data) {
                response(data[1]);
            }
        });
     }
  });
});

function getSearchResults(searchterm) {
  
  // Move input field to top
  $( ".search" ).addClass('topy', 1000);

  // Retrieve articles for search term 
  var endpoint = "http://en.wikipedia.org/wiki/";
  $.ajax({
       url: "http://en.wikipedia.org/w/api.php",
       dataType: "jsonp",
       data: {
          'action': "query",
          'format': "json",
          'list': "search",
          'srsearch': searchterm
       },
       success: function(data) {
          var articles = data.query.search;
          var i = 0;
          articles.forEach(function(article) {
            var htm = '<div id="article'+i+'" class="article outside">';
            htm += '<h4><a href="'+endpoint+encodeURI(article.title)+'" target="_blank">' +article.title+'</a></h4>';
            htm += '<p>'+article.snippet+'</p>';
            htm += '</div>';
            $(htm).appendTo('.results');
            // Submit moving this article to the left
            setTimeout(moveIn, i*300, "#article"+i);
            i++;
          });
          // Set click handler on article. It's likely better to define a <a> around the article-div for this. 
          $(".article").on('click', function(event){
            $(this).find('a')[0].click();
            return true;
          });

        }
  });
}

// Move article to the left
function moveIn(id) {
  $(id).removeClass('outside', 500);
}
// Move input field to the center
function reset() {
  $('.results').html('');
  $('.searchfld').val("");
  $( ".search" ).removeClass('topy', 1000);
  $('ul.ui-widget-content').html('');
}

// show input foeld initially
function reinit(event) {
    reset();
    $(".search").toggleClass('hidden');
    $("#init").toggleClass('hidden');
}

            
          
!
999px
Loading ..................

Console