After several hours and with the help of several people, I managed to solve the problem with the script.
But again, I found a problem with the style.
Where is my problem? Why does the relevant text blink?
var offsetTop = $('#skills').offset().top;
function animateSkillBars() {
$( ".bar" ).each( function() {
var $bar = $( this ),
$pct = $bar.find( ".pct" ),
data = $bar.data( "bar" );
setTimeout( function() {
$bar
.css( "background-color", data.color )
.animate({
"width": $pct.html()
}, data.speed || 10, function() {
$pct.css({
"color": data.color,
"opacity": 1
});
});
}, data.delay || 0 );
});
}
;( function( $ ) {
"use strict";
$(window).scroll(function() {
var height = $(window).height();
if($(window).scrollTop()+height > offsetTop) {
animateSkillBars();
}
});
})( jQuery );
demo: https://jsfiddle.net/bo3ggtx5/3/
Its because you run the function everytime the scrollTop is bigger than the variable offsetTop you can add some class to check if you already run it for the bar or to wrapper div
https://jsfiddle.net/bo3ggtx5/4/
var offsetTop = $('#skills').offset().top;
function animateSkillBars() {
$( ".bar" ).each( function() {
var $bar = $( this ),
$pct = $bar.find( ".pct" ),
data = $bar.data( "bar" );
if(!$(this).hasClass('animated')) {
setTimeout( function() {
$bar
.css( "background-color", data.color )
.animate({
"width": $pct.html()
}, data.speed || 10, function() {
$pct.css({
"color": data.color,
"opacity": 1
});
});
}, data.delay || 0 );
}
$(this).addClass('animated');
});
}
;( function( $ ) {
"use strict";
$(window).scroll(function() {
var height = $(window).height();
if($(window).scrollTop()+height > offsetTop) {
animateSkillBars();
}
});
})( jQuery );
Adding a boolean animated variable to check if it's been animated once seems to fix the issue of flashing text. Looks like your text is updated every-time the user scrolls, which is causing the text to flash.
HTML:
<li>
PHP
<div class="bar_container">
<span class="bar" data-bar='{ "color": "#9b59b6", "delay": 1200, "animated": false}'>
<span class="pct">60%</span>
</span>
</div>
</li>
JavaScript:
function animateSkillBars() {
$( ".bar" ).each( function() {
var $bar = $( this ),
$pct = $bar.find( ".pct" ),
data = $bar.data( "bar" );
if (!data.animated) {
setTimeout( function() {
$bar
.css( "background-color", data.color )
.animate({"width": $pct.html()
}, data.speed || 10, function() {
$pct.css({
"color": data.color,
"opacity": 1
});
});
data.animated = true;
}, data.delay || 0 );
}
});
}
;( function( $ ) {
"use strict";
$(window).scroll(function() {
var height = $(window).height();
if($(window).scrollTop()+height > offsetTop) {
animateSkillBars();
}
});
})( jQuery );
https://jsfiddle.net/bo3ggtx5/8/
Related
I have been reading several similar questions about this, but I can't get it to work. I have a scroll detection function in jQuery, which I want to have 3 parameters:
function scroll_detection(box_selector, trigger_offset, the_animation){
//something here
the_animation();
}
Where the_animation is a function that will be called like this:
scroll_detection("section", .8, function(){
//stuff here
});
The problem is, when I add the function, the animation do not run anymore.
This code works perfectly:
function scroll_detection(duration, box_selector, element_selector, ease, trigger_offset ){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top - ($(window).scrollTop() + effect_offset);
if (position <= 0) {
$(this).find(element_selector).animate( { marginLeft: "0" }, duration, ease );
}
});
});
}
scroll_detection(2000, "section", ".section-title", "easeOutBack", .8);
scroll_detection(3000, ".article-wrap", ".article-title", "easeOutBounce", .7);
But this does not:
function scroll_detection(the_animation, box_selector, trigger_offset ){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top - ($(window).scrollTop() + effect_offset);
if (position <= 0) {
the_animation();
}
});
});
}
scroll_detection( function(){
$(this).find(".section-title").animate( { marginLeft: "0" }, 2000, "easeOutBounce");
}, "section", .8);
I want to be able to change easily what kind of effect I want. Any help will be appreciated.
Edit 11/09/2015:
As #Aguardientico and #LuiGui pointed out, the problem was the scope of the $(this) inside the callback function, and I went with the #Aguardientico solution.
jQuery(document).ready(function($){
function scroll_detection(the_animation, box_selector, trigger_offset ){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top - ($(window).scrollTop() + effect_offset);
if (position <= 0) {
the_animation.call(post); //Add call to give the function the right scope
}
});
});
}
scroll_detection( function(){
$(this).find(".section-title").animate( { marginLeft: "0" }, 2000, "easeOutBounce");
}, "section", .8);
It looks like an issue related with scope, you are calling $(this) inside your anonymous function aka the_animation, what if you do the following? the_animation.call(post)
function scroll_detection(the_animation, box_selector, trigger_offset ){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top - ($(window).scrollTop() + effect_offset);
if (position <= 0) {
the_animation.call(post);
}
});
});
}
scroll_detection( function(){
$(this).find(".section-title").animate( { marginLeft: "0" }, 2000, "easeOutBounce");
}, "section", .8);
You are function calls DO NOT match the function definitions.
Your parameters are OUT OF ORDER.
Try this NEW CODE:
var scroll_detection = function scroll_detection_func(
the_animation, box_selector, trigger_offset
){
var effect_offset = Math.floor($(window).height() * trigger_offset);
$(window).bind('scroll', function() {
$(box_selector).each(function() {
var post = $(this);
var position = post.position().top
- ($(window).scrollTop()
+ effect_offset)
;
if (position <= 0) {
the_animation();
}
});
});
}
scroll_detection(
function(){
$(this).find(".section-title").animate({
marginLeft: "0" },
2000, "easeOutBounce"
);
}, //the_animation
"section", //box_selector
.8 //trigger_offset
);
From the code you give,the_animation means
$(this).find(element_selector).animate( { marginLeft: "0" }, duration, ease );
so you can there is a this in your function. When you pass a function with this as a parameter, you need to specify what this mean, just try to specify the scope of this use apply(),bind() or 'call()' function, here are some explanations:
http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/
This javascript function is used to animate a number of selection boxes, however, I want to be able to use these selection boxes as A HREF links but i believe that something in this javascript is preventing it from acting as a href link.
Please could someone help point me in the right direction
Any help much appreciated thank you
(function() {
var $container = $('#portfolio-items');
if( $container.length ) {
var $itemsFilter = $('#portfolio-items-filter'),
mouseOver;
// Copy categories to item classes
$('article', $container).each(function(i) {
var $this = $(this);
$this.addClass( $this.attr('data-categories') );
});
// Run Isotope when all images are fully loaded
$(window).on('load', function() {
$container.isotope({
itemSelector : 'article',
layoutMode : 'fitRows'
});
});
// Filter projects
$itemsFilter.on('click', 'a', function(e) {
var $this = $(this),
currentOption = $this.attr('data-categories');
$itemsFilter.find('a').removeClass('active');
$this.addClass('active');
if( currentOption ) {
if( currentOption !== '*' ) currentOption = currentOption.replace(currentOption, '.' + currentOption)
$container.isotope({ filter : currentOption });
}
e.preventDefault();
});
$itemsFilter.find('a').first().addClass('active');
$itemsFilter.find('a').not('.active').hide();
// On mouseover (hover)
$itemsFilter.on('mouseenter', function() {
var $this = $(this);
clearTimeout( mouseOver );
// Wait 100ms before animating to prevent unnecessary flickering
mouseOver = setTimeout( function() {
if( $(window).width() >= 960 )
$this.find('li a').stop(true, true).slideHorzShow(300);
}, 100);
}).on('mouseleave', function() {
clearTimeout( mouseOver );
if( $(window).width() >= 960 )
$(this).find('li a').not('.active').stop(true, true).slideHorzHide(150);
});
}
})();
Just remove:
e.preventDefault();
I wrote me a slider. The slider works perfect, but the absolute last thing won't work. I cant't reset my width. I tried to call a function via the deferred.done function from jQuery API. At the end I put something like that dfd.resolve( "and" );. This works only one time. How can I change $("#first" ).css("width", t_first); width again?
My JS code:
$("#zero-img" ).click(function() {
$(function () {
var width_slider = ($( "#slider" ).width()) ;
var width_first = $( "#first" ).width() ;
var width_first_img = $( "#first-img" ).width() ;
var width_first_img_container = $( "#first-img-container" ).width() ;
var width_first_tex = $( "#first-img-text" ).width() ;
var width_gap = width_slider - width_first - 300;
var width_img = $( "#first-img-container" ).width() ;
var t_first = width_first + width_gap;
$("#first" ).css("width", t_first); //THIS I WANT TO CHANGE AGAIN AFTER FINISHED THE CLICK ACTION
$("#next-img" ).animate({ width:0 }, "slow" );
$("#first-img" ).animate({ left: width_first}, "slow", function(){
if ($("#next-img-container").attr("src").length > 0) {
var path_on_hold = $("#next-img-container").attr("src");
$("#on-hold-img-container").attr("src", path_on_hold);
var value_on_hold = $("#next-img-container").attr("value");
$("#on-hold-img-container").attr("value", value_on_hold);
var path_next = $("#first-img-container").attr("src");
$("#next-img-container").attr("src", path_next);
var value_next = $("#first-img-container").attr("value");
$("#next-img-container").attr("value", value_next);
}
$(this).css('left', (-1)* width_first);
var first_img = $("#zero-img-container").attr("src");
$("#first-img-container").attr("src",first_img);
var value_first = $("#zero-img-container").attr("value");
$("#first-img-container").attr("value", value_first);
} );
$("#zero-img" ).animate({ left:-150 }, "slow", function() {
if ($("#zero-on-hold-img-container").attr("src").length > 0) {
var path_zero = $("#zero-on-hold-img-container").attr("src");
$("#zero-img-container").attr("src", path_zero);
var value_zero = $("#zero-on-hold-img-container").attr("value");
$("#zero-img-container").attr("value", value_zero);
var pics = <?php echo json_encode($pics)?>;
var number = parseInt($("#zero-on-hold-img-container").attr("value"));
if (pics.hasOwnProperty(number-1) === true ) {
var company_id = pics[number-1].company_id;
var filename = pics[number-1].filename;
var temp = path + pics[number-1].company_id + "/" + pics[number-1].filename;
$("#zero-on-hold-img-container").attr("src", temp);
$("#zero-on-hold-img-container").attr("value", number-1);
$("#zero-on-hold-img-container").attr("value", number-1);
} else {
$("#zero-on-hold-img-container").attr("src", "");
$("#zero-on-hold-img-container").attr("value", "");
}
} else {
if ($("#zero-img-container").attr("src").length > 0) {
$("#zero-img-container").attr("src", "");
$("#zero-img-container").attr("value", "");
}
}
});
$("#zero-img").animate({ left: 0 }, "slow");
$("#next-img" ).animate({ width:150 }, "slow" );
$("#first-img").animate({ left: 15 }, "slow");
/*$("#first" ).css("width", auto);*/
});
});
The reason it only works once is because width_slider is set initially to your correct width, but then you are changing the width to auto, thus width_slider will never again be the initial width.
<!-- put the initial width of slider in data-init-width -->
<div id="slider" data-init-width="960"> ... </div>
Script:
$('#zero-img').click(function() {
var initialWidth = Number($('#slider').attr('data-init-width'));
if ( $('#slider').width() != initialWidth ){
$('#slider').css({
width: initialWidth + 'px'
});
}
var width_slider = $('#slider').width();
// do the other stuff
});
Then use the mouseup method
$('#zero-img').mouseup(function(){
// change the width to the after click width
});
What I would like to do, is to have a CSS style saved when a user resreshes the page. This is my jQuery code:
$(function() {
$("#slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 230) {
$("#well").fadeOut();
$( "#well" ).addClass( "disappear" );
} else {
// Apparently Safari isn't allowing partial opacity on text with background clip? Not sure.
// $("h2 span").css("opacity", 100 - (ui.position.left / 5))
}
},
stop: function(event, ui) {
if (ui.position.left < 231) {
$(this).animate({
left: 0
})
}
}
});
$('#slider')[0].addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
curX = touch.pageX - this.offsetLeft - 73;
if(curX <= 0) return;
if(curX > 230){
$('#well').fadeOut();
}
el.style.webkitTransform = 'translateX(' + curX + 'px)';
}, false);
$('#slider')[0].addEventListener('touchend', function(event) {
this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );
this.style.webkitTransform = 'translateX(0px)';
}, false);
});
When the class "disappear" is added I would like to keep it added even if the page reloads. I found a useful post here, but since I am a beginner at Javascript, I am not sure how to use it in my case, and I would be really happy if someone could give me a personalized answer.
Thanks in advance!
After $( "#well" ).addClass( "disappear" ); add
localStorage['wellClass'] = 'disappear';
And in the line below $(function() { add
previousWellClass = localStorage['wellClass'];
if (previousWellClass) $('#well').addClass(previousWellClass);
This will do most of the work for you.
var setClass = JSON.parse(localStorage.getItem('setClass')) || {};
$.each(setClass, function () {
$(this.selector).addClass(this.className);
});
var addClassToLocalStorage = function(selector, className) {
setClass[selector + ':' + className] = {
selector: selector,
className: className
};
localStorage.setItem('setClass', JSON.stringify(setClass));
};
var removeClassFromLocalStorage = function(selector, className) {
delete setClass[selector + ':' + className];
localStorage.setItem('setClass', JSON.stringify(setClass));
};
Then you can just do this:
$("#well").fadeOut();
$("#well").addClass("disappear");
addClassToLocalStorage('#well', 'disappear');
// remove it removeClassFromLocalStorage('#well', 'disappear');
FIDDLE
Then you can reuse it if you need to later.
How do I position a div next to a mouse click using JQuery?
Thanks
You can try:
$( "td").click( function(event) {
$("#divId").css( {position:"absolute", top:event.pageY, left: event.pageX});
});
After additional question was asked in the comment:
$( "td").click( function(event) {
var div = $("#divId");
div.css( {
position:"absolute",
top:event.pageY,
left: event.pageX});
var delayTimer = setTimeout( function( ) {
$that.fadeIn( "slow");
}, 100);
div.mouseover( function( event) {
if (delayTimer)
clearTimeout( delayTimer);
}).mouseout( function(){
if (delayTimer)
clearTimeout( delayTimer);
var $that = $(this);
delayTimer = setTimeout( function( ) {
$that.fadeOut( "slow");
}, 500)
});
});
Something like:
$('#cell').bind('click',
function(e){
$('#div').css('left',e.pageX + 'px' );
$('#div').css('top',e.pageY + 'px' ); });
The div's position should be set to absolute.