CODEWITHSUNDEEP
javascriptjquery
aswathy
aswathy

Reputation: 395

Jquery-how to move some selectable div into left ,on click a button

I have some div which is selectable on click its .then i have two button the purpose of this button is when i select some div and click the left button the div moves left into 20px. The right button for the reverse process. my requirement is 1.after select the when i click left button the div move into 20px left (thats now working) 2. on second click it moves to 40px(means 20px from the current position) how can i do this?

        $("#key").click(function myfunction() {
            $("div.toGrab").css("padding-left", '');
            $("div.selected").css("padding-left", '20px');
        });
        $("#key1").click(function myfunction() {
            $("div.toGrab").css("padding-left", '');
            $("div.selected").css("padding-left", '0px');
        });
        $("div.toGrab").on("click", function () {
            $(this).toggleClass('selected');
        });
    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
    <meta charset="utf-8" />
    <title></title>
    
    <style>
        div{
            background-color:yellow;
            margin-top:20px;
        }
        div {

}
.selected {
  background: green;
}
    </style>
</head>
<body>
    <button id="key">left</button>
    <button id="key1">right</button>

    
    <div class='toGrab'>grand parent</div>
    <div class='toGrab'>parent</div>
    <div class='toGrab'>child</div>
    <div class='toGrab'>child</div>
    <div class='toGrab'>child</div>

Upvotes: 1

Views: 87

Answers (3)

frnt
frnt

Reputation: 8795

Try this,

$(document).ready(function(){
$(".toGrab").on("click", function () {
      $(this).toggleClass('selected');
});
$("#key").click(function(){
var sl = parseInt($(".selected").css("padding-left"));
$(".selected").css({
      paddingLeft : "+="+"20"
});
if(sl >= '100'){
      $(".selected").css({
      paddingLeft : 100
});
}
});
$("#key1").click(function(){
    $(".selected").css({
      paddingLeft : "-="+"20"
      });
   });
});

Upvotes: 2

Vanya Avchyan
Vanya Avchyan

Reputation: 880

Maybe this help you

Improved version

Shifts the element 20 pixels from the position where he was

function positioningSelectedItems(obj){
    var negative = obj.negative || false;
    var padding = obj.padding || 20;
    $("div.selected").each(function (key,val) {
        if(!negative)
            var spad = parseFloat($(val).css("padding-left"))+padding;
        else
            var spad = parseFloat($(val).css("padding-left"))-padding;
        $(val).css("padding-left", spad+'px')
    });
}

$("#key").click(function myfunction() {
    positioningSelectedItems({negative:false});
});
$("#key1").click(function myfunction() {
    positioningSelectedItems({negative:true});
});
$("div.toGrab").on("click", function () {
    $(this).toggleClass('selected');
});

Upvotes: 3

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

Keep a variable

(function($)){



    $("#key").click(function myfunction() {
        var position= parseInt($("div.toGrab").css("padding-left"));
        position+=20;
        $("div.toGrab").css("padding-left", '');
        $("div.selected").css("padding-left", position+'px');
    });
    $("#key1").click(function myfunction() {
         var position= parseInt($("div.toGrab").css("padding-left"));
        position -=20;
        $("div.toGrab").css("padding-left", '');
        $("div.selected").css("padding-left", position+'px');
    });
    $("div.toGrab").on("click", function () {
        $(this).toggleClass('selected');
    });
})($);

Upvotes: 1

Related Questions