Quick note : I have read other similar questions, but they are all about modal opening up as overlay on body and they want to stop scroll on body.
But in my case, when I open the toggle the page autoscrolls and I don't want that to happen I want it to stay at same place.
Here is the link ( http://isma.tomorrowing.today/ ) where you can see the issue in test text 2 or 3 section by clicking any of the 'Read Text' button.
I want the webpage to stay at some position even when toggle is opened.
Although I am using elementor in Wordpress on the website, but custom CSS or JS works for me as well.
Highly appreciate any help.
Related
I'm still very inexperienced in jQuery but trying to tackle this issue. I have a hamburger menu that opens and closes when clicked. However, I added CSS to the hamburger menu to expand to 100vh when open. This worked fine, however, the content in the background still scrolls behind the menu. I found CSS that locks the body in place via an overflow: hidden styling to the "HTML, body" class and lets me open and close the menu without the background scrolling, but with that CSS styling constantly in place, I cannot scroll at all even when the menu is closed.
This brings me to my question. I believe I found one of the scripts that open and closes the hamburger menu. Would it be possible to modify and add to this script so that it adds the above style to the "HTML, body" class only when the menu is open?
I went through W3 Schools to get a better understanding of the syntax, but this script is a little different than what I saw in the tutorials.
Here is the script:
function() {
return e(".mobile_nav.opened .mobile_menu_bar").not(e(this)).trigger("click"), s.hasClass("closed") ? (s.removeClass("closed").addClass("opened"), n.stop().slideDown(500)) : (s.removeClass("opened").addClass("closed"), n.stop().slideUp(500)), !1
}
Is this a possible solution or is there a better option for me to prevent the background scroll? I would share the link but I have to have it hidden an under-construction page.
Here is a screen shot of what I am seeing on my end.
I have a wordpress site and i used a template to do it. So when i'm on mobile it has a mobile menu i managed to make it fixed to stay at the top when i scroll down, but the problem is. When i'm on a certain place at the site and i wanna open the menu with the "three line" icon it's opening the menu but takes me to the top of the page as well. And when i wanna close the menu with the X button it takes me to the top of the page as well, so basically the menu is unusable. I know it's a Jquery problem, but i can't find which file contain the codes for it and even how to fix it.
My website is: www.autoberles-szombathely.hu
So i wanna make the open menu button and close menu button to only open and close the menu and don't take me to the top of the page.
you can use:
$(selector).click(function(event) {
event.preventDefault();
//other stuff you might want to do on event
});
For the record you should not remove the href entirely, it should always exist to prevent unexpected behavior. If you don't want the href to be be acted on then just use that preventDefault() method, easy and keeps everything running smoothly.
Your menu has the following structure in a mobile viewport:
<i class="fa fa-bars"></i>
The # will cause the page to jump to the top, see here for a detailed answer why.
You have two possibilies to prevent this behavoir:
Add an event handler to this link and use event.preventDefault()
For jQuery
$('.menu-toggle').on('click', function(event){
event.preventDefault();
});
VanillaJs
document.getElementsByClassname('menu-toggle').addEventListener('click', function(event){
event.preventDefault()
});
Remove the attribute href completly (See here). When using this solution you have to use a css-reset or add e.g. cursor:pointer to these links again, because the standard browser css is not applied anymore.
I am developing a web part within Sharepoint that makes heavy use of 3rd party web services.
In my page, I have a view element (div#act1_show) that is collapsed. When I click on the expand button, the data is shown. No problem there.
The data of that element can be edited when that element is collapsed when I click the edit button. This actually hides the view element (div#act1_show) and shows a different edit element (div#act1_edit). No problem there.
However, when I first expand the view element (div#act1_show) and then click the edit button to open the edit element (div#act1_edit), the edit element is opened but now I can now longer scroll the page. That is, I can no longer use the scroll bar on the right of the browser window.
I've looked for any css position fixed but found none.
So, can anybody suggest how I go about figuring out how to find the cause of no longer being able to scroll with the browser's scroll bar?
Thanks
The issue I'm having is that when a modal is opened, the background body is scrollable using the mouse wheel.
Seems like this problem is known and people have suggested to set the body to overflow:hidden as stated in this link:
Prevent BODY from scrolling when a modal is opened
which works fine if your page is short and the modal link is on the initial visible page. However, if you have a longer page and you have to scroll down to see the modal link, once you click to open the modal, the background body shifts to the top.
The background does not scroll anymore, which is what I want, but is there any way to prevent it from popping back to the top when the modal is opened? It's inconvenient when you need to add multiple entries of something using the modal and you have to keep scrolling down to click the modal link to add another item.
In your onclick(I'm guessing you use onclick) event-method insert a return false; at the end, that will prevent the site from scrolling to the top.
I was having a similar problem in which modals larger than the window were cut off, and scrolling anywhere would scroll the background and not the modal.
This question pointed me to this plugin which is simple to use and fully addresses mine in addition to your problem of not permitting the background to scroll:
However this issue is said to be resolved in Bootstrap 3 and the plugin should not be needed if you're using the current version of Bootstrap.
To be more specific, how do we create a JavaScript menu with CSS styling that occupies the whole page, but the menu bar will be shown. There will be an icon on the top-left. Upon clicking that icon or symbol, the menu should appear and that image should glow. And after cliking it again, the menu goes away. I tried a lot but failed. I am just 14 year old. Please help me.
If there is something like that already which is open source, please post a link so that I can get on it.
UPDATE: I did it own my own.
Try this site here which gives you different menu bars to choose from. all you need to do is download a menu and change the menu details inside the script so that you can change menu names, add more or fewer menu tabs, etc. It uses jquery and contains its own css page which you can manipulate.
In order to hide and show the menu, how about using something like a html tooltip, except for hovering over the button to open/hide the menu, you can set it so that if you click the button, it opens/hide the button ?
Try this its opensource
http://www.interspire.com/content/2005/12/07/building-an-expanding-dhtml-menu-with-css-and-javascript/
http://www.noupe.com/css/13-awesome-java-script-css-menu.html