Make javascript happen in real time - javascript

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.

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.

Related

Position Content in a JS Reveal presentation using JQuery

I want to write a block of javascript or JQuery that will push all of my content 50 pixels to the right, if I set a variable, "tree," to true. So far, my R markdown document looks like this:
<script>
var tree = true;
if (tree===true){
$(document).ready(function(){
$("body").css(position,absolute);
$("body").css(left,left+50);
$("html").css(position,absolute);
$("html").css(left,left+50)
$("div.reveal").css(position,absolute);
$("div.reveal").css(left,left+50)
$("div.slides").css(position,absolute);
$("div.slides").css(left,left+50)
});
}
</script>
When I Knit the code, the content displays in the same position that it did without the javascript. Is it possible to push my content 50 pixels to the right using this method? If not, how else can I accomplish this? Any help will be very much appreciated!
If you want to stick to jQuery you could use margin-left:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var tree = true;
if (tree===true){
$(document).ready(function(){
$('.slides').css('margin-left', '50px');
});
}
</script>
From the following screenshot you can derive that all of the content (all slides) is contained within the div element that carries the class .slides:
With the script provided above the content moves the desired 50 pixels to the right (yellow area is the margin-left):

HTML elements touched each other [duplicate]

This question already has answers here:
jQuery/JavaScript collision detection
(7 answers)
Closed 8 years ago.
I have a button, and two HTML elements. After pressing the button, i called animate function from j query to start moving the first element to right and let two HTML elements get touched.
How i will detect that two HTML elements get touched?
Need Help. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").animate({
left:'250px',
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div id = "div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
<div id = "div2" style="background:#98bf21;height:100px;width:100px;position:absolute;left:50%;right:50%">
</div>
</body>
</html>
Your elements won't ever touch, because your selector $('div') which you are animating will animate both divs and move them both by the same amount. They will end up the same distance apart.
Also, you can't use <div2> as a tag name. Instead, use an id attribute to assign them a unique name, like this:
<div id="div1"></div>
<div id="div2"></div>
Then instead of animating $('div'), animate $('#div1').
You can first get the `left` position of `#div2` in pixels and use that value to animate the `right` position of `#div1` to exactly that spot, like this:
$(document).ready(function(){
// when the buttom is clicked
$('button').click(function(){
// get the left position of div2
var div2Left = $('#div2').position().left
// animate so that the right side of div1 matches div2's left
$('#div1').animate({
'right': div2Left + 'px',
});
});
});
--EDIT--
I misread your question, I thought you were asking how to get them to touch. If you want to detect that they have overlapped, you can use the step function of the animation to check if the right side of div1 crosses the left side of div2. Try this:
$(document).ready(function(){
// when the buttom is clicked
$('button').click(function(){
// get the left position of div2
var div2Left = $('#div2').position().left
// animate so that the right side of div1 matches div2's left
$('#div1').animate({
'right': '250px',
}, {
// this is called every step of the animation
step: function(currentRightPos) {
// check if collision occurs
if (currentRightPos >= div2Left) {
console.log('The divs collided!');
}
}
});
});
});

Trying to use basic Javascript to animate a div and make it bigger but have it grow smoothly

so here's my code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script src="main.js"></script>
</html>
javascript
var box = document.getElementById('box');
function changeColor() {
box.style.width = "600px";
box.style.height = "600px";
box.style.background = "red";
}
box.onclick = setInterval(changeColor, 5000);
As you can see it changes in a flash.
I have the box changing size and color but what i want it to do it gradually. I know its easy in Jquery but I'm trying to further my skills in Javascript, any advice would help, thanks guys and gals.
The basic premise behind javascript animation is recursion. The animating element needs to have 'frames', a single frame requires a timeout until it's next sequence, this is why recursion is beneficial.
Note: This function will not stop animating the div, you will need to put conditional code in to stop the setTimeout() being set.
function moveEl(el)
{
var left = parseInt(el.style.left) || 0;
el.style.position = 'relative';
el.style.left = (left + 1) + 'px';
// Recursive timeout to move the element left 1px every 20ms
setTimeout(function(){
moveEl(el);
}, 20);
}
var el = document.getElementById('box');
// Start the animation
moveEl(el);
jsFiddle Example
This should get you on the way to writing some custom animation code, though I would treat this very much as a learning exercise. jQuery's animation techniques are very powerful, cross browser compatible and are imo much more useful than any custom code I would cobble together to achieve the same effects.
Animating between colours:
To animate smoothly between the colours is a little trickier as you would, if using the above technique, require a load of hex colour codes between the two colours to smoothly transition from one to the other. Fortunately in modern browsers you can animate the opacity of one element down to zero whilst the solid colour of the element beneath appears as if one element has animated. Again jQuery has a number of ways to support IE7 and IE8 etc with its fadeIn() and fadeOut() functions.

Manually position an opentip tooltip in combination with Kinetic.js

I'm making a web application that uses Kinetic.js for some fancy
graphical functions, and I want to show a tooltip with some information about each element when the users hovers over it.
I've already figured out how to invoke a function on hover with Kinetic.js:
myKineticObject.on("mousemove", function() {
// Change content of tooltip depending on myKineticObject
// Set position of tooltip to cursor position
// Show tooltip
});
myKineticObject.on("mouseout", function() {
// Hide tooltip
}
I've decided to use the seemingly nice Opentip to show the tooltip.
The only problem is that Kinetic.js doesn't create any usable DOM elements to use as a target for opentip.
This is (roughly) what my HTML looks like:
<html>
<head><!-- Styles --></head>
<body>
<div id="container">
<canvas class = "kineticjs-buffer-layer">
<canvas class = "kineticjs-path-layer">
<canvas class = "myLayer1">
<canvas class = "myLayer2">
<!-- ... more layers -->
</div>
<!-- Scripts -->
</body>
</html>
Important to know is that these canvas elements all have the same width and height and stack on eachother. So they're unusable as targets.
So instead of using a DOM element to use as the target for my tooltip, I need to
manually show/hide and position the tooltip.
I've figured out how to do the showing and hiding like this:
var tooltip = new Opentip(
"div#container", //target element
"DummyContent", // will be replaced
"My Title", // title
{
showOn: null, // I'll manually manage the showOn effect
});
I now do the following:
myKineticObject.on("mousemove", function() {
tooltip.show();
});
myKineticObject.on("mouseout", function() {
tooltip.hide();
}
The only problem is that it just shows up at the top left of the page, and I can't find anything in the docs on how to position this thing manually.
Suggestions or ideas welcome. I'm also open to using a different tooltip library, if necessary.
Thanks!
It appears (with no knowledge of Opentip, besides a quick look at the docs) that you can set 'fixed' to true in the config. Since the target is null, the docs suggest fixed=true should make the tooltip appear at the mouse position, but not follow it once the mouse is moved around.
How does that sound?
I managed to solve the problem like this, for those of you who are looking for a solution too:
group.on("mousemove", function(event) {
tooltip.content = //change content
tooltip.show();
$("#opentip-1").offset({ left: event.offsetX, top: event.offsetY });
});

I have made a slide show in javascript but I don't know how to make my pics faze

My slideshow I've made with javascript changes the pictures really fast. I want to stop them from flashing to the next one and instead include more javascript to make the pics change slowly.
I looked this up on stackoverflow and others seem to use JQuery or something which I didn't understand too well. Is there any chance I could add some kind of delay to my javascript?
Here's what I have:
<html>
<head>
<script type="text/javascript">
var pics = new Array(10);
pics[0] = "images/pic1.jpg";
pics[1] = "images/pic2.jpg";
pics[2] = "images/pic3.jpg";
pics[3] = "images/pic4.jpg";
pics[4] = "images/pic5.jpg";
pics[5] = "images/pic6.jpg";
pics[6] = "images/pic7.jpg";
var c = 0;
var timer = 0;
function cyclePics() {
document.getElementById("pic1").src = pics[c];
c++;
if (c == 7) {
c = 0;
}
timer = setTimeout("cyclePics()", 2000);
}
</script>
</head>
<body onLoad="cyclePics()">
<div>
<img src="images/pic1.jpg" id="pic1"/>
</div>
</body>
</html>
jQuery makes this stuff easy.
function cyclePics() {
$("#pic"+c).animate({opacity:0}, 2000, function(){
c++;
if (c == 7) {
c = 0;
}
document.getElementById("pic1").src = pics[c];
$("#pic"+c).animate({opacity:1}, 2000, function(){ setTimeout(cyclePics, 2000) });
})
}
This code uses jQuery's animate method. You can use the call back functions to time stuff so it happens at the end of an animation.
Here's how it happens in order.
Fade #pic1 to 0 opacity
evaluate C and change the src of #pic1
fade #pic1 back in
setTimeout to call cyclePics again.
Heres what you can do without using a library such as JQuery. It´s pure CSS/Javascript.
You can read something on the internet about the transition animations. With transition you can make sure that a CSS-Property changes very slowly. For example you could do.
function nextImg(){
diaimg.style.opacity ="0";
window.setTimeout (
function(){
diaimg.style.opacity ="1";
document.images["urOBJ"].src = urArray[imgnr].src;
imgnr++;
if (imgnr>9){imgnr = 1;}
}, 500); // u can play a bit with this delay
}
function slider(){ //nextIMG will be called every 2000ms
IntervalID = setInterval("nextImg()", 2000);
}
This will first make the picure transparent, then define a new image, and then again move the opacity to 1. Now if u want it to be smooth you should include the CSS Code:
opacity: 1; transition: opacity 1s ease-in-out;
It´s not super fancy but it works.
If you want something better, you should read this article:
http://css-tricks.com/almanac/properties/t/transition/
If you really understand how this works you can do slide-In/Out effects aswell as Fade-In/Out effects
jQuery is a plugin for javascript that allows you to do all kinds of things, ranging from animation to manipulating html elements easily. In your case, jQuery is the way to go.
Add this to your html page:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Then go find a jQuery tutorial, and do yourself a favor and learn it thoroughly. Focus on the animate() function. jQuery alone should be all you need, but there are also some other extensions that make slideshows even easier. For example, slidesjs

Categories