Is it possible to hide the blackberry cursor in the browser? Using Javascript or CSS?
I am trying to rebuild the technique used on native apps where you browse through the items with your poke. I think this works nice on their native apps and I like to use that technique on my website where visitors can browse through various of items using their blackberry poke.
PS. CSS
* {
cursor: url(cursor.png), none !important;
}
Does not work.
This BlackBerry page seems to confirm the cursor style can be changed.
What is the cursor.png file that you are using? Have you tried changing the PNG to be a completely transparent file instead of specifying "none" in the CSS? This website seems to suggest that will work.
As per the comment you should consider what happens for non touch screen devices, but you can always choose to target only touch screen devices by specifying the device models in App World when you deploy your app.
Related
I'm using a JS library (Pannellum) that enables use of the motion sensors available in Apple devices, but when I view my site on a large iPad (12.9-inch) it defaults to the desktop site and makes the library think the sensors aren't available. If you 'Request mobile site' in Safari's settings then it will work, but I'm trying to work out how to make it load the mobile site by default. FWIW I don't have a separate mobile endpoint, it's just a static site using Bootstrap to determine CSS changes at various breakpoints. I'm sure the solution will likely be some missing value in the tag, but I haven't been able to find out what, most existing questions of this nature seem to ask how to do the opposite (force desktop view). Would appreciate it if anyone could point me in the right direction!
I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.
I want to create a web app such as this?
I already have a mobile app how do I display my mobile app like this on the large screens?
On large screens, I want a mobile and then mobile app running within it.
This is the link for the website shown in image
I want my Website to work like this, how can I achieve it?
I already have an mobile app made using ionic, what i want is to use that app for large screens like this website has used.
I'm not sure if I understand what you're asking.
To make responsive websites, you should use this:
#media (min-width: Xpx) {
}
You can define your minimum width here, that indicates the size of browser at which these settings should be applied. If you're using sass, nest this and apply your browser-sized settings there.
I hope that was helpful, but maybe I misunderstood the question and it's more complicated
I don't have any experience of this problem but there is a dedicated article here: https://ionicframework.com/blog/tips-tricks-for-ionic-on-desktop/
This can be created by using an Iframe on the Desktop.
So I created an SVG for the borders of the mobile and rendered my app inside the SVG using the Iframe.
Since I am using Iframe so my app takes mobile width as viewport width and is rendered as it should on mobile.
I'm currently adding a popup (Add To Home Screen Feature) to an existing mobile web app using jQuery mobile. I would like to place the exact same icon the user has on their phone (based on Android version) inside the popup instructions rather than show 6 different icons the user may have.
Is there any specific jquery/javascript doing this or can anyone provide or direct me to an icon set (specifically just the menu icon) with android version numbers that I can pull from to create some logic to determine exactly the menu icon they need (based on version) to press to bookmark the site? I can't find this anywhere.
Edit:
Looking specifically for hardware specific menu icons for Android devices. They use many different kinds and would like to know if I can detect the device hardware being used and use the appropriate icon? Is this even possible?
You can figure out the android version using this code from another answer.
There used to be no standard for android menu buttons. Hardware manufacturers tended to make the menu icon whatever they wanted. I would heavily suggest using the modern, unified icon with three dots like this one from the android developers site.
I am working with an iOS magazine framework (PugPig) which loads HTML documents into a WebKit powered view (a chromeless version of Mobile Safari).
I would like each 'page' to load either a portrait or landscape version of an <img/> depending on the orientation of the device. For various reasons it has to be an <img/> rather than a CSS background image, so media queries won't work. Because I am loading HTML from the local device, no web server stuff can be used either.
So I am guessing that JS is the way to go, but it would need to detect orientation change (or at least screen width) on the fly, without a page refresh, and I don't know if this is possible.
Not hugely familiar with JS hence no sample code (all my attempts so far are car crashes). Sorry.
Any help much appreciated.
Did you try jQuery mobile's orientationchange events?
I've never done this, but it seems you could go this way.
OK, found a solution using CSS Media Queries after all, by setting the display property of the img. Bit of a fudge, but fine for now.
Basically I created two divs, one with a 'landscape' id and another with 'portrait', positioned absolutely on top of each other. Then used #media queries to show/hide the relevant div with the display: property. Very clumsy, not at all suitable for the web but okay for an iPad app loading data straight from memory. And this was before "responsive images" became a thing.