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/
Related
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
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/
I'm having trouble applying the various slide panel plugins to a div within a page. So, not from the top, side or bottom of the browser window, but from somewhere within the page.
This would work...
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
but the div slides out of view, so there's no tab to click on to slide it back up.
I could use a separate element to initiate the click function, but I need the clickable element to act as a tab connected to the sliding div.
So when the page loads, you'd see a panel in the middle of the screen, which would have a small tab sticking out of the bottom of that panel. When the tab is clicked, it slides up along with a panel with additional information. When the tab is clicked again, it slides back down.
Any help is appreciated.
You'd need to add in another div right next to it to use as a toggling tab, one that won't be hidden. Have that tab hide/show the div you want hidden.
$("#tab").click(function () {
$("#slider").slideToggle("slow");
});
See this fiddle: http://jsfiddle.net/Jxbkj/
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.
I have a list of reports on a page. I currently have 4 large buttons on the right to view, add, edit or delete a button. We've had complaints about people having to scroll back up to click on the buttons once they've selected a report because they have soo many.
Is there a way to have an html object like a div, stay visible on the page when you scroll it? But within the bounds of the container of the grid?
Thanks
Have you tried giving the buttons or their container position:fixed through CSS? Another way could be to use the onscroll Javascript event to move them or their container.