I have following html page:
<html>
<head>
<script type="text/javascript">
var myDiv = null;
window.onload = function() {
myDiv = document.getElementById("myDiv");
};
function buttonClick() {
myDiv.style.width = "200px";
myDiv.style.height = "100px";
}
</script>
</head>
<body>
<div id="myDiv" style="left:10px; top:10px; width:1000px; height:250px; overflow:auto;">
<iframe scrolling="no" id="myIframe" style="width:100%;height:100%" src="a.svg"></iframe>
</div>
<input type="button" id="button1" onclick="buttonClick()" value="resize div"/>
</body>
</html>
and a SVG "a.svg" that is the content of the iframe above:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
<circle cx="500" cy="250" r="240"/>
<script type="text/ecmascript"><![CDATA[
window.onresize = function() {
console.log("resize");
};
]]></script>
</svg>
When i now open the html page on iOS Safari and i click the button to resize the iframe to 200x100 pixels, i do not get the resize event.
But if I do the same on a PC browser like Firefox, I get the resize event.
I know that iframes are handled differently in iOS Safari, but how can I make this working ?
Related
I would like to be able to set the video ID to be played from user input via an <input type="text"> field.
My naive attempt looks like so
<!DOCTYPE html>
<html>
<body>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
<script>
function loadVideo() {
var ytplayer = document.getElementByID("ytplayer");
var videoid = document.getElementByID("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
</body>
</html>
but the player widget remains blank after entering an ID and clicking "Load".
What is wrong?
Define a function before using it. Simply move the <script> above the <button>
You have a typo twice getElementById has a lower case "d".
In the end it will look like this:
<!DOCTYPE html>
<html>
<body>
<script>
function loadVideo() {
var ytplayer = document.getElementById("ytplayer");
var videoid = document.getElementById("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
</body>
</html>
I can't help you any further than that however, because your example doesn't work after these two things are fixed, as it doesn't contain all the code needed to make it work.
I have a page called index.html, when I click the link in index html it will navigate to the another page which has Listview populated with data taken from Server. This Works without any error.
However, when I click the back button of current page, I will be directed to the previous page.
My question is, it refreshes current page and then go back to the previous page.
I need to prevent this.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$(document).on("mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: true, changeHash: true
});
});
});
$(document).on("pagehide", "div[data-role=page]", function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" id="reviewsPage">
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" data-ajax="false" >TWEET</a>
</div>
</div>
</body>
</html>
tweet.html
<div data-role="page" id="twitterPage" >
<script type="text/javascript">
$(document).on("pagehide", "div[data-role=page]", function(event) {
$(event.target).remove();
});
$(document).bind('pagebeforeshow', '#twitterPage', function(){
});
</script>
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
Back
</div>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweets
</p>
</li>
</ul>
</div>
</div>
unbind all events
` $("#mybtn").unbind();`
I'm currently building a mobile site for iPad using jquery mobile and ASP.NET MVC 4. I have a dynamically created listview that is displaying search results. I want the user to be able to click on an item in the listview and have the text from that particular list item appear in a textbox that is also in the view.
I can get this to work in Safari on my desktop machine, but it will not work on an iPad.
For the sake of simplicity and to attempt to narrow down the problem, I hard-coded a simple little listview in my View. The results were the same. Works on desktop in Safari, but not on iPad.
Here is the very simplified VIEW code that works in Safari on desktop (Please note that _Header is a separate, partial View):
#section Header
{
<script type="text/javascript">
$('#testJs li').on('click', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
#{ Html.RenderPartial("_Header"); }
}
#section Content
{
<input type="text" id="testText">
<ul id="testJs" data-role="listview" data-inset="true" data-theme="c">
<li id="task400" class="tasks">Test task 400</li>
<li id="task295" class="tasks">Test task 295</li>
</ul>
}
Please note that I have tried changing 'click' to 'tap' (see below) with no success. It still doesn't work on iPad.
<script type="text/javascript">
$('#testJs li').on('tap', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
I've also tried using the following with the same results. Still doesn't work on the iPad.
<script type="text/javascript">
$('#testJs').delegate('li', 'tap', function () {
var results = $.trim($(this).text());
$('#testText').val(results);
});
</script>
I do wonder if this has something to do with our use of layout pages. We have slightly different layout pages, depending on if the site is being rendered on a mobile device or not.
Mobile Layout View:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobileCss", "~/Content/css")
<script type="text/javascript">
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header", false) }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
Desktop Layout View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobilecss", "~/Content/css")
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header") }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
I've been stuck on this for a few days, so any help would be appreciated. Everything I try works on my desktop, but not on an iPad - which is where I actually need it to function.
Thanks!
Did you try using bind on your testJs li? I'd bind a tapHandler like below:
<script>
$(function(){
$( "#testJs li" ).bind( "tap", tHandler );
function tHandler( event ){
var results = $.trim($(this).text());
$("#testText").val(results);
}
});
</script>
or with on like this should work:
$('#testJs').on('tap', 'li', function (event) {
var results = $.trim($(this).text());
$("#testText").val(results);
console.log('this should work')
}
Also used double quotes on top example but that shouldn't make a difference I don't think. If it doesn't then make sure you .js references are correct, and use firebug in firefox to debug for any straggling errors.
I'm just starting out in jQM development and have hit a bit of a brick wall.
In short, I have a javascript file and two pages. In the main page (index.html) I'm populating a listview dynamically, and registering the tap event for each and every item for this listview. The on tap event, in return, calls the changepage method to an external page (details.html). This works fine 100% of the time.
In the javascript file, I'm registering for events on pagebeforeshow for the details.html page. This works okay first time out, but any subsequent calls are not triggering the pagebeforeshow event at all. Having had a closer look i can see that the pagechange is being called, pagebeforechange event is being fired okay, but the pagebeforeshow is only fired for that particular item only (untill a complete refresh).
I have set up a sample for you to be able to look at. I would seriously appreciate any feedback given. For all I know - I may be using the wrong events!?
The closest post I could find on SO was Pagebeforeshow not fired on second time change Page event however it doesn't particularly deal with listviews so I'm not sure if it's related or not.
Thanks,
Matt
Index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="idxPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<ul id="ListItems" data-role="listview" data-inset="true" data-filter="true">
</ul>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
details.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="detailsPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<b>Page placeholder</b>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
jquery.custom.js (JS Library)
$(document).on("pagebeforechange", function (event, data) {
alert('changing page...');
});
$(document).on('pageinit', function () {
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
$("#ListItems").off();
$("#ListItems").on("listviewbeforefilter", function (e, data) {
var $ul = $(this),
$input = $(data.input),
value = $input.val(),
html = "";
$ul.html("");
if (value && value.length > 2) {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
$ul.listview("refresh");
var max = 200;
var limit = 0;
var itemslist = [
{"id":1, "desc":"item1"},
{"id":2, "desc":"item2"},
{"id":3, "desc":"testitm1"},
{"id":4, "desc":"testitm2"}
];
$.each(itemslist, function (i, val) {
if (limit < max) {
if (val.desc.toString().toLowerCase().indexOf(value.toLowerCase()) != -1) {
$ul.append('<li id="' + val.id + '" ><a style="text-align:left" data-icon="arrow-r" data-iconpos="right" >' + val.desc + '</a></li>');
$('#' + val.id).off();
$('#' + val.id).on('tap', function (event) {
var elementId = $(this).attr('id');
$.mobile.changePage("details.html?Id="+elementId, { data: { "Id": elementId} });
});
limit++;
}
}
});
$ul.listview("refresh");
$ul.trigger("updatelayout");
}
});
});
You are incorrectly binding page event.
Instead of this:
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
Use this:
$(document).on("pagebeforeshow", "#detailsPage",function(event){
alert('about to show page...');
});
Remember, jQuery Mobile page events must always be added with event delegation.
Also your don't need to use off() with page events, they do not suffer from multiple event binding problem. If you have more question feel free to ask in comments.
When run, if I click the link at the bottom of the index page to get to the map page, I see the map briefly, filling a quarter of the screen, before it vanishes. What am I doing wrong?
Here is the code for the index page, which creates the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
function initialize(){
if(!window.navigator.onLine){
alert("An internet connection is required to use the MetPetDB App. Please find a connection and reopen the app.");
var element = document.getElementById("mainPage");
element.parentNode.removeChild(element);
document.getElementById("mainBody").innerHTML = "<p>An internet connection is required to use this app.</p>";
}
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
initializeMap(42,-73);
});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</head>
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the following search methods.</p>
</div>
<div data-role="content" style="height: 100%;">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
Testing
</div>
</div>
</body>
</html>
And here is the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<body>
<div data-role="page" data-theme="e" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
</body>
</html>
The following code works: jsfiddle
I took your code, simplified it (using a single page template instead of the multi page one, but just to make it easier for jsfiddle) and moved all scripts inside the head.
Also be careful with phonegap, you should handle the onDeviceReady event, and not the body onload event. Even then there's a different method there to check if you're online.