We have a baffling issue whereby when we try to open a modal dialog box from a parent page it opens with 2 vertical scrollbars next to each other. One controls the modal box, the other one controls the main page behind it.
To have 2 scrollbars is not ideal and have tried to implement a solution for this.
We added some javascript in the dialog box page which would set the style to overflow:hidden when the modal dialog is open.
<script>
function myOnLoad() {
window.parent.$('body').css('overflow', 'hidden');
}
and used....
<body onload="myOnLoad()">
This works and effectively removes the scrollbar in the page behind it (i.e it does what it should) however we also want to set the overflow back to ‘auto’ when the modal dialog is closed…
We have done this by adding this code..
<script type="text/javascript">
// close Modal
$("#close").click(function () {
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
However this does not seem to work as the modal dialog closes but the scrollbar is still hidden on the main page.
Can anyone tell me what I might be doing wrong here? I have tried different overflow properties but nothing seems to work
Ok try this, I think your page is reloading on click and thus executing your onload:
$("#close").click(function (e) {
e.preventDefault();
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
I think that using window.parent might be the problem since this refers to the parent of the iframe wich is gone. or something like that. just use jquery
you can try by just getting the body directly $("body"), asuming you are getting that click function to fire.
edit: i see this has been mentioned above
Add style to body as
body
{
padding-right:0px !important;
overflow-y:hidden !important;
}
Related
When my Bootstrap Modal Window is open, I have been unable to stop background scrolling from the main page. I followed the directions given in this StackOverflow question, but I have been unsuccessful so far: Prevent BODY from scrolling when a modal is opened
On the left side, near top of this page, after it loads, you will see a button that says "Large Modal". If you click it, it will open a modal window. After its open, if you scroll up and down, you will see the background moving.
http://gettinmobile.com/home.html
I have added the CSS as directed in the stackoverflow question I linked to above:
body.modal-open {
overflow: hidden;
}
I have added the javascript shown on the same stackoverflow question, though I am not sure this is done correctly:
<script type='text/javascript'>
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
</script>
Any help would be appreciated, maybe someone can see what I'm doing wrong... thanks!
You need to wait for jQuery to finish loading before you start binding events. You can do this most simply with an anonymous function:
$(function(){
// YOUR CURRENT JS CODE HERE
});
in your JS code at the bottom of page, try replacing the "$" sign with "jQuery" (no quotes), and see if that helps, it's a common happening in WordPress and quite likely the root of your problem
I figured out how to make a modal window pop up as the page loads, but I was wondering how I can make it appear also after clicking on a link, so that if a first time user comes to the website, closes the onload modal window, and then wants to sign up, he can do so.
I got the code from: http://www.aspdotnet-suresh.com/2013/03/open-show-jquery-popup-window-on-page.html
and the website that i'm using it on is http://thewildernesswalk.businesscatalyst.com/
If you have a better solution than the tutorial i found (which would be great), I am all ears, but it seems like some of the other answers i found out there mess with the code that makes the nav stick to the top and the "back to top" button appear.
Thank you in advance
Assuming the code at the link you gave, you may insert the following in your HTML <body> in order to show the modal upon clicking hyperlink:
Click me!
<script>
var elem = document.getElementById('hyper');
elem.onclick = showModal;
function showModal() {
$('.popup').show();
return false;
}
</script>
I got this popup that when you scroll down to the bottom of the page and click the close button, it scrolls the user to the top of the page
here's what it looks like:
X
whole javascript code: http://palimashop.com/wp-content/plugins/social-traffic-pop/stp.js?ver=1.0
I would like the user to not get redirected to the top of the page after close. how do we do that?
I would appreciate any help. thanks
You can make to position fixed on the screen no matter where you are on the page.
Via CSS
#stp-close { /* Probably you need to use stp-main ! */
position: fixed;
}
You may need to set another selector if stp-close is not used for the popup. I might be #stp-main from what I can see in the JS.
it sounds like the JS function isn't stopping the postback of clicking the link, add a return false; to the end of stpFlush. It also may be worth putting action.stopPropagation() at the start of the function too.
i got page with multiple open/hide divs and the problem here is that everytime i try to click one to open or hide the screen jumps at the top of the page..
Anyone idea how to fix this? Javascript is used to hide divs.
Thanks!
$(function() {
$('a.hide').click(function() {
$(this).closest('.hideable').find('.hide-container').toggle();
});
$('a#hide-all').click(function() {
$('.hide-container').hide();
});
$('.hide-container').hide(); });
It sounds like you are using href="#", don't do that, build on things that work instead.
If you’re using an A tag to open close the DIV’s, it means that in Javascript you’ll need to disable the default action for the A tag.
In jquery for example:
$('a').click(function(e) {
e.preventDefault();
});
I am trying to bring focus to window using jquery. The window is popup initiated through a button click on the parent page. I have some ajax calls going on in the child window, so data is being updated. My issue is that if the user clicks on the parent window and hides the child behind it, i would like to bring that child window back to the forefront if there is a data update.
inside $(document).ready I wire up these events:
$(window).blur(function(){
WindowHasFocus =false;
}).focus(function(){
WindowHasFocus =true;
});
Then, if data is updated, I call this function:
function FocusInput(){
if(!WindowHasFocus){
$(window).focus();
}
}
This works as expected in IE8, but in FireFox(and all other browsers) the Blur event nevers seem to fire if I click the parent window. Any suggestions/ideas on how achieve this?
update:
Total facepalm moment:
In FireFox:
* Tools
* Options…
* Content tab
* Advanced button next to “Enable JavaScript”
* check the box named "Raise or Lower Windows"
Total facepalm moment: In FireFox:
Tools
Options…
Content tab
Advanced button next to “Enable JavaScript”
check the box named "Raise or Lower Windows"
This is turned off by default and must be enabled. And also, i assumed that since it didnt work in Chrome, that Safari would be the same, but you know what they say about "assuming" (it works in Safari, but not Chrome).
If there is not a strong reason for having two separate windows then it would be better use "modal boxes", there are plenty of examples out there and jquery plugins to achieve that. An example of such a plugin:
http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/
You're absolutely correct. In FF, it seems as though it does fire the event, but at that same time, it seems like it doesn't register the element as being focused. Therefore the blur event can never be fired. Not sure I'm even explaining that correctly... The following code says it all.
In this example, the box is hidden by default, but is displayed via the focus event listener. In IE 8, if you click the main window, it still fires blur, but in FF it doesn't:
<html>
<head>
</head>
<body>
<div id="hiddenWin" style="width: 100px; height: 100px; background-color: Black; display: none;"></div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var something = 12;
something += 4;
$(document).ready(function()
{
$("#hiddenWin").focus(function()
{
$(this).show();
}
).blur(function()
{
$(this).hide();
}
)
$("#hiddenWin").focus();
}
);
</script>
</body>
</html>
For your need, would it be feasible to setup an overlay background? Something that is a fixed position # top:0 and left:0 which takes up the whole screen and has a z-index that is less than your popup. That way, when they click the overlay, it will steal focus and then you can hide everything...? IDK, just a suggestion. I'll keep messing around and see if I can figure it out. Good question. +1
It seems like you shouldn't care to know when your window got blurred. When your data updates, your window is either not in focus, in which case you want to focus it, or it is already in focus, and focusing it again doesn't hurt you any.
Yeah the modal thing is probably the way to go but sometimes you just need to do it the way you want to do it.
I would use plain old JavaScript. Name the window and the bring it into focus.
function showImageWindow(imageURL)
{
var imageWindow = window.open(imageURL,"My_Window","width=1000px,height=1000px,menubar=0,titlebar=0,toolbar=0,location=0,scrollbars=0,status=0");
imageWindow.focus();
}