CODEWITHSUNDEEP
javascriptdom
user1976322
user1976322

Reputation: 37

Make javascript happen in real time

I have made a circle from a div with rounded borders. I have made this div draggable using jquery ui. I would like to know how to make it so that the further to the left you drag the div the less opacity it has. Heres a snippet of what i have coded already:

<script type="text/javascript" language="javascript">

$(function() {
    $( "#circle" ).draggable();
  });

  var circ = document.getElementById('circle');
  var num = circ.style.left/1000;



</script>
</head>

<body>
<div id="circle"></div>


<script type="text/javascript">circ.style.opacity = num;</script>
</body>
</html>

I know i can get this to work by putting the circ.style.opacity = num; into a function and calling that function but i was wondering if there was a way for it to just automatically change? Thanks for your help.

Upvotes: 0

Views: 80

Answers (1)

pete
pete

Reputation: 25081

As others have already suggested, simply calculate your opacity in the drag callback and set the opacity. The drag callback is called continously until the drag stops. This is how the "live" update works.

Example:

$('#circle').draggable({
    "drag": function (e, ui) {
        var percentOpacity = someVal; //compute this however you like
        $(this).css('opacity', percentOpacity);
    }
});

Working Demo: http://jsfiddle.net/gzA8w/

In the working demo, I am simply calculating the opacity as a function of how many pixels the element is from the right edge of the document. The further left you go, the more transparent it gets.

Upvotes: 1

Related Questions