How to focus on a textbox in a new page opened using fancybox? - fancybox

i have 2 pages, page1 and page2. the page2 will be loaded in a fancybox upon click on a link in page1. i want to set the focus to a specific textbox on page2 after it has been loaded. may i know how to do that?
many thanks!

sorry for taking too long for my response. till now i haven't found the solution for my problem. here is the code that i used but won't work
code in page1
$('.fancyboxTopic').fancybox({
helpers:{overlay: {closeClick:false}},
'padding': 5,
'width': '840px',
'height': '95%',
'autoScale': false,
'autoHeight': false,
'autoSize': false,
'afterClose': function(){window.location.reload(true);},
'onComplete': function(){$('#topicTitle').focus();}
})
in my link:
page 2

Related

How to fix Blocking screen with content On my quick app pages?

On my quick app pages, some
content may be blocked by the app menu. For example, the sign-in entry is blocked by the app menu in the following figure.
Although the menu is configured to be movable, users do not know that they can move it.
How can I solve this problem?
The following solutions are provided to solve your problem:
Separating the menu from any content displayed
Hiding the menu
Adding a message indicating that the menu is movable
For Detail,pls kindly refer this link : What if some content is blocked by the app menu?
You can separate the menu from any content displayed by changing the value of titleBar to true in the manifest.json file.
e.g.
"display": {
"fullScreen": false,
"titleBar": "true",
"menu": false,
"menuBarData": {
"draggable": true
},
There is a good example with other solutions. Please check link

Flutter: Usage of Router arguments triggers build when navigating away

In my Flutter app I have 2 pages: Page1 and Page2. On Page1 I have a button that brings the user to Page2 through this line of code:
Navigator.pushNamed(
context,
'/page2',
arguments: someParam,
),
Page2 uses Scaffold and AppBar through which the user can navigate back to Page1.
In Page2 I get the passed argument with:
ModalRoute.of(context).settings.arguments
Furthermore, Page2 also executes some task that only makes sense if the user really is on Page2.
My observation is that when I am on Page2 and hit that back arrow, it does trigger the build() method of both Page1 and Page2.
Why is that a problem (for me)? The app also received push notifications and when the user opens those, he/she is directed to Page1. However, if the user was on Page2, put the app in background and then opens the notification, through the effect described above it also triggers that background task - which has some hugely negative effect on the user experience.
How can I prevent Page2 form being build() when navigating away from it? Or, if this is not possible or a bad idea, how can I detect in the build() method of Page2 if the current call comes from navigating away?
Thanks and regards!
OK, meanwhile I could figure out a work-around to prevent the trigger to fire when navigating away:
if (ModalRoute.of(context).isActive) {
fireTrigger();
}
Maybe this is helpful for someone else who comes across the issue.
As RĂ©mi pointed out in the comments, having a pure build function (so no side-effects) would be a preferred solution, though.

IE 8 autocomplete with jQuery UI modal dialog

I have a modal jQuery dialog with a number of text fields. The text fields are affected by the standard IE 8 autocomplete (which is desired). However, when the host page is scrolled to any position but the top (either before or after the dialog has been opened), the auotocomplete div is offset by the distance of the scroll (e.g. it appears well below the associated textbox). Effectively, the dialog follows the scroll of the host page, but the autocomplete does not follow. This effect is seen even when the host page has been scrolled before opening the dialog.
$("#InterestsDetailModalContainer").dialog({autoOpen: false});
$("#InterestsDetailModalContainer").dialog("option", "title", "Additional Interests Detail");
$("#InterestsDetailModalContainer").dialog("option", "height", 600);
$("#InterestsDetailModalContainer").dialog("option", "width", 1000);
$("#InterestsDetailModalContainer").dialog("option", "modal", true);
I'm having a hard time finding anything out there that isn't talking about the jQuery autocomplete feature, which I am NOT using here.
Thanks!
You can mention the options in a single line of selector like the following:
$("#InterestsDetailModalContainer").dialog({
autoOpen: false,
title: "Additional Interests Detail",
height: 600,
width: 1000,
modal: true,
});
Try this, It's not a solution, but try this and let know weather solved.

target="_parent" in Fancybox is loading a new window

Ok here's a messy one.
I've got an iframe on a page, and in that iframe I've loaded up a Fancybox iframe with a link in it that has target="_parent". My only problem is it's loading the link in a new window for some bizzare reason, not out of the fancybox and into the iframe.
My link is Continue Checkout
You can view an example of the code at https://www.dpdesignz.net/homefresh/dps/success.html. My biggest thing though is that even though this page is on my https://www.dpdesignz.net domain, the link in the button cannot be changed from the http://www.dpdesignz.co.nz to https://www.dpdesignz.net
Can anyone see what may be going wrong here?
Your link has the class="button" but there isn't in any part of your code anything that binds that selector to fancybox
something like:
$(".button").fancybox({
width : 650,
height: 400,
type : "iframe"
});
otherwise it will always open in anew window

Fancybox / How to scroll in opened div and have the background fixed?

I'm currently working on a project with some fancybox (inline content).
I'd like to have the same kind of behavior that exists on facebook: when I click, the content is displayed in the fancybox, and if I scroll, I do scroll in the fancybox, but the background has to remain fixed.
I tried to mix a couple of ideas I've found here and there, mainly:
$(".jqShowArticle, .jqShowPortfolio").fancybox({
'onStart' : function(){
$("body").css({"overflow": "hidden", "position": "fixed"});
$("#fancybox-overlay").css({"overflow": "scroll"});
},
'onClosed' : function(){
$("body").css({"overflow": "auto", "position": ""});
}
});
But it doesn't work... Here is the page: http://espresso.double-espresso.com/
You can click on every portfolio item (pictures with text appearing on hover...) or blog entry to see what it does...
Thanks a lot for your help!
There seems to be an answer on https://github.com/fancyapps/fancyBox/issues/24. I'm not sure how they do it exactly though.