Develop Reference

Animate image arrow like speedometer in JS

I have this current UI
The arrow image is just a transparent image.
I'm trying to add animation on that image.
it will just move from low to high for every page reload / after the page being loaded.
My idea to do this is using jquery
I'm playing around with this code
<img class="meter-arrow" src="{!! url('public/images/arrow.png') !!}" >
<script src="{{url('public/js/libraries/jquery_file_3_1.js')}}"></script>
<script>
$(".meter-arrow").animate({left: '250px'});
</script>
Source: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1
Is it possible to do this

It is strangely quite hard to animate a rotation using jQuery. See here about how.
I think it is easier in plain JS:
// The image element
let arrow = document.querySelector(".arrow")
// It onload --rotation value
let rotation = parseInt(getComputedStyle(arrow).getPropertyValue("--rotation"))
// Rotation on an interval
let increase = setInterval(function(){
rotation = (rotation>25) ? clearInterval(increase) : rotation+1
arrow.style.setProperty("transform", `rotate(${rotation}deg`)
},20)
.arrow{
--rotation: -90deg;
margin: 5em;
height: 160px;
width: 150px;
transform: rotate(var(--rotation));
transform-origin: 68px 118px; /* the position of the rotation point in the image */
}
<img src="https://i.imgur.com/crRJmHg.png" class="arrow">

Animations like this are also possible through CSS. See this StackBlitz example.
Reference of tranfsorm
https://www.w3schools.com/cssref/css3_pr_transform.asp

Finding where element meets top of scrollable div

I have a scrollable div container fits multiple "pages" (or div's) inside of it's container.
My goal is to, at any given moment, figure out where inside my red container does it reach the top of my scrollable container. So it can be a constant on scroll event, or a button that triggers this task.
So for example. If I have a absolute div element inside one of my red boxes at top:50px. And if I scroll to where that div element reaches the top of my scrollable container. The trigger should say that I am at 50px of my red container.
I'm having a hard time grasping how to accomplish this but I've tried things like:
$("#pageContent").scroll(function(e) {
console.log($(this).scrollTop());
});
But it doesn't take into account the separate pages and I don't believe it it completely accurate depending on the scale. Any guidance or help would be greatly appreciated.
Here is my code and a jsfiddle to better support my question.
Note: If necessary, I use scrollspy in my project so I could target which red container needs to be checked.
HTML
<div id="pageContent" class="slide" style="background-color: rgb(241, 242, 247); height: 465px;">
<div id="formBox" style="height: 9248.627450980393px;">
<div class="trimSpace" style="width: 1408px; height: 9248.627450980393px;">
<div id="formScale" style="width: 816px; -webkit-transform: scale(1.7254901960784315); display: block;">
<form action="#" id="XaoQjmc0L51z_form" autocomplete="off">
<div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_1">
<div class="formContent">
<div class="formBackground">
<div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">When this reaches the top, the "trigger" should say 50px"</div>
</div>
</div>
</div>
<div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_2">
<div class="formContent">
<div class="formBackground"><div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">This should still say 50px</div></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
CSS
#pageContent {
position:relative;
padding-bottom:20px;
background-color:#fff;
z-index:2;
overflow:auto;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#formBox {
display: block;
position: relative;
height: 100%;
padding: 15px;
}
.trimSpace {
display: block;
position: relative;
margin: 0 auto;
padding: 0;
height: 100%;
overflow: hidden;
}
#formScale::after {
display: block;
content:'';
padding-bottom:5px;
}
#formScale {
position:relative;
width:816px;
margin:0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform-origin: 0 0;
}
.formContainer {
position:relative;
margin : 0 auto 15px auto;
padding:0;
}
.formContent {
position:absolute;
width:100%;
height:100%;
}
.formBackground {
width:100%;
height:100%;
background-color:red;
}
JS
var PAGEWIDTH = 816;
$(window).resize(function (e) {
zoomProject();
resize();
});
function resize() {
$("#pageContent").css('height', window.innerHeight - 45 + 'px');
}
function zoomProject() {
var maxWidth = $("#formBox").width(),
percent = maxWidth / PAGEWIDTH;
$("#formScale").css({
'transform': 'scale(' + percent + ')',
'-moz-transform': 'scale(' + percent + ')',
'-webkit-transform': 'scale(' + percent + ')',
'-ms-transform': 'scale(' + percent + ')'
});
$(".trimSpace").css('width', (PAGEWIDTH * percent) + 'px');
$("#formBox, .trimSpace").css('height', ($("#formScale").height() * percent) + 'px');
}
zoomProject();
resize();
EDIT:
I don't think I am conveying a good job at relaying what I want to accomplish.
At the moment there are two .formContainer's. When I scroll #pageContainer, the .formContainer divs move up through #pageContainer.
So what I want to accomplish is, when a user clicks the "ME" button or #click (as shown in the fiddle below), I'd like to know where in that particular .formContainer, is it touching the top of #pageContainer.
I do use scroll spy in my real world application so I know which .formContainer is closest to the top. So if you just want to target one .formContainer, that is fine.
I used these white div elements as an example. If I am scrolling #pageContainer, and that white div element is at the top of screen as I am scrolling and I click on "ME", the on click trigger should alert to me that .formContainer is touching the top of #pageContainer at 50px from the top. If, the the red container is just touching the top of #pageContainer, it should say it is 0px from the top.
I hope that helps clear up some misconception.
Here is an updated jsfiddle that shows the kind of action that I want to happen.

I am giving this a stab because I find these things interesting. It might just be a starting point since I have a headache today and am not thinking straight. I'd be willing to bet it can be cleaned up and simplified some.
I also might be over-complicating the approach I took, getting the first visible form, and the positioning. I didn't use the getBoundingClientRect function either.
Instead, I approached it trying to account for padding and margin, using a loop through parent objects up to the pageContent to get the offset relative to that element. Because the form is nested a couple levels deep inside the pageContent element you can't use position(). You also can't use offset() since that changes with scroll. The loop approach allowed me to factor the top margin/padding in. I haven't looked at the other solutions proposed fully so there might be a shorter way to accomplish this.
Keeping in mind that the scale will affect the ACTUAL location of the child elements, you have to divide by your scale percentage when getting the actual location. To do that I moved the scalePercentage to a global var so it was usable by the zoom function and the click.
Here's the core of what I did. The actual fiddle has more logging and junk:
var visForm = getVisibleForm();
var formTop = visForm.position().top;
var parents = visForm.parentsUntil('#pageContent');
var truOffset = 0;
parents.each(function() {
truOffset -= $(this).position().top;
});
// actual location of form relative to pageContent visible pane
var formLoc = truOffset - formTop;
var scaledLoc = formLoc / scalePercent;
Updated Fiddle (forgot to account for scale in get func): http://jsfiddle.net/e6vpq9c8/5/

If I understand your question correctly, what you want is to catch when certain descendant elements reach the top of the outer container, and then determine the position of the visible "page" (div with class formContainer) relative to the top.
If so, the first task is to mark the specific elements that could trigger this:
<div class='triggerElement' style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">When this reaches the top, the "trigger" should say 50px"</div>
Then the code:
// arbitrary horizontal offset - customize for where your trigger elements are placed horizontally
var X_OFFSET = 100;
// determine once, at page load, where outer container is on the page
var outerContainerRect;
$(document).ready(function() {
outerContainerRect = $("#pageContent").get(0).getBoundingClientRect();
});
// when outer container is scrolled
$("#pageContent").scroll(function(e) {
// determine which element is at the top
var topElement = $(document.elementFromPoint(outerContainerRect.left+X_OFFSET, outerContainerRect.top));
/*
// if a trigger element
if (topElement.hasClass("triggerElement")) {
// get trigger element's position relative to page
console.log(topElement.position().top);
}
*/
var page = topElement.closest(".formContainer");
if (page.length > 0) {
console.log(-page.get(0).getBoundingClientRect().top);
}
});
EDIT: Changed code to check formContainer elements rather than descendant elements, as per your comment.
http://jsfiddle.net/j6ybgf58/23/
EDIT #2: A simpler approach, given that you know which formContainer to target:
$("#pageContent").scroll(function(e) {
console.log($(this).scrollTop() - $("#xzOwqphM4GGR_1").position().top);
});
http://jsfiddle.net/rL4Ly3yy/5/
However, it still gives different results based on the size of the window. This seems unavoidable - the zoomProject and resize functions are explicitly resizing the content, so you would have to apply the inverse transforms to the number you get from this code if you want it in the original coordinate system.

I do not fully understand what it is that you are needing, but if i am correct this should do the trick
$("#pageContent").scroll(function(e) {
// If more then 50 pixels from the top has been scrolled
// * if you want it to only happen at 50px, just execute this once by removing the scroll listener on pageContent
if((this.scrollHeight - this.scrollTop) < (this.scrollHeight - 50)) {
alert('it is');
}
});
ScrollHeight is the full height of the object including scrollable pixels.
ScrollTop is the amount of pixels scrolled from the top.

You can use waypoints to detect the position of divs based on where you're scrolling.
Here is a link to their official website's example: http://imakewebthings.com/waypoints/shortcuts/inview/

Animation synching, cursor and highlight

So I almost have my code working how I want, but can't get my animation synched together just right. I am trying to animate a cursor highlighting text, and then clicking on a button. The problem is that the cursor is either too slow or too fast. I am trying to make this dynamic so that no matter how long the text is I can still have the animation synch. I know that it is probably just a math issue, but can't quite get my head around it. Something about trying to match pixels with milliseconds is making my head spin. Please help before I pull out all my hair. Thanks.
Here is the html
<p><span id="container">I need to be highlighted one character at a time</span>
<input id="click" type="button" value="click me"/></p>
<img src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>
Here is the CSS
#container{
font-size: 16px;
margin-right: 10px;
}
.highlight{
background: yellow;
}
img{
position: relative;
top: -10px;
}
And the javascript
function highlight(){
var text = $('#container').text(); //get text of container
$('#click').css('border','none'); //remove the border
$('img').css('left', '0px'); //reset the cursor left
$('img').animate({left: $('#container').width() + 40}, text.length*70); //animation of cursor
$('#container').html('<span class="highlight">'+text.substring(0,1)+'</span><span>'+text.substring(1)+'</span>'); //set the first html
(function myLoop (i) {//animation loop
setTimeout(function () {
var highlight = $('.highlight').text();
var highlightAdd = $('.highlight').next().text().substring(0,1);;
var plain = $('.highlight').next().text().substring(1);
$('#container').html('<span class="highlight">'+highlight+highlightAdd+'</span><span>'+plain+'</span>');
if (--i) myLoop(i);// decrement i and call myLoop again if i > 0
}, 70)
})(text.length);
setTimeout(function () {
$('#click').css('border','1px solid black');
}, text.length*85);
}
highlight();
var intervalID = setInterval(highlight, $('#container').text().length*110);
//clearInterval(intervalID);
Here is a link to the fiddle I have been playing around in.

This will probably get me down voted but maybe you will get some better idea...
Fiddle Here
$(document).ready(function() {
$('p').click(function(){
$('span').animate({'width':'100'},1000);
$('.cursor').animate({marginLeft: 100},1000);
});
});

Thanks to Dejo, I was able to modify my code to make this work exactly as I wanted. It was much easier to increase the width of one span rather than trying to expand one span while shrinking another. This also allowed me to have both the cursor moving and the span width increasing animations run in sync.
The HTML
<p><span id="highlight"></span><span id="container">I need to be highlighted one character at a time</span><input id="click" type="button" value="click me"/></p>
<img id="cursor" src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>
The CSS
p{
position: relative;
font-size: 16px;
}
#highlight{
position: absolute;
background-color:yellow;
height:20px;
z-index:-50;
}
#cursor{
position: relative;
top: -10px;
}
#click{
margin-left; 10px;
}
And the javascript
function highlight(){
var textLength = $('#container').text().length;
$('#click').css('border','none'); //remove the border
$('#cursor').css('left', '0px'); //reset the cursor left
$('#highlight').width(0);
$('#highlight').animate({width: $('#container').width()}, textLength * 70);
$('#cursor').animate({left: '+='+$('#container').width()} , textLength * 70, function(){
$('#cursor').animate({left: '+=30'} , textLength * 20);
});
setTimeout(function () {
$('#click').css('border','1px solid black');
}, textLength*100);
}
highlight();
var intervalID = setInterval(highlight, $('#container').text().length*120);
//clearInterval(intervalID);

I realize it's quite a bit late, but here's a bit of help (for future reference).
The JQuery animate function is, by default, set an easing of swing, which means that the speed of the animation will vary throughout (see here).
To (kind of) fix the problem, I added the linear option to the animate method for the cursor, and increased its speed slightly.
You can see this new version at JSFiddle.
However, since the setTimeout loop can be slowed for some reasons, the animation may not be in sync.

Slide gallery with image tooltips, images breaking out of unlimited width block

I'm trying to develop a slide gallery with image tooltips according to this design:
What I need to develop is a slider controlled by two buttons, each time a button is pressed the slider's content must move a width of the slider or the width of the content left on that side, whichever is smaller. Upon mouse entering an image inside the slider the full-size version must be displayed as a tooltip.
Here's a fiddle of my solution so far, the problem I'm having is that images that don't fully fit into view plus the hidden area to the left get moved to a new line. You can see the problem by clicking the
"Show content size" button, the width of the content element will be equal to the width of the container element + content element's margin-left.
Bonus points if you can suggest an algorithm for moving the content to the right, I've got left figured out to a T (or so I think, anyway), but right is going to take a little more work (it doesn't check whether the end of the content has been reached). Update: It seems I can't implement proper movement to the right until the other issue is resolved, here's the algorithm I came up with, I can't measure "left to display" if I can't measure the actual width of the content element.

I created something you might like:
gallery demo
The gallery does not scroll the full gallery width by default (you can change that) cause some initially cut-off images at the right side, after a 'full' slide would result cut-off again, just on the other side of our gallery. You have for that cause the beKind variable. Adjust it as you like.
It hides the buttons if there's not enough content to make the gallery usable.
The gallery calculates the remaining space to scroll.
Once the slider end reached - the left/right buttons make the gallery jump to the beginning/end, so that are always usable. (Seems kinda weird to have a button... but that does nothing right? ;) )
The Tooltip has a hover-intent built in, to not piss off our users if they unintentionally hovered our gallery: (the tooltip fades in if the hover is registered for more that 120ms. Fair timing. I like it.)
As pointed out in your comment now the tooltip will not go off the screen.
jQ:
// Slide Kind Gallery - by roXon // non plugin v. // CC 2012.
$(window).load(function(){
var galW = $('#gallery').outerWidth(true),
beKind = 120, // px substracted to the full animation to allow some images to be fully visible - if initially partly visible.
sumW = 0;
$('#slider img').each(function(){
sumW += $(this).outerWidth(true);
});
$('#slider').width(sumW);
if(sumW <= galW){ $('.gal_btn').remove(); }
function anim(dir){
var sliderPos = Math.abs($('#slider').position().left),
rem = dir ==='-=' ? rem = sumW-(sliderPos+galW) : rem = sliderPos,
movePx = rem<=galW ? movePx = rem : movePx = galW-beKind;
if( movePx <= 10){
movePx = dir==='-=' ? movePx=rem : movePx = galW-sumW;
dir = '';
}
$('#slider').stop(1).animate({left: dir+''+movePx },1000);
}
$('.gal_btn').on('click', function(){
var doit = $(this).hasClass('gal_left') ? anim('+=') : anim('-=');
});
});
And the tooltip script:
// Addon // Tooltip script
var $tt = $('#tooltip');
var ttW2 = $tt.outerWidth(true)/2;
var winW = 0;
function getWW(){ winW = $(window).width(); }
getWW();
$(window).on('resize', getWW);
$('#slider img').on('mousemove',function(e){
var m = {x: e.pageX, y: e.pageY};
if( m.x <= ttW2 ){
m.x = ttW2;
}else if( m.x >= (winW-ttW2) ){
m.x = winW-ttW2;
}
$tt.css({left: m.x-ttW2, top: m.y+10});
}).hover(function(){
$clon = $(this).clone();
var t = setTimeout(function() {
$tt.empty().append( $clon ).stop().fadeTo(300,1);
},120);
$(this).data('timeout', t);
},function(){
$tt.stop().fadeTo(300,0,function(){
$(this).hide();
});
clearTimeout($(this).data('timeout'));
});
HTML
(Place the #tooltip div after the body tag)
<div id="tooltip"></div>
<div id="gallery_container">
<div id="gallery">
<div id="slider">
<img src="" alt="" />
<img src="" alt="" />
</div>
</div>
<div class="gal_left gal_btn">◀</div>
<div class="gal_right gal_btn">▶</div>
</div>
CSS:
/*GALLERY*/
#gallery_container{
position:relative;
margin:0 auto;
width:600px;
padding:0 30px; /*for the buttons */
background:#eee;
border-radius:5px;
box-shadow: 0 2px 3px #888;
}
#gallery{
position:relative;
height:100px;
width:600px;
overflow:hidden;
}
#slider{
position:absolute;
left:0px;
height:100px;
}
#slider img{
height:100.999%; /* fixes some MOZ image resize inconsistencies */
float:left;
cursor:pointer;
border-right:3px solid transparent; /* instead of margin that could leat to some wrong widths calculations. */
}
.gal_btn{
position:absolute;
top:0px;
width:30px; /*the container padding */
height:40px;
padding:30px 0;
text-align:center;
font-size:30px;
cursor:pointer;
}
.gal_left{left:0px;}
.gal_right{right:0px;}
/* end GALLERY */
/* TOOLTIP ADDON */
#tooltip{
position:absolute;
z-index:100;
width:300px;
padding:10px;
background:#fff;
background: rgba(255,255,255,0.3);
box-shadow:0px 3px 6px -2px #111;
display:none;
}
#tooltip *{
width:100%;
vertical-align:middle;
}
/* end TOOLTIP ADDON */
Hope you'll like it, and you learned some useful UI design tricks.
By the way, if you want to populate your ALT attributes (Search engines like it!) you can also grab that text and make it appear inside the tooltip like here!:
demo with text inside the tooltip
Happy coding.

I don't know if I understand correctly your problem. If you set a width wide enough to .scroll-content div, images wouldn't go to the "next line". So a solution would be to set a width with css. If not, you could use jquery to determine the total width of all the images and give it to the .scroll-content div. Calculate total width of Children with jQuery

DIV dynamically resizing using vertical slide

This is a little hard to explain, but I'm going to do my best:
My webpage is divided using two divs: one floating at left, and other floating at right (50% each one more or less).
I want to add a new feature: dynamically resize. That is: when I click on right border of DIV#1 or click on left border of DIV#2, each one should resize from left to right or right to left.
Maybe you don't understand me, but this effect is what I need (from this plugin):
This plugin only works for images, not divs. I need the same effect on my divs. Actually, I'm trying to use JQueryUI Resizable class but I don't know how to synchronize both resizes.
Can you help me? Any suggestion or track about this would be really appreciated. Thanks!

I created this functionality using 15 lines of JS/jQ: http://jsfiddle.net/xSJcz/
Hope it helps! You could easily modify it to respons to click, or similar.
EDIT: For future records, here is the answer's CSS:
#left,#right{
border:1px solid #aaa;
float:left;
height:100px;
width:48%;
}
#handle{
background:#000;
float:left;
height:100px;
margin:1px;
width:1%;
}
HTML:
<div id="left">
Left
</div>
<div id="handle"></div>
<div id="right">
Right
</div>
JS:
var h = $('#handle'),
l = $('#left'),
r = $('#right'),
w = $('body').width() - 18;
var isDragging = false;
h.mousedown(function(e){
isDragging = true;
e.preventDefault();
});
$(document).mouseup(function(){
isDragging = false;
}).mousemove(function(e){
if(isDragging){
l.css('width', e.pageX);
r.css('width', w - e.pageX);
}
});