I am using adminLTE template with fixed sidebar. i have issue in the sidebar section. when i click sub menu, sidebar scroll not displayed. but when i load chrome inspect element section, scrollbar appeared. why is that? please check attached images
but when i load inspect element, scroll bar appeared.
I am also facing same issue.The problem from scroll plugin height detection .For first time load its read some height and add scroll on respected data.
Then you expand the menu .its still perform the same height.
Why its working after developer mode open ?
Because the window was resized that scroll plugin detect new height
So we need manualy trigger the resize event on expand menu click/hover .use below code on click/hove while expand menu
setTimeout(function () {
$(window).trigger('resize');
},10)
create click/hover event on menu (inspect to find classname)
$(document).on('click hover','classnameOfMenu',function(){
setTimeout(function () {
$(window).trigger('resize');
},10)
})
Related
I have a Scrollspy nav sidebar generated by the contents of the main page. Scrollspy is working fine when I click any of the navigation links, and the nav is correctly updating the links as Active while scrolling through the document.
Because my sidebar is so large, I've set the max height of the column to the viewports' height. I'm trying to keep the Active Scrollspy link centered in the sidebar column using the activate.bs.scrollspy event.
$(window).on('activate.bs.scrollspy', function(event){
var $scrollSpyNavWrap = $scrollspyNav.children("div:first");
var $scrollSpyNavActiveLink = $scrollspyNav.find(".active:first");
$scrollSpyNavWrap.scrollTop($scrollSpyNavWrap.scrollTop() + $scrollSpyNavActiveLink.position().top - $scrollSpyNavWrap.height()/2 + $scrollSpyNavActiveLink.height()/2);
});
Adding the code above works when scrolling through the page. The links are correctly updating with the Active class, and the sidebar is keeping the Active link in the center of the sidebar nav.
However, this code blocks the Scrollspy from working correctly when clicking any of the links in the sidebar. If one is clicked, the page starts to scroll, the moment the next section is reached the activate.bs.scrollspy is triggered again and stops the animation. So at most I can go up or down one section.
I searched through the activate.bs.scrollspy event and cannot find anything to check to see if it was a click event versus a scroll event.
I created a HTML page with menu & content.
Everything is working fine for desktop, but when menu is clicked in mobile, the content of the body overlaps with menu items when scrolled (when menu is scrolled, the content is also scrolling).
I tried using overflow: hidden and position:fixed,
but it is making entire page non-scrollable, even when the button is not clicked.
Can anyone please help me with this ?
I tried the following :
My JS :
$(document).ready(function () {
$("#mobile-toggle").click(function () {
$('body').css('overflow', 'hidden');
});
});
My button :
<button id="mobile-toggle" class="mobile-toggle">
_('mobile-toggle')<span></span>
</button>
It is disabling scrolling when clicked, but it's not working on mobile.
You need to rework your css so that it is responsive - here would be a good start Responsive Design
Try to target the html element with your selector too:
$('body,html').css('overflow', 'hidden');
I have the holdings section in my website:
eurocom, when click on part of the map, a lightbox open and I don't want to enable scroll in that phase.
so I put:
normalScrollElements:'#myModal',(light box id)
normalScrollElementTouchThreshold:0,
I have some questions:
when try to open the lightbox(by clicking on some map area) and then fast scroll to next section after you clicked (especially in longer then screen lightbox) , you can scroll, while when clicking on some map area and waiting a second after the lightbox is shown you cant scroll as I wish.
what is normalScrollElementTouchThreshold ?
Please help me to solve this.
You're using the fullpage-js plugin on the element $('#fullpage').fullpage(... but the modal has larger z-index than the modal block the scroll event of the #fullpage.
Please read this What does the Fullpage.js option normalScrollElementTouchThreshold do?.
I have a website where I show information inside an iframe. And the information inside the iframe comes form Salesforce domain. The data that is being fetched comes in the form of a "training guide" with several pages in it.
I have added the javascript code on both the domains for fixing the changing height thus removing the Vertical scrollbar. Code in salesforce page:
function retrieveInfo(){
parent.postMessage(document.body.scrollHeight, '*');
}
function showLoading(){
$('#dvLoading').show();
}
Code written in my website page is :
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
var height = parseInt(event.data); // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
}
and my iframe in the page is :
<iframe id="my_iframe" src="https://cp.secure.force.com/mydomainhome" width="100%" onload="resizeCrossDomainIframe('my_iframe', 'https://cp.secure.force.com/');" scrolling="yes"></iframe>
The data inside the iframe has a left pane and a right pane. Left pane contains a list of collapsable menu that shows respective course contents. The left pane manu expands on clicking.The issue that I am getting is that the javascript code for removing V-scroll is getting called on page load but once the page loads and I click on the left pane to expand it the v-scroll reappears.
This is how the page renders on page load:
This is how the page renders after I expand the left pane menus with inner scrollbar:
Is there a way I can prevent the Vertical scrollbar appear even after expanding the left pane menu. I do not want to reload the page on clicking on each of the left pane menu links though.
Would triggering the retrieveInfo on each window.resize event solve the issue?
By expanding the left menu, you are basically resizing the window of the iframe. If you repost your message, your iframe in the parent window will re-adjust accordingly.
I once solved this issue with an external library such as Iframe resizer (https://github.com/davidjbradshaw/iframe-resizer)
That might help you for browsers not supporting "postMessage".
My webpage height is quite long, i have a requirement like when i have a modal dialog in the page, page scroll bar has to be disabled. Since the modal dialog has a scroll bar in it once the modal dialog scroll bar comes to an end, page scroll bar will be activated. To fix this i have added this code to JQuery modal dialog method.
open: function () {
$("html").css("overflow", "hidden");
return false;
},
close: function () {
$("html").css("overflow", "visible");
return false;
}
Now i'm in the bottom of the page on opening the modal dialog the page shifted to top only in Firefox browser, its because of overflow:hidden property added to the tag, due to this i can't see the modal dialog opened, which is opened in the bottom of the page.
But this code works fine(Page will not shift up) as expected in all other browsers expect Firefox.
Could anyone please suggest me to fix any other way to disable the page scroll bar or how to stop page to shift up only in Firefox.
Thanks
Gopi
I'd personally attach the css property to your element rather than the one, as there is a chance that the property is being inherited. Just a thought.
It's hard to tell without seeing the page, but this could be caused by the reflow after the overflow set being interrupted. If you add a reflow flush (e.g. document.body.offsetWidth) right after the css() calls, does that help?