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
Related
I hope someone might be able to help me with this. I am currently using the lightbox evolution plugin to display some nice lightboxes on my page.
I noticed that it allows the user to continue to scroll up and down the page if the modal / lightbox is shown.
I have added the following code:
$('a.light-box').lightbox({
'onOpen' : function() {$('html, body').css({'overflow': 'hidden','height': '100%'});},
'onClose' : function() {$('html, body').css({'overflow': 'auto','height': 'auto'});}
});
It prevents the scrolling from happening, but if I launch a link half way down the page then it automatically tries to scroll to the top of the page which kinda defeats the purposes of the scrolling.
Is there any other css properties that I could use to prevent it from scrolling to the top of the page ?
thanks in advance
Add this to your script:
$('a.light-box').on('click', function(e){
e.preventDefault();
});
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;
}
I have created a popup using the lightweight jQuery plugin: bPopup.
I want the popup to appear on page load, and as such have the following code:
<script>
;(function($) {
$(window).load(function(){ //see edit below
$('#popup').bPopup({
opacity: 0.6,
modalClose: true
});
});
})(jQuery);
</script>
the customisation modalClose: true controls weather or not the popup is closed/dismissed on clicking on the popup, or surrounding overlay (see API)
However my popup successfully appears but does not dismiss, either when clicking on overlay OR when clicking on the element with the class that controls dismissal (by default, any element with class 'b-close' will also close the popup.
Any thoughts on where I am going wrong, or how I can find out what aspect is not working? Thanks
EDIT:
As per a suggestion in comments I have altered $(window).load(function(){ to $(document).ready(function(){however my problem persists
Discovered I was using 0.7.1 version of the popup, updated to 0.9.1 and that seems to have resolved the issue. Thanks to those who took a look.
I use the tabber script shown on http://www.barelyfitz.com/projects/tabber/ to provide a tabbed page. Generally it works well, and my only complaint is that the tabs don't show until the content has fully loaded, and then there is a jump as the screen writes itself properly. (See www.littlehotels.co.uk/spain/noves.php for an example of what I mean.)
I thought the solution would be to hide the div containing all the tabbed content like this
<div class="tabber" id="tabber" style="display:none">
and then reveal it with a small javascript function which is called by
<body onLoad="ShowTabber()">
The javascript itself is
<script type="text/javascript">
function ShowTabber() {
document.getElementById('tabber').style.display = "block";
}
</script>
My little function appears to stop the external javascript (tabber.js) from working because the page displays the content of all the tabs in line, without the the tabs themselves at the top. This is the same result as if I delete the reference to the external script from the of the page.
What am I doing wrong?
More explanation:
When the tabber.js file is missing, the page displays the content of all the tabs one after the other(as you would expect). Running the script as explained above has exactly the same effect; hence I am concluding that the script blocks the main javascript from running.
'onLoad': function(argsObj) {
/* Display an alert only after tab */
if (argsObj.tabber.id == 'tab') {
alert('Finished loading tab!');
}
}
By default select a tab.Then after completion loading that tab it will show a message.
see here
Well, I solved the problem (sort of) with jQuery, but it has now raised another problem.
In response to PSR, I looked more deeply into jQuery. It would have been too complicated to change over to .tabs(), but I did use jQuery to hide and show some divs at the appropriate moments.
I placed a simple little line in fron of the tabber div to show a "Loading" message.
<div id="loading" align="center" style="position:relative;top:70px"><h6>Loading ...</h6></div>
Then I put this script in the head, under the jQuery line.
<script type="text/javascript">
$(document).ready(function(){
$("#tabber").hide();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").fadeIn(300);
});
function checkResize(id){
var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
alert(win);
}
</script>
That works fine, but a couple of the tabs have iframes for their content, and this script breaks autoResize script I use on those iframes. I'll open a new question to see if anyone has an answer to that.
I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});
It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.
It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.