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.
Related
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?
I have a tab panel,the last tab of that tab panel has a infinite grid(that works perfect),this grid has autoScroll set to true,and when the store of the grid is loades in the grid appear a scroll bar on the right and other at the bottom. I can navigate with the scroll bars perfect but for example if I put the bottom scroll bar in the middle,go to another tab and return to this(every time I go to a tab I reload the store/stores of its components),the bottom scroll bar is in the same position and I want it to go to the start position:
My bottom scroll bar state is:
And when I return to the tab I want it like:
Is there a way to do that??
You can use the tabs listener beforeActivate to reset the scroll position for the grid:
listeners: {
beforeActivate: function() {
// Reset scroll position
this.down('gridpanel').getView().getEl().scrollTo('left', 0, true);
}
}
Working example: https://fiddle.sencha.com/#fiddle/19q4
Create a html page for mobile some part of content is showing on Menu bar.
Only the bottom content is showing on menu bar how to avoid it ?
and also I want to disable scroll-bar when menu button is clicked & enable when content is touched using Mobile.
I tried below code but its disabliling but not enabling scrollbar when content screen is clicked on mobile :(
My Javascript :
$(document).ready(function() {
scrollTopPos = $( document ).scrollTop();
allowScrolling = true;
$(document).scroll(function() {
if(allowScrolling === false) {
$( document ).scrollTop( scrollTopPos );
} else {
}
});
$( "#mobile-toggle" ).click(function() {
$('body,html').css('overflow', 'hidden');
$("#divCls").css('display','None')
});
$(document).on('touchmove', function(e) {
e.preventDefault();
showDiv()
});
});
function showDiv() {
document.getElementById('divCls').style.display = "block";
}
It's hard to tell without the full code, but in terms of keeping the menu at the front you can just use CSS to se the Z-index of the DIV. In terms of the scroll, add a CSS rule trigger within your JavaScript to set Overflow to Hidden then set it back to scroll when you click the close button.
Also, if only parts are spilling over then be weary of the page size, if you're using a slide in menu that is hidden to the side then slides the whole page over, then mobile users can swipe it shut but the open button will not work unless you use the jquery swipe functionality so again, the z index and a bit of doodling with the script to make the menu sit over the page would fix this. Again, more script would be handy :P
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'
});
}