I am trying to make a pop-up form for my mobile web page. It is working perfectly on firefox of my laptop. But when I test the page from an android browser, it's just showing an empty page. Please help me out how can I make my web-page suitable for mobile phones?
Link of my code is http://dl.dropbox.com/u/5420677/myfile.html
To see it, also extract this file into the same folder :
http://dl.dropbox.com/u/5420677/js.zip
A pop-up form is appearing from firefox, but now on android's browser.
When I remove the line no 5,6 and 7, it becomes accessible from android also, but then obviously pop-up functionality disappears, which suggests that javascript is creating some problem...
Thank you.
FYI, 5,6 and 7th lines are
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
For mobile use, have a look at jQuery Mobile - Creating dialogs
Related
I am trying to use zebra datepicker library in my project. I have followed the instructions here and written the following codes:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="assets/Zebra_Datepicker-master/public/javascript/zebra_datepicker.js"></script>
<link rel="stylesheet" href="assets/Zebra_Datepicker-master/public/css/metallic.css" type="text/css"></link>
<script type="text/javascript">
window.onload = function(){
$('#calendarValue').Zebra_DatePicker();
}
</script>
</head>
<body>
<div id="calendarContainer">
<input type="text" id="calendarValue"></input>
</div>
</body>
</html>
This results into a yellow icon attached to a text field with the id 'calendarValue', and the icon loads a calendar when gets clicked. I am getting the expected result in chrome, firefox and internet explorer 10 and 11.
While it is mentioned by the developer (Stefan Gabos) of zebra, that following strict doctype () makes it compatible with IE6+, and the example html's in zebra datepicker package also works fine to load the datepicker on IE9 particularly, my codes does not load the datepicker UI when I test it on IE 9; only the yellow icon gets attached to the text box and the calendar UI does not open when the button is clicked. It can be seen I did use doctype in my code so it should have been a problem to get the UI with old versions of IE, but that is not so in my case. Screenshots are given below:
I am a noob in web developing, and I cant figure out what is wrong here.
Hope everything is explained in detail this time.
Actually the problem was my company has policy to render intranet sites in compatibility view in IE which was causing troubles here. I used edge meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
which is forcing my site to load in default standard mode in IE and fixed my issue.
Hope it would help noob people like me in the dark
I encountered a very strange behaviour in my ionic/cordova app on the windows phone 8.1 platform, where i implemented an instant messenger. I teared my whole application down to a simple cordova (starter) application to eliminate potential side effects with other app related code like other css classes for example. But the issue still remains...
The issue
My app contains an html input element at the bottom of the page, where the user can enter a text for text-messaging. Whenever this input gets focused, the keyboard (inputpane) appears. But after the first focussing (by clicking the 2nd++ time), the input shifts up too far or gets pushed away by the keyboard. These are the screen captures:
Everything is fine on first focus:
Hiding the Keyboard by pressing "back button" and refocussing the input leads into that:
It seems like the whole application gets pushed away by the keyboard out of the screen, since the header bar disappers as well. After tapping on the screen, the view renders correctly (Picture 1), but the usability remains still like a mess. I only figured out, that the space below the input element belongs to the <body> of the DOM.
What i did so far
I started with creating a plain cordova app to narrow down all potential side effects and error sources (Source code on my Github). This was my procedure:
Created a new cordova application with cordova 5.1.1
cordova platform add wp8 & cordova build wp8
Opened the wp8 project file with Visual Studio 2013 and upgraded to a windows phone silverlight 8.1 application (see picture below), because this is a requirement by our app
And started to copy the essential html/css/js code to reproduce the issue in the plain application with:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Hello World</title>
</head>
<body>
<div class="bottom">
<input type="search" placeholder="Search">
</div>
</body>
</html>
CSS
.bottom {
position : absolute;
right : 0;
left : 0;
bottom : 0;
}
input {
background-color: pink;
width: 100%;
}
Result
First of all, I thought the problem disappeared. But after some trying I encountered the same behaviour again. It happens quite rarely but still (only once in ~30 times). For me this was the evidence, that for example ionic is not responsible for this issue (see picture below):
It already took days and hours to investigate this behaviour and to try all potential solutions i have found in the world wide web until today. These are for example:
Altering the CordovaView Margin in the MainPage.xaml
Resizing the app natively on keyboard events
Adding event listener to my javascript code
Additionally i installed WEINRE to debug my web related code on the windows phone 8.1 device (Nokia Lumia 930) with minor success. The same issue also appears in a simulator. I can only image, that upgrading to a silverlight 8.1 app is the essential breaking changer.
Have you tried using this $ionicConfigProvider.scrolling.jsScrolling(false) ? In order to enable the native scrolling.
I have the exact same issue.
.config(function($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(false);
// Or for only a single platform, use
// if( ionic.Platform.isAndroid() ) {
// $ionicConfigProvider.scrolling.jsScrolling(false);
// }
}
Here's the case. I've got simple html page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
</head>
<body>
<script type="text/javascript">
alert(screen.width);
</script>
</body>
</html>
Code is in file sample.html
When file is opened under Firefox v41.0 it shows only JS popup with value 1366 (that's my screen width).
When I put this file into running Tomcat 7.0.61 working directory and try to access it using address for eg. localhost:8080/appCtx/sample.html, the JS prompt have value 1252. A little bit too small.
The same page opened under Chrome or even IE8 gives proper value.
I've tried using
window.innerWidth
document.body.parentNode.width
$(window).width()
All with the same result.
I've tried using onLoad or setTimeout(2 sec) - same result.
I've even put this file into working dir under JBoss 6.4 (project i'm workign on in my job) - same result.
All plugins in FF are disabled.
So my question is: why JS in FF can't calculate proper window width and height when page is served by application server (servlet container)?
You've probably zoomed in that page and Firefox remembered it. Press Ctrl+0 to reset zoom level (or use the menu) and try again.
I am developing an iOS/Android app by using HTML5, JS and CSS3 in a WebView. iOS devices and phones with Android 2.x work without any problems. But tablets equipped with Android 3.x or 4.x do not load the webpage.
Basically I am building a webpage like this
<html lang="en" style="-webkit-text-size-adjust:none; display:block;">
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="content-script-type" content="text/javascript">
<title>Project Name</title>
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
<script type="text/javascript" src="File4.js"></script>
...
<body style="margin: 0px; width: 100%; height: 100%; overflow:hidden">
</body>
</html>
(in total, 25 javascript file includes)
I have overwritten WebViewClient::onPageStarted, WebViewClient::onReceivedError, WebViewClient::onPageFinished. WebViewClient::onPageStarted gets called and the LOG shows the javascripts being loaded. But WebViewClient::onPageFinished never gets called and the webpage does not build. The window "load" callback does not happen and therefore none of the js files get executed.
So, I put an alert popup into my window "load" function and removed one file after the other to see if this helps. And indeed this helped. When I only include 4-6 files the window "load" function gets called. But this is also somehow random and does not depend on which files I remove. LOG does not show any error either. Everything seems to be fine
Is there any limit in number of include files introduced in Android 3.x and later? Android 2.x works without any problem. Also Chrome and Safari on my desktop PC display the site without any errors.
Any ideas?
I am not sure of the limit, but I would suggest using google closure compiler on your js files to get around this issue.
First of all my site does not use Drupal.So any alternatives for a popup video player funcionality would be appreciated.
I want to show a popup you tube video player in my web page.I downloaded lighbox from the
following link: http://ftp.drupal.org/files/projects/lightbox2-6.x-1.11.zip
I extracted the zip file into my sites root
I added the following lines in my page header:
<link type="text/css" rel="stylesheet" media="all" href="/lightbox2/css/lightbox.css?1" />
<script type="text/javascript" src="/lightbox2/js/auto_image_handling.js?1"></script>
<script type="text/javascript" src="/lightbox2/js/lightbox_video.js?1"></script>
<script type="text/javascript" src="/lightbox2/js/lightbox.js?1"></script>
and the following in the body:
<a href="http://www.youtube.com/watch?v=0gBtF_awV2o" rel=lightvideo[width:500px;height:400px;]>
<img src="sample" alt="Live TV">
</a>
But the video opens up in a new tab and not as a popup.Where am i going wrong?I cant find tutorials for this anywhere, although i have this kind of code in many other pages with popup videos.
Edit: Used shadowbox. Opens up youtube page instead of popup!
Edit: Problem solved! Got Shadowbox to work. It's brilliant and easy. The commercial licence costs $20 though.
You probably are either not calling jQuery or lighbox correctly.
Make sure the have the two src correct.
I'm not sure I understood your question but you cant display video with lightbox, it says so in the FAQ and it recommends thickbox.
You could also use something videolighbox or any out there.
Good luck!
I would download Lightbox 2 from here and see if it works any better.
The reason it doesn't work is because the lightbox.js file included in the Drupal module is a modified version that uses the Drupal.settings variable, which if you don't use Drupal, is undefined.
Lightbox2 video does work in drupal.
You have to enable video support in the lightbox2 settings
The url: yourdrupal.com/admin/config/user-interface/lightbox2
The flv player should be empty if you don't have one.