<section>
<h2>This is a section</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</section>
<main>
<h2>Popular front-end frameworks</h2>
<p>Click each one to load details via AJAX.</p>
<div class="boxes">
<a href="#">Bootstrap</a>
<a href="#">Foundation</a>
<a href="#">UIkit</a>
<a href="#">Semantic UI</a>
<a href="#">Skeleton</a>
<a href="#">Material Design Lite</a>
</div>
</main>
<section>
<h2>This is another section</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</section>
<!--Modal-->
<div class="modal">
<button class="close" aria-label="Close">✕</button>
<div class="m-content">
<ul class="m-info">
<li>Framework</li>
<li></li>
<li>Current Version</li>
<li></li>
<li>Number of Github Stars</li>
<li></li>
<li>Official Page</li>
<li></li>
</ul>
<p class="m-message"></p>
</div>
</div>
<!--Loader from the following Codepen demo: https://codepen.io/aurer/pen/jEGbA?editors=110-->
<div class="loader" title="0">
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="0.5s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
/* GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
$bg-main-color: #fdfdfd;
$text-color: #4b4b4b;
$highlight-color: #136fd2;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
font-size: 1em;
}
body {
background: $bg-main-color;
line-height: 1.625;
}
p {
margin: 0 0 1.5em;
}
h2 {
font: bold 2em/1em "Helvetica Neue", Arial, sans-serif;
margin: 1em 0;
color: $text-color;
letter-spacing: -.04em;
}
li {
list-style: none;
}
a {
text-decoration: none;
display: block;
color: $text-color;
}
section {
padding: 3% 5% 4%;
}
/* STYLING THE "main" element
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main {
display: block; /*bug IE*/
background: darken($bg-main-color, 20%);
width: 100%;
padding: 3% 5% 4%;
.boxes {
display: flex;
flex-wrap: wrap;
a {
flex: 0 0 100%;
margin-bottom: 20px;
text-align: center;
line-height: 70px;
background: $highlight-color;
color: $bg-main-color;
&:hover {
background: darken($highlight-color, 10%);
}
@media only screen and (min-width: 321px) {
flex-basis: 46%;
margin: 0 1% 20px 1%;
}
@media only screen and (min-width: 530px) and (max-width: 640px) {
flex-basis: 31%;
}
@media only screen and (min-width: 768px) {
flex-basis: 23%;
}
}
}
}
/* Styling the modal
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal {
display: flex;
background: lighten($highlight-color, 35%);
position: fixed;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: -5;
transform: scale(.5);
transition: all .3s;
button {
position: absolute;
font-size: 2em;
background: transparent;
border: none;
right: 10px;
top: 10px;
padding: 10px;
cursor: pointer;
transition: color .3s;
outline: none;
&:hover {
color: $bg-main-color;
}
}
.m-content {
align-self: center;
width: 80%;
margin: 0 auto;
}
.m-message {
text-align: center;
}
.m-info {
display: flex;
flex-wrap: wrap;
li {
width: 100%;
padding: 12px;
text-align: center;
border: 1px solid $text-color;
border-bottom: 0;
&:nth-of-type(odd) {
background: lighten($highlight-color, 30%);
}
&:nth-of-type(8) {
border-bottom: 1px solid $text-color;
}
@media only screen and (min-width: 530px) {
width: 50%;
&:nth-of-type(odd) {
border-right: none;
background: transparent;
}
&:nth-of-type(7) {
border-bottom: 1px solid $text-color;
}
}
}
a {
color: inherit;
&:hover {
transition: color .3s;
color: $text-color;
}
}
}
&.active {
opacity: 1;
z-index: 10;
transform: scale(1);
}
}
/* Styling the svg loader
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.loader {
z-index: 10;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.loader svg path,
.loader svg rect {
fill: #136fd2;
}
View Compiled
(function($) {
// $(document).ready(function() {
'use strict';
// cache the desired selectors
var $body = $('body');
var $list = $('.m-info');
var $message = $('.m-message');
var $modal = $('.modal');
var $loader = $('.loader');
var $framework;
$('.boxes a').on('click', function(e) {
// prevent the default behavior of the link
e.preventDefault();
// get the text of the link
$framework = $(this).text();
// execute the AJAX request
$.ajax({
// where the data live
url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Demo.json',
// second url which contains the word "Foundation2" instead of "Foundation"
// url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Demo2.json',
// third url which is an empty array
// url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Demo3.json',
// fourth url which leads to an error
// url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/demo.json',
// what is their type
dataType: 'json',
// show the loader before making the request
beforeSend: function() {
$loader.show();
}
}).done(successFunction)
.fail(failFunction)
.always(alwaysFunction);
});
// success function
function successFunction(data) {
// if data exists
if (data.length > 0) {
// loop through them
for (var i = 0; i < data.length; i++) {
// hide the list in case there isn't any propery with name equal to the text value
// check if the text value of the link is equal to the "name" property
if ($framework === data[i].name) {
// show the list and hide the message
$list.show();
$message.hide();
// populate the corresponding list items
$list.find('li:nth-of-type(2)').text($framework);
$list.find('li:nth-of-type(4)').text(data[i].currentVersion);
$list.find('li:nth-of-type(6)').text(data[i].numberOfStars);
$list.find('li:nth-of-type(8)').html('<a href="' + data[i].url + '" target="_blank">' + data[i].url + '</a>');
// terminate the loop and not scan all the file
break;
} else {
// otherwise hide the list and show the corresponding message
$list.hide();
$message.show().text('No data received for this framework!');
}
}
} else {
// otherwise hide the list and show the corresponding message
$list.hide();
$message.text('No data received from your respose!');
}
}
// fail function
function failFunction(request, textStatus, errorThrown) {
// hide the list and show the corresponding message
$list.hide();
$message.text('An error occurred during your request: ' + request.status + ' ' + textStatus + ' ' + errorThrown);
}
// always function
function alwaysFunction() {
// hide the loader and show the modal
$loader.hide();
$modal.addClass('active');
$body.css('overflow', 'hidden');
}
// close the button
$modal.find('button').on('click', function() {
$body.css('overflow', 'visible');
$(this).parent().removeClass('active');
});
// });
})(jQuery);
This Pen doesn't use any external CSS resources.