I have an element with a scroll bar (overflow-y: auto).
I set the background-color of my element to a specific color (say, blue). However, the area of the scrollbar remain with a white background color.
How can i change the scrollbar area background color to the elements background color?
GWT introduced Custom Scroll Panel from 2.4 version. I think you can give this a try. You should make yourself familiar with CSS Resources if you want to change colurs, images and all. You can also refer the following links
GWT CustomScrollPanel example
http://css-tricks.com/custom-scrollbars-in-webkit/
You can't change the colors of the scrollbar. You will have to use 3rd party scroll bar replacement.
Related
I have a black chatbot icon on the bottom right of the website. My web footer has a black background as well. So I need to change the color of the Chatbot to white as I scroll to the bottom of the page.
I used Scroll bar Height to make the color difference.
do you mean that you want a fixed icon to have a white color when the background is black and black if the background color is white while scrolling?
if u mean that then use on that fixed element this code in CSS mix-blend-mode: difference;
and sorry if i miss understood the question i think its better to add some code to
explain what u want better
I have a navbar with poisition: fixed. Sometimes my logo isn't visible anymore because it has the same color as the div behind it. I was wondering if in JavaScript I could change the CSS (add a filter or whatever) whenever the logo is over that certain div.
You could use javascripts intersection observer api.
It enables you to check if an element is in the viewport and where.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
How to create dynamically (working even after editing element background on 'inspect element' option in the browser) text color based on background? I would like it to work on all divs in the body section.
HOW IT SHOULD WORK? Example:
There’s container div with background white (specified in CSS), text is default black (not specified in CSS). I run dev tools -> inspect element and with them I change the container background color from white to black.
Result? The text has also changed - from the default black to white, dynamically - based on the background color. you did not even have to refresh the page. this is how it all should work. Question: how to create that in Javascript, it is possible?
Deeper explain in the comment section
You can use the invert function of css without using JavaScript. Just use the same color for the background and the text, and then add the following code to the css of the text and that's it:
filter: invert(100%);
I want to make the screen pretty dark via CSS beside one DOM element and it's children
How do I do that?
EDIT: I want to do something similar to chrome's dev tools 'inspect element' UI
Create a div layer on top of the whole viewport. Give it some transparency or simply a solid background colour. Raise the element you want to be on top of that layer using CSS z-index.
As #jfriend00 pointed out, you first need to change position of your element to absolute or relative. Then, you have to position the element again using left and top (for example).
I am trying to do something similar to expose from jQuery toolkit.
http://flowplayer.org/tools/demos/toolbox/expose/index.html
Except I am trying to use an image as a background and have the overlay over it and reveal only a portion of the image as 100% visible (kind of like a reverse highlight).
My current solution is:
I make an overlay on a image background div and make the z-index of the visible section div higher than that of the overlay. But since the background of the visible section div is transparent the div just shows the overlay. The way the plugins I have seen get around this is by setting the background of the visible section div to a color allowing that whole div to set above the overlay since I am using a pretty big image, I don't have the option to use a colored background on the div. I also don't want to show a cloned copy of the original image because these background images are huge.
I couldn't find any documentation of how to do this online. I'd appreciate any feedback I could get.
My suggestion would be to absolutize the element, set it to a relatively high z-index, then sit your faded layer below that, but still higher than any other content. It would give the appearance of the effect you want.