Develop Reference

repeatable marquee that's optional based on text width

I've spent most of my morning trying to resolve how to create a scrolling marquee on an Angular app; my goal is when the dynamic text is longer than its viewport, it will scroll (repeating, meaning you don't have to wait for the entire title to scroll off the page before you see it again) but when it's short enough to display without being cut off in the viewport width, it does not scroll.
I like examples I'm seeing but need to combine them somehow and I am very beginner when it comes to adding any kind of javascript.
One is using jQuery and marquee:
$('.marquee').marquee({
duplicated: true
});
This one is great because it repeats the text and continues without it having to completely leave the screen to start again. But, my trouble comes when trying to figure out a way to add in javascript to figure out how wide that text will be; either to have it be static or scroll.
For some reason, I am unable to understand how to link to codepen or jsfiddle of the examples I've found that hit close to home. Hoping my inquiry above is enough information. I know commenters can be a bit rough—please be patient with me.

You could use text-shadow(to clone text) and animation if it is only about text.
JS will be necessary to get the width(from text lenght) of the piece to scroll and to update/insert css rule's values.
example inspired from your jsfiddle
function isElementOverflowing(element) {
var overflowX = element.offsetWidth < element.scrollWidth,
overflowY = element.offsetHeight < element.scrollHeight;
return (overflowX || overflowY);
}
// below css updated and injected . can be shorten and nicely rewritten
var element = document.getElementById('ov1');
if (isElementOverflowing(element)) {
var toscroll = element.scrollWidth;
element.style.textShadow = toscroll + 'px 0 ';
element.style.animation = 'marqueeme 5s infinite linear';
var csstyle = document.createElement('style');
csstyle.innerText = '#keyframes marqueeme {100%{ text-indent:-' + toscroll + 'px;}}';
element.appendChild(csstyle)
}
#marquee {
max-width: 15em;
overflow: hidden;
}
#ov1 {
white-space: nowrap;
margin: 0;
}
<div id="marquee">
<p id="ov1">
Yadda yadda overflowing text this line is too long oh noes!
</p>
</div>
example here is using text-indent within the animation, but negative margin-left or translateX will do the same visual.
Another example with
a text-shadow of different color
transform to see it working instead text-indent.
It also sets speed according to text length
# https://codepen.io/gc-nomade/pen/owPNZg

Repeating javascript functions onclick

Im a total noob and need some help on a function which I would think for most of you would be quite simple. I am trying to do this with pure Javascript and not JQuery. I have been trying for hours and I cant get it.
What I am trying to achieve is to have a function repeat every time I click on a link.
To be more specific I currently have text that fades in when clicking a link and I would like it to always perform the fade in when I click on it (as if you were to refresh the page).
Basically: Click link (x) -- Text Fades in -- click link (x) -- same text disappears and then fades in from beginning of transition/animation (no fade out) -- repeat
I have come across something very similar on W3 schools which shows a function starting from the beginning every time you click the button: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_progressbar
I thought that modifying this was the answer but because I am trying to change the opacity, I have seen that I have to add a parseFloat to the function because it is a string but I am having no success. The example is:
else { i.style.opacity = parseFloat(i.style.opacity) + .1; }
To throw another spanner in the works, I am using the opacity value from the color:rgba(0,0,0,0) to change the opacity. I thought this may be easier to find since the above example would (in my mind) bypass the parseFloat thing as you would be using i.style.color but I could not find anything.
Below is my code based on a variation of the W3 schools tutorial. I'm pretty sure that clearInterval in JS has a big part to play in what I need. Very much appreciate any help for this and please let me know if you need more clarity :)
<!DOCTYPE html>
<html>
<style>
#about {
color: rgba(10,10,10,0);
transition: color 1s linear 1s;
}
#about:target {
color: rgba(10,10,10,1);
transition: color 1s linear 1s;
}
</style>
<body>
About
<div id="div">
<p id='about'> Please help me figure this out. I really appreciate it</p>
</div>
</body>
<script>
function fadeIn() {
var elem = document.getElementById("about");
var begin = 0;
var id = setInterval(frame, 10);
function frame() {
if (begin == 100) {
clearInterval(id);
} else {
begin++;
elem.style.color = begin + '1';
}
}
}
</script>
</html>

There is a solution, which I am not going to present you, because the JS "hack" will take longer, compared to the CSS-trick: (looking for appropriate reference)
You wrap your stuff, which you want to fade in and out into a container (just making sure) and add a checkbox above it:
<label for="about">About</label>
<intput type="checkbox" name="about" id="about">
<div id="about_container"> bla-bla-bla</div>
then you style your stuff:
Hide the checkbox (the label is clickable)
make two configs for your #about_container
first: in the off mode, second in the on mode (you can comment them out for debugging purpose)
#about + #about_container
then you add the input id with pseudo-selector before the second:
#about:checked + #about_container
on your on mode, and leave the other one, like it is.
MUCH BETTER AND FASTER SOLUTION!
You should also change your question into something like:
How do I make html element appear and disappear on mouse-click or other user-interaction.

You can use transitions and then set opacity 0.5 and after some ms change it in 1 to let it fade on click and return in the older look
Edit:
Just put fadeIn() inside another function, and before the fadeIn() executon set the opacity to 0
Edit:
JS
doIt = function() {
document.getElementById("about").style.color = begin + '0';
fadeIn();
}
HTML
About

Animate div's CSS top property when scrolling down

I have a notification that pops up during difference instances on my site, and I'd like that notification to follow the menu that animates when you scroll down.
The code I have is as follows:
<script type='text/javascript'>
var messageFollow = $('.woocommerce-info').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= messageFollow) {
$('.woocommerce-info').css({top: "150px"});
} else {
$('.woocommerce-info').css({top: "74px"});
}
});
</script>
The notification has a value right now of top: 150px which looks great when you're at the top of the screen but top: 74px looks great when scrolled down.
I also want it to animate, but I have no idea how to implement that as well.
A clip to demonstrate: https://www.dropbox.com/s/p6i95f5gkbyn4nm/MessageNotification.mov?dl=0

jQuery has a built-in animate function.
Just replace css with animate and make sure the value is integer.
You can also give a duration in milliseconds as a second parameter to animate function.
$('.woocommerce-info').animate({top: 150},500);

Animate image left to right on scroll

What I am trying to do is I have around 6 inline images I want slide them left to right on specific position and stop there for each image. And images have to slide at the time the scrool comes over them.
I tried this javascript for it (totally new to JS)
$(window).scroll(function(){
if($this.scrollTop()>300)
{
$('.onfoot1').slideright();
}
function slideright(){
var a = getElementsByClassName('.onfoot1');
var stoppos = 100;
if (parseInt(a.style.left)< stoppos )
{
a.style.left = parseInt(a.style.left) + 3 + "px";
setTimeout(slideright , 1);
}
}
});
Markup
<div class="onfoot1"></div>
CSS
div.onfoot1{
content:url(../img/onfoot1.jpg);
left:0;
}

I've put together a working examle for your code: https://jsfiddle.net/hmzw9y65/
I've made a few assumptions there... You are using $(...) syntax so I guessed you are using JQuery. JQuery has a .animate() function which should do the trick (http://api.jquery.com/animate/). Also I guessed that you may want to make the css-position of the div fixed so it stays on screen when you scroll.
EDIT: I noticed that you don't want you image on the bottom of the screen but animating when screen reaches it. Updated my fiddle to do that: https://jsfiddle.net/hmzw9y65/1/

CSS transition not working after element is appended

I have encountered an issue with CSS transitions and before I try something else, I want to understand what the problem is.
There are 3 boxes in a container and a "next" button. The goal is for the next box top appear on top and to fade in when the "next" button is pressed. The box is positioned on top by appending it to the container, so that it is added as the last element and thus visible on top, and should fade in through css transition.
The problem is that the css transition does not seem to work after the box was appended.
The css transition works well if tested on a box element that is not appended.
Fiddle here, code below:
HTML:
<div class="container">
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>
</div>
<div id="next">Next</div>
JS:
var container = $(".container");
// Save the current list order
var list = container.children(".box");
// The current index
var current = 0;
// Put the first on top
container.append(list[0]);
function next() {
// Figure out what is the index of the next box
if (current + 1 < list.length) current++;
else current = 0;
// Save it in a variable
var target = $(list[current]);
// Put it on top
container.append(target);
// Hide it and then fade it in
target.css("opacity", 0).css("transition", "opacity 1000ms ease-out").css("opacity", 1);
// The fading in is not working
}
$("#next").click(next);
Update:
A basic solution to this problem was to call offset() on the target after setting the opacity to 0 and before setting the transition css:
target.css("opacity", 0);
target.offset();
target.css("transition", "opacity 1000ms ease-out").css("opacity", 1);
Updated version of the above fiddle here

The "list" variable is a jQuery object, but the elements you pull out of it as "target" are not jQuery objects - they're the DOM nodes. Thus your calls to ".css()" are failing (which is reported in the error console for me).
Once you've fixed that, then the next thing is the issue of how the browser deals with a sequence of CSS updates. It's not clear to me what exactly I'm seeing (from Firefox 18 on Linux), but I think the basic issue is that because no layout reflow is done between the changes, the net effect is that the styles are "collapsed" so that there's no net change.
In this update to the fiddle I took a different approach. I put the transition rules in the "box" class, and then added a "prefade" class:
.prefade {
transition-duration: 0;
opacity: 0;
}
Then, instead of messing with the element style, I add "prefade" before appending, and then trigger a layout update by asking for the element's offset. Then I can remove the "prefade" class, and the box fades in.
target.addClass('prefade');
// Put it on top
container.append(target);
var p = target.offset();
target.removeClass('prefade');
I don't know whether that's the "right" way to do things. edit — to make it work in Chrome, the "transition" properties need to be repeated with the -webkit- prefix.

Is there any particular reason to use CSS transitions, when you could use jQuery fades instead and have your code work on browsers that don't support CSS transitions?
var $container = $(".container");
function next() {
var $next = $container.children().first();
$next.hide().appendTo($container).fadeIn();
}
$("#next").click(next);
Note that you can avoid a lot of the state you're maintaining merely by taking the first element from the container and moving it to the back - the DOM maintains your state for you!
See http://jsfiddle.net/alnitak/w6y3B/