What I am trying to implement is a popup window with pure CSS, i.e. without using JavaScript. I have come up with a solution using the target pseudoclass, but the problem is that whenever I click the close button of the popup, it scrolls the viewport to the href element I specified, in this case #home. What I want to achieve is a functionality where the viewport doesn't move, regardless of the scroll position. For example, if I open the popup and then scroll to the last section, and then click the close button, the viewport should stay at the last section.
Here is jsFiddle: https://jsfiddle.net/tmzjpwkz/6/
replace href with #popup:target
Close
https://jsfiddle.net/tmzjpwkz/8/
Related
I have an iFrame within a page and it has a chat-icon that should stick to the bottom of the screen (but of course it will have to remain in the iFrame when scrolled out of the view).
The iFrame stretches outside the main viewport and as it seems, the iFrame is only aware of the bottom of its own document/viewport which in my example resides below the bottom of the browser window. It is not aware of the bottom of the parent page which in this case is the bottom of the browser window..
The question is simply, is there a way to get this to work with CSS only from within the iFrame? I do have the option to post messages with i.e. page height down to the iFrame. I am trying to avoid Javascript solution to position the icon manually on scroll event, due to its flickeryness...
I'm unaware of any way to do this in a CSS only fashion as the iframe is going to be completely unaware of the larger page (and that page's viewport) because it's own viewport is the bounds of the iframe itself, and the screen.
I think the only way to do this is with javascript using postMessage to pass the viewport dimensions down into the iframe where you can adjust the bottom value. To avoid flickering, add a short transition to the icon CSS so it slides into the correct place.
I've two Div's on my page. one is parent div, another div as pop-up.
Currently pop-up is shown/hide on click of parent div or clicking on button inside pop-up window.
How can I achieve that pop-up will be closed when I click away (anywhere outside pop-up and parent div) ? is there any event mechanism already provided ? if yes, How to use it?
You can create another div with full width and height and z-index bigger that other content and less than pop up. Show that div whenever the pop up is showed. Then you can add this div an click event so when the user click on that div it means that it's outside of pop up.
Here is an jsfiddle for that made with jquery just to give you the idea how to make it .
Here is another one with Angular DEMO
I have a popup on my page, it display on clicking any div on the page.
There are multiple divs, with which this popup is associated.
Now the issue is if i click on div, popup gets open, but if i scroll, popup also scroll and come to wrong div.
How to make it fixed to its associated div after click?
Here is a quick example. I'm hoping this is something like what you're talking about. When the first box is clicked, an alert pops up and stays with the first box when scrolling.
I used simple jQuery to create the popup.
$('.box').click(function() {
$('.alert').css('display', 'block');
});
http://jsfiddle.net/d8xwev9o/
I have a script that shows a popup, and fairly often, the content is taller than the window and requires scrolling. The popup box is within a container div that has an overflow so the popup can be scrolled around without interfering with the scroll position on the rest of the page.
The issue is that when the popup box is displayed, when the up and down arrows are pressed, nothing happens as the popup box in the holder is not focused. Only when I click on an element within the container, then the arrows start working. Is it possible to perform a similar function to the 'click on an element' method described before, except in javascript. I tried .focus and other similar commands, but none worked.
Aha, sorted it. Set the holder's tabIndex to -1 and then .focus() worked on selecting it
I am using this:
http://www.useful-dates.com/search/
What script do I need to use so that the scrolled underneath scrolled div stays hidden and then appears when you click it and disappears when you click outside of the appears div?
Like this, but i have had no luck duplicating:
http://rob-bell.net/static/ddlist.html
Iv searched and tried all kinds of things on the net and no luck, please help.
Something has to be there in the background to catch the click. Looks like they used display: block with a fixed height/width in the working example, so that a click outside the drop-down would hit the "body" element, to which the event is attached.