Ajax Flickr Search

Developer

Size

7,084 Kb

Views

18,216

Ajax Flickr Search Previews
Ajax Flickr Search HTML Codes
Ajax Flickr Search CSS Codes
Ajax Flickr Search JS Codes

How do I make an ajax flickr search?

What is a ajax flickr search? How do you make a ajax flickr search? This script and codes were developed by Kevin on 13 October 2022, Thursday.

Ajax Flickr Search Previews

Ajax Flickr Search - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ajax Flickr Search</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Varela+Round'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <meta charset="utf-8"> <title>AJAX Flickr Photo Search</title>
</head>
<body> <div class="grid-container centered"> <div class="grid-100"> <div class="contained"> <div class="grid-100"> <div class="heading"> <h1>Flickr Photo Search</h1> <form> <label for="search">Type a search term</label> <input type="search" name="search" id="search" required> <input type="submit" value="Search" id="submit"> </form> </div> </div> <div id="error"></div> <ul id="photos"> </ul> </div> </div> </div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ajax Flickr Search - Script Codes CSS Codes

@charset "UTF-8";
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;
}
.grid-container:before,
.clearfix:before,
.grid-container:after,
.clearfix:after { content: "."; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;
}
.grid-container:after,
.clearfix:after { clear: both;
}
.grid-container { max-width: 1080px; position: relative;
}
.grid-5,
.mobile-grid-5,
.grid-10,
.mobile-grid-10,
.grid-15,
.mobile-grid-15,
.grid-20,
.mobile-grid-20,
.grid-25,
.mobile-grid-25,
.grid-30,
.mobile-grid-30,
.grid-35,
.mobile-grid-35,
.grid-40,
.mobile-grid-40,
.grid-45,
.mobile-grid-45,
.grid-50,
.mobile-grid-50,
.grid-55,
.mobile-grid-55,
.grid-60,
.mobile-grid-60,
.grid-65,
.mobile-grid-65,
.grid-70,
.mobile-grid-70,
.grid-75,
.mobile-grid-75,
.grid-80,
.mobile-grid-80,
.grid-85,
.mobile-grid-85,
.grid-90,
.mobile-grid-90,
.grid-95,
.mobile-grid-95,
.grid-100,
.mobile-grid-100,
.grid-33,
.mobile-grid-33,
.grid-66,
.mobile-grid-66 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; padding-right: 15px;
}
.grid-parent { padding-left: 0; padding-right: 0;
}
body { min-width: 320px;
}
@media screen { .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .grid-container:before, .clearfix:before, .grid-container:after, .clearfix:after { content: "."; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .grid-container:after, .clearfix:after { clear: both; } .grid-container { max-width: 1080px; position: relative; } .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-5, .tablet-grid-10, .tablet-grid-15, .tablet-grid-20, .tablet-grid-25, .tablet-grid-30, .tablet-grid-35, .tablet-grid-40, .tablet-grid-45, .tablet-grid-50, .tablet-grid-55, .tablet-grid-60, .tablet-grid-65, .tablet-grid-70, .tablet-grid-75, .tablet-grid-80, .tablet-grid-85, .tablet-grid-90, .tablet-grid-95, .tablet-grid-100, .tablet-grid-33, .tablet-grid-66 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; padding-right: 15px; } .grid-parent { padding-left: 0; padding-right: 0; } body { min-width: 320px; }
}
@media screen and (min-width: 1080px) { .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .grid-container:before, .grid-100:before, .clearfix:before, .grid-container:after, .grid-100:after, .clearfix:after { content: "."; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .grid-container:after, .grid-100:after, .clearfix:after { clear: both; } .grid-container { max-width: 1080px; position: relative; } .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; padding-right: 15px; } .grid-parent { padding-left: 0; padding-right: 0; } .push-5, .pull-5, .push-10, .pull-10, .push-15, .pull-15, .push-20, .pull-20, .push-25, .pull-25, .push-30, .pull-30, .push-35, .pull-35, .push-40, .pull-40, .push-45, .pull-45, .push-50, .pull-50, .push-55, .pull-55, .push-60, .pull-60, .push-65, .pull-65, .push-70, .pull-70, .push-75, .pull-75, .push-80, .pull-80, .push-85, .pull-85, .push-90, .pull-90, .push-95, .pull-95, .push-33, .pull-33, .push-66, .pull-66 { position: relative; } .hide-on-desktop { display: none !important; } .grid-5 { float: left; width: 5%; } .prefix-5 { margin-left: 5%; } .suffix-5 { margin-right: 5%; } .push-5 { left: 5%; } .pull-5 { left: -5%; } .grid-10 { float: left; width: 10%; } .prefix-10 { margin-left: 10%; } .suffix-10 { margin-right: 10%; } .push-10 { left: 10%; } .pull-10 { left: -10%; } .grid-15 { float: left; width: 15%; } .prefix-15 { margin-left: 15%; } .suffix-15 { margin-right: 15%; } .push-15 { left: 15%; } .pull-15 { left: -15%; } .grid-20 { float: left; width: 20%; } .prefix-20 { margin-left: 20%; } .suffix-20 { margin-right: 20%; } .push-20 { left: 20%; } .pull-20 { left: -20%; } .grid-25 { float: left; width: 25%; } .prefix-25 { margin-left: 25%; } .suffix-25 { margin-right: 25%; } .push-25 { left: 25%; } .pull-25 { left: -25%; } .grid-30 { float: left; width: 30%; } .prefix-30 { margin-left: 30%; } .suffix-30 { margin-right: 30%; } .push-30 { left: 30%; } .pull-30 { left: -30%; } .grid-35 { float: left; width: 35%; } .prefix-35 { margin-left: 35%; } .suffix-35 { margin-right: 35%; } .push-35 { left: 35%; } .pull-35 { left: -35%; } .grid-40 { float: left; width: 40%; } .prefix-40 { margin-left: 40%; } .suffix-40 { margin-right: 40%; } .push-40 { left: 40%; } .pull-40 { left: -40%; } .grid-45 { float: left; width: 45%; } .prefix-45 { margin-left: 45%; } .suffix-45 { margin-right: 45%; } .push-45 { left: 45%; } .pull-45 { left: -45%; } .grid-50 { float: left; width: 50%; } .prefix-50 { margin-left: 50%; } .suffix-50 { margin-right: 50%; } .push-50 { left: 50%; } .pull-50 { left: -50%; } .grid-55 { float: left; width: 55%; } .prefix-55 { margin-left: 55%; } .suffix-55 { margin-right: 55%; } .push-55 { left: 55%; } .pull-55 { left: -55%; } .grid-60 { float: left; width: 60%; } .prefix-60 { margin-left: 60%; } .suffix-60 { margin-right: 60%; } .push-60 { left: 60%; } .pull-60 { left: -60%; } .grid-65 { float: left; width: 65%; } .prefix-65 { margin-left: 65%; } .suffix-65 { margin-right: 65%; } .push-65 { left: 65%; } .pull-65 { left: -65%; } .grid-70 { float: left; width: 70%; } .prefix-70 { margin-left: 70%; } .suffix-70 { margin-right: 70%; } .push-70 { left: 70%; } .pull-70 { left: -70%; } .grid-75 { float: left; width: 75%; } .prefix-75 { margin-left: 75%; } .suffix-75 { margin-right: 75%; } .push-75 { left: 75%; } .pull-75 { left: -75%; } .grid-80 { float: left; width: 80%; } .prefix-80 { margin-left: 80%; } .suffix-80 { margin-right: 80%; } .push-80 { left: 80%; } .pull-80 { left: -80%; } .grid-85 { float: left; width: 85%; } .prefix-85 { margin-left: 85%; } .suffix-85 { margin-right: 85%; } .push-85 { left: 85%; } .pull-85 { left: -85%; } .grid-90 { float: left; width: 90%; } .prefix-90 { margin-left: 90%; } .suffix-90 { margin-right: 90%; } .push-90 { left: 90%; } .pull-90 { left: -90%; } .grid-95 { float: left; width: 95%; } .prefix-95 { margin-left: 95%; } .suffix-95 { margin-right: 95%; } .push-95 { left: 95%; } .pull-95 { left: -95%; } .grid-33 { float: left; width: 33.33333%; } .prefix-33 { margin-left: 33.33333%; } .suffix-33 { margin-right: 33.33333%; } .push-33 { left: 33.33333%; } .pull-33 { left: -33.33333%; } .grid-66 { float: left; width: 66.66667%; } .prefix-66 { margin-left: 66.66667%; } .suffix-66 { margin-right: 66.66667%; } .push-66 { left: 66.66667%; } .pull-66 { left: -66.66667%; } .grid-100 { clear: both; width: 100%; }
}
@media screen and (max-width: 400px) { @-ms-viewport { width: 320px; }
}
@media screen and (max-width: 680px) { .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .grid-container:before, .mobile-grid-100:before, .clearfix:before, .grid-container:after, .mobile-grid-100:after, .clearfix:after { content: "."; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .grid-container:after, .mobile-grid-100:after, .clearfix:after { clear: both; } .grid-container { max-width: 1080px; position: relative; } .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; padding-right: 15px; } .grid-parent { padding-left: 0; padding-right: 0; } .mobile-push-5, .mobile-pull-5, .mobile-push-10, .mobile-pull-10, .mobile-push-15, .mobile-pull-15, .mobile-push-20, .mobile-pull-20, .mobile-push-25, .mobile-pull-25, .mobile-push-30, .mobile-pull-30, .mobile-push-35, .mobile-pull-35, .mobile-push-40, .mobile-pull-40, .mobile-push-45, .mobile-pull-45, .mobile-push-50, .mobile-pull-50, .mobile-push-55, .mobile-pull-55, .mobile-push-60, .mobile-pull-60, .mobile-push-65, .mobile-pull-65, .mobile-push-70, .mobile-pull-70, .mobile-push-75, .mobile-pull-75, .mobile-push-80, .mobile-pull-80, .mobile-push-85, .mobile-pull-85, .mobile-push-90, .mobile-pull-90, .mobile-push-95, .mobile-pull-95, .mobile-push-33, .mobile-pull-33, .mobile-push-66, .mobile-pull-66 { position: relative; } .hide-on-mobile { display: none !important; } .mobile-grid-5 { float: left; width: 5%; } .mobile-prefix-5 { margin-left: 5%; } .mobile-suffix-5 { margin-right: 5%; } .mobile-push-5 { left: 5%; } .mobile-pull-5 { left: -5%; } .mobile-grid-10 { float: left; width: 10%; } .mobile-prefix-10 { margin-left: 10%; } .mobile-suffix-10 { margin-right: 10%; } .mobile-push-10 { left: 10%; } .mobile-pull-10 { left: -10%; } .mobile-grid-15 { float: left; width: 15%; } .mobile-prefix-15 { margin-left: 15%; } .mobile-suffix-15 { margin-right: 15%; } .mobile-push-15 { left: 15%; } .mobile-pull-15 { left: -15%; } .mobile-grid-20 { float: left; width: 20%; } .mobile-prefix-20 { margin-left: 20%; } .mobile-suffix-20 { margin-right: 20%; } .mobile-push-20 { left: 20%; } .mobile-pull-20 { left: -20%; } .mobile-grid-25 { float: left; width: 25%; } .mobile-prefix-25 { margin-left: 25%; } .mobile-suffix-25 { margin-right: 25%; } .mobile-push-25 { left: 25%; } .mobile-pull-25 { left: -25%; } .mobile-grid-30 { float: left; width: 30%; } .mobile-prefix-30 { margin-left: 30%; } .mobile-suffix-30 { margin-right: 30%; } .mobile-push-30 { left: 30%; } .mobile-pull-30 { left: -30%; } .mobile-grid-35 { float: left; width: 35%; } .mobile-prefix-35 { margin-left: 35%; } .mobile-suffix-35 { margin-right: 35%; } .mobile-push-35 { left: 35%; } .mobile-pull-35 { left: -35%; } .mobile-grid-40 { float: left; width: 40%; } .mobile-prefix-40 { margin-left: 40%; } .mobile-suffix-40 { margin-right: 40%; } .mobile-push-40 { left: 40%; } .mobile-pull-40 { left: -40%; } .mobile-grid-45 { float: left; width: 45%; } .mobile-prefix-45 { margin-left: 45%; } .mobile-suffix-45 { margin-right: 45%; } .mobile-push-45 { left: 45%; } .mobile-pull-45 { left: -45%; } .mobile-grid-50 { float: left; width: 50%; } .mobile-prefix-50 { margin-left: 50%; } .mobile-suffix-50 { margin-right: 50%; } .mobile-push-50 { left: 50%; } .mobile-pull-50 { left: -50%; } .mobile-grid-55 { float: left; width: 55%; } .mobile-prefix-55 { margin-left: 55%; } .mobile-suffix-55 { margin-right: 55%; } .mobile-push-55 { left: 55%; } .mobile-pull-55 { left: -55%; } .mobile-grid-60 { float: left; width: 60%; } .mobile-prefix-60 { margin-left: 60%; } .mobile-suffix-60 { margin-right: 60%; } .mobile-push-60 { left: 60%; } .mobile-pull-60 { left: -60%; } .mobile-grid-65 { float: left; width: 65%; } .mobile-prefix-65 { margin-left: 65%; } .mobile-suffix-65 { margin-right: 65%; } .mobile-push-65 { left: 65%; } .mobile-pull-65 { left: -65%; } .mobile-grid-70 { float: left; width: 70%; } .mobile-prefix-70 { margin-left: 70%; } .mobile-suffix-70 { margin-right: 70%; } .mobile-push-70 { left: 70%; } .mobile-pull-70 { left: -70%; } .mobile-grid-75 { float: left; width: 75%; } .mobile-prefix-75 { margin-left: 75%; } .mobile-suffix-75 { margin-right: 75%; } .mobile-push-75 { left: 75%; } .mobile-pull-75 { left: -75%; } .mobile-grid-80 { float: left; width: 80%; } .mobile-prefix-80 { margin-left: 80%; } .mobile-suffix-80 { margin-right: 80%; } .mobile-push-80 { left: 80%; } .mobile-pull-80 { left: -80%; } .mobile-grid-85 { float: left; width: 85%; } .mobile-prefix-85 { margin-left: 85%; } .mobile-suffix-85 { margin-right: 85%; } .mobile-push-85 { left: 85%; } .mobile-pull-85 { left: -85%; } .mobile-grid-90 { float: left; width: 90%; } .mobile-prefix-90 { margin-left: 90%; } .mobile-suffix-90 { margin-right: 90%; } .mobile-push-90 { left: 90%; } .mobile-pull-90 { left: -90%; } .mobile-grid-95 { float: left; width: 95%; } .mobile-prefix-95 { margin-left: 95%; } .mobile-suffix-95 { margin-right: 95%; } .mobile-push-95 { left: 95%; } .mobile-pull-95 { left: -95%; } .mobile-grid-33 { float: left; width: 33.33333%; } .mobile-prefix-33 { margin-left: 33.33333%; } .mobile-suffix-33 { margin-right: 33.33333%; } .mobile-push-33 { left: 33.33333%; } .mobile-pull-33 { left: -33.33333%; } .mobile-grid-66 { float: left; width: 66.66667%; } .mobile-prefix-66 { margin-left: 66.66667%; } .mobile-suffix-66 { margin-right: 66.66667%; } .mobile-push-66 { left: 66.66667%; } .mobile-pull-66 { left: -66.66667%; } .mobile-grid-100 { clear: both; width: 100%; }
}
@media screen and (min-width: 680px) and (max-width: 1080px) { .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .grid-container:before, .tablet-grid-100:before, .clearfix:before, .grid-container:after, .tablet-grid-100:after, .clearfix:after { content: "."; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .grid-container:after, .tablet-grid-100:after, .clearfix:after { clear: both; } .grid-container { max-width: 1080px; position: relative; } .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; padding-right: 15px; } .grid-parent { padding-left: 0; padding-right: 0; } .tablet-push-5, .tablet-pull-5, .tablet-push-10, .tablet-pull-10, .tablet-push-15, .tablet-pull-15, .tablet-push-20, .tablet-pull-20, .tablet-push-25, .tablet-pull-25, .tablet-push-30, .tablet-pull-30, .tablet-push-35, .tablet-pull-35, .tablet-push-40, .tablet-pull-40, .tablet-push-45, .tablet-pull-45, .tablet-push-50, .tablet-pull-50, .tablet-push-55, .tablet-pull-55, .tablet-push-60, .tablet-pull-60, .tablet-push-65, .tablet-pull-65, .tablet-push-70, .tablet-pull-70, .tablet-push-75, .tablet-pull-75, .tablet-push-80, .tablet-pull-80, .tablet-push-85, .tablet-pull-85, .tablet-push-90, .tablet-pull-90, .tablet-push-95, .tablet-pull-95, .tablet-push-33, .tablet-pull-33, .tablet-push-66, .tablet-pull-66 { position: relative; } .hide-on-tablet { display: none !important; } .tablet-grid-5 { float: left; width: 5%; } .tablet-prefix-5 { margin-left: 5%; } .tablet-suffix-5 { margin-right: 5%; } .tablet-push-5 { left: 5%; } .tablet-pull-5 { left: -5%; } .tablet-grid-10 { float: left; width: 10%; } .tablet-prefix-10 { margin-left: 10%; } .tablet-suffix-10 { margin-right: 10%; } .tablet-push-10 { left: 10%; } .tablet-pull-10 { left: -10%; } .tablet-grid-15 { float: left; width: 15%; } .tablet-prefix-15 { margin-left: 15%; } .tablet-suffix-15 { margin-right: 15%; } .tablet-push-15 { left: 15%; } .tablet-pull-15 { left: -15%; } .tablet-grid-20 { float: left; width: 20%; } .tablet-prefix-20 { margin-left: 20%; } .tablet-suffix-20 { margin-right: 20%; } .tablet-push-20 { left: 20%; } .tablet-pull-20 { left: -20%; } .tablet-grid-25 { float: left; width: 25%; } .tablet-prefix-25 { margin-left: 25%; } .tablet-suffix-25 { margin-right: 25%; } .tablet-push-25 { left: 25%; } .tablet-pull-25 { left: -25%; } .tablet-grid-30 { float: left; width: 30%; } .tablet-prefix-30 { margin-left: 30%; } .tablet-suffix-30 { margin-right: 30%; } .tablet-push-30 { left: 30%; } .tablet-pull-30 { left: -30%; } .tablet-grid-35 { float: left; width: 35%; } .tablet-prefix-35 { margin-left: 35%; } .tablet-suffix-35 { margin-right: 35%; } .tablet-push-35 { left: 35%; } .tablet-pull-35 { left: -35%; } .tablet-grid-40 { float: left; width: 40%; } .tablet-prefix-40 { margin-left: 40%; } .tablet-suffix-40 { margin-right: 40%; } .tablet-push-40 { left: 40%; } .tablet-pull-40 { left: -40%; } .tablet-grid-45 { float: left; width: 45%; } .tablet-prefix-45 { margin-left: 45%; } .tablet-suffix-45 { margin-right: 45%; } .tablet-push-45 { left: 45%; } .tablet-pull-45 { left: -45%; } .tablet-grid-50 { float: left; width: 50%; } .tablet-prefix-50 { margin-left: 50%; } .tablet-suffix-50 { margin-right: 50%; } .tablet-push-50 { left: 50%; } .tablet-pull-50 { left: -50%; } .tablet-grid-55 { float: left; width: 55%; } .tablet-prefix-55 { margin-left: 55%; } .tablet-suffix-55 { margin-right: 55%; } .tablet-push-55 { left: 55%; } .tablet-pull-55 { left: -55%; } .tablet-grid-60 { float: left; width: 60%; } .tablet-prefix-60 { margin-left: 60%; } .tablet-suffix-60 { margin-right: 60%; } .tablet-push-60 { left: 60%; } .tablet-pull-60 { left: -60%; } .tablet-grid-65 { float: left; width: 65%; } .tablet-prefix-65 { margin-left: 65%; } .tablet-suffix-65 { margin-right: 65%; } .tablet-push-65 { left: 65%; } .tablet-pull-65 { left: -65%; } .tablet-grid-70 { float: left; width: 70%; } .tablet-prefix-70 { margin-left: 70%; } .tablet-suffix-70 { margin-right: 70%; } .tablet-push-70 { left: 70%; } .tablet-pull-70 { left: -70%; } .tablet-grid-75 { float: left; width: 75%; } .tablet-prefix-75 { margin-left: 75%; } .tablet-suffix-75 { margin-right: 75%; } .tablet-push-75 { left: 75%; } .tablet-pull-75 { left: -75%; } .tablet-grid-80 { float: left; width: 80%; } .tablet-prefix-80 { margin-left: 80%; } .tablet-suffix-80 { margin-right: 80%; } .tablet-push-80 { left: 80%; } .tablet-pull-80 { left: -80%; } .tablet-grid-85 { float: left; width: 85%; } .tablet-prefix-85 { margin-left: 85%; } .tablet-suffix-85 { margin-right: 85%; } .tablet-push-85 { left: 85%; } .tablet-pull-85 { left: -85%; } .tablet-grid-90 { float: left; width: 90%; } .tablet-prefix-90 { margin-left: 90%; } .tablet-suffix-90 { margin-right: 90%; } .tablet-push-90 { left: 90%; } .tablet-pull-90 { left: -90%; } .tablet-grid-95 { float: left; width: 95%; } .tablet-prefix-95 { margin-left: 95%; } .tablet-suffix-95 { margin-right: 95%; } .tablet-push-95 { left: 95%; } .tablet-pull-95 { left: -95%; } .tablet-grid-33 { float: left; width: 33.33333%; } .tablet-prefix-33 { margin-left: 33.33333%; } .tablet-suffix-33 { margin-right: 33.33333%; } .tablet-push-33 { left: 33.33333%; } .tablet-pull-33 { left: -33.33333%; } .tablet-grid-66 { float: left; width: 66.66667%; } .tablet-prefix-66 { margin-left: 66.66667%; } .tablet-suffix-66 { margin-right: 66.66667%; } .tablet-push-66 { left: 66.66667%; } .tablet-pull-66 { left: -66.66667%; } .tablet-grid-100 { clear: both; width: 100%; }
}
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;
}
.grid-container:before,
.clearfix:before,
.grid-container:after,
.clearfix:after { content: "."; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;
}
.grid-container:after,
.clearfix:after { clear: both;
}
.grid-container { max-width: 1080px; position: relative;
}
.grid-5,
.mobile-grid-5,
.grid-10,
.mobile-grid-10,
.grid-15,
.mobile-grid-15,
.grid-20,
.mobile-grid-20,
.grid-25,
.mobile-grid-25,
.grid-30,
.mobile-grid-30,
.grid-35,
.mobile-grid-35,
.grid-40,
.mobile-grid-40,
.grid-45,
.mobile-grid-45,
.grid-50,
.mobile-grid-50,
.grid-55,
.mobile-grid-55,
.grid-60,
.mobile-grid-60,
.grid-65,
.mobile-grid-65,
.grid-70,
.mobile-grid-70,
.grid-75,
.mobile-grid-75,
.grid-80,
.mobile-grid-80,
.grid-85,
.mobile-grid-85,
.grid-90,
.mobile-grid-90,
.grid-95,
.mobile-grid-95,
.grid-100,
.mobile-grid-100,
.grid-33,
.mobile-grid-33,
.grid-66,
.mobile-grid-66 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; padding-right: 15px;
}
.grid-parent { padding-left: 0; padding-right: 0;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol,
ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption,
th,
td { text-align: left; font-weight: normal; vertical-align: middle;
}
q,
blockquote { quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary { display: block;
}
body { background: #e5e5e5; padding: 50px 0 0; font-family: "Varela Round", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 62.5%;
}
.centered { margin: 0 auto; text-align:center;
}
.contained { background: white; padding: 30px 15px; margin-bottom: 30px; position: relative; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}
.heading { margin-bottom: 20px;
}
h1,
h2 { font-size: 2.4em; font-weight: 500; margin-bottom: 8px; color: #384047; line-height: 1.2;
}
h2 { font-size: 1.8em;
}
aside h2 { margin-bottom: 15px;
}
p,
label { color: #8d9aa5; font-size: 1.4em; margin-bottom: 15px; line-height: 1.4;
}
a { color: #3f8abf; line-height: 1.4; text-decoration: none;
}
a:hover { text-decoration: underline;
}
ul li { margin: 15px 0 0; font-size: 1.6em; color: #8d9aa5; position: relative;
}
ul.rooms { margin-bottom: 30px;
}
ul.rooms li { font-size: 1em; display: inline-block; width: 10%; padding: 3px 2px 2px; border-radius: 2px; margin: 0 3px 3px 3px; color: white; text-align: center;
}
ul.rooms li.empty { background-color: #5fcf80;
}
ul.rooms li.full { background-color: #ed5a5a;
}
ul.bulleted { margin-bottom: 20px;
}
ul.bulleted li { padding-left: 40px;
}
ul.bulleted li:before { position: absolute; top: 0; left: 0; color: white; font-size: .5em; padding: 3px 2px 2px; border-radius: 2px; text-align: center; width: 25px;
}
ul.bulleted .in { color: #5A6772;
}
ul.bulleted .in:before { content: "IN"; background-color: #5fcf80;
}
ul.bulleted .out { color: #A7B4BF;
}
ul.bulleted .out:before { content: "OUT"; background-color: #ed5a5a;
}
ul.filter-select { display: table; table-layout: fixed; width: 100%; background: #edeff0; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
}
ul.filter-select li { margin: 0; padding: 0; text-align: center; display: table-cell;
}
ul.filter-select li:before { display: none;
}
ul.filter-select button { width: 100%; text-align: center; background: none; border: none; outline: none; padding: 15px; margin: 0; font-family: "Varela Round", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; position: relative; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;
}
ul.filter-select button:hover:after,
ul.filter-select button.selected:after,
li:last-child ul.filter-select button:after { filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0;
}
ul.filter-select button:hover { background: #dfe3e4;
}
ul.filter-select button.selected { background: #d1d6d9;
}
ul.filter-select button:after { content: ""; display: block; position: absolute; right: -1px; top: 15px; bottom: 15px; width: 1px; background: #d1d6d9;
}
#photos li { margin: 30px 0 0; vertical-align: middle;
}
#photos li:before { display: none;
}
#photos .image { display: block; min-height: 240px; background: #edeff0; text-align: center; height: 260px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;
}
#photos .image:hover { background: #dfe3e4;
}
#photos .image:before { content: ""; display: inline-block; height: 100%; vertical-align: middle;
}
#photos img { max-width: 80%; max-height: 200px; vertical-align: middle; -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
.button { background: #3f8abf; padding: 8px 18px; font-family: "Varela Round", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.4em; color: white; font-weight: 500; border: 3px solid #3f8abf; outline: none; cursor: pointer; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 2px 0 0 #3574a0; -moz-box-shadow: 0 2px 0 0 #3574a0; box-shadow: 0 2px 0 0 #3574a0; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;
}
.button:hover { background: #397cac; border-color: #397cac; -webkit-box-shadow: 0 2px 0 0 #2c6085; -moz-box-shadow: 0 2px 0 0 #2c6085; box-shadow: 0 2px 0 0 #2c6085;
}
.response { padding: 30px; background: #fbfbfc; border: 1px solid #e2e5e8; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
}
.response p { margin: 0;
}
footer p { color: #b2bac2; font-size: 1.15em; margin: 0;
}
input[type=search] { font-size: 2em;
}
Contact GitHub API Training Shop Blog About © 2016 GitHub,
Inc. Terms Privacy Security Status Help

Ajax Flickr Search - Script Codes JS Codes

$(document).ready(function() { $('form').submit(function(e) { e.preventDefault(); var $searchField = $('#search'); var $submitButton = $('#submit'); $searchField.prop("disabled", true); $submitButton.attr("disabled", true).val("searching..."); // AJAX var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; var searchTerm = $searchField.val(); var flickrOptions = { tags: searchTerm, format: "json" }; //Show images if no error function displayPhotos(data) { if ($.isEmptyObject(data.items) === false) { $('#photos').show(); var photoHTML = '<ul>'; $.each(data.items, function(i, photo) { var date = new Date(photo.date_taken); photoHTML += '<li class="grid-25 tablet-grid-50">'; photoHTML += '<a href="' + photo.link + '" class="image">'; photoHTML += '<img src="' + photo.media.m + '">'; photoHTML += '</a><p>Photo by<br>' + photo.author.slice(19, -1) + '<br>on ' + photo.date_taken.slice(0, 10) + ' at ' + photo.date_taken.slice(11, 16) + '</p></li>'; }); // end each //if search cannot find tags, throw error photoHTML += '</ul>'; $('#photos').html(photoHTML); $('#error').hide(); } else { $('#photos').hide(); $('#error').html('<h2>We cannot find anything with that term, please try again</h2>').show(); } $searchField.prop("disabled", false); $submitButton.attr("disabled", false).val("Submit"); } $.getJSON(flickerAPI, flickrOptions, displayPhotos); }); // end submit
}); // end

Home Page	Home
Developer	Kevin
Username	gnarfugh
Uploaded	October 13, 2022
Rating	3
Size	7,084 Kb
Views	18,216

Do you need developer help for Ajax Flickr Search?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin (gnarfugh) Script Codes

Name	Size
Hover tabs with column wrapper	7,014 Kb
A Pen by kevin	3,018 Kb
Flex dropdown nav	3,962 Kb
Vertical rhythm less mixin	2,318 Kb
Columns flex medicare	3,195 Kb
Timeline on scroll	4,307 Kb
Highlight table	90,049 Kb
Fluid Typography	2,797 Kb
Hover icon link over image	2,915 Kb
Slider	5,806 Kb

Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
RRC wrapSwitch	Pshrmn	2,922 Kb
Pattern lab logo	TimPietrusky	3,666 Kb
CSS3 Selectables with information rollover	Jasonmayes	9,565 Kb
Vue.js Starter	Andymerskin	1,268 Kb
Commuter Line Tokyu 8500	Pedox	7,031 Kb
Multi column experiment.	Spylefkaditis	2,805 Kb
Spinners using Font Icons	Keyamoon	3,007 Kb
Two tables and header with jspdf-autotable	Someatoms	2,245 Kb
Playing with FlexBox	_Billy_Brown	3,162 Kb
Swiftype Lower Third	Zumwalt	4,796 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!