Drivers


<!DOCTYPE html>
<htm>
    <head>
        <script src="zadaci/jquery/jquery.js"></script>
        <script src="zadaci/jquery/jquery-ui.js"></script>
        <link rel="stylesheet" href="zadaci/jquery/jquery-ui.css">

    </head>
    <style>
.litem{
    width: 200px;
    border:1px solid lightblue;
    border-radius: 5px;
    padding:10px;
    margin:20px;
    list-style-type: none;
    min-height: 20px;

}
#lista1,#lista2,#lista3{
    border: 1px solid black;
    width: 300px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    float: left;
    margin-right: 20px;
}
#infoDriver{
    position: absolute;
    right: 200px;
    width: 300px;
    border:1px solid black;
}
#socialMedia{
    position: absolute;
    bottom: 500px;
    left:1200px;

}


    </style>
    <script>
        $(document).ready(function(){

            $.ajax({
                url:"http://ergast.com/api/f1/2016/drivers.json",
                dataType:"jsonP",
                success: function(data){

                    for(var i = 0 ; i < data.MRData.DriverTable.Drivers.length ; i++)
                    {
                        var name = data.MRData.DriverTable.Drivers[i].givenName;
                        var famName = data.MRData.DriverTable.Drivers[i].familyName;
                        var perNumber = data.MRData.DriverTable.Drivers[i].permanentNumber;
                        var nation = data.MRData.DriverTable.Drivers[i].nationality;
                        var birth = data.MRData.DriverTable.Drivers[i].dateOfBirth;
                        var urlP = data.MRData.DriverTable.Drivers[i].url;
                        var listItem = $("<li class='litem' name = '"+name+"'  fam = '"+famName+"'  PN = '"+perNumber+"'  nat = '"+nation+"'  bir = '"+birth+"'  ur = '"+urlP+"'>"+name+" "+famName+"</li>");
                        $("#lista1").append(listItem);
                    }

                }

            });
            $.ajax({
                url:"http://ergast.com/api/f1/2016/drivers.json",
                dataType:"jsonP",
                success: function(data){

                    for(var i = 0 ; i < data.MRData.DriverTable.Drivers.length ; i++)
                    {
                        var name = data.MRData.DriverTable.Drivers[i].givenName;
                        var famName = data.MRData.DriverTable.Drivers[i].familyName;
                        var perNumber = data.MRData.DriverTable.Drivers[i].permanentNumber;
                        var nation = data.MRData.DriverTable.Drivers[i].nationality;
                        var birth = data.MRData.DriverTable.Drivers[i].dateOfBirth;
                        var urlP = data.MRData.DriverTable.Drivers[i].url;
                        var listItem = $("<li class='litem' name = '"+name+"'  fam = '"+famName+"'  PN = '"+perNumber+"'  nat = '"+nation+"'  bir = '"+birth+"'  ur = '"+urlP+"'>"+name+" "+famName+"</li>");
                        $("#lista2").append(listItem);
                    }

                }

            });
            $( "#lista1, #lista2,#lista3" ).sortable({
             connectWith: "#lista1,#lista2,#lista3",
             dropOnEmpty:true
             }).disableSelection();

             $(document).on("click",".litem",function(){
                $("#infoDriver").show();

                $("#ime").html($(this).attr("name"));
                $("#prezime").html($(this).attr("fam"));
                $("#nacija").html($(this).attr("nat"));
                $("#roden").html($(this).attr("bir"));
                $("#urlVideo").html($(this).attr("ur"));
                $("#brojce").html($(this).attr("PN"));


             });


        });


    </script>
    <body>

        <ul id="lista1">


        </ul>

        <ul id="lista2">


        </ul>

        <ul id="lista3">


        </ul>

        <div id="infoDriver" style="display: none;">
            <div>ime:<p style="display:inline;" id="ime"></p></div>
            <div>prezime:<p style="display:inline;" id="prezime"></p></div>
            <div>roden:<p style="display:inline;" id="roden"></p></div>
            <div>permanentNumber:<p style="display:inline;" id="brojce"></p></div>
            <div>nacija:<p style="display:inline;" id="nacija"></p></div>
            <div>url:<p style="display:inline;" id="urlVideo"></p></div>
        </div>
        <div id="socialMedia">
           <a href="https://www.facebook.com/"><img src="vezba9-So Knigite/images/digg.png"></a>
            <img src="vezba9-So Knigite/images/facebook.png">
            <img src="vezba9-So Knigite/images/flickr.png">


        </div>


    </body>
</htm>