I have this code to freeze entire background while a modal element is visible.
function overlay() {
$('#container').css({'pointer-events' : 'none', 'opacity' : 0.5});
$('html').css('overflow-y', 'hidden');
}
it works but with very ugly effect - each time a modal is opening / closing - page scrollbar is toggling and moves entire html content right or left.
Any better solution?
Related
When modal overflow occours, the modal shifts out of the page. Erasing the element .fancybox-slide:before makes the modal return to the top of the screen, but without this element, the modal cannot be centered.
The modal is created by:
$().fancybox({
selector: '.btn',
// Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc
modal : true,
touch : {
vertical : false, // Allow to drag content vertically
momentum : false // Continue movement after releasing mouse/touch when panning
},
});
And the HTML is:
<a class="btn" data-fancybox data-type="ajax" data-src="#" href="javascript:;">Text</a>
If I set the content inside .fancybox-slide to max-width: 100%, everything works fine, but with a x-scrollbar inside the content view.
I input this code (which I pulled from this answer: Make a div appear when scrolling past a certain point of a page) to make a div appear when the user scrolls down on the page.
The problem is: The div appears as soon as the page loads, and disappears when the user scrolls, and then reappears when they scroll > 700.
How do I get the div to not show up at the beginning of the page load?
Thanks!
<script>
// Get the headers position from the top of the page, plus its own height
var startY = 700;
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.scroll-up').slideDown();
}else{
$('.scroll-up').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
</script>
In your CSS set display:none property for the div you don't want to show on page load
Instead of slideUp() and slideDown()
you can use, fadeIn() and fadeOut() or slidetoggle();
I have a Fancy Box Popup , it has a long page which scrolls, but I want it to scroll up to the header Div on top of that popup when i click on Go to top button. How can i force it to scroll.
Here is my code for scrolling :
<script>
$('#goTop').click(function (){
$('html, body').animate({scrollTop:$(".wrap").offset().top}, 750);
return false;
});
</script>
Why is it not scrolling, there are no errors in console , plus i have used the code on normal page , it works there . but it doesnot works in fancy box. Any solution ?
Here is the Image of my Popup :
You need to scroll the actual modal window, not the document's <body>.
$('#goTop').click(function (){
$(this).closest('.fancybox-inner').animate({scrollTop: 0}, 750);
return false;
});
Where fancybox-inner is the class given to the fancybox which has a fixed height and CSS overflow-y: scroll.
$('.fancybox-overlay').animate({
scrollTop: $('.fancybox-overlay').scrollTop() + $("#div").offset().top
});
Here is a link to the item in question:
http://www.nychukdesign.com/uploads/dynamic-top-bar-nav-menu.html
All HTML, Javascript and CSS is in the one html file
Functionality description:
This is a simple dynamic horizontal navigation bar that is intended to disappear when a user scrolls down the page, in which a trigger is activated when the user mouses into the area, of which it slides down and reappears, and disappears once more upon mousing out. When the user scrolls back to the top the navigation returns to it's default (static) state...which is where the problem comes in.
Problem description:
Sometimes (and yes I can not re-create this problem every time) when you return to the top of the page, and the navigation returns to it's default state, when the mouse leaves this area (without scrolling down again) the navigation will slide up and disappear. Sometime it will happen on the first try, sometimes after several, and primarily in Firefox 2.0, although I have had it happen once or twice in Safari.
My thoughts:
I am baffled by this, and why I am seeking help. Any advice would be greatly appreciated.
To re-create the problem
Update: I just discovered how to re-create the problem. You must scroll down and trigger the menu at least once, before scrolling back to the top, in which mousing over the menu will for some reason make it disappear.
Code:
<script type="text/javascript">
// Use short notation of DOM ready
$(function(){
// Assign variables for the menu, the trigger and the menu position (relative to the document)
var menu = $('#menu'),
menuTrigger = $('#menu-trigger'),
pos = menu.offset();
// Listen for the scroll event
$(window).scroll(function(){
// If we scroll past the position of the menu's height and it has it's default style, then hide menu.
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
// Remove the default class and replace with fixed class
$(this).removeClass('default').addClass('fixed');
});
// Initiate the trigger to show and hide the menu with the mouse event
$(menuTrigger).removeClass('hidden').addClass('block').mouseenter(function(){
$(menu).slideDown('fast').mouseleave(function(){
$(menu).slideUp('fast');
});
});
// If we scroll back to top and menu has fixed class, fadeIn menu
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeIn('fast', function(){
// Hide the trigger
$(menuTrigger).removeClass('block').addClass('hidden');
// Give menu default style
$(this).removeClass('fixed').addClass('default');
});
}
});
});
</script>
I have a HTML page on click of button i am displaying a Popup made on same page as div.
On displaying that popup i need to disable the scrollbar of the parent page.
Presently i am doing this:
/* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
$('body,html').css('overflow-y','hidden');
}
/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
$('body,html').removeAttr("style");
}
But when i am disabling the page there is a page shift observed. How can i prevent this?
The term which you are using Page Shift, its occurring because you are removing the scrollbar and when the scroll bar is removed the space becomes empty and then the design document gets more space and hence its shifting. If you want to avoid this you have to add some Padding or Margin to the external wrapper or <body>.
For e.g. like this
/* Function to disable parent page scrollbar */
function DisableParentPageScroll(){
$('html').css('overflow', 'hidden'); // Added this for few browsers
$('body').css({
'overflow-y':'hidden',
'padding-right': '20px' // Asuming the scrollbar width as 20px
});
}
/* Function to enable parent page scrollbar */
function EnableParentPageScroll(){
$('html').removeAttr('style'); // Added this for few browsers
$('body').css({
'overflow-y':'auto',
'padding-right': '0'
});
}