Naveen Yogi, Naveen Web Design, Web Designing: July 2016

Saturday 30 July 2016

How to transfer selected data from one div to another

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add, Remove, Clear Using jquery</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
    $( "#selectable" ).selectable();
} );
</script>
<script>
$( function() {
    $( "#second-box1" ).selectable();
} );
</script>
<script>
$(document).ready(function(){
    $("#add").click(function(){
        $(".ui-selected").appendTo("#second-box1");
        $( "#second-box1" ).children().removeClass("ui-selected");
    });
});
</script>
<script>
$(document).ready(function(){
    $("#remove").click(function(){
        $(".ui-selected").appendTo("#selectable");
        $( "#selectable" ).children().removeClass("ui-selected");
    });
});
</script>
<script>
$(document).ready(function(){
    $("#clear").click(function(){
        $("#second-box1").children().appendTo("#selectable");

    });
});
</script>

<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#selectable li { margin: 3px; padding: 0.4em; }
#second-box1 .ui-selecting { background: #FECA40; }
#second-box1 .ui-selected { background: #F39814; color: white; }
#second-box1 li { margin: 3px; padding: 0.4em; list-style: none;}
.box-two {border: 1px solid #9d9d9d; margin-top: 10px; min-height: 311px; padding: 20px;}

</style>
</head>
<body>

<div class="container">
<div class="row">
          <div class="col-xs-4">
            <button id="add" class="btn btn-default" type="button">Add </button>
          </div>
          <div class="col-xs-4 text-center">
            <button id="clear" class="btn btn-default" type="button">Clear Section</button>
          </div>
          <div class="col-xs-4 text-right">
            <button id="remove" class="btn btn-sign-default" type="button">Remove</button>
          </div>
          </div>
          <div class="row">
                    <div class="col-xs-6">
                        <div class="box-two" id="first-box1">
                            <ol id="selectable">
                            <li class="ui-widget-content grey">Create Users</li>
                            <li class="ui-widget-content grey">Edit Users</li>
                            <li class="ui-widget-content grey">Delete Users</li>
                            <li class="ui-widget-content grey">Create Jobs</li>
                            <li class="ui-widget-content grey">Edit Jobs</li>
                            <li class="ui-widget-content grey">Delete Jobs</li>
                            <li class="ui-widget-content grey">View Jobs</li>
                            <li class="ui-widget-content grey">View Users</li>
                            <li class="ui-widget-content grey">View Applicants</li>
                            </ol>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="box-two" id="second-box1">

                        </div>
                    </div>
          </div>
</div>
</body>
</html>

Wednesday 20 July 2016

How to show and hide div elements based on dropdown selection in jQuery

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery Show Hide Using Select Box</title>
    <style type="text/css">
        .hd1{
            padding: 20px;
            display: none;
            margin-top: 20px;
            border: 1px solid #000;
            background: #ff0000;
        }
   </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("select").change(function(){
            $(this).find("option:selected").each(function(){
                if($(this).attr("value")=="1"){
                    $(".hd1").show();
                }
                else{
                    $(".hd1").hide();
                }
            });
        }).change();
    });
    </script>
    </head>
    <body>
        <div>
            <select>
                <option>Choose Color</option>
                <option value="1">Red</option>
                <option value="2">Green</option>
                <option value="3">Blue</option>
            </select>
        </div>
        <div class="hd1">You have selected <strong>red option</strong> so i am here</div>
    </body>
</html>

Monday 18 July 2016

How to page scroll smoothly on click

Friday 8 July 2016

Rounding planet in galaxy css design

<html>
<head>
<title>Galaxy</title>
<style>
body{background-image: url("images/galaxy.jpg");background-size: 100% auto;}
.main-outer{position: absolute;height:100px;width:100px;left:calc(50% - 50px);top:calc(50% - 50px);}
.main{position: relative;}

.center{width:100px;height:100px;border-radius: 50%;position:absolute;top:0;left:0;}
.round{position:absolute;top:12px;left:12px;height:76px;width:76px;border-radius: 50%;}
.round1{position:absolute;top:20px;left:20px;height:60px;width:60px;border-radius: 50%;}
.round2{position:absolute;top:10px;left:10px;height:80px;width:80px;border-radius: 50%;}
.round3{position:absolute;top:25px;left:25px;height:50px;width:50px;border-radius: 50%;}
.round4{position:absolute;top:15px;left:15px;height:70px;width:70px;border-radius: 50%;}
.round5{position:absolute;top:27px;left:27px;height:46px;width:46px;border-radius: 50%;}
.round6{position:absolute;top:17px;left:17px;height:66px;width:66px;border-radius: 50%;}
@keyframes myOrbit {
    from {     transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@keyframes myOrbit1 {
    from {     transform: rotate(0deg) translateX(200px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}
@keyframes myOrbit2 {
    from {     transform: rotate(0deg) translateX(250px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(250px) rotate(-360deg); }
}
@keyframes myOrbit3 {
    from {     transform: rotate(0deg) translateX(300px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(300px) rotate(-360deg); }
}
@keyframes myOrbit4 {
    from {     transform: rotate(0deg) translateX(350px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(350px) rotate(-360deg); }
}
@keyframes myOrbit5 {
    from {     transform: rotate(0deg) translateX(400px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(400px) rotate(-360deg); }
}
@keyframes myOrbit6 {
    from {     transform: rotate(0deg) translateX(450px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(450px) rotate(-360deg); }
}
.round{animation: myOrbit 4s linear infinite;}
.round1{animation: myOrbit1 6s linear infinite;}
.round2{animation: myOrbit2 3s linear infinite;}
.round3{animation: myOrbit3 7s linear infinite;}
.round4{animation: myOrbit4 5s linear infinite;}
.round5{animation: myOrbit5 3.5s linear infinite;}
.round6{animation: myOrbit6 5.5s linear infinite;}

.border{border:1px dotted #111129;position:absolute;border-radius: 50%}
.b{width:300px;height:300px;top:calc(50% - 150px);left:calc(50% - 150px);}
.b1{width:400px;height:400px;top:calc(50% - 200px);left:calc(50% - 200px);}
.b2{width:500px;height:500px;top:calc(50% - 250px);left:calc(50% - 250px);}
.b3{width:600px;height:600px;top:calc(50% - 300px);left:calc(50% - 300px);}
.b4{width:700px;height:700px;top:calc(50% - 350px);left:calc(50% - 350px);}
.b5{width:800px;height:800px;top:calc(50% - 400px);left:calc(50% - 400px);}
.b6{width:900px;height:900px;top:calc(50% - 450px);left:calc(50% - 450px);}

.round img, .round1 img, .round2 img, .round3 img, .round4 img, .round5 img, .round6 img, .center img{height:auto;width:100%;}

</style>

</head>
<body>

<div class="border b"></div>
<div class="border b1"></div>
<div class="border b2"></div>
<div class="border b3"></div>
<div class="border b4"></div>
<div class="border b5"></div>
<div class="border b6"></div>

<div class="main-outer">
<div class="main">
<div class="center"><img src="images/sun.png"></div>

<div class="round">
        <img src="images/mercury.png">
</div>
<div class="round1">
        <img src="images/venus.png">
</div>
<div class="round2">
        <img src="images/earth.png">
</div>
<div class="round3">
        <img src="images/marsh.png">
</div>
<div class="round4">
        <img src="images/Jupiter.png">
</div>
<div class="round5">
        <img src="images/Saturn.png">
</div>
<div class="round6">
        <img src="images/uranus.png">
</div>
</div>
</div>
</body>
</html>

Saturday 2 July 2016

How to custom design a file upload button

<html>
<head>
<style>
.upl-btn {
    background: rgba(0, 0, 0, 0) url("http://www.udrivecover.com/wp-content/themes/udrive/assets/img/btn-bg.jpg") repeat scroll center center;
    border: 2px solid #3ea4dc !important;
    border-radius: 8px !important;
    cursor: pointer;
    float: right;
    height: 26px;
    padding: 3px 0;
    transition: all 0.3s ease 0s;
    width: 100px;
}
.upl-btn::before {
    content: "Upload Image";
    font-size: 11px;
    margin-left: 14px;
    position: absolute;
}
.upl-file {
    cursor: pointer;
    opacity: 0;
    text-align: right;
}
</style>
</head>
<body>
<div class="upl-btn">

<input id="upload" type="file" class="upl-file" >

</div>
</body>
</html>

How to custom style on check box

<html>
<head>
<style>
.item-label::before {
    border: 1px solid #000000;
    content: "";
    height: 22px;
    left: 0;
    position: absolute;
    width: 22px;
}
.item-label::after {
    background-image: url("https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/checkmark-24-128.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    display: none;
    height: 19px;
    left: 2px;
    position: absolute;
    top: 0;
    width: 19px;
}
input[type="checkbox"]:checked + .item-label::after {
    display: block;
}
</style>

</head>
<body>
<label>
<input type="checkbox">
<span class="item-label">demo</span>
</label>
</body>

</html>

Friday 1 July 2016

How to show file name in pop up when user selected a file

<!DOCTYPE html>
<html>
<body>

<input type="file" id="myFile" multiple size="50">


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $('input[type="file"]').change(function(e){

            var fileName = e.target.files[0].name;

            alert('The file "' + fileName + '" has been selected.');

        });

    });

</script>

</body>
</html>

How to show file name when user select a file

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">

<p id="demo"></p>

<script>
function myFunction(){
    var x = document.getElementById("myFile");
    var txt = "";
    txt += x.value;
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

------------------------------------------------------or-----------------------------------------------------------

<!DOCTYPE html>
<html>
<body>

<input type="file" id="myFile" multiple size="50">

<p id="demo"></p>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $('input[type="file"]').change(function(e){

            var fileName = e.target.files[0].name;

           document.getElementById("demo").innerHTML = fileName;

        });

    });

</script>

</body>
</html>

Pages

Saturday 30 July 2016

How to transfer selected data from one div to another

Wednesday 20 July 2016

How to show and hide div elements based on dropdown selection in jQuery

Monday 18 July 2016

How to page scroll smoothly on click

Friday 8 July 2016

Rounding planet in galaxy css design

Saturday 2 July 2016

How to custom design a file upload button

How to custom style on check box

Friday 1 July 2016

How to show file name in pop up when user selected a file

How to show file name when user select a file

How to show file name when user select a file

About Me

Blog Archive