I'm trying to set up automatically focus on first loaded article. (f.e. user clicks on the button "load more" and new articles are loaded).
My react implementation:
I'm using ref attribute in <Link> component, which is from react-router library and then I'm calling focus() method in lifecycle method componentDidMount().
It works on all devices except iOS. If I turn on voiceover on iphone and then on webpage I click on the button, it doesn't automatically focus on first loaded article). It works just with html anchor tag.
I read some articles before and it looks that it's not possible to do this in this way but only with firing some event f.e. click event.
Can someone confirm that it's not possible to solve it in this way or there is any workaround without using jquery ?
Related
I've used Vuejs and Framework7 in my PWA. I want to open a remote PDF file in my PWA and also it's important to me that users be able to back to my PWA after opening PDF. I did this using :
window.open(pdf_url, "_blank");
And it works fine for iOS > 12 and after opening pdf file there is an "OK" button for closing pdf.
But for example in iOS 11.3 there is no button and user has to use home button to close PWA.
I tried to solve problem using iframe but I can show only first page of the pdf.
Is there any way to fix this issue?
You can resolve this issue by doing some tricks (for any device without back button):
if you use iframe, you can set height manualy with overflow scroll, and I think this will resolve issue (dependence of style or lib dependency, so that may be not work).
you can add back button to your navbar, or Toolbar to let user click on it to back to previous page. (I prefer this solution).
you can render pdf in popup nested of normal html page, and then you can customize popup component by handling back button, or handling close by dropback overlay.
I use second and third point in real project and its work fine...
This is sample close button code used in popup:
'<p>'+ i18nextHelper.i18next.t('Exit From PDF') +'</p>'
Note: You can also customize height page for pdf page only, and add normal button bellow it, or by add absolute positioning button above PDF, but I think if you use second or third point will be best.
Good luck.
I am trying to find a way to tap a link with the following HTML structure:
<a>
<div id="facebook_sharing"></div>
</a>
The a tag does not have any attributes or text associated with it, just the div tag inside.
I have tried the following but with no success:
app.links["facebook_sharing"].tap()
Is there a way to find the div tag element and tap on it?
Thanks!
Xcode UI Testing interacts with your app via accessibility. Just like it doesn't have access to the underlying UIKit elements, it doesn't have direct access to the HTML DOM. You cannot expect the framework to know about something in your markup unless that gets exposed to accessibility in some way.
To "see the app as UI Testing does" open Accessibility Inspector.app on your mac. (You can easily find this by searching for it in Spotlight.) Then, hover over the div with your cursor. If you see any of the following attributes set you can query for the element:
accessibilityTitle
accessibilityPlaceholderValue
accessibilityLabel
accessibilityValue
If none of these are set on the a or div elements you should update them yourself. Think of it this way. If someone who is visually impaired uses the site, how will he/she know that he/she can interact with the Facebook link?
I am New to Phonegap Development, I am Using jQuery mobile to create my UI. I have two Issues here,
Response of button for touch event is very slow. Why..?
I have Created a form with some elements like 2 Inputs text type, 2 Button one after another.
M problem is when I click on input, the keyboard popup makes the page move up, that's OK but when I press the keyboard resign button, the page stay little up.
Can you please help me out..!
and how to Optimize the responsiveness of JQuery mobile UI. I have completely avoided the images.
First, you can follow this link to remove the delay (300ms) from the click event.
And for the second one, i hope you are facing this issue for android. if so, then you need some changes to be done on the AndroidManifest.xml
Use below android property in application tag,
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan"
Will look something like
<application android:icon="#drawable/icon" android:label="#string/app_name"
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan">
This should resolve your issue.
In a multi page template,I have three category pages (comedy, action, drama) that you can swipe between each containing rows of images (Seinfeld, Modern Family, Family Guy, Big Bang). Clicking on an individual image should open a dialog box (Seinfeld summary), close when you click the close button, and stay close. Initially it works, then what happens is based on the number images click after two, it opens and closes n -1 (clicking the 3rd image, opens the dialog box twice).
what could be the reason behind this?
Without your code I can be sure but I think I understand what is happening to you.
You have a problem with multiple event binding. Because of jQuery Mobile architecture it is possible to bind an event numerous time to some object.
I have an blog ARTICLE on jQuery Mobile page events handling and there's a chapter dedicated to this problem, just search for the chapter Prevent multiple event triggering. Or it can be found HERE.
In few words always unbind event before you bind it to some object to prevent this from happening:
$('#test-button').die('click').live('click', function(e) {
alert('Button click');
});
I currently focus on an iOS web app using Apache Cordova and JQuery Mobile.I want to implement a tableview-like style page (it is called listview in JQuery Mobile). I implement a initial list view in html and I'd like to: when I click the different rows, the html will send message to the iOS, and then I create a request with native code. After that, I return the successful result to js and js will update the list view which looks like you click a row in a tableview and a new page is pushed in.
The problem here is:
how to add the click event?
in the click event, how can I know which row is clicked?
how the tableview-like pushing animation is implemented when I use JQuery Mobile to update the list view?
I'm fresh to the web app and it costs several hours to implement dynamicly creating a list with the request result. And I totally do not know how to go further.
thanks for your help.
I. and II. Here's an example for your first and second question:
This is a code example:
$('ul.listview-example[data-role="listview"] li').bind('click',function(event, ui){
alert($(this).attr('id'))
});
First code line will bind a click event on every listview li element. $(this) is a selected li element.
If you are using never version of jQuery us .on( instead of .bind(, in older version you can also use .live( .
EDIT :
III. I think this should cover your third question: http://jsfiddle.net/Gajotres/YShLE/