Lay Theme Forum

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

    Background colour change on rollover

    General Discussion
    2
    25
    2151
    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.
    • T
      Toby last edited by Toby

      Hi Armin / Marius

      I have given my thumbnails a specific colour on rollover - however would it be possible to apply that specific colour to the body background of website ( not thumbnail) on hover / rollover)?

      I'd be looking to do this on just one specific page - "Overview " where all my categories are together.

      www.tobyneilan.com

      Cheers
      Toby

      T 1 Reply Last reply Reply Quote 1
      • T
        Toby @Toby last edited by

        Hi

        Any suggestions on the above?

        Thanks in advance
        Toby

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

          Dear @Toby
          I just saw your post right now.

          Not really possible. But a cool idea.

          Well: Actually possible. But you will need to write that yourself with CSS and jQuery.

          But if you don't know the basics – I don't recommend it.

          It is not super difficult. But might be a bit tricky.

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply Reply Quote 1
          • T
            Toby last edited by

            Hi Marius

            I did manage to implement one colour on mouse enter and another on mouse leave
            ( although its also triggered on the text menu which I wouldn't want)

            <script>
            jQuery(document).on("mouseenter", "a", function(){
            jQuery("body").css("background-color", "rgb(251, 25, 0");
            });

            jQuery(document).on("mouseleave", "a", function(){
            jQuery("body").css("background-color", "rgb(241, 241, 241)");
            });
            </script>

            how can I now allocate different colours to different categories / image links

            am I close?

            Cheers
            Toby

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

              Dear @Toby

              well. Good you got that far!

              But there is still a long way to go.

              If you hover a project, you code needs to do the following:

              1. Get the name of the category of the post
              2. Get the color which is connected to that category-name
              3. Apply that color to the BODY tag ( <- that's what you got until now)

              I am sure you will manage!

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 1
              • T
                Toby last edited by

                Hi Marius

                Thanks for the hints - I've been playing trying to incorporate the above and have now written this
                but as you can guess its not working hence my call for guidance again.

                Am I getting closer??

                <script>
                jQuery(document).on("mouseenter", "a[href^='http://localhost:8888/wordpress_02/mosch-pit']", function(){
                jQuery("body[data-type="category"][data-id="6"]") ("body[data-type="project"][data-id="62"]").css("background-color", "rgb(251, 25, 0");
                });

                jQuery(document).on("mouseleave", "a"[href^='http://localhost:8888/wordpress_02/mosch-pit']"", function(){
                jQuery("body[data-type="category"][data-id="6"]") ("body[data-type="project"][data-id="62"]").css("background-color", "rgb(241, 241, 241)");
                });
                </script>

                Cheers
                Toby

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

                  Dear @Toby

                  Your code needs to get the number of the category: data-catid="4"

                  So it will save the 4 in a variable.

                  Then you need to activate a function with hover:
                  https://api.jquery.com/hover/

                  Ok, I can write you the basic structure of the code. It will not work with copy and paste but will give you a direction:

                  1: You hover a project and then you read out the category number data-catid="4" with this: https://api.jquery.com/data/

                  2: You save this number in a variable for example var cat_number

                  1. You make a IF function inside which says IF var cat_number == 4 then add red as a background colour to the BODY

                  I hope I could help.

                  A basic tutorial with jQuery should cover probably what you need :-)

                  Don't give up. I am here to help!

                  Best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 1
                  • T
                    Toby last edited by Toby

                    Thanks Marius

                    I've been reading up and looking at various other examples but unfortunately still drowning in code

                    Ive managed to produce a random background colour with this code -

                    <script>
                    jQuery(document).on("hover", ".info", function(event) {
                    jQuery(".hide").toggleClass("show");
                    });
                    </script>
                    <script>
                    window.laytheme.on("newpage", function(layoutObj, type, obj){
                    console.log("layoutObj", layoutObj);
                    console.log("type", type);
                    console.log("obj", obj);
                    });
                    </script>
                    <script>
                    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
                    if(type == "project" && obj.id == 1){
                    console.log("fantastic!");
                    }
                    });
                    </script>
                    <script>
                    var colors = ["#ff1900", '#18b0f7', '#ffde00', '#73c31e', '#ff1900']
                    window.laytheme.on("newpageshown", function(){
                    var ix = getRandomInt(0, colors.length);
                    var color = colors[ix];
                    jQuery('body').css('background-color', color);
                    });

                    function getRandomInt(min, max) {
                    min = Math.ceil(min);
                    max = Math.floor(max);
                    return Math.floor(Math.random() * (max - min)) + min;
                    }
                    </script>

                    but still struggling to allocate the specific hover on the cat_numbers and data

                    is this close?? -

                    <script>
                    window.laytheme.on("hover", hover) function(event){
                    if(type == "data-cat-id=6" && var cat_number == 6){
                    console.log("fantastic!");
                    }
                    });
                    </script>
                    <script>
                    window.laytheme.on("hover", function(){
                    var color = "rgb(241, 241, 241)");
                    jQuery('body').css('background-color', color);
                    });

                    </script>

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

                      Dear @Toby

                      I recommend to do a sketch in JS FIDDLE.

                      Make there a dic with the data attribute like in Laytheme.

                      Then you can also share your progress with us and I can have a look.

                      Is that good?

                      All the best!

                      Marius

                      www.mariusjopen.world

                      1 Reply Last reply Reply Quote 1
                      • T
                        Toby last edited by

                        Thanks Marius

                        I've visited JSFIDDLE and pasted in my code shall I email you the link?

                        Cheers
                        Toby

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

                          Hi @Toby

                          add this to your CUSTOM HEAD CONTENT:

                          <script>
                          window.laytheme.on("newpage", function(layoutObj, type, obj){
                          
                          jQuery(document).on("hover", ".thumb", 
                            function(event) {
                            
                            	jQuery("body").removeClass("red");
                              jQuery("body").removeClass("blue");
                              
                              var category = jQuery(this).attr("data-catid");
                              
                              if (category == 1) {
                                jQuery("body").addClass("red");
                          	  }
                              
                              if (category == 2) {
                             		jQuery("body").addClass("blue");
                          	  }
                              
                            }
                            
                          );
                          
                          });
                          </script>
                          

                          and this to your custom CSS:

                          .red {
                            background: red !important;
                          }
                          
                          .blue {
                            background: blue !important;
                          }
                          

                          I have two projects with two different categories.
                          If you inspect the thumbnails they are called 1 and 2:

                          0_1522429869369_Bildschirmfoto 2018-03-30 um 19.10.52.png

                          I placed the images as project thumbnails:
                          0_1522429906502_Bildschirmfoto 2018-03-30 um 19.11.26.png

                          You will probably need to adjust the code.
                          But this is the base and you can go on from there.

                          Good luck!

                          Marius

                          www.mariusjopen.world

                          mariusjopen 1 Reply Last reply Reply Quote 1
                          • T
                            Toby last edited by Toby

                            Hi Marius

                            Thanks for the code.

                            I've added this code to my CSS

                            .red {
                            background: #f1f1f1 !important;
                            }
                            .red:hover {
                            background-color: #ff1900 !important;
                            }

                            Which works but only when the pointer leaves the actual window and not when it leaves the thumbnails

                            Any ideas?

                            I'd also like this to only effect the overview page - I did a search on the forum and found this code

                            if(obj.slug == "frontpage”){

                            changing “frontpage to match my slug and applied it like they said to your example but it didn’t work.

                            Cheers
                            Toby

                            Cheers
                            Toby

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

                              Hi Toby,

                              can you post the whole code you wrote?

                              Also I remember that you used mouseenter and mouseout, right?

                              That was the way to go.

                              Best!

                              Marius

                              www.mariusjopen.world

                              1 Reply Last reply Reply Quote 1
                              • T
                                Toby last edited by

                                Hi Marius

                                I began by adding the above code

                                CSS

                                .red {
                                background: #f1f1f1 !important;
                                }
                                .red:hover {
                                background-color: #ff1900 !important;
                                }
                                .blue {
                                background: #f1f1f1 !important;
                                }
                                .blue:hover {
                                background-color: #ff1900 !important;
                                }

                                JQUERY

                                <script>
                                window.laytheme.on("newpage", function(layoutObj, type, obj){

                                jQuery(document).on("hover", ".thumb",
                                function(event) {

                                jQuery("body").removeClass("red");
                                jQuery("body").removeClass("blue");
                                jQuery("body").removeClass("yellow");
                                
                                var category = jQuery(this).attr("data-catid");
                                
                                if (category == 6) {
                                  jQuery("body").addClass("red");
                                  }
                                
                                if (category == 3) {
                                	jQuery("body").addClass("blue");
                                  }
                                if (category == 5) {
                                	jQuery("body").addClass("yellow");
                                  }
                                

                                }

                                );

                                });
                                </script>

                                as I said above this worked all be it the hover off only worked once the mouse had left the window not the thumbnail

                                I did attempt an example with mouseenter and mouseout in JSFIDDLE -

                                https://jsfiddle.net/Toby05/3yjw0dpk/15/#&togetherjs=9ISpwkHzla

                                HTML

                                <div class="box" data-catid="1">data-catid=1</div>

                                CSS

                                .box

                                JQUERY

                                $(document).ready(function(){
                                $(".box").mouseenter(function(){
                                $(this).css("background-color", "#ff1900");
                                });
                                $(".box").mouseleave(function(){
                                $(this).css("background-color", "#f1f1f1");
                                });
                                });

                                but have been unsuccessful in applying more than one colour / category and adding to lay theme.

                                Cheers
                                Toby

                                1 Reply Last reply Reply Quote 1
                                • T
                                  Toby last edited by

                                  Hi Marius

                                  I've managed to get some jquery working on JSFIDDLE but when I transferred the code into Layhtheme
                                  it doesn't work

                                  https://jsfiddle.net/Toby05/va6a10g1/45/#&togetherjs=VIBsap8NEF

                                  and here's the code i'm pasting into CUSTOM HEAD CONTENT:

                                  <script>
                                  window.laytheme.on("newpage", function(layoutObj, type, obj){
                                  jquery(document).on ("mouseover", ".thumb",
                                  function() {
                                  var category = $(this).attr("data-catid");
                                  if (category == 1)
                                  jquery(this).css('background', "rgb(251,25,0)");
                                  }).on("mouseout", function() {
                                  jquery(this).css('background', "rgb(241,241,241)");
                                  }).on("mouseover", function() {
                                  var category = $(this).attr("data-catid");
                                  if (category == 2)
                                  jquery(this).css('background', "rgb(24, 176, 247)");
                                  }).on("mouseout", function() {
                                  jquery(this).css('background', "rgb(241,241,241)");
                                  }).on("mouseover", function() {
                                  var category = $(this).attr("data-catid");
                                  if (category == 3)
                                  jquery(this).css('background', "rgb(255,222,0)");
                                  }).on("mouseout", function() {
                                  jquery(this).css('background', "rgb(241,241,241)");
                                  }).on ("mouseover",function() {
                                  var category = $(this).attr("data-catid");
                                  if (category == 4)
                                  jquery(this).css('background', "rgb(115,195,19)");
                                  }).on("mouseout", function() {
                                  jquery(this).css('background', "rgb(241,241,241)");
                                  });
                                  </script>

                                  Thanks
                                  Toby

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

                                    Hi @Toby

                                    as far as I understood – you wanted that the background is changing to a specific color when you hover a category, right?

                                    This is not happening in your example.

                                    Are we talking about the same thing?

                                    All the best!

                                    Marius

                                    www.mariusjopen.world

                                    1 Reply Last reply Reply Quote 1
                                    • T
                                      Toby last edited by Toby

                                      Hi Marius

                                      Yes that's what I want - unfortunately my attempts have been unsuccessful - can you help resolve this?

                                      The previous post I'd attached the wrong JSFIDDLE - Here is my latest attempt

                                      https://jsfiddle.net/Toby05/va6a10g1/67/#&togetherjs=y4rLV5GyyC

                                      Thanks
                                      Toby

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

                                        Dear @Toby

                                        this is the way to go:

                                        The code you just posted is already a step backward.

                                        Please try this code and let me know where the problem is.

                                        All the best!

                                        Marius

                                        @mariusjopen said in Background colour change on rollover:

                                        Hi @Toby

                                        add this to your CUSTOM HEAD CONTENT:

                                        <script>
                                        window.laytheme.on("newpage", function(layoutObj, type, obj){
                                        
                                        jQuery(document).on("hover", ".thumb", 
                                          function(event) {
                                          
                                          	jQuery("body").removeClass("red");
                                            jQuery("body").removeClass("blue");
                                            
                                            var category = jQuery(this).attr("data-catid");
                                            
                                            if (category == 1) {
                                              jQuery("body").addClass("red");
                                        	  }
                                            
                                            if (category == 2) {
                                           		jQuery("body").addClass("blue");
                                        	  }
                                            
                                          }
                                          
                                        );
                                        
                                        });
                                        </script>
                                        

                                        and this to your custom CSS:

                                        .red {
                                          background: red !important;
                                        }
                                        
                                        .blue {
                                          background: blue !important;
                                        }
                                        

                                        I have two projects with two different categories.
                                        If you inspect the thumbnails they are called 1 and 2:

                                        0_1522429869369_Bildschirmfoto 2018-03-30 um 19.10.52.png

                                        I placed the images as project thumbnails:
                                        0_1522429906502_Bildschirmfoto 2018-03-30 um 19.11.26.png

                                        You will probably need to adjust the code.
                                        But this is the base and you can go on from there.

                                        Good luck!

                                        Marius

                                        www.mariusjopen.world

                                        1 Reply Last reply Reply Quote 1
                                        • T
                                          Toby last edited by

                                          Hi Marius

                                          As I explained last week when I add the above code there is no mouse leave effect when the mouse leaves the thumbnail to revert back to the original colour (#f1f1f1)

                                          So I added this code to CSS - example for the red hover

                                          .red {
                                          background: #f1f1f1 !important;
                                          }
                                          .red:hover {
                                          background-color: #ff1900 !important;
                                          }

                                          Which nearly works, however the mouse leave doesn't revert back to #f1f1f1 until the mouse / pointer leaves the window - I'd like it to happen when the mouse leaves the thumbnail.

                                          Any ideas
                                          Cheers
                                          Toby

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

                                            Dear Toby,

                                            may I ask you to post the code in the this formatto this thread. And also make it as readable as possible for me. Breaks etc.
                                            Otherwise I need to do a surgery which costs a lot of time.

                                            Thank you

                                            Marius

                                            www.mariusjopen.world

                                            1 Reply Last reply Reply Quote 1
                                            • 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

                                            Recent Topics

                                            • C

                                              image carousel bugging out

                                            • N

                                              help needed with cleaning up and optimising lay theme portfolio website

                                            • R

                                              Html5 Video Player issue

                                            laytheme.com