When I close the Magnific Popup, the page should be at the same position as when I opened the Magnific Popup. Right now, after closing Magnific Popup I have to scroll to the gallery that was opened.
Here is the website:
https://www.perfora.sk/produkty/dizajnove-plechy/
The problem is:
always on Firefox (54.0.1 (32-bit))
after refresh on Chrome (60.0.3112.101); if I open it second time, it
works fine
Galleries with names: Rythmic Illusion Cubrik, Rythmic Orchestra, Rythmic Gota, Rythmic Exau and Rythmic Corail.
I have to say, that I have to scroll about 100px back to the gallery that was opened. It is not a lot, but I should stay at the same position after closing the Magnific Popup.
Thank you for your help.
Described issue
Try autoFocusLast:
autoFocusLast: false
To prevent last focused link/image after popup close. Option available since 2015/12/16.
try setting the 'fixedContentPos' to false like so:
$.magnificPopup.open({
items: {
src: '#popup-exit-form' //ID of inline element
},
fixedContentPos: false,
type: 'inline',
removalDelay: 500, //Delaying the removal in order to fit in the animation of the popup
mainClass: 'mfp-fade mfp-fade-side', //The actual animation
});
Related
I want to have a div with automatic scrolling content when the user scrolls to that point in the website.
It's like this example on JSFiddle
$("#div").animate({ scrollTop: 1000 }, 2000);
With this above example the scrolling happens immediately when the page loads.
My div with the scrolling content is further down on my site, so I want it to automatically scroll when it hits that waypoint. (I'm using jquery-waypoints in my page already).
Assuming you want this scroll animation to happen when #div hits the top of the window:
$('#div').waypoint(function(direction) {
$(this).animate({ scrollTop: 1000 }, 2000);
});
You may want to use that direction parameter to do something different if its value is "up". You may want to use triggerOnce: true to just do the animation once and then never again. It's up to you.
I have the following code for adding tooltip for onclick of a span id as shown below:
new dijit.Tooltip({
connectId: ['gridEditHelp'],
label: 'Double click on an item in the below table to perform inline editing of attributes',
position: ['above']
});
The problem is that I want the tooltip to be visible always on the web page.
Any ideas or existing API available for the same?
Use TooltipDialog instead - or else you will have to mess with the _MasterTooltip manager (there's more or less only one global, reusable tooltip). Then call dijit.popup.open - and never call .close
dijit.popup.open({
popup: new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
content: "<p>I have a mouse leave event handler that will close the dialog."
});,
around: dojo.byId('thenode')
});
I have a little problem with Dijit.Dialog.
I have some dialogs, which have a small size, and they are displayed in the center of my screen, so it's ok.
But I have also a Dialog with a height of 550px, and it's not displayed in the center of my screen but in the bottom : the browser scroll to the bottom and then displayed it.
I create the dialog simply by:
var dialogLodge = new dijit.Dialog({
id : "dialogLodge",
style : "width:700px;height:550px",
title : "Create lodge",
href : "/lodge/create.html",
preload : true,
draggable : false,
onCancel : function(){
…
},
onLoad : function(){
…
},
});
dialogLodge.startup();
So I don't know why it's not displayed at the center.
If anyone has an idea,
Thanks.
PS : I use Dojo 1.6.1 and I tested it with the 1.7 too
Creating a dialog puts a dom node in your page with css styles that hide it (display:none; visibility:hidden).
In order to make your dialog visible, you should use dialog.show().
You can use dialog.hide() to make it invisible again (and it will remain available in case you want to show it back).
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.
We have a colorbox modal popup which we don't want to close unless the user clicks the "X" at the top right of the popup. Currently, it is closing if you click anywhere outside the popup area.
Many thanks!
Paul
Colorbox has options to modify that functionality. Just add this to your colorbox instantiation:
$("#selector").colorbox({
//your other colorbox options
//...
escKey: false,
overlayClose: false
});