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
Related
i wrote some code to simulate papers for each page of my website but when you view it on gadget(mobile) devices when a div move(translateX) left screen scoll automatically with div to left then came back.
var width = divs.eq(currentDiv).width()+100;
$(".books-pages").css("transform" , "rotate(0)");
$(".main-menu").parent().css("transform" , "translateX("+width+"px)");
var menu = $(".main-menu").clone();
$("."+id).css("transform" , "translateX("+-width+"px)");
how can i prevent this scrolling?
I have managed to change the opacity of the navigation bar to 0 by adding this java script line
strong text
$(document).on('scroll', function (e) {
$('.navbar-1').css('opacity', ($(document).scrollTop() / 500));
});
it's all good now but i want the links to keep showing even though the link navigation bar is at 0 opacity.
how can i achieve that?
Basically What I am trying to do is to have a fixed header at top, when page is scrolled. please find the below code snip which i have used.
//This method is used to fixed header, while page is scrolling.
var fixedPageHeader = {
fWScrolling : function () {
var div = $('#headinfor');
var start = $(div).offset().top;
$.event.add(window, "scroll", function(){
var p = $(window).scrollTop();
if((p)>start){
$(div).css('position','fixed');
$(div).css('top', '0px');
$(div).css('left','0px');
$(div).css('margin-top','-2px');
$(div).css('z-index','500');
}else{
$(div).css('position','static');
$(div).css('top','');
$(div).css('margin-top','0px');
$(div).css('z-index','0');
}
});
}
}
at the time header get fixed at top of the page, scroll bar is jumped to right back to start. i wont be able to scroll down the page.
Reason for this issue is, when header gets fixed at top of the browser, its z-index will be assigned a value. So there will be space created between content and browser's top bar which is x (please check the image i have attached).Thereforr scroll bar suddenly jumps up.
https://drive.google.com/file/d/0B1dp9jlk2GZMYU9iM3lST2xzSkk/view?usp=sharing
In order to get ride of that, need to create div with same hight as the header. when it gets fixed at top of the browser when scrolling down and hide it when scrollig up.
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'
});
}