Javascript Opacity Issue - javascript

Using absolute positioning, I have placed a div with opacity of 0.5 in front of an image by giving it a higher z-index. Also using absolute positioning, I want to put another smaller div in front of the first div using a higher z-index. This smaller div would show only part of the image (like a window), but have no opacity. Eventually, I will make the smaller image draggable.
What I am struggling with is that as long as the main div has the 0.5 opacity, the smaller one will also show the picture with the same opacity. How do I overcome this?

Sounds like you've got an answer, but you might be interested in an implementation example anyways.
Your div with 0.5 opacity cannot be one div with 0.5 opacity. It would have to be at least 4 divs with 0.5 opacity, but would probably be most flexible as 8. They would together form 8 tiles in a 3x3 grid with no center tile. They each have 0.5 opacity, and the center tile is non-existent, so it has full opacity. Then you can freely play with the dimensions of the negative space in the middle, adjusting the sizes of the various tiles to match.
If you wanted to make the center area draggable, then it would be a 9th div with 0 opacity and a drag handler.
Hope that helps. The imgAreaSelect plugin appears to use 4 tiles, where the left and right-most tiles occupy the full vertical area (i.e. each occupies 3 spaces in the 3x3 grid).

if clearing opacity doesn't help here, you'll need to place the small div outside the main div in DOM hierarchy, than place it above the main div using absolute positioning

Related

Background and foreground opacity different on the same canvas?

I'm trying to overlay part of a page with a triangle. I have an absolutely positioned div that I put some text in. I can display / hide it in response to buttons being clicked. However, when I replace the text with a canvas nested in the div, I'm having trouble with the display. I would like for the canvas background to be transparent but have the triangle be visible, covering part of the page it's overlaying. My stylesheet has visibility none. I've tried a bunch of combinations of opacity, visibility, etc., but so far with no success. I usually end up with the background (unfilled part) and the triangle showing with the same opacity. Any ideas? Is there a whole better approach?
Well, I answered my own poorly worded question while I was lying wide awake last night. I made the div with the canvas element transparent and that was all it took.

Changing DIV size vs Change its BG size (perfomance)

So, e.g. i have a div, i need to enlarge on mouseover.
I know 2 ways to do it:
a)actually to enlarge the DIV
b)Since I've heard of JS operating with
DOM is its main problem, it came to my mind, that we can create 2
DIVs, 1 stands for enlarged size, 2nd for minimized, BG size of
enlarged is equal to size of minimized DIV, e.g. 70%
On minimized DIV mouseenter - triggers function which set bg size to 100% of enlarged DIV's size
Scheme here: Bordered DIV - stands for Enlarged DIV, with 70% size of BG; minimized div has zero opacity, sized to image precisely
TL;DR
So which method is faster: operate with DIV's size itself, or operate with its css properties? Hope I describe my thoughts clear.
The most performant way for the browser is usually the css transform to make something bigger, since its hardware accelerated and doesn't conflict with the positioning of the DOM at all. it's also the easiest way to animate things :)
demo: https://jsfiddle.net/v0k69mq3/
html:
<div>foo</div>
css:
div:hover {
transform:scale(1.5)
}

Hide a part of an image on hover

Here is what I'm trying to do :
Have 2 divs one under the other. The bottom one is displaying an image and the up one is let's say white.
On hover, I want the white one to hide so that we can see the one under, with like its opacity down to 0 so it's transparent.
The things is, it should only show a part of that div with a transparent gradient circle around it, following the mouse's course.
Don't mind the white rectangle, it's about the background : the UP div would be a white fullscreen div, whereas the bottom one would be the sky, and when hovering with the mouse we would only see a part of the sky.
Do you guys have any idea on how I could do that, using HTML, css and/or JQuery? :/
one solution would be using a white PNG with a transparent gradient hole in it as the background of the upper div
then with onHover="script..." you set the position of the upper div
both divs must have absolute positioning so one gets on the top of the other

Make element behave same after css scaling

I'm manipulating divs with javascript all the time.
Sometimes I need to make those divs fit inside a container who's size is contantly changing.
One way to make that happen is to use css scaling.
The problem with scaling is that it simply schrinks the picture of the element.
The system continues to see the element the same way. So all location etc. become skewed. For instance, if I position the div to become top:0%, then if the element has been scaled down it will not go to zero percent but a bit below that, because the system thinks the div is bigger than its visuals show.
This change in behavior causes a lot of complications as the system is now making assumptions about the elements that simply dont hold true.
It's bad programming.
I looked at the 'zoom' but the articles warned against using it.
Is there any way to scale elements and also keep the system updated on whats actually going on?
The default transform-origin is 50% 50% (the middle of the element), so when you reduce the size of an element with scale, the edges are "retracted" from all sides towards the middle.
so the top left corner appears to move down and to the right. But if you set the transform-origin to 0% 0% (top left) only the right and bottom sides move.
Hope this helps!

Sliding a background image on scroll

The latest vogue seems to be things that move when you scroll.
Now, I have a bunch of square divs containing a background image scattered around a long page of content. My idea is to ever so slightly make these background images slide upwards when you scroll downwards. The background image is as wide as the square, but 1.5 times as tall.
The easy solution is to set the backgroundPosition to a fraction of the current scrollTop, but when I thought about it more, it's not altogether that simple.
Essentially, the background image of a div should be at background-position: 0 0; when the div is just obscured beyond the fold. Once it appears, the top position would decrease relative to scrolling, until reaching the end of the background image's bottom edge once the div has disappeared over the top edge of the window.
The divs are floated within text content, so there's no way to hardcode any position values for them.
Maybe I could manage to do this on my own, but there are several considerations;
Scrolling back and forth at any speed, and never moving the background image to a location where any part of the square div wasn't covered.
Divs which appear in the middle of the page on load. It doesn't matter if the background-position isn't 0 0 for them initially, the important thing is that the background image moves at the same speed as all the others.
Adjusting when the user changes the window size.
Now since this is just an extra little flair, I'm not expecting amazing browser compatibility or that this would work on mobile (although if it does, cool).
But I can't even begin to think how all of this would work out. What would be the best way to achieve this? Since the scrolling sliding thing is so popular, are there any (jQuery) plug-ins that I could utilize to build this?

Categories