Adding custom jQuery and CSS on page not working

rothkuo

Hello,

I have two questions:

I've been trying put these codes into my page, though it has not been successful. Am I missing something or putting it in the wrong place? The CSS is in "Custom CSS & HTML" > "Custom CSS", JS is in "Custom CSS & HTML" > "Custom <head> content", and the HTML is in the source code of the page itself.
How do I make an onmouseout or mouseout function where when the mouse is no longer hovering the text, it goes back to the original white background?

Thank you very much in advance!

mariusjopen

Dear @rothkuo
have a look here:
http://laytheme.com/documentation.html#custom-javascript

Hope that helps :-)

Best!

Marius

zero

NICE work!

mariusjopen

Thank you! :-)

rothkuo

Hi Marius!

Thank you for the link. I swapped out "$" and replaced with "jQuery" as instructed. Since I am a novice to coding, Newpage Events is where I got lost. Do I use both of the "newpage" and "newpageshown" codes?

How would I incorporate the window.laytheme.on( with .mouseover function?

Any help would be appreciated!

Thank you,
Hannah

mariusjopen

Dear @rothkuo
see if this works for you:

<script>
jQuery(document).on("mouseenter", "YOURCLASSNAME", function(event) {
	alert("Hello Hannah!");
});
</script>

Let me know if that gor you further.

Best!

Marius

rothkuo

Hi Marius,

Thank you for your response. I put the code you provided into the Custom <head> content and for my text I tried by <p class="YOURCLASSNAME" and <a id="YOURCLASSNAME" in the source code section of my text.

It doesn't seem to work, am I doing something wrong?

mariusjopen

Dear @rothkuo
you need to put the code here:
0_1547166452527_Bildschirmfoto 2019-01-10 um 22.27.10.png

Best!

Marius

rothkuo

I tried with the code within <body> tag but it is not working either.

mariusjopen

Dear @rothkuo
can you get this code to work first?

<script>
jQuery(document).on("mouseenter", "YOURCLASSNAME", function(event) {
	alert("Hello Hannah!");
});
</script>

If you got this working I can help you further.
Have a look in the documentation.

Best!

Marius

rothkuo

Hi @mariusjopen
Sorry if I am misunderstanding this, but I put the code you provided above in custom HTML for after <body>, and put a link with the class name on the about page, but it doesn't seem to be working.

rothkuo

I am getting this error when I look at the javascript on the live page:

alt text

Is that related at all?

mariusjopen

Dear @rothkuo
no. Thats not related I suppose.

Can you send a link to your page with the installed code?

Best!

Marius

rothkuo

Hi @mariusjopen
Thanks for your help
I was able to figure it out with a different javascript:

[code]jQuery(document).on("mouseover", "#ID", () => {
jQuery("body").css(
"background-image",
'url("IMG URL")'
);
})
.on("mouseleave", "#ID", () => {
jQuery("body").css("background-image", "none");
});

mariusjopen

Dear @rothkuo
ah, perfect!

Happy you got it working. Thank you for sharing!

Best!

Marius