Background colour change on rollover

mariusjopen

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

Toby

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)

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

mariusjopen

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:

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

I am sure you will manage!

Best!

Marius

Toby

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??

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

mariusjopen

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

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

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 -

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>

mariusjopen

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

Toby

Thanks Marius

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

Cheers
Toby

mariusjopen

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

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

mariusjopen

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

Toby

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

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

Toby

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:

Thanks
Toby

mariusjopen

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

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

mariusjopen

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:

I placed the images as project thumbnails:

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

Good luck!

Marius

Toby

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

mariusjopen

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

Toby

This post is deleted!

Toby

Hi Marius

Ok so far my code appears like this -

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 CSS

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

.blue {
background: #f1f1f1 !important;
}

.blue:hover {
background-color: #0280f8 !important;
}

but the hover only works when the mouse leaves the window not when leaving the thumbnail

Chers
Toby

Lay Theme Forum

Background colour change on rollover

Before you post:

When you post:

Online Users