Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Adding custom jQuery and CSS on page not working

    Installation Problems
    3
    15
    943
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • rothkuo
      rothkuo last edited by rothkuo

      Hello,

      I have two questions:

      1. 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.
      2. 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!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

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

        Hope that helps :-)

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • Z
          zero last edited by

          NICE work!

          1 Reply Last reply Reply Quote 1
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Thank you! :-)

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • rothkuo
              rothkuo last edited by

              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

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                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

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • rothkuo
                  rothkuo last edited by

                  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?

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

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

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • rothkuo
                      rothkuo last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

                        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

                        www.mariusjopen.world

                        rothkuo 1 Reply Last reply Reply Quote 0
                        • rothkuo
                          rothkuo @mariusjopen last edited by

                          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.

                          1 Reply Last reply Reply Quote 0
                          • rothkuo
                            rothkuo last edited by rothkuo

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

                            alt text

                            Is that related at all?

                            1 Reply Last reply Reply Quote 0
                            • mariusjopen
                              mariusjopen Global Moderator last edited by

                              Dear @rothkuo
                              no. Thats not related I suppose.

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

                              Best!

                              Marius

                              www.mariusjopen.world

                              rothkuo 1 Reply Last reply Reply Quote 0
                              • rothkuo
                                rothkuo @mariusjopen last edited by

                                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");
                                });

                                1 Reply Last reply Reply Quote 0
                                • mariusjopen
                                  mariusjopen Global Moderator last edited by

                                  Dear @rothkuo
                                  ah, perfect!

                                  Happy you got it working. Thank you for sharing!

                                  Best!

                                  Marius

                                  www.mariusjopen.world

                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post

                                  Before you post

                                  Use the Search Feature. Maybe there is already a solution to your issue.

                                  1. Update Lay Theme and all Lay Theme Addons
                                  2. Disable all Plugins
                                  3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                  4. Now see if your problem solved itself
                                  5. Go here, see if your problem is listed here:
                                  Troubleshooting

                                  When you post:
                                  1. Post a link to where the problem is
                                  2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                  Thanks!

                                  Online Users

                                  M

                                  Recent Topics

                                  • M

                                    komische boxen auf der Website

                                  • S

                                    Theme crashed - because of Polylang?

                                  • J

                                    Split Screen just on front page / subpages without the split?

                                  • Y

                                    image quality dropped

                                  laytheme.com