We Keep Coding

How to change opacity of element when scrolled to bottom within media query

I just want to ask. I want to make the product image thumbnail in shopify disappear when I scrolled down to bottom of the page, and I want a bit of transition with it.. I really can't figure out how to do this..
Here's my code..
https://jsfiddle.net/vsLdz4qb/1/
function myFunction(screenWidth) {
if (screenWidth.matches) { // If media query matches
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
document.getElementByClass("product-single__thumbnails").style.transition = "0.65s";
document.getElementByClass("product-single__thumbnails").style.opacity = 0;
}
};
}
}
let screenWidth = window.matchMedia("(min-width: 750px)");
myFunction(screenWidth); // Call listener function at run time
screenWidth.addListener(myFunction)
Thank you so much in advance!

The correct document method is document.getElementsByClassName and since it returns an array you need the first element of it so change this:
document.getElementByClass("product-single__thumbnails").style.transition = "0.65s";
document.getElementByClass("product-single__thumbnails").style.opacity = 0;
to:
document.getElementsByClassName("product-single__thumbnails")[0].style.transition = "0.65s";
document.getElementsByClassName("product-single__thumbnails")[0].style.opacity = 0;
You can read more about the method here

You should use getElementsByClassName in place of getElementByClass(This is not correct function)
and this will return an array like structure so you need to pass 0 index, if only one class available on page.
or you can try querySelector(".product-single__thumbnails");
and for transition, you can define that in your .product-single__thumbnails class like: transition: opacity .65s linear; - use here which property, you want to animate.
<!-- [product-image] this is for product image scroll down disappear -->
function myFunction(screenWidth) {
if (screenWidth.matches) { // If media query matches
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
document.getElementsByClassName("product-single__thumbnails")[0].style.opacity = 0;
}
};
}
}
let screenWidth = window.matchMedia("(min-width: 350px)");
myFunction(screenWidth); // Call listener function at run time
screenWidth.addListener(myFunction)
body {
margin:0;
height: 1000px;
}
.product-single__thumbnails {
background-color: red;
color: white;
width: 50px;
height: 50px;
position: fixed;
transition: opacity .65s linear;
border-radius: 4px;
margin: 20px;
text-align: center;
}
<div class="product-single__thumbnails">
<p>red</p>
</div>

Scrolling link text on hover - endless marquee effect

I'm looking for a performant and also smooth solution for links that scroll their text inside of their inline-block box like a marquee effect.
$(document).ready(function() {
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
scrollInterval = setInterval(function(){
scroll(e)
},100);
}
}
function stopScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
}
$(".mali").hover(function(){
startScrolling($(this));
});
$(".mali").mouseout(function(){
stopScrolling($(this));
});
$(".mali").mousedown(function(){
stopScrolling($(this));
});
});
.mali {
display: inline-block;
background: black;
color: white;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Something something darkside, Something something complete.
My solution so far is something I actually found here on stackoverlow in another thread and tried to work with it.
Two problems though.
1.) As this is basically using an interval to loop through the single letters this effect is not very smooth. The effect is stuttering.
Has anyone an Idea on how to make this more smooth? Maybe in that case don't use this method at all and maybe use a CSS transition to animate the text?
2.) Does anyone have a clever solution on how to return to the initial state once I hover off? I want the effect on hover but when moving the mouse off the link it should animate back to the initial text state.
Thanks,
Matt

2) You can save initial state and then just revert it:
$(document).ready(function() {
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
$(e).data("text", $(e).text());
scrollInterval = setInterval(function(){
scroll(e)
},100);
}
}
function stopScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
$(e).text($(e).data("text"));
}
$(".mali").hover(function(){
startScrolling($(this));
});
$(".mali").mouseout(function(){
stopScrolling($(this));
});
$(".mali").mousedown(function(){
stopScrolling($(this));
});
});
.mali {
display: inline-block;
background: black;
color: white;
padding: 10px;
transition: all .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Something something darkside, Something something complete.
1) As a smooth animation, i thought of this as a PoC. Maybe it will help you with further ideas.
$(document).ready(function() {
// Those global data could be stored in element's data.
var indent = 0,
width = 0,
padding = 10;
function scroll(ele){
// Every iteration decrease indent by value
indent -= 1;
// If is indent greater than or equal than real width
// (width with padding) reset indent.
if(-indent >= width+padding)
indent = 0;
// Aplly property
$(ele).css("text-indent", indent);
}
var scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
// Get text and real width
let text = $(e).text();
width = $(e).width()
$(e)
// Set real width & height, so that container stays
.width($(e).width())
.height($(e).height())
// Save text to data for reset
.data("text", text)
// Add 2 spans with text:
// <span>text</span><span>text</span>
// Where second span has defined padding on the left
.html($("<span>").text(text))
.append($("<span>").text(text).css("padding-left", padding+"px"));
resumeScrolling(e);
}
}
function stopScrolling(e) {
pauseScrolling(e);
// Reset
$(e)
// Revert real text and reset indent
.text($(e).data("text"))
.css("text-indent", indent = 0);
}
function pauseScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
}
function resumeScrolling(e) {
if (!scrollInterval) {
// Every 30ms repeat animation. It must be at least 25x per second
// so it runs smoothly. (So 1 - 40).
scrollInterval = setInterval(function(){
scroll(e)
},30);
}
}
$(".mali").hover(function(){
startScrolling($(this));
});
$(".mali").mouseout(function(){
stopScrolling($(this));
});
$(".mali").mousedown(function(){
stopScrolling($(this));
});
$("#start").click(function(){
startScrolling($(".mali"));
});
$("#stop").click(function(){
stopScrolling($(".mali"));
});
$("#pause").click(function(){
pauseScrolling($(".mali"));
});
$("#resume").click(function(){
resumeScrolling($(".mali"));
});
});
.mali {
display: inline-block;
background: black;
color: white;
padding: 10px;
/*
This could help, but you can't reset text-indent without animation.
transition: all .1s;
*/
overflow: hidden;
vertical-align: middle;
}
/* When you hover element, new span elements
can't take pointer events, so your elements
stays hovered. */
.mali span {
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Something something darkside, Something something complete.
<br><br>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="pause">Pause</button>
<button id="resume">Resume</button>
Idea behind this is:
make element overflow:hidden; so no text will overflow
set fix dimension
duplicate text inside
change text indent every x miliseconds (x < 40 so it is smooth, must be at least 25fps)
when it overflows, reset it so it can be in infinite loop

Trigger a function at a specific transition value

I want to trigger a function at a specific transitionY Value.
I found this:
document.getElementById("main").addEventListener("webkitTransitionEnd", myFunction);
document.getElementById("main").addEventListener("transitionend", myFunction);
function myFunction() {
alert('huuh');
}
But it's only a trigger after a transition End. When I scroll down on my Page, a div box change the style value by (transform: translateY(-100%)).
I tried:
if (document.getElementsByClassName('scroll-container').style.transform == "translateY(-100%)")
.......
but it doesn't work.

You can use jQuery's $.animate function. Using progress attribute, you will be getting current status of the animation. e.g.
setTimeout(function() {
var transitionPointReached = false;
$('#some-id').animate({
opacity: 0.1
}, {
duration: 1000,
progress: function(animation, progress, remaining){
console.log('progress called', progress, remaining);
if(!transitionPointReached && progress >= 0.7) {
transitionPointReached = true;
// call the required callback once.
}
}
});
}, 1000);
#some-id {
width: 200px;
height: 200px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some-id"></div>
Hope it helps.

or is it possible to trigger a function if the page reaches a new section? Like #0 (<a id="button" href="#0"></a> ) and went to #1 ?
greetings
Here u can see what i mean :
http://salon-lifestyle.de.w0192ceb.kasserver.com/#0

or is it possible to trigger a function if the page reaches a new
section? Like #0 ( ) and went to #1 ?
The Intersection Observer API was designed for such usecases, it allows to triggers callback when the viewport reaches/crosses/has reached a set of children.
Regarding your transition question, you can do something like this but I would not recommend using it. You can fetch the exact value of the transition property using element.cssText
const dummyDiv = document.getElementById('dummy')
// Assuming the transition is linear and lasts 2secs,
// mid-transiton happens after 1000ms
dummyDiv.addEventListener('transitionstart', () => {
window.setTimeout(() => {
dummyDiv.innerHTML = 'mid transition'
}, 1000)
})
dummyDiv.addEventListener('transitionend', () => {
dummyDiv.innerHTML = 'end transition'
})
#dummy{
padding: 50px 100px;
font-size: 35px;
background: #000;
color: #FFF;
transition: 2s linear;
}
#dummy:hover{
background:red
}
<div id="dummy">Hover me</div>

How do I direct JavaScript to a function on a satisfied IF statement? Trying to fix an Alert loop after progress bar completion

This is a very basic question, and for some reason I am having a hard time wrapping my brain around it. I am new and learning so bear with me please.
Here is a progress bar: https://codepen.io/cmpackagingllc/pen/ZNExoa
When the bar has loaded completely it adds the class completed as seen on js line 41.
progress.bar.classList.add('completed');
So say once completed I want to add an Alert that say's "completed". I assume this would be an easy task but because of the way the code is written with the loop seen on line 46/47
loop();
}, randomInterval);
I am unable to incorporate the Alert properly without an alert loop even when I used return false to stop the loop afterwards.
So the route I am trying to take now is to add the alert prompt to the success function found on line 21-25
function success() {
progress.width = progress.bar.offsetWidth;
progress.bar.classList.add('completed');
clearInterval(setInt);
alert("Completed!");
}
But now I am stuck trying to format it correctly so when the if is called on line 36
if (progress.width >= progress.bar.offsetWidth) {
When the if is called on line 36 I want to to jump to the success function instead. No matter how I try it the code fails to execute. How would I format this correctly so it jumps to my function instead of looping after completed?
I would greatly appreciate some assistance with this. I am trying to understand if there is a better way to add the alert. Thank you much.

I read your code with special attention because recently I have been working with some loading bars (but not animated ones).
The problem is that you are using setTimeout() and not setInterval(), so calling clearInterval() has no effect at all. And you really don't need setInterval() because you're already making recursive calls (looping by calling the same function from its body).
I've took the liberty of rewriting your code for you to analyse it. Please let me know if you have any doubts.
NOTE: It's easier in this case to use relative units for the width! So you don't have to calculate "allowance".
let progress = {
fill: document.querySelector(".progress-bar .filler"),
bar: document.querySelector(".progress-bar"),
width: 0
};
(function loop() {
setTimeout(function () {
progress.width += Math.floor(Math.random() * 50);
if (progress.width >= 100) {
progress.fill.style.width = '100%';
progress.bar.classList.add('completed');
setTimeout(function () {
alert('COMPLETED!');
}, 500);
} else {
progress.fill.style.width = `${progress.width}%`;
loop();
}
}, Math.round(Math.random() * (1400 - 500)) + 500);
})();

Like a comment said, there are several timers in your code. Also, success was never executed. Here you have a version that works.
If you are learning, try to make your code as simple as possible, use pseudocode to see in wich step there is an error and try debugging from there.
var progress = {
fill: document.querySelector(".progress-bar .filler"),
bar: document.querySelector(".progress-bar"),
width: 0 };
function setSize() {
var allowance = progress.bar.offsetWidth - progress.width;
var increment = Math.floor(Math.random() * 50 + 1);
progress.width += increment > allowance ? allowance : increment;
progress.fill.style.width = String(progress.width + "px");
}
function success() {
progress.width = progress.bar.offsetWidth;
progress.bar.classList.add('completed');
alert("Completed!");
}
(function loop() {
var randomInterval = Math.round(Math.random() * (1400 - 500)) + 500;
var setInt = setTimeout(function () {
setSize();
if (progress.width >= progress.bar.offsetWidth) {
success();
} else {
loop();
}
}, randomInterval);
})();
.progress-bar {
height: 10px;
width: 350px;
border-radius: 5px;
overflow: hidden;
background-color: #D2DCE5;
}
.progress-bar.completed .filler {
background: #0BD175;
}
.progress-bar.completed .filler:before {
opacity: 0;
}
.progress-bar .filler {
display: block;
height: 10px;
width: 0;
background: #00AEEF;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.progress-bar .filler:before {
content: '';
display: block;
background: repeating-linear-gradient(-45deg, #00AEEF, #00AEEF 10px, #23c3ff 10px, #23c3ff 20px);
height: 10px;
width: 700px;
border-radius: 5px;
animation: fill 10s linear infinite;
}
#keyframes fill {
from {
transform: translatex(-350px);
}
to {
transform: translatex(20px);
}
}
<div class="progress-bar">
<span class="filler"></span>
</div>

Animate an image size on click with jQuery

Im trying to animate a large image so it changes dimensions, starts at (200x116)px and becomes (400x232)px on click and then would revert back to (200x116)px if clicked again,
Here's a link to the code: http://jsfiddle.net/edddotcom/FMfC4/1/
HTML:
<img id="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">
CSS:
#imgtab {
position:relative;
}
JavaScript:
$(document).ready(function () {
$("#imgtab").toggle(function () { //fired the first time
$("#imgtab").animate({
width: "200px"
height: "116px"
});
}, function () { // fired the second time
$("#imgtab").animate({
width: "400px"
height: "232px"
});
});
});
Clicking the image should make it animate from small to large but it doesn't seem to change. Can anyone suggest what to change and tell me what i'm doing wrong?

if you simply want to toggle on click, try below
$(document).ready(function () {
var small={width: "200px",height: "116px"};
var large={width: "400px",height: "232px"};
var count=1;
$("#imgtab").css(small).on('click',function () {
$(this).animate((count==1)?large:small);
count = 1-count;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imgtab" class='small' src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">
OR
you can also use the duration parameter of addClass and removeClass functions available in jQuery-ui widgets library. i.e.
$(document).ready(function () {
var count=1;
$("#imgtab").on('click', function () {
var $this = $(this);
$this.removeClass('small, large',400);
$this.addClass((count==1)?'large':'small',400);
count = 1-count;
})
});
where .small and .large css classes are :
.small{
width:200px;
height:116px;
}
.large{
width:400px;
height:232px;
}
see this working fiddle.
NOTE: you will need reference of jQuery UI library also, cause duration parameter of addClass and removeClass is available there only.

You are missing comma between object properties passed as a argument in animate method.
$(document).ready(function () {
$("#imgtab").toggle(function () { //fired the first time
$("#imgtab").animate({
width: "200px",//HERE
height: "116px"
});
}, function () { // fired the second time
$("#imgtab").animate({
width: "400px",//HERE
height: "232px"
});
});
});
EG: http://jsfiddle.net/dFU9P/

Here is a simple way you can achieve your animation effect without having to use jQuery's animate and instead use CSS animations. I don't know what browsers you need to support, but it is still nice to see how it can be done in different ways.
HTML:
<img id="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">
CSS:
img {
height: 200px;
width: 116px;
-webkit-transition: all .4s ease-in; //added vendor prefixes for older browsers
-moz-transition: all .4s ease-in; //first parameter decides what properties to animate
-m-transition: all .4s ease-in; // second is duration
-o-transition: all .4s ease-in; //3rd is the timing-function
transition: all .4s ease-in;
}
.fullSize {
height: 400px;
width: 232px;
}
jQuery:
$('#imgtab').on('click', function(e) {
$(this).toggleClass('fullSize');
});
And here is the fiddle http://jsfiddle.net/AtQwM/. Feel free to mess around with the transition parameters for different effects!

Toggle offers two states for one event but any animation using it ends up with display:none. You therefore need to use your own toggling mechanism using a variable to control the state of the image:
$(document).ready(function() {
var imgSmall = false
$('#imgtab').on('click',function() {
$("#textab").toggle(20);
if ( imgSmall ) {
$('#imgtab').animate({width:"400px",height:"232px"});
imgSmall = false
} else {
$('#imgtab').animate({width:"200px",height:"116px"});
imgSmall = true
}
});
});
http://jsfiddle.net/FMfC4/3/

Instead of placing the new image dimension in the code they could be data-attributes.
http://jsfiddle.net/FMfC4/8/
<img class="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg" data-width="400" data-height="200">
(function($) {
$.fn.imageSizer = function() {
var originalSize = {
width: this.width(),
height: this.height()
};
this.on('click', function() {
var newSize = {
width: $(this).data('width'),
height: $(this).data('height')
};
var currentSize = ($(this).width() == newSize.width) ? originalSize : newSize;
$(this).animate(currentSize);
});
}
})(jQuery);
$(document).ready(function() {
$(".imgtab").imageSizer();
});