Develop Reference

Why is Text blinking in my style?

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/

Trying to target only visible elements in slider function

I have a slider that is working well, although i am having trouble trying to add filtering to it.
Currently i have all the elements filtering properly, now all i need to do is adapt my slider function to only effect elements that are visible.
$.fn.archiveSlider = function (timeout, cls) {
var l = this.length,
current = 0,
prev = 0,
elements = this,
timerId;
if (this.filter('.active').length > 0) {
current = this.index(this.filter('.active')[0]) + 1;
prev = current - 1;
}
this.hover(function(){
var attachment = elements.eq(current - 1).attr( 'hover-data' );
var attachmentA = $( this ).attr( 'hover-data' );
elements.eq(current - 1).removeClass('active');
$( '#' + attachment ).removeClass('active');
$( '#' + attachmentA ).addClass('active');
clearTimeout(timerId);
},
function(){
var attachment = elements.eq(current - 1).attr( 'hover-data' );
var attachmentA = $( this ).attr( 'hover-data' );
elements.eq(current - 1).addClass('active');
$( '#' + attachmentA ).removeClass('active');
$( '#' + attachment ).addClass('active');
timerId = setTimeout(next, timeout);
})
function next() {
var previous = elements.eq(prev);
var nextos = elements.eq(current);
previous.removeClass('active');
nextos.addClass('active');
var attachment = elements.eq(current).attr( 'hover-data' );
$( '#' + attachment ).addClass('active');
var attachment = elements.eq(prev).attr( 'hover-data' );
$( '#' + attachment ).removeClass('active');
prev = current;
current = (current + 1)%l;
timerId = setTimeout(next, timeout);
}
timerId = setTimeout(next, timeout);
return this;
};
Items are being hidden by display: none;
demo here http://stage.barkdesign.com.au/private/

Saving CSS class on object in localstorage on reload page

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.

JQuery Resizable - Update element absolute position while resizing

I have many divs distributed in rows and columns, (generated using jQuery). Each one of these divs is re-sizable, using JQuery UI Resizable. In order to define the requirements, all divs must use absolute positioning. So, when I re-size any of these divs, the script should update the top attribute of all divs below this, (located in the same column and one row after the current resizing div).
This is the code I have now:
updatePositions: function() {
var update = 0;
$(".element").resizable({
handles: 's',
start: function(event, ui) {
event.stopPropagation();
var el = $(this);
var el_row = parseInt(el.attr("row"));
var el_rel = parseInt(el.attr("rel"));
var el_col = parseInt(el.attr("col"));
update = $(".element").filter(function() {
return(
$(this).attr("row") > el_row &&
$(this).attr("col") == el_col &&
$(this).attr("rel") != el_rel
);
});
},
resize: function(event, ui) {
update.each(function(event){
var top = $(this).position().top + $(this).height() + 20;
$(this).css("top", top )
});
}
})
}
And here is an example: JSFiddle
As you can see, all the divs are found just right and I can update the top position. But for some reason it's getting crazy when resizing! It seems like I'm doing the update as many times as found tiles on each selected div.

finally I solved this problem. JSFiddle
this is the js code:
function CacheType(){
corrtop = 0;
rel = 0;
}
$.extend({
updatePositions: function() {
var update = 0;
var arr = new Array();
$(".element").resizable({
handles: 's',
start: function(event, ui) {
event.stopPropagation();
var el = $(this);
var el_row = parseInt(el.attr("row"));
var el_rel = parseInt(el.attr("rel"));
var el_col = parseInt(el.attr("col"));
var ex = el.position().top;
var ey = el.height();
update = $(".element").filter(function() {
if(
$(this).attr("row") > el_row &&
$(this).attr("col") == el_col &&
$(this).attr("rel") != el_rel
){
var tmp = new CacheType();
tmp.corrtop = $(this).position().top - ex - ey;
tmp.rel = $(this).attr('rel');
arr.push(tmp);
return true;
}else{
return false;
}
});
},
resize: function(event, ui) {
var x = $(this).height() + $(this).position().top;
update.each(function(event){
for(var i=0;i<arr.length; i++){
var tmp = arr[i];
var rel = $(this).attr('rel');
if(rel == tmp.rel)
$(this).css("top", x + tmp.corrtop);
}
});
}
})
}
});
$(document).ready(function(){
$.updatePositions();
});

How do I position a div next to a mouse click using JQuery?

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.