I am trying to make a pop-up on certain elements where the <div>'s initial position is based on the mouse position. I already know how to get the <div> to appear in the same place each time but I want it to be relative to the mouse's position when it first appears. I don't want the <div> to move after it appears. Is this possible to do without using any JavaScript at all (i.e. CSS only)? If so, how please!
I do not think what you are asking is possible. The logical conclusion would be that you need a third party to retrieve the mouse position and then insert the desired element.
Related
Pop-up window comes with the default search bar in SPO tenant site. So I don't have access to modify any CSS in the search field. I want to set the div in behind when the window pops up.
Explain what you exactly mean. If you want some element in your html appear behind some other element in a single page then you need to use z-index css property. Put an integer as the value of z-index property. The first html element (the one that is behind the other) should have value less than the one that is on the front. give both of the elements z-index.
This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I have a spinning wheel that rotates and lands on a prize. The problem is, next to that wheel is a red arrow pointing at the winning prize, and that red arrow moves around a bit depending on the size and orientation of the screen because it's a responsive app.
I thought a good solution would be to overlay a still image of an arrow on top of the rotating one. I would imagine that would ensure the arrow is always pointing to the correct prize.
If I were to put the html code for that image directly next to the code for the rotating image, I know it would place it next to/under each other. How can I overlay two images in the same position?
Here is the page in question if that helps at all.
https://friendlyroots.com/pages/prize-wheel
Thank you very much for any direction on how I can learn or do this.
This is difficult to diagnose since you need a code to spin the wheel. I can think of a few possible answers, but based on what I can see...
Looks like you're using flexbox and some JS to spin the wheel, which means you're comfortable with both. Your wheel and polygon are within a container.
To do what you're asking, set the proper parent element to position:relative, add another polygon in an Absolute position, and set the "real polygon" to being "invisible". There are a few ways you could do this.
1) display:none
Use javascript to set polygon to display:none and replace it with your correct-facing arrow when the prize appears.
If how to do this is unclear, look for how to change classes with JS OR how to change CSS styles with JS. Also look for how to insert a child element into JS. (You'll have to target the parent element -#chart-container)
2) visibility:hidden
Use javascript to set polygon to visibility:hidden and replace it with your correct-facing arrow when the prize appears.
Doing either of these could be noticeable by the user though, since you're removing & replacing the Polygon. Also setting the correct parent element to the relative position will determine the initial bounds of your absolute arrow.
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I have web application that design is based on divs.
I need in that application block possibility of clicking on some javascript object.
So I thinking about adding transparent div that will be positioned with z-index on level/layer where I need and will capture all clicks without passing to lower z-index objects?
How this can be done?
Use absolute positioning in that covering div. Either don't set any background or set it as rgba(r,g,b,0)
I don't think this is a good design.
I don't know if you know that, but you can add a click listener to the body element itself. Every click will bubble up to body. It's called event delegation. I believe this solves your problem.
I wanna show an absolute button on top of my first google images. Basically, this button is suppose to be in the first div container's and top of the first image. I repeat some thing to see whether it is working properly or not. However, the second absolute button does not appear, I guess it is under the first absolute button. How to fix it to show each absolute buttons in the corresponding div container's first google image(white one).
I have done this (http://jsbin.com/kenute/1/edit), but it does not show properly. Here I also use borders to see the problem caused by div tags, but still some problems i do not understand why?
Anything positioned absolutely must be contained within an element that has relative positioning