I'm building a small iPhone App and by default (apparently) the webkit-touch-callout function that allows a contextual menu when a user taps & holds an element (an image for example). In the case of an image, when you tap-hold it, it'll prompt you to either save or copy the image.
I see all sorts of tips on how to disable this - by default, it should be enabled. However this is not true in my case and I'm trying desperately to ENABLE this.
My HTML is fairly straightforward:
<img src="files/image.jpg" id="theimage" style="margin:30px auto;display:block;width:90%;height:auto;" />
And in my CSS, I have:
* {
-webkit-user-select: auto!important;
-webkit-touch-callout: auto!important;
}
However when I tap-hold an image in my app, nothing happens. When I open Safari in the xCode emulator however and I browse to a Google images image, it works perfectly.
Any help/ideas please?
Related
Setup: Our RN (0.61.5) app is using react-native webview#8.0.6 to display content and interact with the user. The app includes some text input fields, swipe guestures, buttons, longpress actions. As of iPad os 15.1 a text selection magnifier has been reintroduced in the OS.
Problem: The little text selection magnifier capsule is popping up on every long-press inside the Webview. It happens on divs, icons, text, does not matter what you press. user-select: none; does not seem to affect it as well. It's been set for the body of the document which results in no text getting selected, but magnifier still shows up every time. Does not break anything but our app does not benefit from it either.
Question: Is there any way to disable this new text-select magnifier for the Webview?
Thanks
My actual application is using a bluetooth scanner in HID mode and capturing the input on the DispatchKeyEvent of the MainActivity. It works great except that the screens dims to some dark opaque color where it looks like everything is disabled and you have to navigate back to a page with an input control and tap on it to get the screen to go back to normal.
It's not as noticeable in the stock template but in my actual application (Screen shots at bottom) the dimming is very noticeable; it's a blue-gray opaque overlay that really stands out. I have no idea why it's like that. I'd almost just be happy if my actual app dimmed like the default forms sample.
Steps:
Make a Xamarin Forms app from one of the templates.
Change nothing.
Run simulator.
Press a button on your keyboard.
Result:
The screen dims and the soft keyboard does not popup.
Next Steps:
Add an Entry control. < Entry/> will do.
Click on it and the screen brightens back up.
Delete < Entry/>
Press a key on your keyboard and the soft keyboard pops up and the screen doesn't dim again.
What I want:
To know where the dim/overlay color/opacity is set so I can change it.
To not allow the soft keyboard to try and popup at all unless there's an entry field that has focus.
Here's screenshots from the default forms app:
Not Dim:
Dimmed after pressing the keyboard:
My actual test device is a Samsung Galaxy XCover Pro running Android 10.0. I'm working on porting a native Xamarin Android app to Forms so we can run it on iOS as well. I never had this issue with my android app and I'm not sure how to track down what's happening.
Here's a before pic. I've got an Entry field focused.
After scanning a barcode with my bluetooth scanner this happens:
There is NOT any overlay/modal boxview defined in the XAML. The overlay is nothing that I added. Though I seem to have done something to influence the color; I don't see anything in my styles.xml files that would change the color from the default light gray (as shown in the sample Xamrin Forms template).
I can reproduce this with a scanner on the "Welcome to Xamaring Forms!" as well, the screenshots don't really show the change in overlay color; its much more subtle; I really would like to know why in my app the overlay is so much more obvious.
I'm still annoyed it happens at all. But just in case anyone else using a
hardware keyboard as input (or a BT scanner connected as a HID) and you thought you'd be fancy and override one of the default styles and use a pretty green accent color like this: (though stupidOverlayColor has been changed to pink just to make sure I found the issue) - don't do it.
<!-- Base theme applied regardless of API level -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlHighlight">#color/stupidOverlayColor</item>
</style>
The moral of the story is that "colorControlHighlight" is evil and not to be overridden and used with hardware keyboards, unless you want your app to think the entire screen should get the highlight color after you scan a barcode like this:
Long time browser, first time caller....
I have recently re-written my website to use responsive images (which I am new to), but my s7 chrome seems to always load the "medium" sized image, which is the default src.
I have tried clearing cache and using incognito. It still appears that the medium image is loading, although the only way I'm deducing that is by selecting the image and loading in a new tab and reading the url. I'm not sure if this is accurate.
I've also tried changing the default src to the small image, but the medium is still loading.
However, on FF and Chrome desktop, even with developer tools set to mobile device, it seems to work correctly. Here's the relevant code:
<img
class="vertical"
src="../galleryphotos/doveinsnow_medium.jpg"
sizes=" (max-width: 675px) 271px,
(max-width: 1920px) 620px,
(min-width: 1921px) 1240px,
100vw"
srcset="../galleryphotos/doveinsnow_small.jpg 271w,
../galleryphotos/doveinsnow_medium.jpg 620w,
../galleryphotos/doveinsnow_large.jpg 1240w"
alt="Dove In Snow photograph"/>
Here is a link to the page with the above image, although every page on the site behaves the same way:
http://herschbachphotography.com/gallery_index/doveinsnow.html
What am I missing?
As far as I can see, everything is working well. I checked with Chrome Version 69.0.3497.100 (Official Build) (64-bit) and I can see all 3 versions of your image if I change the viewport from 675px to more than 1920px.
Here are 2 ways you could confirm which image is being shown.
If you place a different marker on each of the 3 images it will be easy to tell which one is being displayed.
Another way is to use Web Inspector (from within your browser, right click on your page then choose 'inspect')
Click the network tab, select img, then reload the page. You'll get full details of all the images on the page.
I hope this helps!
When creating a shortcut to a website on Windows Phone 7, the icon it creates is a snapshot of the website instead of any sort of icon that I want it to display. For example, with iOS I can sepcify
<link rel="apple-touch-icon" href="Logo.ico" />
and it uses that icon for the home screen image.
I've tried
<link rel="shortcut icon" href="Logo.ico" />
which seems to work in IE but not IE mobile.
Has anyone successfully created a home screen icon for windows phone 7 / IE7 mobile?
I assume you are referring to pinning a web page to the start screen.
This is by design. You cannot change it.
I think the intention is that you can see a better idea of where you will be taken to when tapping it. This is particularly true if you pins multiple pages from the same site (which would have the same icon otherwise).
If it was possible to set a custom icon, it would need to be 173x173 pixels which wouldn't be the same as any other platform. There would therefore be A LOT of sites/pages which didn't have this specified. If the fallback was to use the default favicon image this is typically only 16x16 (or 32x32) pixels and so would not look good on the 173x173 pixel tile.
All you need is a .css file, a 256x256 image.
.logo {
display:none;
}
#media screen and (max-width: 480px) {
.logo {
display:block;
text-align:center;
width:auto;
padding-top:32px !important;
padding-bottom:32px !important;
}
}
And right before the first html output make a div with logo class and your 256x256 image.
tested on Nokia Lumia 800
Even tough Matt Lacey is right, there is a way you can do this.
It is not a very good way, but Google and others are using it.
Create a HTML-Page that has nothing on it except your tile-icon. This page redirects to your actual website.
Now of course everyone has to pin the HTML-page to the start. You can tell your visitors to pin the HTML-page with a button or something similar.
OR
Create an overlay with JavaScript for your website for every windows phone user that wants to pin your website to the start (determined by a button "pin to start" on your website).
More information on that one:
http://www.russellbeattie.com/blog/creating-a-pinnable-windows-phone-7-tile-for-your-website-like-google
I'm also searching for a better way to create a tile for my blog in WP8 right now but apparently there is no straightfoward way.
I'm debugging a website for missing images. The website heavily uses GWT hence the source code is not so verbose. I started debugging it with firebug and found out that the tags are all greyed out in the firebug DOM source. If I edit the image tag in firebug console, say by adding just a space, then the image tag is not greyed anymore hence showing up on the page.
Can someone here please point out why the image tags are greyed out in firebug and how to resolve this issue.
Note: there are other images in the page which are working just fine, even they are generated using GWT in the same way.
Most likely - the image is hidden (via CSS probably). Click on the tag to see the styles applied to it - most likely you'll see display: none or something of similar effect.
As to why the image(s) are hidden - either the CSS rules got mixed up and resulted in such behaviour (Firebug should help with the investigation) or it's part of the application logic (hide the progress bar when not needed, etc).
In my case my image was grayed (greyed) out in firebug due to the image having its height and width to 0 px so effectively it was hidden on the screen. so i deduce that grayed out means its not visible on the screen.
I had the same issue with social networks icons, and it was also Ad-Blocker (under Firefox) causing it.
The alternative text of the icons had alt="Facebook" (Twitter, Instagram) in it. Changing that to alt="Facebook_xxx" was enough to solve the issue.
I was having the same problem. Firebug was showing my container element, which had an img, as grayed out. The element was displayed in Firefox (and other modern browsers), but not in IE8.
Knowing I was setting display:none; and later in the script making it block, wasn't my issue... adding a missing width and height in the style was the fix for me.
For me, it was a matter of explicitly setting the width and height on my div (that holds my img) inside the container div. I did not have width and height on my absolutely positioned div. As soon as I added that the grayed out was solid in Firebug. Also fixed my missing div problem in IE8! (Which was what set me on the debugging path in the first place)
IE8 likes width and height set, where all other modern browsers didn't care and still displayed the div. Firebug showed the element grayed out, but Firefox the browser displayed the div element just fine.
#slidesContainer {
position: relative;
width: 871px;
height: 275px;
padding: 8px 8px;
overflow: hidden;
}
#slidesContainer div {
position: absolute;
width: 871px;
height: 275px;
display: none;
}
As an FYI for other people, I was having this problem and couldn't figure it out - Firebug correctly greyed out the invisible images. I am running the AdBlock Plus add-on and it was hiding the images because they were in a folder called ads. The giveaway was that the images has classes added with random string e.g. class="auwhaezfynjjayjvlasn". I changed the name of the ads folder and voila, visible and not not greyed out in Firebug any more.
Another FYI - my FILE was named xxx-ads.swf and the file would NOT display in Firefox or Chrome but worked fine in Safari, IE and Opera.
I am running Adblock plus in Firefox and Chrome.
It seems to me that as a general software practice, Adblock is trying to be too smart in it's detection. Cost me about 2 days of debugging. Grrrr.
Thanks goodness i finally found this forum.