I'm using the following code for a simple toggle button to show/hide some extra content:
$(".toggle .button").click(function() {
$(this).next().slideToggle('fast');
});
The problem is if the toggle is at the bottom of the screen, the user has to then scroll down to view the newly opened toggle content. So my question is: how can I make it so the toggled data is automatically shown to the user by jumping the window to the correct position when they click the toggle?
Thanks
You can use animate to do the job:
$('html,body').animate(
{scrollTop: $('#your-content-id').offset().top},
'slow'
);
Related
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 am using mCustomScrollbar script for custom scroll bar effect now I want to scroll page on specific class element. Class position is not fixed, It can be top or bottom.
In my example I have one anchor link and I want to page scroll to active class. Page will scroll only when user click to anchor.
Here is my JS Code:
$( "#scroll" ).click(function() {
//scroll page to active class
});
$("#content_1").mCustomScrollbar({
scrollButtons: {
enable: true
}
});
Here is my JSFiddle: http://goo.gl/6dpT7l
Note: Scroll position is not fixed. It can be anywhere UP/Down.
Any Idea? How to do this?
Thanks.
In your fiddle, it seems to be as simple as scrolling to the paragraph in question's position().top attribute. Replace your alert with this:
$("#content_1").mCustomScrollbar('scrollTo', $('.active').position().top);
I want to revert back to the initially active tab when the user moves the mouse away from the menu.
I have a left top-level menu that changes the active tab on hover, using data-options="is_hover:true"
When hovering over any of the tabs, it displays the second-level menu in place of the main content (which is displayed in a tab, which is displayed by default on page load).
I want the default content tab to display whenever the mouse leaves the 1st or 2nd level menu area.
Alternatively, I can make other elements detect the mouse hover and use JS to command the initial tag to be active. However I cannot find any documentation on what the JS should say, eg:
$( ".detect" ).hover(function() {
$( SET TAB1 TO ACTIVE PLEASE
});
In the end what I did was put the default content out of the tab an into its own div (where the tabs would go).
I then made none of the tabs active by default in CSS.
Then I used JS to deactivate any active tabs on hover of any element with class "detect":
$( ".detect" ).hover(function() {
$(".content.active").removeClass( "active" );
$("li.active").removeClass( "active" );
});
I have a div called "navbar_menu". When clicked I want the div "nav_overlay" to fade in and then when clicked again, I want it to fade back to not being visible.
At the moment I have set the div 'nav_overlay" to 'display: none' and then using the following javascript, it shows itself when "navbar_menu" is clicked.
$(document).ready(function(){
$(".navbar_menu").click(function(){
$("nav ul").toggleClass("showing");
$("#nav_overlay").fadeTo("fast", 0.8);
});
});
The tag "nav ul" is just a menu that is sliding when "navbar_menu" is clicked. The point is to have an overlay covering the content when the menu slides out and then when the menu slides in again, the overlay disappears.
I'm thinking that I need an if statement testing whether the div is visible or not? I'm just wonering if there is anyone who can help with the best solution for this.
Thanks very much.
Something like this should work:
$("#nav_overlay").fadeToggle()
See the documentation for the options.
PS: I assuming that the overlay has necessary styles to cover the whole page with position: fixed or something.
if( $('#your-element').is(":visible") ){
// #your-element is visible.
} else {
// #your-element is not visible
}
That should test if something is visible or not but a link or jsfiddle to your html as well would be helpful.
Assuming CSS class 'showing' only makes the element appear. You can use the .toggle function to make it hide and reappear on its own.
http://api.jquery.com/toggle/
http://api.jquery.com/fadetoggle/
// Will automatically hide/display element
$("nav ul").toggle();
// Same as toggle but with fade effect
$("#nav_overlay").fadeToggle("fast");
i have a overlay box that is fixed and centered on the screen. The page itself is rather long and has a vertical scrollbar.
I'd like to disable scrolling of the page itself once the overlay is shown. However I can't disable scroll completely because some overlays do have overflow-y:scroll for themselves. So the content in the overlay should be scrolled but the page itself should be stuck.
Any idea how to solve that with jquery or css?
The quickest and dirtiest way I can think of is to attach an event listener to the window for scroll events, and preventDefault() if your overlay is visible.
like so (using jquery).
window.addEventListener('scroll', function(e){
var el = $('.overlay.active');
if( el.length > 0 ){
e.preventDefault();
}
});
Hope this is what your looking for.
You can set the body to overflow: hidden. This will prevent scrolling. Child's overflow declarations stay unaffected. I have done a little fiddle.
Just an adjustment to Marc's jQuery solution. My code disables the body scroll as the overlay appears, then when the body or overlay close button is clicked, the body scroll is re-enabled.
/*We disable the scroll*/
$(function() {
/*This is where we specify what button is being clicked to open the
overlay, change at will.*/
$('#overlay1').click(function() {
/*This is where we specify what part of the page is gonna disable the
scroll, in this case the body.*/
$('body')
.css('overflow', 'hidden');
});
/*Now we re-enable the scroll*/
/*This is where we specify the the part of the overlay that is being
clicked to close it, in this case, the body and the .close, change at will.*/
$('body, .close').click(function() {
/*This is where we specify the part of the page we are re-enabling
the scroll, in this case the body.*/
$('body')
.css('overflow', 'visible');
});
});
Here's a little JSFiddle of my script in action.
You can position your overlay as a {position: fixed;}. That will keep your overlay in your screen even if your page scrolls.
You could create an full width and full height container, with position: fixed. And inside this container create your actual overlay with info. The container basically blinds the user from scrolling or interacting with the page.