this is bit of a tricky one for me to explain, so will try my best..
If you go to the below link, you will see I am loading up a 'geo Map' type view using javascript. (all code should be available via the sourecode, I was unable to share via JSFiddle)
Map Demo
What I'm trying to accomplish, is for this view to be full height on a mobile device, and able to pan left and right across the map.
Currently, viewing the map on a mobile device (ie, an iPhone), you see a portion of the map, which is fine, but you're unable to pan. It has like a rubber band effect. I noticed that you can pan once zooming, but otherwise im struggling.
What is the best way to get the view to appear in full height, and be able to pan across the width on a mobile device?
Not sure what I'm doing wrong here.
Thanks in advance for any advice and suggestions!
Related
I am building an admin panel for a client using the Metronic theme. Accessibility is not important to the client and responsiveness is not too important either since this application will only be used on desktops/laptops. Zooming into the application breaks the appearance of some components.
Would it be possible to replace zooming with magnification (the behaviour achieved by pinching and zooming on a laptop trackpad).
To help you visualise what I mean I used StackOverflow as an example;
StackOverflow without zooming/magnification;
StackOverflow when zooming in (Ctrl+Shift+Plus);
StackOverflow when magnifying (Pinch and zoom on a trackpad);
I want the third behaviour to happen when zooming regularly also. I have tried adjusting the meta viewport tag but according to this post and many others, viewport is only for mobile devices. There is also no zoom event in JavaScript to do try to see if e.preventDefault would make it work.
Even if I end up having to make everything responsive anyways it would be interesting to see if this is possible.
I'm currently pulling my hair out with this one. Im a new web developer using bootstrap themes and templates just to get a feel for the industry, and have hit a bump in the road that needs an experienced input
Ive got a website that Ive created at the minute, where certain parts of the screens don't resize properly when the aspect ratio is lower than mine (1920px). However zooming out on the browser corrects this issue. For instance 1440px needs to be zoomed out to 75% in order for everything to be correct. A number of images have fallen out of the bootstrap framework due to a positioning request from my friend, although ive used #media queries to correct a number of these issues but thats clearly where the problems have arisen.
I'm aware that I should go back and fix this bugs from scratch but I seriously will go crazy if I have to do that. I do know that it is possible to resize the browser zoom being used if the aspect ratio is below a certain level however Ive heard thats not the way to go.
Does anyone have any advice on how to proceed with this one? Is there an "entire page/html" zoom query that can be put in place rather than a browser zoom?
Use CSS zoom:
body {
zoom: 0.75;
}
If you're just starting out, I would recommend you right click on elements that are not appearing as expected, and inspect them in your Chrome console (or whatever browser you're on). You can then first adjust styling properties and transfer over the appropriate changes to your actual code once you confirm that the adjustments you make do what you want.
I'm pretty new to the Google Maps API.
I'm building a simple Maps App for our TV platform here at work, the TV uses a custom webkit browser and I've confirmed that the Maps API works well on it.
Currently when you load a simple app like this on our TV (Code is given in below links):
http://markpaul.name/dont-delete/other/sample-maps-app.html
You first need to use the mouse to "click" on the screen to "focus" the map. Only after this, the map embed "activates" and you can use the up, down, left, right keys to navigate the map.
The problem I have is this; on a TV you dont have a mouse so you cant "click" to "focus"!
Is there anyway you can programatically "focus" the Google Map so I can use the arrow keys on the remote (which usually map to the keyboard up, down, left, right keys) to navigate the map?
Thanks in advance,
Mark
UPDATE:
My code can be seen here - http://codepen.io/newbreedofgeek/pen/EaugH
The full screen app in codepen is here - http://codepen.io/newbreedofgeek/full/EaugH
The hosted full screen app (minus autogenerated CodePen markup in full screen codepen view) is here - http://markpaul.name/dont-delete/other/sample-maps-app.html
I checked you source code and my feel is that somewhere the map's position is getting changed. So by triggering the Google map's resize it would fix your problem.
google.maps.event.trigger(map, 'resize');
Add the above code after initializing the Google maps. This would fix the problem.
I'm trying to sell my boss on using three.js to create a CSS3D interface integrated with video providers (like YouTube). One of the requirements is showing it on a mobile device - I've chosen an iPad since the Android tablet is quirky.
Since my demo is scheduled for this Thursday I thought the quickest thing to do was to show him the wonderful css3d_youtube demo.
The problem is it is not configured to use gestures (touch pinch zoom) and I'm having a hard time doing this.
I also needed to add a few things like a background image and the ability to have the YouTube player go full screen so I had to take the original code and modify it. I saw the periodic table is so I decided to use the TrackBall controller in my code. You can see my modified code here
The trackball controller seems to shift the camera's y position. You can see the actual page I created here if you view in a tablet. I used the Modernizr library to recognize if the device is touch screen so you wont see it just by using a desktop browser.
If it would be more helpful I can remove that condition so it can be seen in a desktop browser.
If I remove the code that is messing up the camera position (you can see where I do this my searching for Modernizr.touch in the code) the camera is no longer centered to the video poster image when clicking on the button.
I also tried just regular JavaScript gesture events by adding this function:
function onPinch(e) {
move(e.scale)
}
and calling it in an event handler:
`document.body.addEventListener('gestureend', onPinch, false)`
but that was a disaster. The CSS3D objects rendered very slowly.
Can someone help me add pinch zoom functionality to the css3d youtube demo? Or at least offer some advice on how to proceed? I wasn't able to find anything to help via Google -ing
Looks like TrackballControls.js has been updated to support touch zoom gestures.
If any one else is having this problem, just get the latest version.
The CSS3D periodic table and youtube examples seem to have been updated too.
We're developing an app using Trigger.io in conjunction with Jquery Mobile 1.1.1. We're aware of the modifications to the viewport meta tag in JM to enable or disable zoom, but in another Stack question about Trigger.io, one of their devs mentioned they disable zoom at the webview level: Preventing zoom with trigger.io forge
We would like to enable zoom when displaying a large image on the page - is this possible using the Trigger framework?
yes we do disable zooming in the WebView: if you include a large, unscaled image in your HTML, the user will be able to scroll around to see the full image, but pinches won't work.
Of course, you could have the image down-scaled to start with, then blow it up to full size when the user clicks on an icon? Libraries such as iScroll4 might help here too.
Also, we would be able to make the WebView's zooming behaviour somewhat configurable (although we would always default to making it non-zoomable). Get in touch with support#trigger.io if you absolutely need different behaviour.