Wikipedia Viewer

In this example below you will see how to do a Wikipedia Viewer with some HTML / CSS and Javascript

freeCodeCamp challenge project "Build a Wikipedia Viewer"

Thumbnail
This awesome code was written by erinhalbmaier, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright erinhalbmaier ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Wikipedia Viewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="container-fluid">
  <div class="scenic"><img src="https://res.cloudinary.com/phdigital/image/upload/v1505851706/books-shelves-architecture-wood-442420-compressed_jnwtlx.jpg"/></div>
  <div class="wrapper">
    <h1>Wikipedia Viewer</h1>
    <!--Fidget Spinner icon by Icons8-->
    <button class="btn btn-info grow" id="random">Random Article</button>
    <p class="random-alert"></p>
    <p class="mid">- or -</p>
    <div>
      <div class="search-i grow"><i class="glyphicon glyphicon-search"></i></div>
    </div>
    <form>
      <div class="input-group" id="searchWiki">
        <input class="form-control shrink" type="text" placeholder="Enter search term"/>
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
      </div>
      <ul id="suggestions"></ul>
      <div class="btn-group" id="numResults"> 
        <p>Results per page:</p>
        <button class="btn btn-secondary active" type="button" data-numResults="10">10</button>
        <button class="btn btn-secondary" type="button" data-numResults="30">30</button>
        <button class="btn btn-secondary" type="button" data-numResults="50">50</button>
      </div>
      <div class="btn-group" id="paging"> 
        <p>Results <span class="firstRes">0</span> - <span class="lastRes">0</span> of <span class="totalRes">0</span></p>
        <button class="btn btn-warning prev" type="button">Prev</button>
        <button class="btn btn-warning next" type="button">Next</button>
      </div>
      <div id="results">
        <p class="wikiSuggestions"></p>
        <ul></ul>
      </div>
    </form>
  </div>
  <p class="copy">By <a href="https://codepen.io/erinhalbmaier" target="_blank">Erin Halbmaier</a></p>
  <p class="copy">Background picture from <a href="https://www.pexels.com" target="_blank">Pexels</a></p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/erinhalbmaier/wikipedia-viewer-mBJvdj */
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans");
.container-fluid {
  position: relative;
  min-height: 100vh;
  padding: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.scenic {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  height: 100vh;
  width: 200vw;
  z-index: -1;
  left: -50%;
  top: 0;
}
.scenic img {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

.wrapper {
  width: 75%;
  margin: 0 auto;
  text-align: center;
  background-color: rgba(40, 30, 0, 0.7);
  font-size: 1.5em;
  padding: 2em 2em .5em 2em;
  color: #679AC8;
  border-radius: 5px 5px 0px 0px;
  margin-top: 1em;
  max-width: 1000px;
}
@media only screen and (max-width: 480px) {
  .wrapper {
    width: 100%;
  }
}
.wrapper h1 {
  text-shadow: 1px 1px 1px #305C84;
  margin-bottom: 1em;
  font-family: "Josefin Sans";
}

ul {
  list-style-type: none;
  background-color: #FFF2B9;
  font-size: .75em;
  text-align: left;
  padding: 0;
}
ul h5 {
  font-weight: bold;
}
ul li {
  border-bottom: 1px solid #679AC8;
  padding: 5px 10px;
}
ul a:hover {
  text-decoration: none;
}
ul#suggestions {
  padding-top: 1em;
  margin-top: -1em;
  width: 90%;
  display: none;
}

.grow {
  transform: scale(1);
  transition: all 140ms linear;
}
.grow:hover {
  transform: scale(1.08);
}

.search-i {
  margin-bottom: -1em;
  display: inline-block;
}
.search-i i {
  border: 1px solid #679AC8;
  border-radius: 50%;
  padding: .5em;
  font-size: 1.5em;
}
.search-i.jump {
  -webkit-animation: springUp 900ms cubic-bezier(0.15, 0.33, 0.75, 1) forwards, dropDown 1000ms 900ms cubic-bezier(0.57, 0, 0.85, 0.77) forwards;
  -moz-animation: springUp 900ms cubic-bezier(0.15, 0.33, 0.75, 1) forwards, dropDown 1000ms 900ms cubic-bezier(0.57, 0, 0.85, 0.77) forwards;
  -o-animation: springUp 900ms cubic-bezier(0.15, 0.33, 0.75, 1) forwards, dropDown 1000ms 900ms cubic-bezier(0.57, 0, 0.85, 0.77) forwards;
  animation: springUp 900ms cubic-bezier(0.15, 0.33, 0.75, 1) forwards, dropDown 1000ms 900ms cubic-bezier(0.57, 0, 0.85, 0.77) forwards;
}
.search-i.jump i {
  -webkit-animation: spin 200ms 5 cubic-bezier(0.57, 0, 0.85, 0.77), spin 400ms 1000ms 3 cubic-bezier(0.57, 0, 0.85, 0.77), spin 1000ms 2200ms 2 cubic-bezier(0.57, 0, 0.85, 0.77);
  -moz-animation: spin 200ms 5 cubic-bezier(0.57, 0, 0.85, 0.77), spin 400ms 1000ms 3 cubic-bezier(0.57, 0, 0.85, 0.77), spin 1000ms 2200ms 2 cubic-bezier(0.57, 0, 0.85, 0.77);
  -o-animation: spin 200ms 5 cubic-bezier(0.57, 0, 0.85, 0.77), spin 400ms 1000ms 3 cubic-bezier(0.57, 0, 0.85, 0.77), spin 1000ms 2200ms 2 cubic-bezier(0.57, 0, 0.85, 0.77);
  animation: spin 200ms 5 cubic-bezier(0.57, 0, 0.85, 0.77), spin 400ms 1000ms 3 cubic-bezier(0.57, 0, 0.85, 0.77), spin 1000ms 2200ms 2 cubic-bezier(0.57, 0, 0.85, 0.77);
}

@-webkit-keyframes springUp {
  5% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-500%);
  }
}
@-moz-keyframes springUp {
  5% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-500%);
  }
}
@-o-keyframes springUp {
  5% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-500%);
  }
}
@keyframes springUp {
  5% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-500%);
  }
}
@-webkit-keyframes dropDown {
  0% {
    transform: translateY(-500%);
  }
  100% {
    visibility: hidden;
    transform: translateY(20%) scale(0.5);
  }
}
@-moz-keyframes dropDown {
  0% {
    transform: translateY(-500%);
  }
  100% {
    visibility: hidden;
    transform: translateY(20%) scale(0.5);
  }
}
@-o-keyframes dropDown {
  0% {
    transform: translateY(-500%);
  }
  100% {
    visibility: hidden;
    transform: translateY(20%) scale(0.5);
  }
}
@keyframes dropDown {
  0% {
    transform: translateY(-500%);
  }
  100% {
    visibility: hidden;
    transform: translateY(20%) scale(0.5);
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-moz-keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-o-keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes inputGrow {
  0% {
    width: 0%;
    padding: 0;
  }
  100% {
    width: 100%;
    padding: 6px 12px;
  }
}
@-moz-keyframes inputGrow {
  0% {
    width: 0%;
    padding: 0;
  }
  100% {
    width: 100%;
    padding: 6px 12px;
  }
}
@-o-keyframes inputGrow {
  0% {
    width: 0%;
    padding: 0;
  }
  100% {
    width: 100%;
    padding: 6px 12px;
  }
}
@keyframes inputGrow {
  0% {
    width: 0%;
    padding: 0;
  }
  100% {
    width: 100%;
    padding: 6px 12px;
  }
}
@-webkit-keyframes growGroup {
  0% {
    margin-left: 50%;
    width: 0%;
    visibility: visible;
  }
  100% {
    margin-left: 0;
    width: 90%;
    visibility: visible;
  }
}
@-moz-keyframes growGroup {
  0% {
    margin-left: 50%;
    width: 0%;
    visibility: visible;
  }
  100% {
    margin-left: 0;
    width: 90%;
    visibility: visible;
  }
}
@-o-keyframes growGroup {
  0% {
    margin-left: 50%;
    width: 0%;
    visibility: visible;
  }
  100% {
    margin-left: 0;
    width: 90%;
    visibility: visible;
  }
}
@keyframes growGroup {
  0% {
    margin-left: 50%;
    width: 0%;
    visibility: visible;
  }
  100% {
    margin-left: 0;
    width: 90%;
    visibility: visible;
  }
}
form {
  margin-top: -1em;
}

.input-group {
  visibility: hidden;
  margin-left: 50%;
  width: 0%;
}
.input-group input.shrink {
  width: 0%;
  padding: 0;
  display: block;
  background-color: #FFF2B9;
}
.input-group.spread {
  -webkit-animation: growGroup 500ms 1800ms cubic-bezier(0, 0.24, 0.78, 1.1) forwards;
  -moz-animation: growGroup 500ms 1800ms cubic-bezier(0, 0.24, 0.78, 1.1) forwards;
  -o-animation: growGroup 500ms 1800ms cubic-bezier(0, 0.24, 0.78, 1.1) forwards;
  animation: growGroup 500ms 1800ms cubic-bezier(0, 0.24, 0.78, 1.1) forwards;
}
.input-group.spread input.shrink {
  -webkit-animation: inputGrow 500ms 1800ms cubic-bezier(0, 0.24, 0.78, 1.1) forwards;
  -moz-animation: inputGrow 500ms 1800ms cubic-bezier(0, 0.24, 0.78, 1.1) forwards;
  -o-animation: inputGrow 500ms 1800ms cubic-bezier(0, 0.24, 0.78, 1.1) forwards;
  animation: inputGrow 500ms 1800ms cubic-bezier(0, 0.24, 0.78, 1.1) forwards;
}
.input-group .btn-default {
  color: #679AC8;
}
.input-group input {
  border-color: #679AC8;
  border-radius: 15px;
}
.input-group .input-group-btn {
  display: block;
}
.input-group .input-group-btn button {
  border-color: #679AC8;
  border-radius: 15px;
  background-color: #FFF2B9;
}

.btn-group {
  min-width: 51%;
}
.btn-group > p {
  float: left;
  padding-right: 1em;
  font-size: .75em;
  margin-top: .3em;
}
.btn-group > p + .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#numResults {
  opacity: 0;
  margin-top: .3em;
  height: 0;
  transition: all 1500ms 250ms ease;
}
#numResults.fade-in {
  opacity: 1;
  height: auto;
}
@media only screen and (max-width: 370px) {
  #numResults.fade-in {
    width: 125%;
    margin-left: -8%;
  }
}

#paging {
  opacity: 0;
  margin-top: .2em;
  height: 0;
  transition: all 1500ms 250ms ease;
}
#paging.fade-in {
  opacity: 1;
  height: auto;
}
@media only screen and (max-width: 520px) and (min-width: 481px) {
  #paging.fade-in {
    width: 125%;
    margin-left: -12%;
  }
}
@media only screen and (max-width: 480px) {
  #paging.fade-in {
    position: relative;
    width: 100%;
    height: 3.4em;
  }
}
@media only screen and (max-width: 480px) {
  #paging .btn {
    position: absolute;
    bottom: 0;
  }
  #paging .btn.prev {
    left: 25%;
  }
  #paging .btn.next {
    right: 25%;
  }
}
@media only screen and (max-width: 480px) {
  #paging p {
    width: 100%;
  }
}

.hiddenLink {
  display: none;
}

p.copy {
  text-align: center;
  font-family: "Times New Roman", Georgia, serif;
  color: #ffffff;
  width: 75%;
  background-color: rgba(40, 30, 0, 0.7);
  margin: 0 auto;
  border-radius: 0px 0px 5px 5px;
  max-width: 1000px;
}
@media only screen and (max-width: 480px) {
  p.copy {
    width: 100%;
  }
}
p.copy a {
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
}
p.copy a:hover {
  text-decoration: none;
  border-bottom-width: 0px;
}
p.mid {
  font-size: 1.5em;
  margin-top: .5em;
}
p.timestamp {
  font-size: .7em;
}
p.wikiSuggestions {
  clear: left;
}

.searchmatch {
  font-weight: bold;
  font-size: 1.1em;
}

.hover {
  background-color: #281E00;
}


/*Downloaded from https://www.codeseek.co/erinhalbmaier/wikipedia-viewer-mBJvdj */
$(document).ready(function dR() {
    var searchCont = $("#searchWiki");
    var numResultsGr = $("#numResults");
    var paging = $("#paging");
    var scenic = $(".scenic");
    var img = document.querySelector(".scenic img");
    var imgRatio = img.naturalWidth / img.naturalHeight;

    var wikiApp = wikiModule(searchCont, $("#results"), numResultsGr, $("#suggestions"));

    setUpAnimation();
    setClicks();
    fixScenic();

    $(window).on("resize", function rW(e) {
        fixScenic();
    });

    function wikiModule(searchContainer, resultContainer, numResultsGroup, suggestionsUl) {
        var searchOffset = 0;
        var baseURL = "https://en.wikipedia.org";
        var apiEndPoint = "/w/api.php";
        var linkEndPoint = "/wiki/";
        var currResult = 0;
        var numResults = 10;
        var searchTerm = "";
        var resultUl = resultContainer.find("ul");
        var searchField = searchContainer.find("input");
        var submitted = false;
        var selectedLi = -1;
        var selectLis = [];
        var headers = {
            // "Origin": "https://s.codepen.io",
            "Content-Type": "application/json; charset=UTF-8"
        };

        function changeSuggested(direction) {
            var newSelection = direction == "down" ? Math.min(selectLis.length - 1, selectedLi + 1) : Math.max(-1, selectedLi - 1);
            // console.log(newSelection);

            if (selectedLi > -1) {
                //had a li highlighted, remove class
                selectLis[selectedLi].classList.remove("hover");
            }
            if (newSelection > -1) {
                //arrow moves to a li, add class
                selectLis[newSelection].classList.add("hover");
            }

            selectedLi = newSelection;
        }

        function getRandomArticle() {
            //must open window before ajax call or will be blocked as popup
            var newWindow = window.open("", "_blank");
            $.ajax({
                url: baseURL + apiEndPoint,
                data: {
                    action: "query",
                    list: "random",
                    format: "json"
                },
                dataType: 'jsonp',
                headers: headers,
                success: randomSuccess,
                error: randomError,
                // jsonp: false,
                cache: false
            });

            function randomError(data) {
                $(".random-alert").addClass("alert").addClass("alert-warning").html("Oops! Something went wrong.");
            }

            function randomSuccess(data) {
                var title = data.query.random[0].title;
                var newLink = baseURL + linkEndPoint + title.replace(/ /g, "_");
                // console.log(newLink);
                newWindow.location.href = newLink;

                // console.log("finished");
            }
        }

        function runSearch(startingNumber) {
            suggestionsUl.empty();
            suggestionsUl.hide();
            currResult = startingNumber;

            //make sure we have something to search!
            //backup in case missed something somewhere else...
            if (searchTerm == "") {
                return;
            }

            $.ajax({
                url: baseURL + apiEndPoint,
                data: {
                    action: "query",
                    list: "search",
                    format: "json",
                    srsearch: searchTerm,
                    srprop: "timestamp|snippet",
                    srlimit: numResults,
                    sroffset: startingNumber,
                    continue: ""
                },
                headers: headers,
                dataType: 'jsonp',
                success: searchSuccess,
                error: searchError,
                cache: false
            });

            function searchError(data) {
                resultUl.empty();
                resultUl.html("<li>An error occurred.</li>");
            }

            function searchSuccess(data) {
                var lis = [];
                var results = data.query.search;

                resultUl.empty();
                updatePaging(data.continue, data.query.searchinfo.totalhits);
                updateWikiSuggestion(data.query.searchinfo);

                if (results.length == 0) {
                    lis[0] = "<li>No results found</li>";
                    $(".prev").hide();
                    $(".next").hide();
                }

                for (var i = 0; i < results.length; i++) {
                    var result = results[i];
                    var title = result.title;
                    var timestamp = new Date(result.timestamp);

                    lis[i] = "<li><a href='" + baseURL + linkEndPoint + title.replace(/ /g, "_") + "' target='_blank'><h5>" + title + "</h5><p class='snippet'>" + result.snippet + "</p><p class='timestamp'>Last Updated: " + timestamp.toUTCString() + "</p></a></li>";
                }

                resultUl.append(lis.join(""));

                setTimeout(function delaySuggestions() {
                    //allow time for the rest of the keystrokes to come through the queue 
                    submitted = false;
                    // console.log("delayed",submitted);
                }, 1000);
            }

            function updatePaging(srcontinue, totalhits) {
                var lastRes;
                var firstRes = totalhits == 0 ? 0 : currResult + 1;
                if (srcontinue != undefined) {
                    //at least one more page of results
                    searchOffset = srcontinue.sroffset;
                    lastRes = searchOffset;
                    $(".next").show();
                } else {
                    //no more pages, so hide "next" button
                    $(".next").hide();
                    lastRes = totalhits;
                }

                //show/hide "Prev" button
                if (startingNumber == 0) {
                    $(".prev").hide();
                } else {
                    $(".prev").show();
                }

                $(".firstRes").html(firstRes);
                $(".lastRes").html(lastRes);
                $(".totalRes").html(totalhits);
            }

            function updateWikiSuggestion(sInfo) {
                var wikiSuggest = $(".wikiSuggestions");
                if (sInfo.suggestion == undefined) {
                    wikiSuggest.html("");
                } else {
                    // console.log("wikiS",sInfo);
                    wikiSuggest.html("Did you mean <span class='searchmatch'>" + sInfo.suggestion + "</span>?");
                    wikiSuggest.find(".searchmatch").on("click", function (e) {
                        fillSearch(e.target);
                    });
                }
            }
        }

        function getNumResults(selected) {
            if (!selected.classList.contains("active")) {
                numResults = $(selected).attr("data-numResults");
                numResultsGroup.find("button").removeClass("active");
                selected.classList.add("active");
                if (searchField.val() != "" && searchTerm != "") {
                    runSearch(currResult);
                }
            }
        }

        function getMoreResults(direction) {
            if (direction.contains("prev")) {
                searchOffset = Math.max(0, currResult - numResults);
            }
            runSearch(searchOffset);
        }

        function getSuggestions() {
            var partialSearch = searchField.val();
            if (!partialSearch == "") {
                $.ajax({
                    url: baseURL + apiEndPoint,
                    dataType: "jsonp",
                    headers: headers,
                    data: {
                        format: "json",
                        action: "opensearch",
                        search: partialSearch,
                        limit: 15
                    },
                    success: suggestionSuccess,
                    cache: false
                });
            } else {
                //clear suggestions if empty
                suggestionsUl.empty();
                suggestionsUl.hide();
            }

            function suggestionSuccess(data) {
                var lis = [];
                var suggestions = data[1];
                var term = data[0];
                term = regexAllWords(term);

                suggestionsUl.empty();
                suggestionsUl.hide();
                if (!submitted) {
                    // console.log("suggestions",term,submitted);
                    for (var i = 0; i < suggestions.length; i++) {
                        var suggestion = suggestions[i];
                        // `$&` keeps the match so we keep uppercase/lowercase instead of putting in `term` and using its case
                        suggestion = suggestion.replace(term, "<span class='searchmatch'>$&</span>");
                        lis[i] = "<li>" + suggestion + "</li>";
                    }

                    suggestionsUl.show();
                    suggestionsUl.append(lis.join(""));

                    //fill selectLis and set click handlers
                    selectLis = [];
                    suggestionsUl.find("li").each(function (index) {
                        selectLis[index] = this;
                        $(this).on("click", function (e) {
                            fillSearch(e.target);
                        });
                    });
                }
            }
        }

        function newSearch() {
            searchTerm = searchField.val();
            submitted = true;
            selectedLi = -1;
            // console.log("newSearch",submitted);
            //make sure we have something to search!
            if (searchTerm == "") {
                return;
            }
            runSearch(0);
        }

        function regexAllWords(term) {
            term = escapeRegex(term);
            term = term.replace(/ /g, "|");
            return new RegExp(term, "gi");
        }

        function escapeRegex(value) {
            return value.replace(/[\-\[\]{}()*+?.,\\\^$|#]/g, "\\$&");
        }

        function fillSearch(selected) {
            // console.log("Filling search: " + $(selected).text());
            searchTerm = $(selected).text();
            searchField.val(searchTerm);
            selectedLi = -1;
            runSearch(0);
        }

        searchField.on("keyup", function (e) {
            var keyCode = e.which ? e.which : e.keyCode;

            switch (keyCode) {
                case 8:
                //backspace
                case 46:
                    //delete
                    setTimeout(function () {
                        getSuggestions();
                    }, 1000);
                    break;
                case 32:
                    //space
                    getSuggestions();
                    break;
                case 38:
                    //up arrow
                    changeSuggested("up");
                    break;
                case 40:
                    //down arrow
                    changeSuggested("down");
                    break;
                default:
                    if (9 <= keyCode && keyCode <= 45) {
                        return;
                    } else {
                        getSuggestions();
                    }
            }
        });

        searchField.on("keydown", function (e) {
            var keyCode = e.which ? e.which : e.keyCode;
            if (keyCode == 9 || keyCode == 13) {
                if (selectedLi > -1) {
                    fillSearch(selectLis[selectedLi]);
                    return false;
                }
            }
        });

        searchField.on("blur", function (e) {
            setTimeout(function () {
                suggestionsUl.empty();
                suggestionsUl.hide();
            }, 500);
        });

        return {
            newSearch: newSearch,
            getRandomArticle: getRandomArticle,
            getNumResults: getNumResults,
            getMoreResults: getMoreResults
        };
    }

    function setClicks() {
        searchCont.find("button").on("click", function swC(e) {
            e.preventDefault();
            wikiApp.newSearch();
        });
        $("#random").on("click", function rC(e) {
            wikiApp.getRandomArticle();
        });
        numResultsGr.on("click", function nrC(e) {
            wikiApp.getNumResults(e.target);
        });
        paging.on("click", function pagC(e) {
            wikiApp.getMoreResults(e.target.classList);
        });
    }

    function setUpAnimation() {
        // numResultsGr.hide();
        // paging.hide();
        $(".search-i").on("click", function anim(e) {
            this.classList.add("jump");
            searchCont.addClass("spread");
            searchCont.on("animationend webkitAnimationEnd oAnimationEnd", function endAnim(e) {
                searchCont.find("input").focus();
                numResultsGr.addClass("fade-in");
                paging.addClass("fade-in");
                $(".prev").hide();
                $(".next").hide();
            });
        });
    }

    function fixScenic() {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        var left = "-50%";
        var top = "0";
        var newWidth = "";
        var newHeight = "";

        if (imgRatio * winHeight > winWidth * 2) {
            newWidth = imgRatio * winHeight;
            left = (newWidth - winWidth) / 2 * -1 + "px";
            newHeight = winHeight;
        } else if (imgRatio * winHeight < winWidth) {
            newHeight = winWidth / imgRatio;
            console.log(newHeight);
            newWidth = winWidth * 2;
            top = (newHeight - winHeight) / 2 * -1 + "px";
        } else {
            newWidth = winWidth * 2;
            newHeight = winHeight;
        }
        scenic.css({
            "width": newWidth + "px",
            "height": newHeight + "px",
            "left": left,
            "top": top
        });
    }
});

Comments