AngularJS - Carousel mouse click and phone touch - angularjs

I am using Angular-UI-Bootstrap. in they github they have allot of examples, one is about carousel and it's really cool on they site. All over the internet i have tried like 50+ examples an none of them worked out. What i need it's simple clicking and moving items inside carousel, without click on sides. I have seen things about animation, i am not using that, maybe angular-ui-bootstrap using it, i am not sure. Any one have found solution for this problem?

Related

`md-center-tabs` attribute of `md-tabs` in AngularJS Material 1.1.7 not working properly on mobile

Is anyone else having an issue with the md-center-tabs attribute for md-tabs in AngularJS Material 1.1.7?
We recently upgraded from AngularJS Material 1.1.3, which is when I observed it to be working as intended and stated in the documentation. We upgraded in order to take advantage of the upgraded md-datepicker directive in Angular JS Material 1.1.7. Anyway, here is the documentation that I am referencing for md-tabs:
https://material.angularjs.org/latest/api/directive/mdTabs
On mobile screen sizes (i.e. smaller viewports) the tabs end up getting scrunched up as show below:
I have tried to use md-stretch-tabs to "offset/counter" this issue; however, that does not seem to solve the problem. We had not used md-stretch-tabs when coding in AngularJS Material 1.1.3 and presumably md-center-tabs was automatically stretching each individual tab to be equal to the viewport size on smaller screen sizes, where users could scroll through all md-tabs as shown below:
I've searched the web endlessly hoping that someone might be having the same issue here or on Github, but cannot find anything. Hopefully, it's such a small nit that someone can help me figure out an easy workaround.

AngularJS page hopping around with semanticUI Tabs

I have built an app that utilizes semantic UI tabs and ui-router. Every time I switch tabs, the page 'snaps' to the div where the tabs are being held, instead of maintaining its position. I do not have any idea where to even begin looking.
Note I faced another similar issue earlier on in the build, where angularUI grid was causing the page to hop around and snap to the view. For the sake of trying to fix the current issue, I have commented out any angularUI grid line that could have caused the issue, leading me to believe it has something to do with semantic.
Has anyone faced an issue like this? Where do I even begin troubleshooting?
*please note, I am scrolling back up in the gif, then clicking a tab, where it snaps back down

Drupal 7 Admin Overlay positioned to high

This is a problem that seems to have occurred for no reason. Everything was working fine, and now all of a sudden the overlay iframe for the admin interface renders too high so that any tabs are rendered underneath the toolbar. I hadn't edited any css or html so I don't see how I could have done this. Has anyone seen this happen, and how did they fix it? I'm attaching two images. One shows the site as it is (incorrectly). The other shows another similar site that is functioning correctly. Also, notice on the incorrect display, somehow the toolbar is showing OVER the browser scrollbar.
The problem is that I was swapping in JQuery 1.8.3 with hook_js_alter. This has a known problem causing this exact issue. I didn't need a later version of JQuery after all so I removed that, and it fixed the problem.

Nested dropdown menu in Bootstrap in mobile

I'm building this website using bootstrap.
The problem is that i have nested drop downs. The dropdowns look nice and not cluttered in desktop version.
However this is how it looks in mobile:
They look cluttered, and you can't fold/unfold the deepest level of dropdowns. It just doesn't allow this.
I'm thinking there are better ways to represent information in mobile view. My approach was when person touches 'buildings/land' tab, i replace bottom navbar with contents of Buildings/Land, thus reducing one level of dropdowns.
Question:
I'm really not experienced in developing UI. Is my approach sufficient?
How should i solve this problem?
I use a sweet JS plugin that plays nicely with Bootstrap, called Snap.js. If you've ever used the Facebook iOS app, you'll be familiar with this layout. There are some great demos here.

My Google Maps custom overlays are not "active" anymore in Chrome and Firefox, but work fine in IE

Since a couple of months, my custom overlays appear to be disabled.
They are still visible and displayed correctly, but the link does not work anymore, nor does the CSS that changes z-index. They just seem to be drawn, and that's it.
The link is there, but I can't click it.
This happened in Chrome and Firefox, not in IE.
Has anyone had similar issues? I've searched and searched the web again and again, nothing. However I'm sure I must've missed something.
Ok, I finally figured it out: wrong overlay layer. One is specifically dedicated to mouse events: overlayMouseTarget

Resources