Original Web-page with no pop up menus
Web-page after adding pop up menus
Hello, I am working on building a web page that shows statistics to a user depending on what option they chose. instead of having the components glued in one position I am using react-new-window to open them up in pop up menus which will allow the user to move it to a different location on the screen if they wish to do so.
My problem is that when I open up the application all of my pop up boxes are on the left hand side of the screen. How can I get them into the original positions that they were in before I started using react-new-window? Thank you!
Related
I have a web-page that contains a table of videos and pictures, which when any one of these items is clicked, the clicked item shows in a floating pop-up display area, but currently this area shows near the top of the web-page, so is often partially off screen when the user has the web-page scrolled so that the table of videos and pictures is fully scrolled into view, and so the user has to scroll the page up to view the floating pop-up display area, away from the row item they clicked in the table, where they can edit information concerning that item.
I would rather that the pop-up display area be displayed near the top of the viewport, so that it can fully be seen without the user having to scroll it into view, and the table of videos and pictures now under the pop-up display stay where it was before the user clicked any of the items in the table.
I've seen this topic Set element to top of viewport in javascript [duplicate], but I don't want to fix the display area, as the user should be able to scroll the web-page normally, and the pop-up display area move with the rest of the elements on the page.
Once this is accomplished, I will want to make the pop-up area draggable, so the suggested solution(s) should be compatible with doing this. I plan on using How TO - Create a Draggable HTML Element rather than using a jQuery or other type library. This way I can optimize the code for the pop-up element that is the only draggable item on the page.
Thank you
I was also facing the same issue. Then I found a CSS trick which I used.
.elements:nth-last-child(-n + 3) {
// Insert CSS you want to apply
}
.elements:nth-last-child(n + 3) {
// Insert CSS you want to apply
}
It helped me achieve the desired solution. Without any change in JavaScript and View. You just have to do calculations with n number.
For reference you can use below documentation -
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
I have created a custom element named memory-game and I am able to create lots of them by clicking on the icon of the memory game. I want functionality so that when I click on a memory-game window, it appears on top of the other opened windows. I can't figure out how to do that.
Use z-index to control what order non-statically positioned divs appear on the page.
Aside from that, I'm not sure what you're trying to accomplish with the code you have provided.
I'm looking for a good way to realize a sort of breadcrumb navigation through a database using Semantic-UI (on top of Django, if that matters). The idea is to click on a link toggling the first sidebar, showing a dataset with in a form with each data offering a link to dig further down, opening the dug down data in another sidebar, shifting the parent further to the left. So in the end you end up with a horizontal "timeline" of sorts, made up of sidebars (or something else) that the user can then step back through, shifting everything back to the right.
The default sidebars seem to always overlay each other, so basically the question is, how do you make new sidebars shift existing ones?
Suppose, I have a web page which consists table of item long enough to use a scroll bar to move up and down the page.
So, when I am trying to use messi pop up in it with default viewport and clicking on item which results into opening of a messi pop-up.
The problem is:
On keeping default viewport, pop up always appears in middle of the web page irrespective of where it is clicked. What viewport should I set, so that I always get my popup in middle of the screen of my laptop, not in middle of the whole web page.
Link to messi pop up web page is here
used jquery .position() to set the viewport to dynamic. It was not an messi popup specific issue. it was a general issue.
I'm using AddThis (http://www.addthis.com/) on one of my sites, and it's working just fine. But I've noticed that the dropdown box will always open to the right side, if there's room enough to the right in the browser window. If there's not enough space to the right, the dropdown will open to the left side.
But I'd very much like the dropdown box to open to the left side all the time. Also if there's enough space to the right.
But I simply can't get this to work.
My AddThis widget works just like on this site: http://home.dk/
You can see the small button ("Del siden") in the right side next to the print and e-mail buttons.
As you can see the box opens to the right if the browser windows is wide enough. But try to make the browser window smaller so there's not enough room for the drop down. Then it will open to the left.
How can I force the dropdown box to open to the left all the time?
Thanks you very much in advance folks...
Best regards,
Kim
Read: http://www.addthis.com/help/client-api#configuration-ui
Try to use ui_offset_left and set a negative offset to the left so it positions it. You also have ui_hover_direction but not sure if that will accept a left value.