Is there a way to detect the background color at one certain point of the page dynamically? I have a website with a fixed header, and the default logo on it is white (default background is black). However, as I scroll down there are sections that have white background, so the logo would have to change colour to black.
Setting it based on scrolling position is not possible, because all sections have different heights and the height is often dependent on the content.
I have found mix-blend-color, but unfortunately its support is pretty bad across browsers. Also tried numerous npm packages, but none of them seem to pick up the background colour.
Is there another way to dynamically change the logo color without getting the background color?
Answer 1
I never tried this, but I think this might lead to the answer.
You can use document.elementFromPoint.
This will retrieve the top element at some (x, y) point.
So you can set the x and y to 1px down the border of your modal ( or some place where you know that will only have element with the background color you want) and get the element.
And check, on a scroll event listener, what is the element at that position and get it's background color.
Is this a good thing to do? Maybe not, but it works and it have good support across browsers.
Answer 2
Setting it based on scrolling position is not possible
Of course it's possible!
If your modal is with position absolute, what you can do is get the modal's ref and use element.getBoundingClientRect() to get it's position.
Then on each section, you also get the ref (you will have an array of section's ref) in the parent component, which knows the modal's refs and section's ref.
Then, on a scroll event, you use getBoundingClientRect on each section element and check if it's inside the modal logo.
To check if it's inside, you can simply use the top and bottom ( if the scroll is vertical).
This is harder to implement, but I think it's the way to go.
Related
I have a TextField inside a Container. The Container is in the SOUTH of a Form (BorderLayout). The Form's CENTER Contains a scrollable BoxLayout.y() Container
When the bottom TextField is tapped on Android, the keyboard is shown. Sometimes, it cuts the TextField's parent Container up to the TextField's bottom, sometimes it doesn't. When it does cut it, the Form's CENTER also gets pushed up, and the Toolbar disappears. I am trying to make sure that calling the keyboard never cuts the parent Container and that the CENTER Container doesn't get pushed up
Is there a way to guarantee that the parent Container is always shown so that it doesn't get cut?
Example of an instance when it doesn't get cut:
Example of an instance when it does get cut. Notice Toolbar is gone and CENTER Container is pushed upwards:
Generally this is really hard to tune positions for keyboard. We try to make it seamless but there are points where this is pretty difficult to control. Especially with a south placed text field which is static (not scrollable).
If you can isolate a test case that shows misbehavior here we might be able to fine tune the logic a bit.
Solution to prevent this consists in setting the Form's setFormBottomPaddingEditingMode(true);. Easy fix! 👍
I am working on a page where there are two rows in the header.
The first row has a "My Account" icon, Company Logo, and Logout.
The second row has a navigation bar.
When the Focus Ring/Focus Indicator highlights an item on the first row, the bottom of the focus ring is cut off by the navigation bar in the second row.
I am not allowed to change the spacing of the elements on the DOM.
Is there a way I can change the layering so that all of the elements on the page are not changed in size or location, but the Focus Ring is not cut off by the navigation bar?
The site built with React.
I've tried googling a number of things, but haven't turned up much specific to this issue.
I'm a little new to programming (my first job, first year). I'm not totally sure where to even start.
You are looking for z-index. The second element is positioned in front of the first element and so it covers the focus indicator.
This allows you to specify how far 'forward' elements are on the page.
Assuming nothing is using fixed or absolute position within the <div>s you are working on this should solve your issue.
i.e.
<div class="container">
<div id="behind" z-index="1"></div>
<div id="infront" z-index="0"></div> <!--The z-index is not really needed here so try without it first, it is to illustrate that the item in front at the moment should have a lower z-index than the one at the back-->
</div>
You may need to play with the z-index in order to get this to work (you can go to 999999 without a problem, but try and use as low a number as possible).
You may also have to fiddle with heights of elements if the site is poorly designed but without a code example I can only offer general advice and gotcha's
Without a code example it is difficult to suggest a solution, but it sounds like your two rows are overlapping, and thereby hiding part of the focus indicator.
Three different solutions come to mind,
Change the height and placement of the two rows to avoid the overlap in the first place
Try using the CSS z-index property to control which element is rendered foremost
Using the CSS outline-offset property, with a negative value, i.e. -5px, to shrink the focus indicator and hopefully making it visible
I have some questions about sliders,
Im using a slider and i want a marker to be present on it like:
http://1.bp.blogspot.com/-HDNFnyRU2Cw/TcuMbBaL70I/AAAAAAAAAGc/7eWN1qnZbAw/s1600/seek.JPG
it draws the image at the bottom of the slider, not on top of it, searched for a setThumbImagePosition or something like that ,but didnt find it, is there a way to use sliders with markers on the top of them?(like the image shown)
Is there a way to show divisions on the slider?(for example this)
https://raw.githubusercontent.com/channguyen/range-slider-view/master/screenshots/sc.png
Whats the best practice to create thicker sliders?
Check out this post notice that in order to create the stars effect properly we wrap the slider in a flow layout to prevent it from growing. You can use background images just like we do in the stars slider but you need to place the slider in a flow layout of similar layout that doesn't let it grow beyond its preferred size.
http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.
I've been searching for awhile, but haven't been able to find anything. I'd like to be able to add kind of a glimmer or sparkly animation on an image element in wpf.
Essentially the effect here I'm after here is the same that you get with trading cards that are "foil's".
I'd like to have an image, and then be able to add this animation to it at will. I'm thinking maybe some kind of user control, or template possibly. Hopefully generic enough that I can just toss an image at it and it will just overlay the image and run.
Any ideas?
A simple construction that easily can be turned into a control is by nesting the image in a Grid and adding a second Grid (on top) as a sibling.
De second grid can be given a linear gradient brush that is primarily transparent but does contain a white glimmer.
This brush can be animated; you could move it and change the opacity of the grid/brush.
This way you do not change the image.