Jscrollpane and sliding tabs combination doesn't work - jscrollpane

I have a test page that I have working with sliding tabs
(http://www.maggies-bayfield.com/wp/temp/old/slider_no_jscroll.htm).
if you click on a navbar item, the page scrolls down to the
appropriate place. this is exactly what I want. however, Android OS
doesn't support overflow:auto etc. and I NEED this to work on all
mobile devices. So, I found Jscrollpane and implemented it on my test
page. it works great (scroll bar shows up on android) but the sliding
tabs are now broken (http://www.maggies-bayfield.com/wp/temp/old/
jscroll_breaks_slider.htm).
Anyone have any ideas or solutions?
Much appreciated!
again:
sliding tabs with out jscrollpane: http://www.maggies-bayfield.com/wp/temp/old/slider_no_jscroll.htm
sliding tabs with jscrollpage: http://www.maggies-bayfield.com/wp/temp/old/jscroll_breaks_slider.htm
Thnx!
August

Related

Flutter : Sliding menu and swiping tab

As part of a training, I'm trying to duplicate this Liberation newspaper mobile application in Flutter. I have a lot of questions about how both the menu that you can scroll like a carousel sideways but also the ability to switch between menus by Swiping from anywhere on the screen to the left or right, which takes you back to the next or previous menu.
Here is the link to a ten second video of the application I want to copy : https://drive.google.com/file/d/1FgHvWh6bggfKGzb5CBFdwWhkM167R0Ne/view
If anyone can take the time to advise me, that would be great, thanks a lot :-)

How can I make the bottom navigation always visible in Android studio?

I am wondering how can I make the bottom navigation always visible in Android studio.
I would like that when filter options is clicked, the new full-screen page is slid from right to left. And on the new screen, you can still see the bottom navigation. I am attaching a picture for a better representation image
Does anybody know what is the best practice to achieve that?
Thank you for any help you can offer
I've tried with activity and popups but I couldn't get the right result.

Ionic Vue - Master Detail View

I'm developing an app for PC, tab and mobile, which consists in a list of items. Each item has a detail page. The idea is to display each item's detail page when the user clicks on that specific item, but with different behaviour depending on the device. In PC/tablet, the detail view will be displayed on the right side of the list, and in mobile the detail page will be opened in a new page. You can see the idea in this image:
The image was made by Martin Pritchard, who wrote this Medium post some years ago about how to solve the same problem I'm facing now. He used IonSplitPane in Ionic 3 with Angular. I'm afraid I can't use this approach, or at least I'm not able to replicate it with Vue.
I've tried IonSplitPane alongside with IonMenu, but the behaviour is not the expected, because I don't need a 'hamburguer' menu that collapses in mobile view. Besides, I've tried with IonSplitPane only and I'm not able to put the collapsible side at the end (as it should be the detail view which hides in mobile, and not the left (master) pane). I'm not even sure this could be a solution, as I need that in mobile the detail page displays in a new view.
Has anyone faced this problem and could help me?
Thank you very much in advance.

Restrict IONIC side menu from auto populating for large screens

I have implemented side menu for my IONIC 5.0.0 application. In smaller device side menu is shrinking to Hamburger icon (working fine). I want the same behavior in large screens also but unfortunately the menu is fully visible in the landscape mode of my iPad (6th gen). Does anyone know how to hide the menu in Hamburger icon always (for all device).
Seems you need to use when="false" property in the ion-split-pane component. Please find app.component.html. The location should be like src/app/app.component.html and change the following line from
<ion-split-pane>
to
<ion-split-pane when="false">
To learn more about the ion-split-pane component, visit this link.

Drag/Slide div inside overflow:hidden container on iPhone

I am creating a wepapp, that has a horizontal menu. The menu is limited to 320px and has overflow set to hidden. Inside the links are wrapped in a div which has a width set to it. The list overflows on the x axis. I have applied a jquery plugin called OverScroll so you can drag this list left and right to reveal the hidden menu items.
It works great on a desktop browser but I am having difficulty on getting this to work on the iphone.
I have set up a demo at www.irfanyasin.com/iphone/
Any ideas?
Thanks
Apart from general usability issues (will people know it's slidable? I could see how this can be annoying if you use that menu often and have to slide it a lot), dragging doesn't work on most touch interfaces. You could try adding left and right buttons that scroll the menu when they click them maybe?
Also your demo doesn't work in Chrome on my desktop. Is the menu supposed to slide? It won't.