Wednesday 7 August 2013

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

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

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

<!-- CSS
  ================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<!--link rel="stylesheet" href="stylesheets/layout.css"-->

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Favicons
================================================== -->
<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 >


<!-- header bar -->
               <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><!-- container -->


<!-- End Document
================================================== -->
<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' >"+
"&nbsp;"+
"</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' >"+
"&nbsp;"+
"</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("&nbsp;"+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>

Friday 19 July 2013

Rounded Text Fields

     
import javax.swing.*;
import java.awt.*; import javax.swing.plaf.basic.*;
import java.awt.geom.*;
import javax.swing.text.JTextComponent;
public  class RoundedFieldUI extends BasicTextFieldUI{
private int round = 5;
private int shadeWidth = 2;
private int textSpacing = 3;

public void installUI ( JComponent c )
{
    super.installUI ( c );

    c.setOpaque ( false );

    int s = shadeWidth + 1 + textSpacing;
    c.setBorder ( BorderFactory.createEmptyBorder ( s, s, s, s ) );
}

protected void paintSafely ( Graphics g )
{
    Graphics2D g2d = ( Graphics2D ) g;
    g2d.setRenderingHint ( RenderingHints.KEY_ANTIALIASING,
    RenderingHints.VALUE_ANTIALIAS_ON );

    Shape border = getBorderShape ();

    Stroke os = g2d.getStroke ();
    //g2d.setStroke ( new BasicStroke ( shadeWidth * 2 ) );
    //g2d.setPaint ( Color.LIGHT_GRAY );
    //g2d.draw ( border );
    g2d.setStroke ( os );

    g2d.setPaint ( Color.WHITE );
    g2d.fill ( border );

    //g2d.setStroke ( new BasicStroke ( 1 ) );
    g2d.setPaint ( Color.LIGHT_GRAY );
    g2d.draw ( border );

    g2d.setPaint ( new Color(0x999999) );
    RoundRectangle2D tr = new RoundRectangle2D.Double(6, shadeWidth,
    getComponent ().getWidth ()- 9, 1, 10, 10);
    g2d.fill(tr);

    g2d.setPaint ( new Color(41, 117, 200) );
    RoundRectangle2D tr2 = new RoundRectangle2D.Double(6,                                                   getComponent ().getHeight ()-shadeWidth,
                             getComponent ().getWidth ()- 12, 1, 10, 10);
    g2d.fill(tr2);
    /*
    g2d.setPaint ( Color.GRAY );
    g2d.draw(new Arc2D.Double(shadeWidth, shadeWidth,
    round,
    round,
    90, 135,
    Arc2D.OPEN));
    */
    super.paintSafely ( g );
}

private Shape getBorderShape ()
{
    JTextComponent component = getComponent ();
    if ( round &gt; 0 )
    {
        return new RoundRectangle2D.Double ( shadeWidth, shadeWidth,
        component.getWidth () - shadeWidth * 2 - 1,
        component.getHeight () - shadeWidth * 2 - 1, round * 2, round * 2 );
    }
    else
    {
        return new Rectangle2D.Double ( shadeWidth, shadeWidth,
        component.getWidth () - shadeWidth * 2 - 1,
        component.getHeight () - shadeWidth * 2 - 1 );
    }
}

public static void main ( String[] args )
{

    try {
        // Set System L&F
        UIManager.setLookAndFeel(
        UIManager.getSystemLookAndFeelClassName());
    }
    catch (UnsupportedLookAndFeelException e) {
        // handle exception
    }
    catch (ClassNotFoundException e) {
        // handle exception
    }
    catch (InstantiationException e) {
        // handle exception
    }
    catch (IllegalAccessException e) {
        // handle exception
    }

    JFrame frame = new JFrame ();
    frame.setUndecorated(true);
    JPanel panel = new JPanel ( new BorderLayout ( 5, 5 ) ){
        private  final Color LIGHT_BLUE = new Color(41, 117, 200);
        private  final Color DARK_BLUE = new Color(2, 47, 106);
        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2 = (Graphics2D) g;
            GradientPaint gradPaint = new GradientPaint(0, 0, LIGHT_BLUE, 0, getHeight(), DARK_BLUE);
            g2.setPaint(gradPaint);
            g2.fillRect(0, 0, getWidth(), getHeight());
        }
    };
    panel.setBorder ( BorderFactory.createEmptyBorder ( 50, 50, 50, 50 ) );
    frame.add ( panel );

    panel.add ( new JLabel ( "Field:" ), BorderLayout.NORTH );

    JTextField field = new JTextField ( 20 );
    field.setFont(new Font("Verdana", Font.PLAIN, 18));

    field.setBorder(BorderFactory.createCompoundBorder(
    field.getBorder(),
    BorderFactory.createEmptyBorder(20, 20, 20, 5)));
    field.setUI ( new RoundedFieldUI () );
    panel.add ( field );

    frame.setDefaultCloseOperation ( JFrame.EXIT_ON_CLOSE );
    frame.pack ();
    frame.setLocationRelativeTo ( null );
    frame.setVisible ( true );
}
}http://metamug.com