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/

Js animate right and bottom

Hello I am having some difficulties animating right and bottom. I got the animate left code, but I am not able to animate right using javascript. Here is the code:
var right = $('#coolDiv').offset().right;
$("#coolDiv").css({right:right}).animate({"right":"0px"}, "slow");
Here is a link to jsfiddle:
http://jsfiddle.net/XqqtN/
http://jsfiddle.net/XqqtN/4006/
How can I animate right = 0 and bottom = 0?

The problem is that offset method return an object only with left and top properties.
So $('#coolDiv').offset().right is undefined.

Get the width of #cooldiv and it's parent, subtract the width of #cooldiv from its' parent width can do work for you. Something like this.
var parentTag = $('#coolDiv').parent().outerWidth();
var coolDiv = $('#coolDiv').outerWidth();
var res = (parentTag - coolDiv) + "px" ;
$("#coolDiv").animate({"left":res}, "slow");
Demo

Try This My Working code right to left div using click event
$(function(){
var c=0;
$("#coolDiv").click(function()
{
$(this).stop().animate({left: ++c%2*100 }, 'fast');
});
});

Jquery horizontal pan with 100% width element

So I have this 100% witdh container with lots of images in it. I would like to pan it horizontally when I mouseover the parent container.
I've come quite far but I have a few problems.
Here is the fiddle
First I have to set the margin left to be percentage based, else it wont show all the images. To do this, I have to get the full width of the inner container, but I'm unable to do this.
$('.merken').mousemove(function (event) {
var left = event.pageX;
$('.slider').css({
'margin-left': '-' + left + 'px'
});
});
The thumb-container now has a fixed width, but i need to make this an auto width. Right now this makes sure that the images in the container dont show one-by-one. How do I fix this?
.thumb-container { width:2000px;}
Thanks

You can do something like this:
Fiddle
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/$('.thumb-container').width();
$('.slider').css({
'margin-left': '-'+left+'%'
});
});
and
.thumb-container{
width:200%;
}

I'm not sure about what you want to do. But I think that you should use the .width() jquery method:
$('.merken').mousemove(function(event){
var left = event.pageX;
var percentleft = left/$('.merken').width();
var sliderleft = $('.slider').width()*percentleft;
$('.slider').css({
'margin-left': '-'+sliderleft+'px'
});
});

For those intrested, fixed it like this:
var conb = $('.slider').width();
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/conb;
$('.slider').css({
'margin-left': '-'+left+'%'
});
});

jquery.li-scroller.1.0.js newsticker modification

I am developing a website which have a scrolling newsticker in a strip using jquery.li-scroller.1.0.js.
page address is: http://www.designforce.us/demo/ticker/index.html
When we hover the mouse on the newsticker, strip is stop. At this stage i want to show a popup box right under the current li with its text. something i've done and when we hover the mouse pointer over the strip, newsticker stops and box is showing with its text.
PROBLEM:
jquery.li-scroller newsticker have a wrapper with {overflow:hidden} so if i add the popup box withing li then its not showing. Thats why i've coded the popup (.tickPop) withing a seperate space and white some script of jquery document ready. my script is:
$('ul#ticker01 li').each(function(e){
var iClass;
$(this).hover(function(){
iClass = $(this).attr('class');
$(this).css('height',$('tickPop').height()+30)
var offset = $(this).offset();
var left = offset.left;
var top = offset.top+20;
var iWidth = $(this).width();
var sText = $(this).children().html();
$(this).css('background','#f6f4f4');
$('.tickPop').css('left',left);
$('.tickPop').css('top',top);
$('.tickPop').css('width',iWidth);
$('.tickPop').css('display','block');
$('.tickPop').text(sText);
}, function(){
$('.tickPop').mouseleave(function(){
bHovering = false;
$(this).css('display','none');
});
$(this).css('background','transparent');
//$('.tickPop').css('display','none');
if(iClass == 'Yellow')
$(this).css('background','url(images/icon-yellow.jpg) left center no-repeat');
else
$(this).css('background','url(images/icon-white.jpg) left center no-repeat');
});
});
popup box called $('.tickPop') is hidden by default and when user hover on newsticker then jquery function set the attribute $('.tickPop').css('display','block') and it is visible.
Now problem is that as we move the mouse pointer over the popup box then newsticker is again start scrolling while i want when we mouseleave from the popup box then newsticker should start.
Dear Experts, Please advise..............?
Looking forward for a kind response.
Regards

You should modify jquery li-scroller sources.
watch this code (from li-scroller sources):
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
// $strip = $(this) so it triggers when you're hover a news
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
You should add something like:
var popup = jQuery('.tickPop');
popup.hover(function(){
$strip.stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
I didn't test that code but should work....
P.S. Sorry for the indentation