D3EP4K C0DE: August 2013

<!DOCTYPE html>



<html lang="en"> 
<head>


<meta charset="utf-8">
<title>Alpha vs Beta</title>
<meta name="description" content="">
<meta name="author" content="">


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">





<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">
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.8.3.min.js"></script>

<style>
.hov{
background: #aaa;
z-index: 2;
border: 1px solid #eee;
position: absolute;
padding: 5px;
}
.fact{
color: #333; text-decoration:none; outline: 0;

position: relative;
padding-left:10px;
padding-top:10px;
padding-bottom:30px;
padding-right:10px;
font-family: 'Open Sans'
}

.fact:hover{
background: #eee;
}

.criteria{
color: #666;
font-size:12px;
font-family: 'Open Sans';
position: relative;
padding: 10px

}

.element{
color: #666;
font-size:12px;
font-family: 'Open Sans';
position: relative;
padding-left: 35px

}

</style>
</head>
<body >


<div style="min-height:32px ;font-family: 'Open Sans'; font-size:30px ; font-weight:bold; padding: 10px 20px">
google
</div>

<div class="container">

<hr style="border: none;height: 8px;margin: 20px 0; "/>

<div class="fifteen columns" id="elements">
<div class="alpha four columns omega " id="elementMargin">&nbsp</div>
<hr style="margin-bottom: -25px;" />
</div>
<hr/>

</div>


<script type="text/javascript">

function getOptions(upvotes, user){
return "<div class='hov' id='actions'> <a href class='upvoteOption'> <span class='upvotes'>"+upvotes
+"</span> <img src='images/1375698764_tick.png'></a> ▪ "
+"<a href class='report'><img src='images/1375700192_flag_red.png'></a>"

+"<span style='float:right' >"
+"<a class='prev' href><img src='images/1375700888_144.png'> </a>"
+"<a class='next' href><img src='images/1375700926_145.png'> </a>"
+"<a href='/user/"+user.user_id+"'>"+user.user_id+"</a>"
+"</span>"
+"</div>"
}

function addOptions(x, upvotes, user) {
var rowPos = $(x).position();
var bottomTop = rowPos.top;
var bottomLeft = rowPos.left;
var bottomHeight = $(x).height();
var bottomWidth = $(x).width();
$(x).append(getOptions(upvotes, user));

$(".hov")

.css({
'opacity':0.8,
'top': bottomHeight+9,
'left': 0,
'width': bottomWidth+8,
'height': '20px'
});
//console.log(bottomTop)
}

jQuery.fn.exists = function(){return this.length>0;}

$(document).on("mouseover",".fact",function(){
if( !$(".hov").exists())
addOptions(this,323, {"user_id":"prawdg"})
});
$(document).on("mouseleave",".fact",function(){
$(".hov").remove();
});

/******** To avoid recursion as hov is part fact ******/
$(document).on("mouseover",".hov",function(){
return false;
});

var splitData;

/***** Edit this section and change the url to use ajax json load data
$.get('your-server/ajax/split-api', function(data) {
splitData = JSON.parse(data);
});
*****/

/******* Delete this section. Used to test static data***********/
splitData=JSON.parse('{'+
'"criteria":['+
'{"criteriaID":1,"flags":0, "title":"Language", "type":1},'+
'{"criteriaID":2,"flags":0, "title":"OS", "type":1},'+
'{"criteriaID":3,"flags":0, "title":"Runtime", "type":1},'+
'{"criteriaID":4,"flags":0, "title":"Scripting", "type":1},'+
'{"criteriaID":5,"flags":0, "title":"Naming", "type":1}'+
'],'+
'"elements":['+
'{"elementID":1,"flags":0, "title":"JAVA", "votes":0},'+
'{"criteriaID":3,"flags":0, "title":".Net", "type":1}'+
'],'+
'"facts":['+
'{"elementID":1,"criterionID":1, "fact":"JAVA", "factID":1},'+
'{"elementID":2,"criterionID":1, "fact":"C#, VB, .NET, C++", "factID":1},'+
'{"elementID":1,"criterionID":2, "fact":"Multiple", "factID":1},'+
'{"elementID":2,"criterionID":2, "fact":"Windows", "factID":1},'+
'{"elementID":1,"criterionID":3, "fact":"JVM", "factID":1},'+
'{"elementID":2,"criterionID":3, "fact":"CLR", "factID":1},'+
'{"elementID":1,"criterionID":4, "fact":"JSP/Servlet", "factID":1},'+
'{"elementID":2,"criterionID":4, "fact":"ASP.NET", "factID":1},'+
'{"elementID":1,"criterionID":5, "fact":"JNDI", "factID":1},'+
'{"elementID":2,"criterionID":5, "fact":"ASDI", "factID":1}'+
']'+'}');

/****populate fields******/

$.each(splitData.elements , function(i, val) {
/* $("#elementMargin").after("<div class='one column alpha omega' >"+
" "+
"</div>");*/
$("#elementMargin").after("<div class='five columns alpha omega element'>"+
"<h4>"+val.title+"</h4>"+
"</div>");

console.log(val.title)
});

/*******fill criteria & facts **********/
var criteriaList = splitData.criteria

for(var i=criteriaList.length;i>0;i--){
$("#elements").after(" <div class='fifteen columns' style='border-bottom: 1px solid #eee; '>"+
"<div class='four columns criteria alpha omega' >"+
getCriteria(i)+
"</div>"+

"<div class='five columns fact alpha omega' >"+
"<span class='fact_data'>"+ getFact(1, i) +"</span>"+
"</div>"+
/*"<div class='one column alpha omega' >"+
" "+
"</div>"+*/
"<div class='five columns fact omega alpha'>"+
"<span class='fact_data'>"+ getFact(2, i) +"</span>"+
"</div>"+

"</div>");

}

function getFact(elementID, criterionID){
var value;
$.each(splitData.facts, function(i, val) {
if(val.elementID == elementID && val.criterionID == criterionID){
value = val.fact;
return false;
}
});
return value;
}

function getCriteria(criterionID){
var value;
$.each(splitData.criteria, function(i, val) {
if(val.criteriaID == criterionID){
value = val.title;
return false;
}
});
return value;
}

/************** Upvotes*******************/
$("body").on("click",".upvoteOption",function(e){
e.preventDefault();
console.log("google")
$(".upvotes").html(" "+392);
});

$("body").on("click",".prev",function(e){
e.preventDefault();
$(this).parent('span').parent('#actions').siblings('.fact_data').html("the previous fact with higher upvotes by another user")
$(".hov").remove();
});

$("body").on("click",".next",function(e){
e.preventDefault();
//console.log($(this).parent('span').parent('#actions').siblings('.fact_data').text())
$(this).parent('span').parent('#actions').siblings('.fact_data').html("the next fact with lower upvotes by another user")
$(".hov").remove();
});

$("body").on("click",".report",function(e){
e.preventDefault();
console.log("google")

});

</script>
</body>
</html>

D3EP4K C0DE

Wednesday 7 August 2013

About Me

Blog Archive