Ionic Framework react Deeplinking with hashlinks and IDs - javascript

How is it possible with Ionic Framework/react to deeplink to a certain position marked with an ID on a page with long content with a hashlink?
For example on tab2 I have a long text and some positions are marked with IDs
<p id="foo"></p>
Now I want to link from another Tab to this one on exactly this position in the text
<Link to"/route#foo"><IonButton>Link to #foo</IonButton></Link>
With normal Link from react-router-dom it`s not possible, so I tried “react-router-hashlink” and it
worked in the browser and on android, but NOT on iOS and mobile devices.
<HashLink to"/route#foo"><IonButton>Link to #foo</IonButton></HashLink>
So I found out, it is the same problem on MacOS Safari (Firefox and Chrome are working) and on every mobile browser on iOS.
And: when I am testing it on a testapp, sometimes its working and sometimes not. On Safari mobile maybe every 10th try its working.
What I`m doing wrong here?
Thanks for answering.

Related

Page not scrollable on latest mobile Android

If i use https://trelki.de/ on my S10+ device using latest chrome i am unable to scroll.
I tried chrome dev tools, works. it works in every browser except of the current chrome. someone is causing this, because my scrolling works on other pages.
firefox works, opera works, edge works, chrome desktop (arch linux) works, also.
watch https://trelki.de/
i just want people to scroll that page and find the reason for this.
this page is completely self-written, so i have control about absolutely everything.
Thanks in advance

Elements dissappearing in safari on ipad

Ive made a simple project with html and jquery. It works great in all browsers except for safari on ipads. Since apple doesnt have a windows version of safari i cannot check if the error is explicitly for ipad but i think so.
The problem is the photoboxes wich get their width from the jquery, they dont appear at all on the ipad. Chromes developer tools device mode shows everything correctly and i have css queries that take care of smaller screens so its only the ipad thats the problem. I havent found any way to do a web debug on the ipad either. Its hard to give a code example due to i dont really know what the error is but i have a live demo you can check out. For you on ipads, its supposed to be photos before the winter background.
http://www.mj-bygg.se/ipad/default.aspx
I am also getting the same error on desktop Chrome on the first load. If I refresh, then the pictures load fine but on first visit to the link I only get the footer image (trees.)
On the first load, none of your jQuery heights/widths are being applied. No errors in the console and if I rerun the function it works as it should (without reloading the page.)
I suggest either pushing the script further down the page or using $(window).load(function() {}
instead of
$(document).ready(function() {}
That is the only thing I can assume is wrong if it fails first time but works with the page being cached.

Custom jQuery Slider does not work on iOS 7 Safari

I am working on a mobile site, my first, and I am facing strange problems. I have created a custom jQuery slider with left and right buttons. I have tried it on my Android's own browser, Firefox and Chrome for Android. It works fine, as it is supposed to.
When I gave the work to my client he said it doesn't work on iPhone for which it is originaly intended. I was confused as how this is possible, as it worked flawlessly on my Android. So I asked my friend for his iPhone 4S with iOS7 and opened up the site. To my surprise, the slider did not work. I took out my phone and opened it on my Firefox, it worked!
Why is this so? If it is working on Android, shouldn't it be working on iOS too? And how can I solve it?
Regards
I came to know why this happens. By default, iOS Safari doesn't allow everything to be "clickable". This means you need to make it cursor: pointer via CSS to make it "clickable".
I have got my answer from here: This link tell is why this happens. Read it!
Regards

JavaScript for iPhone to open in Safari from non-default iOS browser

"googlechrome://www.lego.com" opened in mobile Safari will switch to Google Chrome iOS app to open the URL. This allows for scriptlets like the one below, which allows you to open the current page in Google Chrome iOS app, switching from mobile Safari:
(function()%7Bif(document.location.href.indexOf('http')===0)document.location.href=document.location.href.replace(/%5Ehttp/,'googlechrome');%7D)();
My question is, can the reverse be done? I tried "safari://www.lego.com", and it is simply an invalid URL. Can you make a scriptlet which switches from Google Chrome to mobile Safari to open the current page.
The answer is yes. Courtesy or MacStories (http://www.macstories.net/tutorials/chrome-for-ios-send-a-webpage-back-to-safari-via-bookmarklet/), I found this code:
window.location='googlechrome-x-callback://x-callback-url/open/?url='+encodeURIComponent(location.href)+'&x-source=Safari&x-success='+encodeURIComponent(location.href);
Execute that code, go to your homescreen, reopen Chrome, and there's a magical back button to go back to Safari. This may not be exactly what you want, but it works... Kink of.
Good luck!
Update:
Here's a screenshot:
Link (Sorry, I don't have enough reputation to put it right in the post): http://i.stack.imgur.com/OR175.jpg
Update:
It seems that the functionality to do this has broken. Thank you!

Lightbox-style dialog shows below YouTube movie on Mac OS 10.6

This is a "but it works on my machine" one and could be tricky:
I have a lightbox-style HTML dialog that shows a menu on top of a web page. It can be injected into any web page via a JavaScript bookmarklet.
One of my users is trying to use it on YouTube.com with the result that the flash movie is rendered on top of the dialog (a div with high z-index).
I can't reproduce this. It works just fine for me. The dialog shows up on top of everything else on youtube.com, the video included.
I had him save the page in Safari as Webarchive and send it to me. Even that shows the menu rendered correctly for me.
I use the exact same version of Safari (4.0.5/531.22.7) and Flash (10.1 r53, latest beta). Only difference I could find is that he uses Snow Leopard (10.6.6) and I "only" 10.5.8.
Has anybody noticed similar problems? I'm afraid that the usual wmode recommendation won't solve this (I tried & it works on my machine anyway)...
Thanks!
Mark
Turned out to be a problem with the combination of Flash Beta and Mac OS 10.6. I had the user revert to the latest production release of the Flash player and everything worked as it was supposed to.

Categories