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
Related
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 want to understand how to capture user intent i.e. when a user decides to leave the page and moves his/her mouse (as of now), show them an alternate version (without refresh).
An example
When you open this page, it will show you a couple of listings. Now, if you move your mouse to the address bar again. It hides the content and shows a separate part of the layout, basically a modal window with some messaging.
Is it handled via javascript - detect the cursor position and change the layout.
Any help would be welcome.
Using document mouseleave and mouseenter you can achieve this.
$(document).on('mouseleave',function(){
$('#test').removeClass('disnone');
}).on('mouseenter',function(){
$('#test').addClass('disnone');
});
FIDDLE DEMO
I have a jquery mobile popup, which has a collapsible set within it, and the popup has overflow-y = auto.
SCENARIO A
When I open the popup (which builds content in real-time (when the open-popup button is pressed)), then I open one of the collapsibles within, then click anywhere within the popup, the popup content automatically scrolls.
SCENARIO B
If I then close the popup (which includes an .empty() to clear out that dynamically built content), and then repeat scenario A, the problem does not occur.
SCENARIO C
If I open the popup, but do NOT open any of the collapsibles, I can click anywhere without the problem occurring.
I created a fiddle, but it Does Not replicate the problem.
Any ideas?
EDIT
SCENARIO D
If I do not declare the content divs to be data-role='collapsible-set/collapsible', but rather just drop the content into normal divs, then I do not have the strange scroll artifacts.
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.
I'm creating a firefox add-on, and I have a situation where if someone clicks on a specific item in my toolbarbutton menupopup, I want to display some text to appear beside the mouse for a couple seconds. I don't mean mouseover text, because when they click on the item, then I close the menupopup. I mean something like what's shown at this site:
http://www.kingsquare.nl/cursormessage
The normal way of doing this would be with javascript and a div that would have the text I want to show. Unfortunately, I've discovered that the toolbarbutton can't have an effect on the main window, which is where I'd need to place the div to show. I've tried getting Jquery to work and haven't been successful either.
You can use panels together with openPopup() and hidePopup(). Remember to set the attribute noautohide to true on the panel.
More info on panels - https://developer.mozilla.org/en/XUL/panel