We Keep Coding

Dynamic transform style property while scrolling

I'm in a blind spot with my small jQuery script.
The point is that I'm trying to make an element to rotate, and to apply the rotation value dynamically as the user is scrolling through the page.
It works here on stackoverflow but I can't get this to work on my website...
The only external library I'm using is JQuery.
Can you please tell me where is the problem?
var $animObject = $('.animateObject');
var $window = $(window);
$window.on('scroll', function() {
var fromTop = $window.scrollTop() / -4;
$animObject.css('transform', 'rotate(' + fromTop + 'deg)')
});
.header {
width: 100%;
height: 100vh;
background-image: url('https://simply-design.ml/dev/img/start1.jpg');
display: flex;
justify-content: center;
align-items: center;
}
.header-content {
padding: 30px;
max-width: 470px;
}
.header-wrapper {
padding: 50px;
border: solid 3px #fff;
}
.header h1 {
font-size: 30px;
color: #fff;
text-align: center;
}
.header p {
font-size: 20px;
color: #fff;
text-align: center;
}
.p-title {
font-size: 14px;
color: #fff;
}
.head-button {
padding: 10px 25px;
background-color: #3b88df;
color: #fff;
font-size: 20px;
cursor: pointer;
font-family: 'Source Sans Pro', sans-serif;
}
.head-button:hover {
background-color: #2c78ce;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header class="header">
<div class="header-content">
<center>
<div class="header-wrapper animateObject">
<h1>title</h1>
<div style="height: 2px; width: 70px; background-color: #fff; margin: 20px;"></div>
<p>subtitle</p>
</div>
</center>
</div>
</header>
<div style="height: 1000px"></div>

Check this example I've made without jQuery, which shows how to rotate an element based on the scroll position of the window, but only once the element is in view.
I've decided to do this without jQuery because it's better for performance, working directly with the DOM instead of passing through jQuery, and also because it's relatively simple code, understandable.
Find out how much was scrolled
Get the target's element absolute position
Calculate if the element is within the viewport (if not, break)
If it's in, save the scroll value at that point
Subtract that value from the current scroll value to get the value from that point on
Use the new value as baseline for the transformation
var elm = document.querySelector('b');
var onScroll = (function(){
var startPos;
function run(){
var fromTop = window.pageYOffset,
rect = elm.getBoundingClientRect(),
scrollDelta;
// check if element is in viewport
if( (rect.top - window.innerHeight) <= 0 && rect.bottom > 0 )
startPos = startPos === undefined ? fromTop : startPos;
else{
startPos = 0;
return;
}
scrollDelta = (fromTop - startPos) * 1; // "speed" per scrolled frame
elm.style.transform = `translateX(${scrollDelta}px) rotate(${scrollDelta}deg)`;
console.clear();
console.log(scrollDelta);
}
run();
return run;
})()
window.addEventListener('scroll', onScroll);
html, body{ height:100%; }
body{ height:1500px; }
b{
position:fixed;
top: 20px;
left:20px;
width:100px;
height:100px;
background:red;
}
<b></b>
inspect the <b> element while scrolling and see that it only gets transform when it is in view.

Jquery mouseleave & mouseenter issue

How do I allow the user to click on the button that says "click me" appears on mouseenter of another button.
Here is the code -
<div class="hint"> ?</div>
<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>
$(document).ready(function() {
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
desc.hide();
});
});
Here is the Demo

Just Place the .desc inside the .hint.
Fiddle
For the basic tooltip, you want:
<div title="This is my tooltip">
For fancier tooltips, See this

Wrap your html with another div and add mouseenter and mouseleave event to this.
var con = $('.container');
var desc = $('.desc');
con.mouseenter(function() {
desc.show();
});
con.mouseleave(function() {
desc.hide();
});
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
}
.desc {
display: none;
width: 200px;
background: white;
z-index: 3;
border: 1px solid #CCC;
border-radius: 3px;
top: 20px;
left: -5px;
padding: 12px;
color: #666;
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hint"> ?</div>
<div class="desc">
This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>
</div>

Make the .desc div a child of your .hint
$(document).ready(function() {
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
desc.hide();
});
});
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
text-align: center;
position: relative;
}
.desc {
display: none;
width: 200px;
background: white;
z-index: 3;
border: 1px solid #CCC;
border-radius: 3px;
top: 20px;
left: -5px;
padding: 12px;
color: #666;
font-size: 12px;
position: absolute;
top: 50%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hint"> ?<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div></div>
See fiddle

Updated Fiddle.
If you can't change the structure of your HTML code try to wait a little before hidding a desc div using setTimeout() so if the user enter mouse inside this div you will not hide it by clearing the timeout check the example bellow :
$(document).ready(function() {
var hide_timeout;
var hide_after = 100; //100 ms
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
hide_timeout = setTimeout(function(){
desc.hide();
},hide_after);
});
desc.mouseenter(function() {
clearTimeout(hide_timeout);
});
desc.mouseleave(function() {
desc.hide();
});
});
Hope this helps.
$(document).ready(function() {
var hide_timeout;
var hide_after = 100; //100 ms
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
hide_timeout = setTimeout(function(){
desc.hide();
},hide_after);
});
desc.mouseenter(function() {
clearTimeout(hide_timeout);
});
desc.mouseleave(function() {
desc.hide();
});
});
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
}
.desc {
display: none;
width: 200px;
background: white;
z-index: 3;
border: 1px solid #CCC;
border-radius: 3px;
top: 20px;
left: -5px;
padding: 12px;
color: #666;
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint"> ?</div>
<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>

You have 2 options
1 - You can add the show() and hide() when the tooltip is hover : Fiddle
2 - You can use only css to show or hide it. Not sure you need JS for simple things like that.

This Demo shows what I think you want to achieve. The trick is to also catch the event that is triggerd, when the mouse enters a other element.
$('*').not('.hint').not('.desc').not('.desc>button').mouseenter(function() {
desc.hide();
});

$(function(){
$('.desc').hide();
$(document).on('mouseenter','.hint',function(){
$('.desc').show();
})
});

Getting a div to fadeIn the opacity

I am trying to get a div to fadeIn() from white to the normal dark gray color. However, my attempt is failing and it is killing my other scripts on the page. What am I doing wrong?
function(){
$('.dark-gray').fadeTo(1200, 1);
}
.dark-gray {
height: 500px;
width: 100%;
background-color: #202020;
}
#dark-gray-container {
text-align: center;
padding: 150px 0;
}
#dark-gray-container-title {
color: #FFF;
font-size: 1.7em;
font-weight: bold;
}
#dark-gray-container-description {
color: #FFF;
font-size: 1.3em;
padding-top: 40px;
}
#dark-gray-container-button {
padding-top: 80px;
}
#dark-gray-container-button-span {
color: #FFF;
padding: 20px 25px;
border: 2px solid #FFF;
cursor: pointer;
transition: ease-in-out .3s;
}
#dark-gray-container-button-span:hover {
border: 2px solid #45a5ba;
transition: ease-in-out .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dark-gray">
<div id="dark-gray-container">
<div id="dark-gray-container-title">GET IN TOUCH WITH US</div>
<div id="dark-gray-container-description">Looking for advice or would you like to speak to a member of the OD team? Please hit the button below.</div>
<div id="dark-gray-container-button"><span id="dark-gray-container-button-span">CONTACT US</span></div>
</div>
</div>
UPDATE:
I want the function to start when the div is scrolled to. What about this?
$(function() {
var oTop = $('.green').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
fadeinGray();
}
});
});
function fadeinGray(){
$('.dark-gray').fadeTo(1200, 1);
}

check out a working example HERE
There were couple of issues. First your dark-gray class was always dark gray. You had to change the CSS opacity to something lower than 1 for the beginning. Then you were making it complicated to calculate the top offset.

this is how you can use fadeIn when mouseenter this is the code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
div.mystyle{
width:500px;
height: 500px;
border:2px solid black;
}
div.check{
width: 100%;
height: 100%;
background-color: gray;
display: none;
}
</style>
</head>
<body>
<div class="mystyle">
<div class="check">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".mystyle").mouseenter(function(){
$(".check").fadeIn(1000);
});
});
</script>
</body>
</html>
if you want call back function(when mouse leave) use this code also.
$(document).ready(function(){
$(".mystyle").mouseleave(function(){
$(".check").fadeIn(1000);
});
});

Disallow Interaction With Website During Animations

I am attempting to write some javascript that will create textareas and when you click on a textarea to begin typing it grows and centers in the window until you click off of it where it shrinks back down.
Easy enough, until I wanted to add the .animate() and suddenly I have some serious problems that I am pouring too much time into trying to figure out.
While running some quality assurance I discovered a number of bugs...
-If I drop focus on the textarea that is animating its growth while it is still animating then the .blur() function fails to call.
-If I shift focus to another textarea while the first is still animating
then both may remain large failing to call the .blur() function.
-Finally there is just some really strange activity with the centering feature. .scrollTo() and .animate() perform poorly together especially when there are many textareas or I am picking a box that in the midst of many.
Is there a way to disallow any interaction with the website while an animation plays out?
Any ideas on how to remedy any of these issues?
the javascript... boxy.js
Code:
function growthearea() {
$('textarea.textfield').blur(function(){
$(this).animate({ height: "51" }, 500); //shrink the current box when lose focus
//$(this).height(51);
});
$('textarea.textfield').focus(function(){
$("*").off("focus,blur,click"); //turn off focus,blur,click while animating
var wheretoY = $(this).offset().top-73;
window.scrollTo(17,wheretoY);
// turn back on focus,blur,click after animation completes
$(this).animate({ height: "409" }, 1000, function(){("*").on("focus,blur,click")});
//$(this).height(409);
});
}
function newboxbtn()
{
var btn=document.createElement("textarea");
btn.setAttribute('class','textfield');
var textlocale = document.getElementById('locale');
textlocale.appendChild(btn);
$('textarea.textfield').on('keyup change', function() {
$('p.display').text('You are typing: ' + $(this).val()); //live update from focused textarea
});
growthearea(); //recall function for any new boxes to be acknowledged
};
function jsinit()
{
$('textarea.textfield').on('keyup change', function() {
$('p.display').text('You are typing: ' + $(this).val()); //live update from focused textarea
});
growthearea(); //call function for initial group of boxes
}
the html... boxy.htm
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="sty.css" />
<script src="./jquery.js"></script>
<script src="./boxy.js"></script>
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "fast" );
});
jsinit();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<div class="grid">
<div class="col-left" id="left">
<div class="module" id="scrollingDiv">
<input type="button" value="add" onclick="newboxbtn()" />
<p class="display">you are typing </p>
</div>
</div> <!--div class="col-left"-->
<div class="col-midd">
<div class="module" id="locale">
<textarea class="textfield" placeholder="begin typing here..." ></textarea>
<textarea class="textfield" placeholder="begin typing here..."></textarea>
</div>
</div> <!--div class="col-midd"-->
</div> <!--div class="grid"-->
</body>
</html>
the css... sty.css
Code:
.textfield {
width: 97%;
height: 51;
resize: none;
outline: none;
border: none;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px 1px #0044FF;*/
}
.textfielded {
width: 97%;
resize: none;
outline: none;
border: none;
overflow: auto;
position: relative;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px #FFDD00;*/
}
/*#postcomp {
width: 500px;
}*/
* {
#include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or #extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-left {
width: 13%;
}
.col-midd {
width: 43%;
}
.col-rght {
width: 43%;
}
.module {
padding: $pad;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
body {
padding: 10px 50px 200px;
background: #001235;
}
h1 {
color: black;
font-size: 11px;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
}
p {
color: white;
}

To check if something is animated: { quite weird for sure! }
if($('*').is(':animated').length) return;

Optimize jQuery code

I've written this jQuery code that fades in a overlay with some links over an image. What i found out is that it is painfully slow when I add like 10 of these images. I would really appreciate some tips and tricks on how to make this code faster.
If you have some tips for my HTML and CSS that would be great too ;)
jQuery code
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
All the code
<style type="text/css">
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
img {
border: none;
}
#backgrounds {
font: 82.5% "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 50px 0 0 0;
padding: 0;
width: 585px;
}
.thumb {
margin: 5px;
position: relative;
float: left;
}
.thumb img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.thumb div {
display: none;
}
.thumb .download {
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0 10px;
}
.thumb .download h3 {
font-size: 14px;
margin-bottom: 10px;
margin-top: 13px;
text-align: center;
}
.thumb .download a {
font-size: 11px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 16px;
}
.thumb .download a:hover {
text-decoration: underline;
}
.thumb .download .left, .thumb .download .right {
width: 44%;
margin: 0;
padding: 4px;
}
.thumb .download .left {
float: left;
text-align: right;
}
.thumb .download .right {
float: right;
text-align: left;
}
.thumb img, .thumb .hud {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.thumb .hud {
width: 100%;
height: 110px;
position: absolute;
top: 0;
left: 0;
background: #000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
</script>
<div id="backgrounds">
<div class="thumb">
<div class="download">
<h3>Download wallpaper</h3>
<p class="left">
1024x768
1280x800
1280x1024
</p>
<p class="right">
1440x900
1680x1050
1920x1200
</p>
</div>
<div class="hud"></div>
<img alt="image" src="thumb.jpg"/>
</div>
</div>

I got it to respond a little better by simply changing the following within the hover(..):
function () {
$(".download", this).fadeTo("fast", 1);
$(".hud", this).fadeTo("fast", 0.7);
},
function () {
$(".download, .hud", this).fadeTo("fast", 0);
}
The biggest difference comes from only applying the hoverout effect to the event target, no need to reapply to all your divs on the page.

I've put your code into a test page and to be perfectly honest, even with thirty or so .thumb divs it seemed ok - certainly responsive enough to use from my end. Sliding the mouse over a bunch of them means I have to wait for the rollover effect to go through them all which takes a while until it gets to the one I've actually stopped on, but surely that was what you wanted given that you're using 'hover' rather than 'click' (which would certainly remove any speed issues).
I'm not using actual images in my test page, just getting the alt text, so my best current guess would be to make sure all images you're loading are as small filesize as you can possibly make them.

Pre-Select MORE
Good job preselecting the div. Try this way so that it pre-selects the fade in elements as well instead of doing it on hover:
$().ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").each(function() {
var download = $(this).children(".download");
var hud = $(this).children(".hud");
$(this).hover(
function () {
download.fadeTo("fast", 1);
hud.fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
});

try removing the
:focus {
-moz-outline-style:none;
}
and see what happens