I am using fancyBox to display an HTML element as a popup (inline type).
That works fine, but the user is able to move the popup vertically with the mouse or with touch.
This behaviour seems to be standard (check the HTML example on https://fancyapps.com/fancybox/3/).
Question: is there a way to prevent this vertical movement?
Setting the modal option to true achieves this, but then the close button is removed as well, which is not what I want.
Thanks, Willem
Use touch/vertical option for that:
touch: {
vertical: true, // Allow to drag content vertically
momentum: true // Continue movement after releasing mouse/touch when panning
},
Related
In the photo gallery of Fancybox, the slide show has arrows disappearing and reappearing when moving the mouse.
I want the arrows to remain visible. I used
.fancybox-nav span {
visibility: visible;}
but no result.
You can use idleTime option to change idle time or to disable completely -
$.fancybox.defaults.idleTime = false;
I am trying to animate a drilldown menu, so that when the user clicks on one option, the sub-options expand in an animated way, and when the main option is clicked again, the sub-options will collapse with an animation too. The drilldown menu itself works, but the animations are giving me trouble.
I currently have the "expand" animation working correctly. When sub-option elements are created, they are given the class "drill-expand", that links them to the following CSS:
.drill-expand {
animation:expand 1s;
-webkit-animation:expand 1s; /* Safari and Chrome */
}
and a corresponding #keyframes animation. When the main option is first clicked, the sub-options are created, and appear according to the drill-expand animation.
But the problem arises in collapsing the sub-options. When clicking the main option to collapse the sub-options, I cannot get the sub-options to follow an animation. Instead, the DOM elements are just destroyed (correct behavior for the drilldown menu, but not pretty - I want an animation). Is there a way to trigger the 'collapse' animation, right before the DOM elements are destroyed?
I am working with AngularJS 1.1.4, if that can be useful.
Thanks!
I am building a site that has a header with a fixed position which contains a select menu. The header is supposed to stay locked to the top of the screen due to the position:fixed in css. However, when clicking the select menu in mobile safari on iphone, the header no longer stays locked to the top when the ios select menu opens. It seems that ios is centering the div with the select menu onto the visible area of the screen above the menu. This doesn't happen when the page is scrolled to the top, but when the address bar is not visible, it "breaks" like so. Haven't found any other answers, maybe I'm asking the question the wrong way. I can't post links to code yet, any help is appreciated.
http://selfconstruc.tv/menu-open.PNG
http://selfconstruc.tv/menu-closed.PNG
For now I don't think there is a perfect solution to deal with the focus jumping.
In my case I hide the header on focus in and show again in focus out and it works well.
I don't know if in your case this could be a workaround.
You can try this:
// detect ios device
if(navigator.userAgent.match(/(iPad|iPhone|iPod)/gi)){
// hide header on focus in and show on focus out
jQuery("#content").focusin(function(){
jQuery('#your-header-id').hide();
})
jQuery("#content").focusout(function(){
jQuery('your-header-id').show();
})
}
The #content is a div where you should have all your controls, the jQuery .focusin() detects the focus event on parent elements, so every control will trigger the focus event. You hide the header on focus and show after that. Hope this helps!
I can not solve my problem. As example, my website : www.mananaseguro.com.
In the home page, I have some popup appearing just under movies's poster (when the mouse is over the poster). But when I scroll UP (for example), the popup will not appear just under the poster. Their is a space between them. I tried to add the popup to the home's page panel but it did not succeed.
So is it possible to simulate the good popup behavior? (the popup must stay under the poster).
Or more precisely, is it possible to attach a DecoratedPopupPanel to another panel inside the page in order to have the popup scrolling in the same way that others elements?
Try using the PopupPanel#showRelativeTo() method.
You can achive good popup behavior by using below property.
popup.setPopupPosition(left, top)
Pass movie image x and y index position in top and left. and make consistent look and fill.
There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ?
This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target.
Clicking in the menu item is done by jQuery click method on each img tag and scrolling is done by jQuery animate method ($("html:not(:animated),body").animate({ scrollLeft: varDestino }, 1500);)
When page is loaded the menu works just as I intended but, after it scrolls thru menu, and I try to click on another menu item nothing happens. The strangest thing is that everything works again when user manually scrolls the window (by finger).
It looks like that by changing window scroll position by code (jQuery calls window.scroll) fixed elements lost its clickable position references.
Is there any workaround for this ?
Thanks,
I've solved this with a trick. I've created invisible divs over the menu items that changes it's position when page scrolls (simulating afixed element over the real position: fixed menu items). When user clicks or hover over those invisble divs the real ones are called