<html>
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-xxxxxxxxxx",
enable_page_level_ads: true
});
</script>
<title>UN World Jobs</title>
<meta charset="UTF-8">
<link href="dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src= " dist/jquery.vmap.js"></script>
<script type="text/javascript" src="dist/maps/jquery.vmap.world.js" charset="utf-8"></script>
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #87CEFA;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
onRegionClick: function(element, code, region) {
if(code == 'bi'){
window.location.href = 'burundiJobs.html';
}
if(code == 'ne'){
window.location.href = "NigerJobs.html";
}
if(code == 'ng'){
window.location.href = 'NigeriaJobs.html';
}
if(code == 'eg'){
window.location.href = "egyptJobs.html";
}if(code == 'ml'){
window.location.href = 'MaliJobs.html';
}
if(code == 'so'){
window.location.href = "SomaliaJobs.html";
}if(code == 'cd'){
window.location.href = 'CongoJobs.html';
}
if(code == 'cf'){
window.location.href = "centralJobs.html";
}if(code == 'ke'){
window.location.href = 'KenyaJobs.html';
}
if(code == 'lr'){
window.location.href = "liberiaJobs.html";
}
if(code == 'na'){
window.location.href = "namibiaJobs.html";
}
if(code == 'sd'){
window.location.href = "sudanJobs.html";
}
if(code == 'na'){
window.location.href = "namibiaJobs.html";
}
if(code == 'sl'){
window.location.href = "sierraleoneJobs.html";
}if(code == 'et'){
window.location.href = "ethiopiaJobs.html";
}if(code == 'zw'){
window.location.href = "zimbabweJobs.html";
}if(code == 'ug'){
window.location.href = "ugandaJobs.html";
}if(code == 'dj'){
window.location.href = "djiboutiJobs.html";
}if(code == 'tz'){
window.location.href = "tanzaniaJobs.html";
}if(code == 'cm'){
window.location.href = "cameroonJobs.html";
}
}
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-91634038-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<h2 style="text-align: center; font-family: Arial Black,Arial Bold,Gadget,sans-serif; "> Welcome to UN World Jobs, please pick a country you would like to work.</h2>
<div id="vmap" style="width: 800; height: 600;
margin: 0 auto; "></div>
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The above code is the Bootstrap blank template code with the JQVmap. When I open the browser, the map won't load and gives me this error in the console:
TypeError: jQuery(...).vectorMap is not a function[Learn More].
My JQVmap folders are all present.
You have an extra space in the <script> tag
<script type="text/javascript" src= " dist/jquery.vmap.js"></script>
should be
<script type="text/javascript" src= "dist/jquery.vmap.js"></script>
I added jquery at the very top and it worked
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<link href="dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src= " dist/jquery.vmap.js"></script>
<script type="text/javascript" src="dist/maps/jquery.vmap.world.js" charset="utf-8"></script>
Related
In my AngularJS application, I have a view which displays different images in div. I want to add Navigation to view in order to Navigation to different images using my keyboard Navigation keys. Can someone please guide how to achieve that?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS App</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript" src="app/myAppModel.js"></script>
<script type="text/javascript" src="app/myAppHomeCtrl.js"></script>
<script type="text/javascript" src="lib/xml2json.js"></script>
</head>
<body style="background: #800000">
<div class="container" ng-controller="myCtrl">
<input class="form-control" id="inputdefault" type="text" style="width:25%; height:40px; display:inline" ng-model="searchKey" placeholder="Type to search">
<button type="button" class="btn btn-danger" style="height:40px; margin:20px; margin-left:5px; display:inline" ng-click="loadSearch()">Search</button>
<div ng-show="true" ng-app="myApp" ng-cloak class="w3-card-2 w3-margin" style="text-align:center; color:yellow; display: grid; grid-template-columns: auto auto auto auto auto; grid-gap:20px; width:730px; border-radius: 8px;">
<div ng-repeat="x in myData" class="grid-item"><img style="border-radius: 8px;" src="{{x.logo}}" width="150" height="150">{{x.number+'. '+x.name}}</div>
</div>
</div>
</body>
</html>
This would be helpful:
var len = myData.length;
var imageIndex = 0;
$(document).keydown(function(e) {
if(imageIndex <0) {
imageIndex = 0;
}
else if(len <= imageIndex){
imageIndex = len;
}
switch(e.which) {
case 37: // left
case 40: // down
var currentImage = myData[imageIndex-1];
$("img").attr(src, currentImage.number+'. '+currentImage.name);
break;
case 39: // right
var currentImage = myData[imageIndex+1];
$("img").attr(src, currentImage.number+'. '+currentImage.name);
break;
default: return; // exit this handler for other keys
imageIndex++;
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
I am using reactJS to create a group of buttons.
However, I am unable to view the output (nothing comes on screen).
I have properly created a react class and rendered the HTML using babel. Here is the code. Please find where am I going wrong at this, why nothing gets printed on the screen.
I have imported the CDN of the required files.
react-min.js
react-dom.min.js
browser.min.js
babel.js
``
Main
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script src="browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<style>
#side{
position: fixed;
width:10%;
height:100%;
background-color: black;
border:2px solid black;
color:white;
z-index: -1;
}
#buttons{
position: fixed;
top:10%;
left:2%;
color:white;
}
</style>
<div id="side"></div>
<div id="buttons"></div>
<script type = "text/babel">
var side = React.createClass({
render:function(){
return
(
<div>
<div id="Profile">
<button class="btn btn-danger">Profile</button>
</div>
<div id="Maps">
<button class="btn btn-primary">Maps</button>
</div>
<div id="video">
<button class="btn btn-danger">Video</button>
</div>
</div>
);
}
});
ReactDOM.render(
<side />,
document.getElementById('buttons'));
</script>
React Component names should start with a capital letter.
Change
var side = React.createClass({
...
});
ReactDOM.render(
<side />,
document.getElementById('buttons')
);
To
var Side = React.createClass({
...
});
ReactDOM.render(
<Side />,
document.getElementById('buttons')
);
Refer official docs - components must be capitalized for more info.
Adding executable code for clarity
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script src="browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<style>
#side {
position: fixed;
width: 10%;
height: 100%;
background-color: black;
border: 2px solid black;
color: white;
z-index: -1;
}
#buttons {
position: fixed;
top: 10%;
left: 2%;
color: white;
}
</style>
<div id="side"></div>
<div id="buttons"></div>
<script type="text/babel">
var Side = React.createClass({ render:function(){ return (
<div>
<div>Hello World</div>
<div id="Profile">
<button class="btn btn-danger">Profile</button>
</div>
<div id="Maps">
<button class="btn btn-primary">Maps</button>
</div>
<div id="video">
<button class="btn btn-danger">Video</button>
</div>
</div>
); } }); ReactDOM.render(
<Side />, document.getElementById('buttons'));
</script>
I make a login page with angular
it seem like angular is not even loading in mobile i used a variable to test the angular is loaded or not in desktop browser it work but when i run it on my phone angular is not load and variable is not printing
$scope.test= 122;
Don't know the problem cause, i also test after building but still same problem.
the login page is :
<!DOCTYPE html>
<html>
<head>
<title>Login </title>
<link href="css/loginnew.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.2.1.min.js"></script>
<!-- <script src="js/angular.js"></script>-->
<script src="js/angular.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/sweetalert.css" rel="stylesheet">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="css/animate.css">-->
<!-- Custom Stylesheet -->
<!-- <link rel="stylesheet" href="css/loginstyle.css">-->
<style>
.errorlabel
{
color: red;
font-weight: normal;
width: 100%;
border-radius: 0px 0px 8px 8px;
padding: 0 10px;
background: rgba(128, 128, 128, 0.28);
}
</style>
</head>
<body ng-app="myApp" ng-controller="logincontroller">
<!--
you can substitue the span of reauth email for a input with the email and
include the remember me checkbox
-->
<div class="container">
<div class="card card-container">
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
<img id="profile-img" class="profile-img-card" src="img/user.jpg" />
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin">
<span id="reauth-email" class="reauth-email"></span>
<input id="name" ng-model="username" placeholder=" username" type="text" style=" background-color: transparent;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: black;
font-size: 17px;">
{{test}}
<input id="password" ng-model="password" placeholder=" **********" type="password" style=" background-color: transparent;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: black;
font-size: 17px;">
<button class="btn btn-lg btn-primary btn-block btn-signin" ng-click="verifylogin(username , password)"> Login </button>
<span class="errorlabel">{{errormessage}}</span>
<a href="#" class="forgot-password">
Forgot the password?
</a>
</form>
</div><!-- /card-container -->
</div><!-- /container -->
</body>
<script> function ajaxcall(rurl,rdata,successfunc,title,message)
{
alert('aese hi');
rurl= "https://basit.co/"+rurl ;
$.ajax({
url: rurl, data: rdata ,
success: function(data)
{
//unblur();
data = JSON.parse(data);
//data.data = JSON.parse(data.data);
if(data.errors.length>0)
{
$.each(data.errors, function(ind,e){
console.log(" --"+e.message);
sweetw('Error', e.message);
});
}
else
{
if(successfunc)
{
successfunc(data);
return;
}
if(rdata.reload)
{
setTimeout(function(){location.reload()},2500);
}
console.log();
if(!title)
{
sweets("Success",'');
}else{
sweets(title,message);
}
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// unblur();
console.log(jqXHR);
alert("Server Error");
},
type: 'POST' ,
});
}</script>
<script>
var app = angular.module('myApp', []);
app.controller('logincontroller', function($scope) {
$scope.loginuser="";
$scope.errormessage = "";
$scope.test= 122;
$scope.verifylogin = function (username,password){
ajaxcall("backend/accountf.php",{"verifylogin":true,username,password},function(response){
console.log(response.data);
if( username=="" || !username)
{
$scope.errormessage= response.data[0].errordetail;
}
else if(response.data[0].username == username)
{
$scope.loginuser = username ;
var currentpage = "/" + window.location.pathname.split('/')[1];
location.href ='indextest.html';
$scope.errormessage="";
}
else
{
$scope.errormessage= response.data[0].errordetail;
// alert(response.data[0].errordetail);
}
$scope.$digest();
}
);
}
});
</script>
</html>
I don't see your angular module (myApp) in the code... Try calling the script containing your angular module.
it work fine with android version greater then jellybean but not work with lower
so i send data with typescript format as ajaxcall("backend/accountf.php",{"verifylogin":true,"username":username,"password":password},function(response){
.
.
.
}
and now it work :)
I have a problem with SELECT options, when I do my first choice the content of my SELECT becomes empty.
here are my app.html && app.js
app.html
<html>
<head>
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/nodeCss.css">
</head>
<body ng-app="Webapp">
<h1>Module Opale</h1>
Titre<input type="text" placeholder="Titre"><br />
Metadonnées<input type="text" placeholder="Titre"><br />
Objectif du module<input type="text" placeholder="Objectif">
<script type="text/ng-template" id="tree_item_Opale.html">
<button class="addchild" ng-click="addChild(data)">addChild</button>
<button ng-show="data.parent" ng-click="addSibling(data)">addSibling</button>
<button class="delete" ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete children</button>
<div>
<select ng-model="choices" ng-options="choice as choice.name for choice in choices"></select>{{choices}}
<div ng-switch on="choices.id">
<div ng-switch-when="1"><h3>Division</h3>
Titre division<input type="text" /><br />
Titre court<input type="text" /><br />
</div>
<div ng-switch-when="2"><h4>Grain de contenu</h4>
Titre<input type="text" /><br />
Titre court<input type="text" /><br />
<h5>Information</h5>
Titre<input type="text" /><br />
<textarea rows="4" cols="70"></textarea>
</div>
</div>
</div>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'tree_item_Opale.html'"></li>
</ul>
</script>
<ul ng-controller="treeCtrl">
<li ng-repeat="data in tree" ng-include="'tree_item_Opale.html'"></li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/rightClickDirective.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap/bootstrap.min.js"></script>
</body>
</html>
app.js
angular.module("Webapp", ["ngSanitize","directive.contextMenu"])
.controller("treeCtrl", ['$scope', function($scope) {
$scope.choices=[
{id:'1',name:'Division'},
{id:'2',name:'Grain de contenu'},
$scope.delete = function(data) {
data.nodes = [];
};
$scope.addSibling = function(data) {
var post = data.parent.nodes.length + 1;
var newName = data.parent.name + '-' + post;
data.parent.nodes.push({name: newName,nodes: [], parent: data.parent});
};
$scope.addChild = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
data.nodes.push({name: newName,nodes: [], parent: data});
};
$scope.tree = [{name: "Node", nodes: []}];
}]);
nodeCss.css
ul {
list-style: none;
border-left: 1px dashed #ddd;
}
li {
margin-left: 20px;
}
button {
background: #63AE12;
color: #FFF;
border: 0;
font-size: 0.8em;
margin: 9px;
}
button.addchild {
background: #3094E7;
}
button.delete {
background: orange;
}
when I add child or sibling and I want to select an option, the first add the options are available but when i add second time the options disappear
This happens because you use choices, which is your array, as your ng-model. You need a different variable for ng-model. So what happens is that when you select, your choice becomes the only available option since it's your new array (it's binded because of the ng-model).
Do something like this:
<select ng-model="modelChoices" ng-options="choice as choice.name for choice in choices"></select>{{modelChoices}}
Any one can take a look at my code? It use the ui-bootstrap carousel component. When I tried to click on one of two buttons, it updates the slides to be show, so only part of slides will be shown in the carousel... THe problem is I cannot see the carousel AT ALL sometimes (not always)... try it out... Any one can tell me why? And how to solve this issue?
My code is at: http://plnkr.co/edit/Qp8axH
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
#media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="CarouselLeftCtrl" class="col-xs-6 col-md-6 shopper-left">
<div style="position:relative;clear:both">
<ul class="shopper-categories" style="list-style-type: none; float:left; padding-left:0">
<li><a data-category='cute' ng-click='emitCategoryInfo($event)' class="depstore btn btn-border" style="margin-bottom:5px; padding-left:0">Cute</a>
</li>
<li><a data-category='supercute' ng-click='emitCategoryInfo($event)' class="boutique btn btn-border" style="margin-bottom:5px; padding-left:0">Super Cute</a>
</li>
</ul>
</div>
<div style="clear:both">
======
</div>
<div class="col-md-1">clicks {{slides | json}}</div>
<div>
======
</div>
<div class="col-md-6 left-carousel">
<div>
<div style="height: 150px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
</div>
</div>
</div>
<!-- /container -->
</body>
</html>
js:
/
/ Add your javascript here
var CarouselLeftCtrl, CarouselRightCtrl, app;
app = angular.module("app", ["ui.bootstrap"]);
CarouselLeftCtrl = function($scope, $http, $log, $timeout) {
$scope.myInterval = -1;
$scope.slides = [];
$scope.json = 0;
$http.get("shopper_images.json").then(function(result) {
var d = result.data;
for (var i = 0; i < d.length; i++) {
$scope.slides.push({
image: d[i].image,
category: d[i].category
});
}
$scope.allSlides = $scope.slides;
});
$scope.$on("category", function(event, data) {
$scope.clicks +=1;
var slides = $scope.allSlides;
var result = [];
for (var i = 0; i < slides.length; i++) {
if(slides[i].category === data.category) {
result.push(slides[i]);
}
}
$scope.slides = result;
$scope.slides[0].active = true;
$scope.$apply();
});
$scope.emitCategoryInfo = function($event) {
$scope.$emit("category", {
category: angular.element($event.target)[0].dataset.category
});
};
};
json:
[
{
"image": "http://placekitten.com/601/300", "category": "cute"
},
{
"image": "http://placekitten.com/602/300", "category": "supercute"
},
{
"image": "http://placekitten.com/603/300", "category": "cute"
}
]