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.
Related
I've actually got the tooltip showing where I want it to show, that part is working. The text it's displaying is contained in a <span> that's hidden until they hover over a div that has the tooltip class on it, similar to the example on w3schools.com.
I have a column of div's and only certain ones get the tooltip class. The problem I'm having is that the span is successfully hidden in the div's that don't have the tooltip class, but it's still reserving the space for it and I'm having trouble figuring out how to get it to not do that.
I'm hiding the <span> with CSS's visibilty:hidden which hides the text but the space for it is still reserved. If I change it to display:none instead of visibility:hidden it hides the text and does not reserve the space for it, which makes sense and that is almost what I want except I can't make it visible again without posting back.
So now I'm debating putting the whole thing inside of an ajax call so I don't have to refresh the whole page, but I'm not sure that would work either.
Is this even possible, or does anyone have any suggestions?
I appreciate any help anyone can offer.
Thanks
You can try span{position:absolute}
Use js instead of css.
If you use css then it'll also create problems on responsive.
You can use bootstrap tooltip or simple jQuery
https://jqueryui.com/tooltip/
what you can do is, give that div an id, and through css hover, set the tooltip's display to block,
or you can use, javascript for this, regidter those divs with a on hover, function , check the target of the hovered element, if it matches with that one, set tooltip's div display property to block,,simple
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 always think I understand CSS positioning, but then get frustrated again. Ok when I have position:static, i.e., default, my page looks like this (shown with inspect element highlighting the parent row of the col-xs-* that contains the date picker content):
I would like to keep everything about that page the exact same EXCEPT that I want to fix the col-xs-* that contains the date picker content, so that when the page scrolls down (not in the Fiddle example), it would float on top. Nevermind the z-index, I just noticed, that the minute I apply position:fixed, something interesting happens. Here's a screenshot again where I inspect element and tried to highlight parent row of the col-xs-* that is fixed. Notice 2 things: 1) The parent row isn't highlighted in blue on the page; no idea where it went, 2) The content has shifted right for some reason. It's no longer centered above "Comparison's sake" text.
Can someone please explain this behavior to me? I think it's persistently messing up my code. My end goal is again to keep everything centered as in the first snapshot, but just fix the col-xs-*.
Code in this Fiddle: https://jsfiddle.net/2v3gpa7x/
The relevant col-xs-* has id date-row
For any type of scrolling to work you need to use {position:absolute;top:0;left:0;margin:0 auto;} The term 'auto' keeps the page content centered horizontally. "absolute" allows it all to move as a group. If I understood more of what you wanted I could add ul 'wrappers' to force the position of any object
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.
I have a div section, which is full of tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href> has focus, is there any way to lock a div section that it's contents don't move ?
So for example the code (psuedo not real) I have the following
<div>
<h4>Heading</hv>
Link 1
Link 2
Link 3
</div>
I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div "window" which is not what I want, so in effect I get <div>Link 1<div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I'm not worried about this, just what is displayed
I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.
Thanks
is there any way to lock a div section that it's contents don't move?
Not really*, but you don't really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.
(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)
What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won't participate in the tabbing order.
From what I can make of your question, you want your div to stay fixed relative to the browser window. If this is the case, it can simply be done by declaring position:absolute for the div.
If you want something else, please clarify your question.