Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Installation Problems
  3. Adding custom jQuery and CSS on page not working

Adding custom jQuery and CSS on page not working

Scheduled Pinned Locked Moved Installation Problems
15 Posts 3 Posters 1.9k Views
  • 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.
  • rothkuoR Offline
    rothkuoR Offline
    rothkuo
    wrote on last edited by rothkuo
    #1

    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
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • Z Offline
        Z Offline
        zero
        wrote on last edited by
        #3

        NICE work!

        1 Reply Last reply
        1
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          Thank you! :-)

          www.mariusjopen.world

          1 Reply Last reply
          0
          • rothkuoR Offline
            rothkuoR Offline
            rothkuo
            wrote on last edited by
            #5

            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
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              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
              0
              • rothkuoR Offline
                rothkuoR Offline
                rothkuo
                wrote on last edited by
                #7

                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
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  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
                  0
                  • rothkuoR Offline
                    rothkuoR Offline
                    rothkuo
                    wrote on last edited by
                    #9

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

                    1 Reply Last reply
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #10

                      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

                      rothkuoR 1 Reply Last reply
                      0
                      • mariusjopenM 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

                        rothkuoR Offline
                        rothkuoR Offline
                        rothkuo
                        wrote on last edited by
                        #11

                        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
                        0
                        • rothkuoR Offline
                          rothkuoR Offline
                          rothkuo
                          wrote on last edited by rothkuo
                          #12

                          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
                          0
                          • mariusjopenM Offline
                            mariusjopenM Offline
                            mariusjopen
                            Global Moderator
                            wrote on last edited by
                            #13

                            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

                            rothkuoR 1 Reply Last reply
                            0
                            • mariusjopenM mariusjopen

                              Dear @rothkuo
                              no. Thats not related I suppose.

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

                              Best!

                              Marius

                              rothkuoR Offline
                              rothkuoR Offline
                              rothkuo
                              wrote on last edited by
                              #14

                              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
                              0
                              • mariusjopenM Offline
                                mariusjopenM Offline
                                mariusjopen
                                Global Moderator
                                wrote on last edited by
                                #15

                                Dear @rothkuo
                                ah, perfect!

                                Happy you got it working. Thank you for sharing!

                                Best!

                                Marius

                                www.mariusjopen.world

                                1 Reply Last reply
                                0
                                Reply
                                • Reply as topic
                                Log in to reply
                                • Oldest to Newest
                                • Newest to Oldest
                                • Most Votes


                                I also code custom websites or custom Lay features.
                                šŸ’æ Email me here: šŸ’æ
                                info@laytheme.com

                                Before you post:
                                1. When using a WordPress Cache plugin, disable it or clear your cache.
                                2. Update Lay Theme and all Lay Theme Addons
                                3. Disable all Plugins
                                4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                                This often solves issues you might run into

                                When you post:
                                1. Post a link to where the problem is
                                2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                                3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                                Online Users
                                Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                                laytheme.com
                                • Login

                                • Don't have an account? Register

                                • Login or register to search.
                                • First post
                                  Last post
                                0
                                • Recent
                                • Tags
                                • Popular
                                • Users
                                • Search