ngf-select causing opening window while swiping on phone - angularjs

[![enter image description here][1]][1]I see lots of Questions regarding ng-click event triggered while swiping images on phone. and there are lots of solutions on this. But I have placeholders when I click on it, it should open a window to select image using ngf-select(danielfarid's) which will open a window when swipe event compeleted, I tried detecting swipe trigger and tried not adding images based on flag set after detecting swipe trigger. But still the window is getting opened as soon as user ended swipe.
I am using bxslider to show gallery where we have pager and the image selected, so when I try to scroll pager in mobile using swipe it causes opening window to select file. as the last three placehodlers have functions to upload image using ngf-select.
this is the code for placeholder i am using to select images
<a ngf-select="uploadImage($files)" >
<i class="fa fa-plus-circle mainimg"></i>
<img ng-src="img/plus.png" class="tb_gal"/>
</a>

So the case of horizontal swipe is handled in v 12.2.5 and this issue is resolved in ng-file-upload/danielfarid v 12.2.5.

Related

react-pose flip animation e.g thumbnail goes full screen

want to create a portfolio/projects page where user click on thumbnail it goes full screen and other page comes in
i guess i can achieve this using pose-flip
https://codesandbox.io/s/fourth-react-pose-example-qj92p problem is how i can do it with multiple elements on page
this is the sample site
i'm new to react, when i click the thumbnail how to remove all others ( fade ), we can do it simply in jquery not selector

Ion-icon intermediate states with ng-class on mobile change the color of it

I implemented a pin/unpin button that updates the db in real time (using firebase with angularfire).
HTML code is the following:
<a class="button button-icon energized icon"
ng-class="{'ion-ios-star-outline': !isPinned, 'ion-ios-star': isPinned}"
ng-click="doUpdatePinForUid(user.auth.uid, !isPinned)"></a>
isPinned variable is synchronized with a value in DB.
This works perfectly in my browser but as soon as I emulate the app on iOS the change of icon from outline to plain goes through intermediate states that display it grey...
User is not pinned : star is outline and energized
I click the button, my user gets pinned : star is plain and grey (yet it should be energized to ; works in a browser not in iOS)
I have to click outside of the button (in a white space in the view) so that the button becomes energized (only on iOS)
I tried to debug it and the grey color seems to appear because of the different status the button goes through with the ng-class thing :
ion-ios-star-remove-active
ion-ios-star-add
ion-ios-star-add-active
...
For information, I tried to update the isPinned variable in my controller by surrounding it in a $timeout because I initially though it was related to the digest cycle, but no.
Any help or suggestion ?

Material Js Md-dialog appears outside of the screen after IPad Mobile Keyboard is used

I encountered this specific issue with Material's md-dialog:
I click on any of the text boxes on the web page, which brings up
the mobile keyboard, this is on IPad 9.3.2.
after typing, I then either minimise the keyboard or leave it on
and click a button which shows a md-dialog as modal.
the modal shows up, which grays out and blocks the whole page.
but the dialog box appears outside of the screen, i.e. you cant see
it, you cant touch it, you cant close it.
now if I til the screen to change the orientation from horizontal to vertical or vise-versa, the screen resizes and the dialog is shown properly.
so as soon as i use the keyboard the immediate dialog show will be located incorrectly.
I am wondering if any one had this problem before, and if you know how to solve this issue?
Thanks a lot
I had a similar issue and resolved it by wrapping it in a timeout:
var confirm = $mdDialog.confirm()
.title('Test')
.content('This is test content')
.ariaLabel('Test')
.ok('Got it!')
.cancel('Cancel');
$timeout(
$mdDialog.show(confirm).then(function () {
// Do Something
})
, 0);

AngularJS: Popout view similar to JIRA

I am trying to get a popup window that displays a view on top of my main view. I basically want to use the idea that many project management applications use, such as VersionOne and JIRA. In JIRA, under an epic, there is a "Create issue in epic" feature that gives you a popup window that is essentially a form. I am just trying to get the popup window (same size, displays data) to work with AngularJS.
A snippet from my main view where I am linking to the detailed view. I assume the magic will happen in the <a> tag.:
<h6 data-toggle="popover" data-placement="top" data-content="commands">
<a href="partials/instance-view.html">
{{instance.name}}
</a>
</h6>
The secondary view is just displayed in the instance-view.html file. I don't think the <h6> tag is messing anything up, but I could be wrong. Also, I know that since I am trying to display a link inside a popover tag, the popover won't work. I can always fix that later.
Assume you are using bootstrap?
If so, have you tried using the bootstrap popover plug-in inside your tag rather than your ?
i.e. ...
<h6>
{{instance.name}}
</h6>
Modals should be used for what is trying to be achieved. In particular, Bootstrap Modals.

Chrome mobile and Fancybox -> Images not loading correctly

I have a website that aggregates some FB events for my city and I've tried making it responsive
I'm having an issue opening it in my phone(s3 mini) that the image for the event won't load correctly.. BUT it loads when I try closing that fancybox and opening the a second time, this doesn't occur at all in desktop browsers.. I have no idea on how to fix this, can anyone help?
Address: fubuia.com.br
Here's pics:
Opening an event for the first time
After closing fancybox and opening it again
With some code it would be better...
I think the image is loaded after your fancybox, try to add width and height properties in your images.
<img src="/path/to/your/image.jpg" alt="" height="100" width="100">

Resources