We Keep Coding

Run function for every repeated class on the same page

I've created the following functionality where an image is fixed on the left while scrolling the content and the quote appears for a few pixels.
It's working all right, the only problem is that I'd like to add this many times on the same page and, as it is, it just works with the first image.
The second one is not fixed while scrolling and the quote maintains hidden...
How can I make run this function for every image?
This is a working example
HTML:
<section id="cont_quote" class="maxwidth">
<article class="cont_q hasImage">
<p>Content</p>
<img class="alignleft img_quote" src="/large.jpg" alt="" width="433" height="553" />
<blockquote>
<h3>Why this training plan works</h3>
</blockquote>
<p>Content</p>
</article>
</section>
JS:
// Stick image on scroll
$(window).on('load resize', function () {
if ($(window).width() >= 769) {
var $element = $('#cont_quote');
var $follow = $element.find('.img_quote');
var followHeight = $element.find('.img_quote').outerHeight();
var height = $element.outerHeight() - 300;
var window_height = $(window).height();
$(window).scroll(function () {
var pos = $(window).scrollTop();
var top = $element.offset().top;
// Check if element is above or totally below viewport
if (top + height - followHeight < pos || top > pos + window_height) {
return;
}
var offset = parseInt($(window).scrollTop() - top);
if (offset > 0) {
$follow.css('transform', 'translateY('+ offset +'px)');
}
})
}
});
// Quote show on viewport
function inViewport( element, viewport = { top: 0, bottom: innerHeight } ){
// Get the elements position relative to the viewport
var bb = element.getBoundingClientRect();
// Check if the element is outside the viewport
// Then invert the returned value because you want to know the opposite
return !(bb.top > viewport.bottom || bb.bottom < viewport.top);
}
var myViewport = { top: innerHeight * .5, bottom: innerHeight * .6 };
var myElement = document.querySelector( '#cont_quote blockquote' );
// Listen for the scroll event
document.addEventListener( 'scroll', event => {
// Check the viewport status
if( $(window).width() >= 600 ){
if( inViewport( myElement, myViewport ) && $('.cont_q').hasClass('hasImage') ) {
if( $(window).width() >= 769 ){
myElement.style.opacity = 1;
myElement.style.left = '-25%';
} else {
myElement.style.opacity = 1;
myElement.style.left = '-5%';
}
} else if( inViewport( myElement, myViewport )) {
if( $(window).width() >= 769 ){
myElement.style.opacity = 1;
myElement.style.left = '-15%';
} else {
myElement.style.opacity = 1;
myElement.style.left = '13%';
}
} else {
myElement.style.opacity = 0;
myElement.style.left = '-40%';
}
} else {
myElement.style.opacity = 1;
myElement.style.left = '5%';
}
});

Trying to initialize FullPage.JS after scrolling through hero

Trying to initiate FullPage.JS after scrolling through hero. Right now if you scroll past the hero - FullPage gets initialized and continues to scroll through the slides with the momentum of the initial scroll. I have this function inplace for my init.
function initFullPage(){
$(".view-case-study").addClass("projects-load");
$(".pagination").addClass("visible");
$(".logo-menu svg").toggleClass("hovered");
$('#fullpage').fullpage({
lazyLoading:false,
navigation: true,
navigationPosition: 'right',
css3:true,
normalScrollElementTouchThreshold: 5,
touchSensitivity: 10,
anchors: a_anchors,
menu: '#myMenu',
normalScrollElements: '.nav, .open-nav, .project-inner, .work-mode, .menu-shelf, .tab, .view-case-study, #hero, .hero-center-container',
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
projectUrl = loadedSection.data('url');
project_title = loadedSection.data('title');
loadedSection.addClass('projects-load');
loadedSection.find(".full-line").animate({'width':'100%'},500);
loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000);
$('#hero').animate({'opacity':'0'},1000);
$('#hero').addClass('destroy');
$('.ui-info').animate({'opacity':'1'},350);
},
onLeave: function(index, nextIndex, direction){
var leavingSection = $(this);
leavingSection.removeClass('projects-load');
leavingSection.find(".full-line").animate({'width':'0%'},250);
leavingSection.animate({'background-position-y':'0px','background-size':'110%'},100);
$('#project-inner-container').animate({scrollTop:0},0);
$('.ui-info').animate({'opacity':'0'},0);
}
});
fullPageInit = true;
}
Below is my Hero scroll script. I've tried to initialize the script and silentmove to the first section but it doesn't want to listen.
var winHeight = $(window).height();
$(window).scroll(function () {
var scrTop = $(document).scrollTop() / winHeight,
scrTopFixed = scrTop.toFixed(2),
scrTransform = scrTopFixed * 80,
bgPos = scrTransform / 10 + 95,
heroOpacity = 1 - scrTransform / 100;
if ((scrTransform >= 80) && (fullPageInit == false)) {
initFullPage();
$.fn.fullpage.silentMoveTo('#sidepocket');
}
$('svg.scroll-end').css({
'clip': "rect(0px," + scrTransform + "px,200px,0px)",
});
}); // Close

// Scroll SVG Hero
$('#scroll-control').on('scroll',function(e){
var totalScroll = $('#scroll-control').scrollTop();
var slowScroll = totalScroll * .2;
console.log(slowScroll);
$('svg.scroll-end').css({
'clip': "rect(0px," + slowScroll + "px,200px,0px)",
});
if(totalScroll > 400){
if((fullPageInit == false) && (workPage == false)){
fullPageInit = true;
$('#hero').animate({'opacity':'0'},300,function(){
// remove scroll listener
$('#scroll-control').off();
// set first project DOM
var wh = window.innerHeight ? window.innerHeight:$(window).height();
$('#fullpage section').height(wh);
var loadedSection = $('#fullpage section:first-child');
projectUrl = loadedSection.data('url');
project_title = loadedSection.data('title');
loadedSection.addClass('projects-load');
loadedSection.find(".full-line").animate({'width':'100%'},500);
history.pushState(null, null, '#'+projectUrl);
loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000,function(){
initFullPage();
$('#scroll-control').hide();
});
$('.ui-info').animate({'opacity':'1'},350);
});
$('#hero').addClass('destroy');
}
}
});
var winHeight = $(window).height();
$(window).scroll(function (e) {
console.log(e);
var scrTop = $(document).scrollTop() / winHeight,
scrTopFixed = scrTop.toFixed(2),
scrTransform = scrTopFixed * 80,
bgPos = scrTransform / 10 + 95,
heroOpacity = 1 - scrTransform / 100;
if ((scrTransform >= 80) && (fullPageInit === false)) {
}
}); // Close
The issue was fixed by setting a time out so that FullPage doesn't initialize until the scrolling of the mouse ends, therefore you do not overscroll or have any momentum that forces the user to the next section.
Hope this helps others trying to build custom scripts into FullPage.JS
https://www.alexcoven.com

Set top of page to 340px from top with jQuery

Currently I have a script which starts a progress bar the moment a user starts scrolling.
Is it possible to change this to when the user gets to 340px from the top of the page?
Here is a demo of my site: http://pixsols.com/test/wordpress/reading-progress/
Here is my current code:
(function ( $ ) {
$.fn.progressScroll = function(options) {
var settings = $.extend({
fontSize : 20,
color : '#009ACF',
height : '5px',
textArea : 'dark',
}, options);
// element state info
var docOffset = $(this).offset().top,
elmHeight = $(this).height(),
winHeight = $(window).height();
// listen for scroll changes
$(window).on('scroll', function() {
var docScroll = $(window).scrollTop(),
windowOffset = docOffset - docScroll,
viewedPortion = winHeight + docScroll - docOffset;
if($(window).scrollTop() > 0) {
if($('.scrollWrapper').hasClass('hidden')) {
$('.scrollWrapper').removeClass('hidden').hide();
$('.scrollWrapper').slideDown('slow');
}
} else {
$('.scrollWrapper').slideUp('slow');
$('.scrollWrapper').addClass('hidden');
}
if(viewedPortion < 0) { viewedPortion = 0; }
if(viewedPortion > elmHeight) { viewedPortion = elmHeight; }
// calculate viewed percentage
var viewedPercentage = viewedPortion / elmHeight;
// set percent in progress element
$('.scroll-bar').css('width', (viewedPercentage*100)+'%' );
});
var self = this;
$(window).on('resize', function() {
docOffset = $(self).offset().top;
elmHeight = $(self).height();
winHeight = $(window).height();
$(window).trigger('scroll');
});
$(window).trigger('scroll');
var $el = $('.scroll-bar').css(settings);
return $el;
};
}( jQuery ));

My guess would be to manipulate this:
windowOffset = docOffset - docScroll,
Probably you should add or subtract 320px from windowOffset. So for example"
windowOffset = docOffset - docScroll + 320,

Jquery custom slider infinite loop

I did jquery slider using this tutorial
http://css-plus.com/2010/09/create-your-own-jquery-image-slider/
, where the pictures are sliding automatically, but just once. How can I make them circle in an infinite loop?
on-line example :
www.vytvarkajablonec.jecool.net/ati
I'd really appreciate your help!

Replace the JS code from tutorial for this:
$(document).ready(function () {
// Gallery
if (jQuery("#gallery").length) {
// Declare variables
var totalImages = jQuery("#gallery > li").length,
imageWidth = jQuery("#gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery("#gallery").width(totalWidth);
jQuery("#gallery-prev").click(function () {
if (jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")) {
jQuery("#gallery").animate({
left: "+=" + imageWidth + "px"
});
}
if (jQuery("#gallery").position().left === 0) {
jQuery("#gallery > li:last").prependTo($("#gallery"));
}
return false;
});
jQuery("#gallery-next").click(function () {
if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) {
jQuery("#gallery").animate({
left: "-=" + imageWidth + "px"
});
}
if (jQuery("#gallery").position().left === stopPosition) {
jQuery("#gallery > li:first").appendTo($("#gallery"));
}
return false;
});
}
});

Just animate the gallary back to it's initial position if it is at the end of the gallary.
var oGallary = $('#gallery');
var gallarWidth = oGallary.width();
if(oGalary.position().left > stopPosition && oGallary.is(":animated") == false)
{
oGallary.animate({left : "-=" + imageWidth + "px"});
}
else if ( oGalary.position().left <= stopPosition && oGallary.is(":animated") == false )
{
oGallary.animate({left : "+=" + gallaryWidht + "px"}) // Get full length of the entire gallary
}

How to resize images proportionally keeping the aspect ratio?

I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio.
Can someone point me to some code, or explain the logic?
(function($){
$.fn.swipeGallery = function(options) {
var settings = {
'classname' : 'appGallery',
'autoHeight' : false,
'height' : '100',
'width' : '100',
'background' : '#000000',
'tolerance' : 0.25,
'delay' : 300
}
var ratio = 0;
var mousedown = false;
var mouseX = 0;
var imagesLength = 0;
var imagesCurrent = 0;
var xdiff = 0;
var containerHeight = 0;
var containerWidth = 0;
function doResizeImage(listElement){
$(listElement).css('height', containerHeight);
$(listElement).css('width', containerWidth);
var img = $(listElement).find('img');
if (img.width() / containerWidth > img.height() / containerHeight){
img.width(containerWidth);
var top = (containerHeight - img.height())/2;
img.css('marginTop', top + 'ratio');
}else{
img.height(containerHeight);
var left = parseInt((containerWidth - img.width())/2);
img.css('marginLeft', left + 'ratio');
}
}
function init(obj, parent, imageHandler){
if(settings.autoHeight){
containerHeight = $(window).height();
containerWidth = $(window).width();
}else{
containerHeight = parseInt(settings.height);
containerWidth = parseInt(settings.width);
}
obj.find('li').each(function(){
doResizeImage(this);
imagesLength++;
})
parent.css('height', containerHeight);
parent.css('width', containerWidth);
imageHandler.css('width', containerWidth);
imageHandler.css('height', containerHeight);
imageHandler.css('left', parent.position().left);
imageHandler.css('top', parent.position().top);
obj.css('width', imagesLength * containerWidth);
}
return this.each(function(){
var _this = $(this);
if(options) {
$.extend(settings, options);
}
if(settings.autoHeight){
containerHeight = $(window).height();
containerWidth = $(window).width();
}else{
containerHeight = parseInt(settings.height);
containerWidth = parseInt(settings.width);
}
_this.wrap('<div class="' + settings.classname + '"/>');
var parent = _this.parent();
parent.css('backgroundColor', settings.background);
parent.prepend('<div class="imageHandler"/>');
var imageHandler = _this.parent().find('.imageHandler');
init(_this, parent, imageHandler);
$(window).resize(function(){
init(_this, parent, imageHandler);
})
imageHandler.mousedown(function(event){
if(!this.mousedown){
this.mousedown = true;
this.mouseX = event.pageX;
}
return false;
});
imageHandler.mousemove(function(event){
if(this.mousedown){
xdiff = event.pageX - this.mouseX;
_this.css('left', -imagesCurrent * containerWidth + xdiff);
}
return false;
});
imageHandler.mouseup(function(event){
this.mousedown = false;
if(!xdiff) return false;
var fullWidth = parseInt(settings.width);
var halfWidth = fullWidth/2;
if(-xdiff > halfWidth - fullWidth * settings.tolerance){
imagesCurrent++;
imagesCurrent = imagesCurrent >= imagesLength ? imagesLength-1 : imagesCurrent;
_this.animate({left: -imagesCurrent * containerWidth}, settings.delay);
}else if(xdiff > halfWidth - fullWidth * settings.tolerance){
imagesCurrent--;
imagesCurrent = imagesCurrent < 0 ? 0 : imagesCurrent;
_this.animate({left: -imagesCurrent * containerWidth}, settings.delay);
}else{
_this.animate({left: -imagesCurrent * containerWidth}, settings.delay);
}
xdiff = 0;
return false;
});
imageHandler.mouseleave(function(event){
imageHandler.mouseup();
})
});
};
})(jQuery);

Try this simple function i mentioned here: https://stackoverflow.com/a/14731922/382536
/**
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* #param {Number} srcWidth Source area width
* #param {Number} srcHeight Source area height
* #param {Number} maxWidth Fittable area maximum available width
* #param {Number} maxHeight Fittable area maximum available height
* #return {Object} { width, heigth }
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}