I'm taking real simple examples from their documentation in one I re-size and re-position a photo. The re-size part works fine but it won't re-position.
Here's my code:
<head>
<meta charset="UTF-8">
<title>animate</title>
<style type="text/css">
#test { width: 100px; height: 100px; background-color: #f72; }
</style>
<!--CDN link for the latest TweenMax-->
**<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>**
</head>
<body>
**<div id="test"></div>
<img id="photo" src="Putin.jpg">**
<script>
**var photo = document.getElementById("photo");
TweenLite.to(photo, 2.5, {width:100}); // this works
TweenLite.to(photo, 4, {left:300}); // this does nothing
var thing = document.getElementById('test');
TweenLite.to(thing, 1, {left:200}); // this does nothing
TweenLite.to(thing, 1, {top:100}); // this does nothing**
</script>
</body>
you can run it here: http://www.jimslounge.com/gsap_test/
Updated:
I would always wait until the window has loaded before executing code that relies on a external libraries:
window.onload = function(){
var photo = document.getElementById("photo");
TweenMax.to(photo, 4, {x:300});
}
Secondly, you are loading the TweenMax library, so you need to use TweenMax instead of TweenLite
Thirdly, besides not quite being sure if you need to define your block as position absolute when not animating the padding or margin, you should definitely pass the x instead of left attribute
TweenMax.to(photo, 4, {x:300});
Give it a go and let me know if this helps
See a working example here:
http://jsfiddle.net/Hitbox/QbyCU/1/
Related
I have 2 textareas that needs to vertically resize together.
However, when mouse goes out of the control area, the function stops working correctly (it doesn't see the mousemove anymore).
What can I do to have the 2 textareas resize together even if the mouse is out of the control area?
$('#t').mousemove(function(){$('#b').css('height',$(this).css('height'));});
$('#b').mousemove(function(){$('#t').css('height',$(this).css('height'));});
textarea {
resize:vertical;
}
<script src="https://static.jsbin.com/js/vendor/jquery-1.11.0.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<textarea id="t"></textarea>
<textarea id="b"></textarea>
</body>
</html>
I know this does not answer your title's question, but it should achieve the same goal as your overall question. I would recommend looking at using a mutation observer instead of a mouse move listener. In this example
I created a helper function that takes a master and puppet element. It will observe the master for style (including height and width) changes and sets the puppet's width and height
The 6 that I subtract from the width and height seem to be the border + margin + padding of the textbox, you can likely compute that dynamically but for this demo I was only concerned with making them work with default styling.
function syncSize(master, puppet) {
// Create a temporary callback that uses the puppet and master
let sync = function() {
let width = master.offsetWidth - 6;
let height = master.offsetHeight - 6;
puppet.style.width = `${width}px`;
puppet.style.height = `${height}px`;
}
// Return a new observer with the callback that listens to the master
return new MutationObserver(sync).observe(master, {
attributes: true,
attributeFilter: ["style"]
});
}
syncSize(left, right);
syncSize(right, left);
<textarea id="left">Resize me</textarea>
<textarea id="right">I sync</textarea>
I would like to create a "smooth" scroll animation that slides down from one element to the next. I do not want to use Jquery or any libraries, just javascript and HTML. I have tried:
element.scrollIntoView();
This causes scrolling, but not a smooth animation. I have already looked at some other smooth-scrolling techniques, but they use Jquery. I would also like to add that the scrolling should be from ELEMENT on a page to another ELEMENT on the page. Scroll down only. Also only javascript function like function scrollFromHere(from, to).
I know this is an old answer, but for anyone looking for a solution in "modern times", scrollIntoView supports the behavior parameter:
element.scrollIntoView({
behavior: 'smooth'
});
Support for behavior: "smooth" is Chrome 61, Edge 79, Firefox 36, Safari 15.4.
So Safari is the only real issue for support, assuming you want to support more than just the latest major of Safari (as of 2022).
Never mind, I think I found an answer to my question. It took lots of searching, but here it is:
<div id="elem1"><button onclick="scrollToward('elem2', 'elem1');">Scroll Down</button></div>
<div id="elem2"></div>
<script>
//Here is my script:
function animate(elem,style,unit,from,to,time,prop) {
if( !elem) return;
var start = new Date().getTime(),
timer = setInterval(function() {
var step = Math.min(1,(new Date().getTime()-start)/time);
if (prop) {
elem[style] = (from+step*(to-from))+unit;
} else {
elem.style[style] = (from+step*(to-from))+unit;
}
if( step == 1) clearInterval(timer);
},25);
elem.style[style] = from+unit;
}
function scrollToward(ele, from) {
var target = document.getElementById(ele);
from = document.getElementById(from).offsetTop;
animate(document.body, "scrollTop", "", from, target.offsetTop, 1500, true);
}
</script>
Tested and works when you style the divs in a way that creates a scrollbar. Found the answer here.
!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="">
</div>
</body>
I am attempting to make a DIV fall when a piece of text is hovered upon. This is the original effect and this:
var $dropDiv = $('#dropDiv');
$('#holder p').on('hover', function () {
// Get position of clicked div
var offset = $(this).offset();
// Get dimensions of said div
var h = $(this).outerHeight();
var w = $(this).outerWidth();
// Get dimensions of dropping div
var dh = $dropDiv.outerHeight();
var dw = $dropDiv.outerWidth();
// Determine middle position
var initLeft = offset.left + ((w / 2) - (dw / 2));
// Animate drop
$dropDiv.css({
left: initLeft,
top: $(window).scrollTop() - dh,
opacity: 0,
display: 'block'
}).animate({
left: initLeft,
top: offset.top - dh,
opacity: 1
}, 800, 'easeOutBounce');
});
is my code. At first I thought it was a problem with my libraries, so I switched to the versions the fiddle has.
<script src="fall.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
The fiddle also had some CSS so I matched up to it
#holder {
position: absolute;
top: 200px;
left: 100px;
}
#dropDiv {
display: none;
position: absolute;
top: -20px;
background: #ccc;
}
I even checked the error console and there are no errors, but it still doesn't work. What am I doing wrong and how can I fix it? I am using Safari Version 5.1.10 and expect it to work for me and Chrome users at least.
This should be the order.
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="fall.js"></script>
try wrapping the code inside -
$(document).ready(function() {
//code here
});
It is possible that your javascript is not getting executed to to the problem of the same being run prior to the elements being loaded to the DOM
+
If your specified javascript is inside fall.js, since it uses jquery load the fall.js file after jquery.
Where have you include your code ? I had similar problem.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
YOUR HTML CODE
<script type="text/javascript"> your code</script>
or
<script src="fall.js"></script>
</body>
</html>
Include your jQuery code after the html code. bottom in tag
that should work
also put your code inside ready function
$(document).ready(function(){
your code here...
})
You need to take 2 Steps -
1) ORDERING - The js file/code using jquery lib. functions should always come jquery file is included
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="fall.js"></script>
2) ELEMENT SHOULD BE AVAILABLE IN DOM - Either the js/script should be the last thing in the body or use jquery dom ready event
(More Detail Here)
I can spot a little Javascript vs. CSS confusion here.
$('#holder p').on( 'mouseover', function() {
// code
});
You can use:
$(function(){
//you code here
})
Let's say I have a button and a big div. Upon the button being pressed, the code "appends" a new div inside the big div. That new div appended is then stuck on there because apparently, I didn't make the right code to make it live draggable?
Also, I'm trying to fix it so when they "appended"... that they aren't "stacked" going from up to down... maybe in a random place between the div...
http://jsbin.com/obizel/3/
Here's what I have so far...
Your libraries are our of kilter. I changed them from:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"</script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
to:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
So, it looks like you had a mismatch and you were loading the same library twice. All works when you change those lines.
I've updated your JSBin to get you started. Your libraries have been updated, too (out of order before).
Notice that your container(#box) must be positioned relatively because the draggable plugin makes your .new_boxes positioned absolutely. See the CSS for details.
The new JS :
$(document).ready(function () {
function createBox($parent, left, top) {
var $box = $('<div class="new_box">Hello world</div>');
$box.appendTo($parent);
$box.draggable({
containment: $parent,
grid: [10, 10]
});
$box.css({
left: left,
top: top
});
}
$(".add").click(function (e) {
var $container = $("#box"),
w = $container.width(),
h = $container.height();
createBox($container, Math.random() * w, Math.random() * h);
});
});
I have an HTML element that I need to track another element. Specifically, I need to have the top left and top right corners of both elements be positioned the same. When a window gets resized, the resize event gets triggered and I can adjust the position of the dependent element. However, if the element being tracked is repositioned (but not resized), I do not see any DOM event.
How can we find out if a DOM element has been moved? We are using the latest jQuery.
Here is a code sample.
Note that elementOne and mouseTracking divs are there to show elements that get moved for "some" reason that is outside the control of my code.
This code works for the elementOne case.
MouseTrackingTracker does not track a moving element.
ResizerTracker does not put the border around the complete text in the overflow case.
I would like the trackingDivs to move and resize no matter the reason for the tracked element's reasons for changing.
This code relies on the window resize being the hooked event. Hooking some event that fires when the element changes its dimensions is closer to what I need.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<style type="text/css">
#elementOne { float : right;width : 200px; display:inline-block}
#resizer { float : left; display:inline-block}
.trackedDiv { width:50px; height:50px; background-color: blue }
.trackingDiv { position:absolute; z-index: 1; border:3px green; border-style: solid;}
</style>
<script>
$(function() {
$( window ).bind("resize",function(){
$("#elementOne").trigger("reposition");
$("#mouseTracking").trigger("reposition");
$("#resizer").trigger("reposition");
});
var repositionFunction = function(selfish, element){
var self = $(selfish);
var offset = self.offset();
var selfTop = offset.top;
var selfLeft = offset.left;
var selfWidth = self.width();
var selfHeight = self.height();
$(element).css({
top: selfTop,
left: selfLeft,
width : selfWidth,
height : selfHeight
});
}
$(document).mousemove(function(ev){
$("#mouseTracking").position({
my: "left bottom",
of: ev,
offset: "3 -3",
collision: "fit"
});
});
var timedShort = function() {
$('#resizer').html("Really short").resize();
setTimeout(timedLong, 10000);
}
var timedLong = function() {
$('#resizer').html("Really longggggggggggggggggggggggggggggggggggggggggggggggggggg text").resize();
setTimeout(timedShort, 10000);
}
setTimeout(timedLong, 10000);
$("#elementOne").bind("reposition",
function() { repositionFunction(this, "#elementOneTracker"); });
$("#mouseTracking").bind("reposition",
function() { repositionFunction(this, "#mouseTrackingTracker"); });
$("#resizer").bind("reposition",
function() { repositionFunction(this, "#resizerTracker"); });
});
</script>
</head>
<body>
<div class="trackedDiv" id="mouseTracking">tracks mouse</div>
<div class="trackingDiv" id="mouseTrackingTracker"></div>
<div style="clear:both;"></div>
<div class="trackedDiv" id="resizer">resizer: resizes</div>
<div class="trackingDiv" id="resizerTracker"></div>
<div class="trackedDiv" id="elementOne">elementOne: floats to the right</div>
<div class="trackingDiv" id="elementOneTracker"></div>
</body>
</html>
You can fire custom events with jquery whenever you reposition the element.
$( window ).bind("resize",function(){
$("#elementOne").css({
top: 200,
left: 200
}).trigger("reposition");
});
// and now you can listen to a "reposition event"
$("#elementOne").bind("reposition",function(){
var self = $(this);
$("#elementTwo").css({
top: self.css("top"),
left: self.css("left")
});
});
So you can provide event hooks yourself with some manual coding, which is useful since cool events like DOMAttrModified and so on, are not fully supported in all browsers. The downside, you have to do it all yourself.
Unfortunately, there are no reliable events to tell you when an element moves or is resized. You could resort to polling the element, though that won't necessarily be the most performant solution:
setInterval(repositionElement, 10);
Another option is to make your element "track" the other element purely through CSS. For this to work, you'll need a "wrapper" around the element you're tracking, and the other element:
#wrapper-around-element-to-track
{
position: relative;
}
#tracked-element
{
position: absolute;
/* set top and left to position, if necessary */
}
#tracking-element
{
position: absolute;
/* set top and left to position, if necessary */
}
Since you're already using jQuery, you can also use the resize event plugin to simulate the resize event on any element, but if I recall the last time I looked at it, it simply does the polling like I mentioned.
There is the DOMAttrModified event, but its only impleneted in Firefox and Chrome. But as you need a JavaScript function to start the element moving, you can firing a custom event with Jquery in this place.