We Keep Coding

Highlight text on scroll

I want to make animation highlighting each letter of the text. Is there jQuery plugin to highlight text on window scoll? Trying to figure out the lightweight way to achieve this.

That's what I wanted to make:
highlight();
$(window).on("scroll", function(){
highlight();
});
function highlight(){
var scroll = $(window).scrollTop();
var height = $(window).height();
$(".highlight").each(function(){
var pos = $(this).offset().top;
if (scroll+height >= pos) {
$(this).addClass("active");
}
});
}
https://jsfiddle.net/4vm1sht5/3/

Parallax Image Scrolling Not Working

So I am trying to get an image to have a parallax scrolling effect, buts its not working. Got any idea on why it isnt working?
$(function() {
// Cache the Window object
var $window = $(window);
// Parallax Backgrounds
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // end window scroll
});
});
https://jsfiddle.net/0382k30q/

You need to change this:
$('section[data-type="background"]').each(function(){...
to this:
$('div[data-type="background"]').each(function(){...
The backgrounds aren't applied to the section element. They are applied to a div element.
Also, don't forget to include JQuery/JQuery UI in your fiddles.
Updated Fiddle: https://jsfiddle.net/0382k30q/7/

A jQuery scrollTop(); with Transition

I can't figure out of to make scroll, (when a div is clicked), and make it smooth. (like not going straight to the scroll position)
Here's my code:
$('.about-center').click(function() {
var div = document.getElementById('ABOUT');
var pos = div.offsetTop;
$(window).scrollTop(pos);
});

try this one:
$('.about-center').click(function() {
var div = $('#ABOUT');
var pos = div.offset().top;
$('html, body').animate({scrollTop:pos},2000); // will take two seconds to scroll to the element
});

Always positioning my jQuery tooltip in the center of the parent container

I wrote this plugin but I'm having issues trying to position the tooltip so that it's completely centered above the parent container. I'm currently just calculating the width of the parent container that it's in and finding out where that is by getting it's left position, but it's always not completely centered.
Any ideas?
(function($) {
var toolTip = {
init: function() {
this.each(function() {
var $that = $(this);
// our boolean object to check if it already exists on the page
var $toolSpan = $('<div class="tooltip"><span class="tooltip_arrow"></span></div>');
var preloadImages = function() {
var tempImage = new Image();
tempImage.src = 'http://i.imgur.com/K5ynr.png';
tempImage = null;
};
preloadImages();
$that.mouseover(function() {
var $altText = $that.attr('alt');
var $parentWidth = $that.parent().width();
var $parentPos = $that.parent().position();
var $parentPosY = $parentPos.top;
var $parentPosX = $parentPos.left;
$that.parent().after($toolSpan);
$toolSpan.prepend($altText);
$that.parent().next($toolSpan).css('top', $parentPosY - 30).css('left', $parentPosX).fadeIn();
var $toolSpanWidth = $that.parent().outerWidth();
$that.parent().next('.tooltip').children('.tooltip_arrow').css('left', $toolSpanWidth / 2).fadeIn();
}).mouseout(function() {
$that.parent().next($toolSpan).text('').hide().remove();
});
});
} /* end init */
};
$.fn.toolTip = toolTip.init;
})(jQuery);
http://jsfiddle.net/QH8dy/2/

here you go - centered, all working, code a bit cleaner ...
http://jsfiddle.net/PBpWj/
though it can potentially go off screen if the tip text is too wide.

If you intention is so that the tooltip container is center aligned above the link containers (in this case the wrappers). Try modifying the following line of code:
$that.parent().next($toolSpan)
.css('top', $parentPosY - 30)
.css('left', $parentPosX + ($parentWidth/2) - ($toolSpan.width()/2))
.fadeIn();
See it at the following jsFiddle.

How to show/hide div on the current mouse over element?

I want to write a script which allow the user when hovering on any element on the page "such as a, img, div" another hidden element will show on this current element and will have its position, width, height with transparent color.
How to do that using javascript/jquery?

Start by attaching a mouseover event to the element
$(function(){
$("#myElementId").mouseOver(myMouseOverHandler);
});
Then write a function to handle the event
function myMouseOverHandler(e)
{
var width = $(this).width();
var height = $(this).height();
var top = $(this).offset().top;
var left = $(this).offset().left;
// set the element with these parameters
var el = $("#myHiddenElement");
el.width(width);
el.height(height);
el.css({ "top":top, "left":left, "position":"absolute" });
el.show();
}