I have a drupal site with the media module installed. When I click 'select media' and try to upload an image on a mobile device I get a blank box instead of the popup box with the upload option. I've checked the console and there are no error. How do I debug this and make it work on mobile.
You can add images to Drupal, but mobile devices don't allow you to upload any photos to image fields. (Android allows it as I remember.)
HTML5 allows this, but sadly that's mostly a no go with Drupal 7 at the moment. However, it turns out the fix is nice and easy via the HTML Media Capture method. Add the following snippet of jQuery, so it runs when pages load:
$('div.image-widget-data input[type="file"]').each(function(idx, item) {
$(item).attr('accept', 'image/*;capture=camera');
});
That will look for items inside image widgets and add the accept attribute This then tells mobile devices they can upload image data and are allowed to grab that from their on-board camera.
To make that a spot simpler on Drupal, you can grab the Image Mobile Camera module from its sandbox on Drupal.org.
Now hit your blog via your tablet or phone (using a browser that supports this - Chrome is fine) and try it out.
Hope that helps
Related
I'm implementing Facebook Pixel on my WordPress website. Everything works fine on the desktop. The pixel is activated is and working fine.
I installed the Facebook Pixel Helper plug in for Chrome, and it detects the pixel on my page
I test the events by opening my website on desktop browser, the page view event is detected on the dashboard. The pixel can also detect other events I set, like contact, content view, etc. All works fine.
Problem: when I open my website from mobile browser (I tried mobile Chrome, Kiwi Browser, Samsung Browser), the dashboard didn't detect the page view event, as well as other events. I tried to open from another mobile phones, same result. I tried to deactivate all my WordPress plug-in to check if one of them is conflicting, but still same result. I inspected my website from mobile browser, it has the Facebook pixel script on the header part, just like on desktop browser, so it should be working fine.
Anyone knows the solution? I don't know what causes this problem. I use Hestia theme and Elementor for my WordPress website.
Try this steps:
1 ° Mobile usually has cache (I don't think so), but try to clear the caches and try again.
2 ° If there are cache plugins please clear all caches please (I don't think so)
3 ° Some themes are available in several headers and some of them are different for mobile and desktop, check if the headers are different and insert the tag manually if necessary in each header.
4 ° To check if everything is ok, with google chrome if you press f12 you have the option to choose a device for testing. Choose an Android or IOS phone from the emulators and reload the screen to test. In cell phones can be false / positive information received sometimes.
Try these options and update your question with new information to try to help you.
I have created a simple page with "mdl-layout__header" and other components .Unlike other web pages like google search, nytimes.com etc the browser address bar does not auto show/hide when user scrolls up/down. This could be easily seen in getmdl.io templates too.
Open following links in 2 tabs and try scrolling down
http://www.getmdl.io/templates/blog/index.html
http://www.nytimes.com/
(I'm testing on latest Chrome,Firefox,Opera in Android 5.1.1 mobile phone)
If you searched the issue tracker on Github for the project, you would have found the existing issue about just this and why it exists.
I have a custom form module installed for a contact us page.
When on a desktop the form will give a confirmation message either that your form was accepted or denied. However this is only working on a desktop
I'm trying to figure out whats causing it to stop working on other devices. I have the ResponsiveThemeMachine theme installed but I looked through the css files and saw nothing about the class .message-Information (which is what the confirmation message uses)
I'm not sure where else to look as to why it wouldn't work on anything but a desktop.
I partially solved this if anyone has the same problem. I had to add a widget in the message field so what I did was created an HTML widget and set the title to not appear and left the body blank and set it to only appear on the contact page. It did push the content down a little bit but now my message works on all devices
So, as you can see from the screenshot I am loading the same website from the same domain on my Galaxy S2.
The website on the top is the static html file that was created during initial development and has a url of the following domain.testdomain.com/template/index.html. It works correctly on all devices when viewed on the device itself and in the Google Chrome Dev Tools Emulator.
I then moved the site from the static HTML to our CMS framework with a url of the following: domain.testdoamin.com, and it works fine on the desktop and the tablet, but the phone (any device) does not work properly.
The phone widths are being reported differently from the two sites. The static html displays a width of 320 pixels, which causes the correct media query to kick in. The CMS framework site reports a device with of 980 pixels which causes the media query to not kick in.
I am using this simple JS to find the widths:
$(document).ready(function(e) {
$(window).resize(function(e) {
$('#width').text("innerWdth: " + $(window).innerWidth() );
});
});
I do not understand why the same device reports different widths from different urls. I am loading the style sheets in the same order on both sites. Unfortunately I am not able to grant anyone direct access to the domains as they are restricted behind a firewall.
If there is more information that is needed please let me know and I will be happy to furnish as much information as I can.
I am using Foundation 5 as a framework.
When you browse to sites like youtube, decide, and many others on your iphone's safari, their mobile web show a link to their app on the top of the page with x button to close and status of app (like if it's already installed to have open button instead of install).
This looks pretty standard to many sites. Is there a script of these code that I can copy for my mobile site link to app?
Thanks.
You just need to add this meta tag (with the relevant details filled in accordingly) to the head of the page on your mobile site that you want it to show up on:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
Apple's Developer site has documentation on it http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
Note that this is an iOS6+ feature though.