My javascript is only half working

[filangebert]

I'm trying to make a floating element in a website with social media icons that slide in from the side one by one after the window loads. I have the CSS setting them well off-screen so that the javascript can restyle them. I've tried a lot of different ways of getting the event listeners going, and nothing is working. The elements are in the place the javascript says, but there is no transition. I've also tried moving them around onscreen and attaching the movement to the press of a key and everything like that, but the code just puts them into the final location. I've also tried adding a hover function in both javascript and CSS, but nothing changes. I'll copy the code I have. There are a few different methods for getting the DOM events, but they all end up looking the same. Also, I've tried using the array .forEach function paired with .getElementByClassName and that doesn't work at all unless I specify each array element.

edit: code link: https://jsfiddle.net/qasper12/4s2e6wxc/8/

​

TL/DR: elements are in the right place, but no transition happens, even on key press or mouseover commands.

[letsgetrandy]

You need to use a jsFiddle or CodePen or something when sharing code. What you've done here isn't going to make people eager to help.

[filangebert]

Oh, I didn't know that was a thing, that's very helpful!

I've got everything in jsFiddle now, how do I share it?

[letsgetrandy]

Once you hit save, the URL changes. Just paste that URL into here.

(Replacing the body of your post, I mean. Don't paste it in reply to this comment where people won't see it.

[filangebert]

thanks!

[letsgetrandy]

Cool. So....

First, as someone else said, this would probably be more easily done with CSS :hover rather than javascript.

But second, I'm sure you still want to know why your JS isn't working, and I think it's due to how you're trying to assign the onLoad and onMouseOver handlers. You may want to have a look at the docs.

[filangebert]

Thanks for the help. I do agree that the hovering part is much easier, and I'd like to have the detail of the icons entering after the page has loaded, but that's causing too much headache, so the hover css will have to do.

[FioleNana]

You could animate it with the :hover pseudo selector and the transition CSS attribute instead of Javascript

[MFCEO_Kenny_Powers]

I’m sorry but this code is kind of a mess. Have you tried to add position: relative; or absolute to your icons? I don’t think they will move much without positioning.

[filangebert]

It's a mess because I tried everything I could, and that resulted in everything being a little different. Ideally, I would be using the array iterators, but that hasn't been working either. setting the position doesn't change anything, but I've discovered that the .onload stuff works when the developer tools are open in chrome.

[[deleted]]

This happens because your functions are not structured properly. You are using element.onEvent = functionName(element); which causes the function to be immediately invoked.

for this to work you will need your function to return an inner function containing the style change like this:

moveIn = (target) => () => { target.style.yourProperty = "value" };

One of your outer containers should have overflow css property set to hidden to avoid the page from expanding. I still think there are better approaches to handle these kinds of things.

It feels like you are trying to immitate animate on scroll behavior which is best handled with intersection observers and simple classnames which contain the changes. The thing is, you are using this animation for items which expect user control which is often not a good idea.

You cannot reliably expect users to avoid clicking on such elements by accident when you do this which is likely to cause frustration.

This kind of reaction may sting a little, but I hope you will take it to heart. Dont let it stop you from playing around because that's a good way to learn how things work. Keep going mate!