I am working on a cross platform mobile application using phonegap (html,javascript) problem is selected item related image not display in iframe and this image display another page please see below code
<html>
<head>
<script>
function onchangeevent(mySelect)
{
PageIndex2=mySelect.selectedIndex;
{
if
(
mySelect.options[PageIndex2].value != "none"
)
{
frames['iframe2'].location.href = mySelect.options[PageIndex2].value;
}
}
}
</script>
</head>
<body>
<form name="form">
<p><select NAME="selectimage" SIZE="1" onChange="onchangeevent(this.form.selectimage)">
<option VALUE="none" SELECTED>Select a page and go</option>
<option VALUE="ic_launcher.png">one</option>
<option VALUE="icon.png">two</option>
</select> </p>
<p>
<iframe src="" name="iframe2" height="100%" width="100%">You need a Frames Capable browser to view this content.</iframe>
</p>
</form>
</body>
</html>
iframe tag not working android inbuild browser how can resolve the issue ? please tell any alternative tags supported all browsers.
Android browser supports iframe. I suspect it's one of the other attributes that may be causing an issue. I know scroll attribute can cause the iframe to not appear. Try a simpler version of the iframe with just the href and a width and height and see if it appears.
From the looks of it, the i-frame is working, it's most likely the select script, try using radio buttons see if that works.
For some reason several types of browsers are picky with the select form.
Related
Scenario:
I'm using Android Robotium Solo (v5.6.3) to automate web page interactions within my app. I need to automate data entry into INPUT fields that are contained within an IFRAME but I do not have much luck!
The Problem:
When I attempt to use, for example, solo.waitForWebElement(By.id("room-number", 5000, true) and solo.typeTextInWebElement(By.id("room-number", "101"), solo is unable to locate the element.
The discussion on this related issue "Accessing an iFrame inside a WebView #794" (https://github.com/RobotiumTech/robotium/issues/794), suggests that it's possible to use "solo.getConfig().webFrame = XXX" to focus solo on the content of a specific IFRAME and then access the WebElements. Unfortunately, I've not been able to get it to work and haven't been able to find any full examples. I assume XXX might need to be the "id" of the IFRAME but in my scenario (where I don't have control of the source code for the web pages being automated) the IFRAME tag has no id assigned.
I've created a simple example test scenario:
index.html - the main page that hosts the IFRAME
<html>
<body bgcolor="#AA3333">
<div id="wrapper">
<iframe src="embed.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
embed.html - the source for the IFRAME that contains the INPUT element.
<html>
<body bgcolor="#3333AA">
<div id="page-container" style="height:100vh; width:100%;">
<label>Room Number</label>
<input type="text" name="ROOM_NUMBER" id="room-number">
</div>
</body>
</html>
After reviewing the source code for Robotium in more detail I confirmed that using
solo.getConfig().webFrame = ['id' of IFRAME as a String]
allows subsequent calls to solo.typeTextInWebElement etc. to work OK as expected.
The trick in my scenario is that the parent page assigned no id to the IFRAME so I programatically assign one at runtime using the following javascript
document.getElementsByTagName("iframe")[0].id = "test";
and then use
solo.getConfig().webFrame = "test"
I'm just making a site for study proposes...
When I'm on desktop, the input type="date" shows up a default value with the letters dd/mm/aaaa...
on desktop
But when I'm on my mobile (Android), the input type="date" shows an empty field...
on mobile Android
The code is (I'm using Bootstrap 3):
...
<div>
<input type="date" class="form-control" id="data" name="data" style="width:65%;" required>
</div>
...
I tried placeholder="dd/mm/aaaa" too... But without success...
Why is this happening?
Could someone help me please?
Thanks in advance!
Android WebKit 4 is such a mess that it needs its own, private compatibility table for some types.
Although the implementations of <input type="date" > are different across the various mobile OS platforms, support is quite widespread, with the exception of the stock Android browser.
For this browser and for low-end devices a simple text field will be displayed. This is not very user-friendly for date input.
As you are using bootstrap I reccomend going through : this
EDIT :
I found an interesting way of solving this issue :
A tool called Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer. Using that you can try the following which shows how you can use the native datepicker when available, and fallback to jQuery UI’s picker in unsupported browsers(in this case : Chrome -> Android Webkit).
if (!Modernizr.inputtypes.date) {
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat: 'yy-mm-dd'
});
}
Your complete code will look like this :
HTML:
<input type="date">
<br><br>
<input type="text" id="myDate" />
JAVASCRIPT:
$(function() {
if (!Modernizr.inputtypes['date']) {
$('input[type=date]').datepicker();
}
});
I'm using cordova-plugin-wallpaper which works fine if i hardcode image like this.
window.plugins.wallpaper.setImage("images/1462204239933.jpg");
but if i try to get image link with jquery from active slide, it won't set wallpaper with android app. This is what i tried.
var picture = $$(".swiper-slide-active").find(".pic").attr('src');
window.plugins.wallpaper.setImage('"'+picture+'"');
I checked console.log and it's getting image src fine for each slide. Any suggestion how to work around this? Thanks
There was strings around variable ('"'+picture+'"') which were causing the issue. Removing that fixed the issue. Thanks to "flyingP0tat0" for pointing this on github issue.
Here is the full code if anyone need.
HTML
<div class="page-content">
<button class="setwp floating-button"><i class="icon icon-plus"></i></button>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/001.jpg" rel="1"></div>
<div class="swiper-slide"><img src="images/002.jpg" rel="2"></div>
<div class="swiper-slide"><img src="images/003.jpg" rel="3"></div>
</div>
</div>
</div>
JS
function wp() {
var wppic = $$(".swiper-slide-active").find("img").attr('src');
window.plugins.wallpaper.setImage(wppic);
}
function wpalert() {
alert('Wallpaper is set');
}
$$('.setwp').on('click', function (e) {
wp(); wpalert();
});
My problem appears on the internal Android browser in combination with JQuery Mobile. When I reload the current page the content shrinks to fit text into the listview.
More in Detail:
The code works fine on IPhone, mobile Desktop Tools and Androids Firefox. However on the internal Android browser I have this weird issue with the code beneath. See my Edit below.
What I've tried so far:
I've played a lot with the viewport meta tag. Anyhow, I don't think that's the problem, because the content gets displayed correct on every other site in my app.
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
like these posts suggest:
JQuery Mobile Device Scaling
Full webpage and disabled zoom viewport meta tag for all mobile browsers
My Code:
<html>
<head>
<meta name="viewport" content="width=650">
<!-- CSS and Scripts-->
</head>
<body>
<!-- Page Wrapper -->
<div data-role="page">
<section data-role="content">
<h2>
Code Sample
</h2>
<div class="ui-grid-solo">
<p style="margin-bottom: 38px;">
A
B
C
</p>
</div>
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
</section>
</div>
</body>
</html>
Has anyone an idea, or did fight with a similar problem?
Edit:
I'm on to something, the problem appears to happen in this peace of code:
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
Normally the listView replaces to big text items with "dot dot dot" at the end so that they fit on the screen. In my case it still does that, but the text has way to many characters, before the shortening is happening. The result is, that everything scales down. How should I solve this?
Since I got no answers on this one, I post my fix:
Only on mobile safari browsers listView items don't seem to get shortened. Now I'm calling a function which does that manually on pageinit:
fixListView: function () {
var brokenAgent = "Safari";
var currentUserAgent = navigator.userAgent;
if (currentUserAgent.indexOf(brokenAgent) != -1) {
var listItemList = $('.long-text');
for (var i = 0; i < listItemList.length; i++) {
var text = listItemList[i].innerText;
if (text.length > 40) {
var newText = text.substr(0, 40);
listItemList[i].innerText = newText + "...";
}
}
}
}
Still not that happy with my fix, any ideas for improvement are welcomed!
I am using the following code in my Webview along with Jquery Mobile, This works fine in the emulator (2.2 ) and on my Nexus one but some users are complaining that when they click on a link they get an error message "Problem with File: Requested file not found". One user reported that she was using Samsung Fascinate with "2.2.1" . This seems to have started when I upgraded jquery mobile 1.0b2 , I have tried the latest 1.0rc but still have the same issue
Any Insights on what might be happening ?
In my Activity
engine.loadUrl("file:///android_asset/book2/www/newindex.html");
In the html ( I have also tried data-ajax="false" )
<link rel="stylesheet" href="jquery/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="jquery/jquery.mobile-1.0rc1.min.js"></script>
<div data-role="page" id="jqm-home">
<div data-role="content" data-theme="e">
<div class="content-primary">
<nav>
<ul data-role="listview" data-inset="true" data-theme="e" data-dividertheme="d" >
<li data-role="list-divider">Cognitive</li>
<li><a rel="external" href="./cogn/simon2.html">
<img src="cogn/simon.jpg" />
<h3>Simon says</h3>
<p>Memory</p>
</a></li>
From what I know about URL loading, if you are loading a local file, which is what it looks like here, that file needs to be in the same directory as the file its linking from. Because the file is local on your computer, your device and emulator should work fine. for someone else who downloads the app and tries to use the Webview functionality, that source file would need to be stored in their phone and in the appropriate directory...hope that helps.