Background colour change on rollover

[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

[Toby]

Hi

Any suggestions on the above?

Thanks in advance
Toby

[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)

<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

[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:

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

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

<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

[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

3. 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 -

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

[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:

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

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

[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

<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

[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:

<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

[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