We Keep Coding

Mouse Follow Script, Cant Animate on Hover

I'm trying to implement script to have a div block follow my mouse, then animate it when hovering over certain links. The problem is when transforming it on hover of any objects, it starts to flash and become finicky.
Codepen: https://codepen.io/grayghostvisuals/pen/kepDb/
var $circle = $('.circle');
function moveCircle(e) {
TweenLite.to($circle, 0.7, {
css: {
left: e.pageX,
top: e.pageY
}
});
}
$(window).on('mousemove', moveCircle);
Any ideas?

It seems to be a z-index issue. Hover will try to check if your mouse is above your element, but it will be hovering the circle following your mouse. This pen shows how it works if you use a negative z-index for the circle, too.
You can however make your browser ignore the pointer events for the circle, removing the problem all together. I changed your pen to add the solution.
.element {
pointer-events: none;
}

Javascript focusing a large div with fixed header

I'm using a tiny library called '$.scrollTo' to animate a scroll to a div element in my html. at the top of my page I have a fixed navgation bar.
at the end of the animation, I would like to have that div focused (for accessibility). if my div is to large, at the end of the animation, the fact that it gets focus - simply sends it a bit off the screen.
This does not happen with small divs.
here is my code (check jsfiddle below):
$('#buttonid').on("click", function() {
//fixed nav bar height (to compensate when scrolling)
var fixed_navbar_height = $("#navbar-id").height();
//the element to scroll to
var $go_to_selector = $("#topic2");
$.scrollTo($go_to_selector, {
duration: 1000,
offset: -fixed_navbar_height,
onAfter: function() {
//if you comment out this .focus it works as intended.
$go_to_selector.focus();
}
});
});
here is a JSFIDDLE example:
https://jsfiddle.net/dy35obpq/3/
obviously the onAfter messes it up, but i would like both the animation and the focus. Any ideas on how to implement a focus on a large div without letting it change the scroll bar ? suggestions are more than welcome.

Try this.
onAfter: function() {
$go_to_selector.focus();
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
}
I have simply added this line in your onAfter callback.
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
and it seems to have fixed the problem while still retaining focus. You might want to use css to disable the focus blue highlight.

Stick the bar always to footer even while animating

Recently here, I asked a question to stick a bar element always to bottom-left of the container. It seems not possible using just css. So, I ended up using javascript. Here is the Working Fiddle
Giving highlights of the previous question:
Stick the bar element to bottom-left of the container
The bar should be in bottom-left, even the container is scrolled vertically or horizontally.
The bar should come over the horizontal scrollbar, if the horizontal scrollbar is present.
The above fiddle works fine and obeys all above cases, even when the window is resized.
Now, I have the same situation but the container will get resized because of animation button click but not window resize.
Since, I am animating for one second, I am calling the same code present in the window resize function while I clicked on the animating button. But doing so is somehow breaking and isn't following the above rules/requirements.
Here is the Fiddle. (not working)
Please help.
PS: Here is the link to previous question. (if someone wants brief understanding)

Again, I solved it. I was making things complicated. Where there was need of only bottom property, I was using top and resetting it. Lots of unneccessary action in the code.
Here is the code, which is working fine.
$(function () {
$('.content').width($('body').width() - 50);
});
var stickToBottom = function (parent) {
var bar = parent.querySelector('.bar');
var top = bar.offsetTop;
parent.addEventListener('scroll', function (e) {
var el = e.currentTarget;
bar.style.bottom = -el.scrollTop + "px";
bar.style.left = el.scrollLeft + "px";
});
}
var parent = document.querySelector('.parent');
stickToBottom(parent);
$('.clickme').click(function () {
$(this).toggleClass('active');
});
Thanks to rlemon for giving a idea in javascript chat room.
Working Fiddle

Apply style to span based on number of lines within a cycling banner

Context
Here is a jsfiddle that I've been working with: http://jsfiddle.net/21r7uvgx/
For context, I'm using http://malsup.com/jquery/cycle/basic.html to make the rotating banner cycle through each <a> within the .custom-banners wrapper. I have the script as an external resource within the jsfiddle.
Starting Point
The idea is to make each span that has multiple lines (purely from window size) apply Style A, and those that have just one line apply Style B. Resizing the window changes what style each span gets.
I'm doing it to the span instead of the a based on the assumption that to achieve what I want, I need to target a element that displays as a block by default.
Issue and Goal
The issue I'm running into is that with the cycling script, a span that is not visible has a height of 0, so the math isn't right and it won't apply the correct style, even once the span becomes visible.
The goal is to find a way to have it check a span when it becomes visible, and apply the correct style.
Bonus Goal
If there's a better way to calculate the lineheight and determine what style needs to be applied, I'd also like those suggestions.
I was using this before, but it was very buggy when I manually resized the window.
var divheight = $(this).height();
var lineheight = $(this).css('line-height').replace("px","");
if (Math.round(divheight/parseInt(lineheight)) >= 2) {
$(this).attr('style','font-size: 10px');
} else {
$(this).attr('style','font-size: inherit');
};

Try this javascript. I have edited your javascript from the jsfiddle that you linked. If you don't want to change the font color (as in jsfiddle) and just want to change font size, then do it appropriately. Copy paste the below code to your jsfiddle and verify.
$(document).ready(function () {
$(window).on("resize", function () {
$('.custom-banners span').each(function () {
var lineheight = 20;
var divheight = $('.banner-link').height();
if (divheight > lineheight) {
$(this).css('color', 'red');
} else {
$(this).css('color', 'green');
};
});
});
});

How would I make div stick to top of screen using this code?

The code below is test code I'm using. The blue bar is supposed to stick to the top of the screen when it reaches the top.
This works on my browser, but the reason I'm here is because when it sticks to the top, it all of a sudden becomes smaller. As you see the blue bar starts with a full width across the container, but on my computer/browser, after it sticks to the top, the div shrinks to just the size of the text.
To make matters worse, I cannot reproduce the problem on jfiddle, because in jfiddle it doesn't work at all! (The images are just there to create a scroll).
Here is the jfiddle
Here is the jquery:
var titlePosition = $('.title').offset().top;
$(window).scroll(function () {
var scrollBar = $(this).scrollTop();
if (scrollBar > titlePosition) {
$('.title').css("top", "0px");
$('.title').css("position", "fixed");
} else {
$('.title').css("position", "relative");
}
});

Try this code:
Fiddle
CSS:
.title {
font-size:200%;
background-color:blue;
width:100%
}

Update your code:
if (scrollBar > titlePosition) {
$('.title').css("top", scrollBar+"px");
$('.title').css("position", "fixed");
} else {
$('.title').css("position", "static"); //otherwise it will still get that top value and cause unwanted position;
}

Just add this css:
.title {
...
width: 100%; /*This does the trick*/
}
Here you have it working: http://jsfiddle.net/edgarinvillegas/yPWAC/3/
Cheers

Set left to 0 as well. Additionally, some optimizations.
I prefer appending/removing classes to put all your CSS in your stylesheet. Saves you from problems later on when the code gets huge (who would be looking for CSS in JS files anyway?).
Also, cache objects. Everytime you fire scroll, your code fetches every single .title in the DOM and generates a jQuery object. Not very optimal. Instead, get all .title and just do the modifications on each scroll.
CSS:
.title.fixed {
position:fixed;
left:0;
right:0;
top:0;
}
JS:
var titlePosition = $('.title').offset().top;
var win = $(window);
var title = $('.title');
win.scroll(function () {
var scrollBar = win.scrollTop();
if (scrollBar > titlePosition) title.addClass('fixed');
else title.removeClass('fixed');
});
As for your non-working fiddle, you forgot to include jQuery. That should be found on the top left.

Try giving z-index:999 or, using jQuery - $('.title').css("z-index", "999");
Rest looks ok.

var titlePosition = $('.title').offset().top;
.top is not a function. offset() returns an object containing the properties top and left
Replace with:
var titlePosition = $('.title').offset();
You can now access the properties like so:
titlePosition.top or titlePosition.left
reference: .offset() http://api.jquery.com/offset/

Thanks for all the feedback.
Even though it helped improve, in the end the div was still resizing. Fixing the width to specific values was not responsive enough.
I finally stumbled upon a solution, based on all the advice:
http://jsfiddle.net/yPWAC/8/
var titleWidth = $('.title').width()
/*then after the div is fixed I change the width */
$('.title').css("width",titleWidth);
I made jquery hold the original width of the div, then change the width of the sticky div to whatever that value is.
For some reason, even if I defined the original width in CSS, the new sticky width would still come out a different size in the browser. So this method gives it the same width as the original (whatever it may be)