I have Tried 2,3 solution but none worked for me ...
I have 3 Maps which I want to show in Tabs .Only 1st one appears .On Tab Change I Tried call the jQuery function first ..But the function is not even firing .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps API v3 : KML Layer</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
$(document).ready(function () {
//activaTab('overview'); --1.this is not working
});
//2.this is not working
//$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// alert('not ok');
//});
//3.not working
//$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// alert(target);
//var target = $(e.target).attr("href") // activated tab
//});
4.Not working
//function activaTab(tab) {
// alert(tab);
// $('.tab-pane a[href="#' + tab + '"]').tab('show');
//};
function display_kmlmap() {
var map_options = {};
//--Nation--
var mapNation = new google.maps.Map(document.getElementById("map_nation"), map_options);
var kmlUrlNation = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm0.kmz';
var kmlOptionsNation = { map: mapNation };
kmlLayerNation = new google.maps.KmlLayer(kmlUrlNation, kmlOptionsNation);
$("#map_nation").css("width", 400).css("height", 400);
//--District--
var mapDistrict = new google.maps.Map(document.getElementById("map_department"), map_options);
var kmlUrlDistrict = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm2.kmz';
var kmlOptionsDistrict = { map: mapDistrict };
kmlLayerDistrict = new google.maps.KmlLayer(kmlUrlDistrict, kmlOptionsDistrict);
$("#map_department").css("width", 400).css("height", 400);
//--Commune--
var mapCommune = new google.maps.Map(document.getElementById("map_Commune"), map_options);
var kmlUrlCommune = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm3.kmz';
var kmlOptionsCommune = { map: mapCommune };
kmlLayerCommune = new google.maps.KmlLayer(kmlUrlCommune, kmlOptionsCommune);
$("#map_Commune").css("width", 400).css("height", 400);
}
</script>
</head>
<body onload="display_kmlmap()">
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="active">Nation View
</li>
<li>Department View
</li>
<li>Commune View
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div id='map_nation'></div>
</div>
<div class="tab-pane" id="photos">
<div id='map_department'>
</div>
</div>
<div class="tab-pane" id="Commune">
<div id='map_Commune'>
</div>
</div>
</div>
</div>
<div id="map_canvas" style="width: 500px; height: 400px; float: left">
</div>
</body>
</html>
i tried 3 solution , I mentioned in Code .. but none of them are working ...i am not getting any clue
What Am I missing ??
Related
This is driving me nuts. I have put the html and javaScript code below. Whenever I refresh my page I get Uncaught TypeError: screen.addEventListener is not a function. I insert any other variable or ID for screen and it works fine.
HTML Code
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link rel="stylesheet" href="css/reset/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="calculator">
<div id="screen">
</div>
<div id="layout">
<ul id="first-row" class="btn-row">
<li><button>C</button></li>
<li><button>=</button></li>
</ul>
<ul id="sec-row" class="btn-row">
<li><button>7</button></li>
<li><button>8</button></li>
<li><button>9</button></li>
<li><button>+</button></li>
</ul>
<ul id="third-row" class="btn-row">
<li><button>4</button></li>
<li><button>5</button></li>
<li><button>6</button></li>
<li><button>-</button></li>
</ul>
<ul id="fourth-row" class="btn-row">
<li><button>1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>
<li><button>*</button></li>
</ul>
<ul id="fifth-row" class="btn-row">
<li><button>0</button></li>
<li><button>/</button></li>
</ul>
</div>
</div>
<script src="js/app.js">
</script>
</body>
</html>
JavaScript Code
var screen = document.getElementById('screen');
var btn = document.getElementsByTagName('button');
var clear = btn[0];
var equals = btn[1];
var seven = btn[2];
clear.addEventListener('click', here);
screen.addEventListener('click', function(){
alert('wth');
});
You have a naming issue. It is clashing with the window.screen object
console.log(window.screen);
MDN window.screen
Rename the variable to something else and it works fine.
var screenX = document.getElementById("screen");
screenX.addEventListener("click", function() { alert("x"); });
<div id="screen">Click</div>
or take it out of global scope
(function () {
var screen = document.getElementById("screen");
screen.addEventListener("click", function() { alert("x"); });
}());
<div id="screen">Click</div>
I try to make a (hybrid)webapp with Phonegap(3.7.0) and AngularJS that uses geolocation. My problem is that geolocation works in a browser, but not when I build the project in Phonegap and try to run it on a mobile device. When I remove the AngularJS controller in my Javascript the geolocator works like a charm on mobile devices. I tried to bootstrap AngularJS manually (for the DOM loading order), but that did not worked for me. Also the config file is correct at least I think.
Can anyone help me on this or giving me clues?
Thanks in advance
HTML
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale = 1.0">
<!-- Phonegap Javascript -->
<script src="js/cordova/cordova.js" type="text/javascript"></script>
<!-- AngularJS Javascript -->
<script src="js/angular/angular.js" type="text/javascript"></script>
<script src="js/angular/angular-route.js" type="text/javascript"></script>
<!-- Foundation for apps Javascript -->
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="content-container" ng-app="mamyloeApp">
<div ng-controller="UitjesDichtbijController" class="list-view-uitje">
<ul ng-repeat="uitjes in uitjes.uitjes" class="list-item-uitje">
<li><a href='#'>
<div class="list-item-uitje-left">
<div class='uitje_list_image'>
<img src="../library/photos/{{uitjes.list_image}}" alt='image'>
</div>
</div>
<div class="list-item-uitje-right">
<div class="naam-uitje">{{uitjes.overview}}</div>
<div class="uitje-info">
<div class="plaats-uitje">{{uitjes.city}}({{uitjes.distance | number:1}}km)</div>
<div class="categorie-uitje">{{uitjes.category}}</div>
</div>
<div class="naam-local">{{uitjes.firstname}}</div>
</div>
</a></li>
</ul>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<!-- Controller scripts -->
<script src="js/load_list.js" type="text/javascript"></script>
</body>
Geolocator/AngularJS
var latitude = 0;
var longitude = 0;
var geo_initiate = false;
var App = angular.module('mamyloeApp', []);
App.controller('UitjesDichtbijController', function ($scope, $http) {
function geolocation()
{
var options = {enableHighAccuracy: true, timeout: 20000, maximumAge: 18000000};
watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
function onSuccess(position)
{
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log("GPS is ready");
console.log(latitude);
console.log(longitude);
$http.get("http://../Mamyloe_app/api/uitjes/" + latitude + "&" + longitude + "")
.success(function (response) {
$scope.uitjes = response;
console.log(response);
});
geo_initiate = true;
if(geo_initiate === true){
document.getElementById("content-container").style.visibility = "visible";
}
}
function onError(error)
{
if (error.code = 1)
{
alert("Enable your GPS!");
}
console.log("GPS is NOT ready");
}
}
$(document).ready(function () {
geolocation();
});
});
Problem is solved, the access origin was the problem(access origin="*") in the config file and some capitals in the map structure, phonegap doesn't like that.
I have a Navigation App and I want to cause the second page which is going to be loaded to the default.html to execute a function in ready section.
I have written in the home.js the following code:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var articlesList;
articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("DNZ", publicMembers);
},
RSSFeedHandler: function getRssFeed() {
WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
article.link = items[n].querySelector("link").textContent;
article.description = items[n].querySelector("description").textContent;
article.pubDate = items[n].querySelector("pubDate").textContent;
articlesList.push(article);
}
});
}
});
})();
But this causes a problem when running it to the debugger; and the it stops.
My home.html page contains the following tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<div id="main">
<div id="DNZItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
<div class="listItemTemplate" style="width: 173px; height: 100px;">
<div class="listItemTitle" data-win-bind="innerText: title" style="width: 173px; height: 100px;"></div>
<div class="listItemImage" data-win-bind="innerText: pubDate" style="width: 173px; height: 100px;"></div>
<!--<div class="listItemTitle" data-win-bind="innerText: link">
</div>-->
</div>
</div>
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Καλως ήρθατε!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<section id="content">
<div id="articlelist" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: DNZ.ItemList.dataSource, itemTemplate: DNZItemTemplate }"></div>
</section>
</section>
</div>
</div>
</body>
</html>
and I think the problem is when I try to put the item to the list view! Do you have any ideas for the way I have to write it to run the getRSSFeed function when the home.html is being loaded?
In order for the articlesList to be visible in the RSSFeedHndler method you need to make it a property of the page object as follows:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
articlesList:null,
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
// var articlesList;
this.articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("DNZ", publicMembers);
},
RSSFeedHandler: function getRssFeed() {
var _this=this;
WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
article.link = items[n].querySelector("link").textContent;
article.description = items[n].querySelector("description").textContent;
article.pubDate = items[n].querySelector("pubDate").textContent;
_this.articlesList.push(article);
}
});
}
});
})();
My onclick event is firing even without a click. I'm not sure why? Below is my code. The home panel should load first and when the user clicks the aboutButton they should be taken to the about panel.
JS Bin: http://jsbin.com/alebox/1/edit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function myOnloadFunc() {
var homePanel = document.getElementById("homePanel");
var aboutPanel = document.getElementById("aboutPanel");
var settingsPanel = document.getElementById("settingsPanel");
var gamePanel = document.getElementById("gamePanel");
var resultsPanel = document.getElementById("resultsPanel");
// All panels in app
var panels = [homePanel, aboutPanel, settingsPanel, gamePanel, resultsPanel];
// Show selected panel and hide all other panels
function showPanel(panel) {
for (var i = 0; i < panels.length; i++) {
if (panels[i] === panel) {
// Show panel
// this referred to global object, i.e. window
panels[i].style.display = "block";
} else {
// Hide
panels[i].style.display = "none";
}
}
}
showPanel(homePanel);
// CODE THAT IS GIVING ME A PROBLEM /////////////////////////
var aboutButton = document.getElementById("aboutButton");
aboutButton.onclick = showPanel(aboutPanel);
// CODE THAT IS GIVING ME A PROBLEM /////////////////////////
}
window.onload = myOnloadFunc;
</script>
</head>
<body>
<!-- homePanel -->
<div class="panel" id="homePanel">
<div align="center">
<p><strong>Web App</strong></p>
<p><a id="playButton">Play</a> <a id="aboutButton">About</a></p>
</div>
</div>
<!-- aboutPanel -->
<div class="panel" id="aboutPanel">
About panel
</div>
<!-- settingsPanel -->
<div class="panel" id="settingsPanel">
Settings panel
</div>
<!-- gamePanel -->
<div class="panel" id="gamePanel">
Game panel
</div>
<!-- resultsPanel -->
<div class="panel" id="resultsPanel">
Results panel
</div>
</body>
</html>
It's firing because you're calling it right away!
So you want:
aboutButton.onclick = function(){showPanel(aboutPanel);};
To attach a function to the event only the reference to the function should be given. You're actually calling the function when using ().
The code to bind the event should be:
aboutButton.onclick = showPanel;
I am developing an iPhone application using PhoneGap and jQueryMobile, in my application I have two html pages, first is index.html page and second is mapView.html, now, my problem is when I open mapView.html from index.html using
function loadMap() {
$.mobile.changePage( "mapView.html", { transition: "pop"} );
}
map is not loading. If I open mapView.html on any browser it works perfectly, even if I load mapView.html directly by changing
self.viewController.startPage = #"mapView.html";
in appDelegate class map loads on screen. Do anyone have any idea why map is not loading when I open it from another .html page?My PhoneGap version is 2.0.0
Thanks.
EDIT 1:mapView.html code
<!DOCTYPE HTML>
<html>
<head>
<title>Map Location</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var demoCenter = new google.maps.LatLng(41,-87);
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function addMarkers()
{
// perform your AJAX here. In this example the markers are loaded through the cityList array
$.ajax({
type:'post',
url:'test.html',
data:'',
success:function(data)
{
// imagine that the data in this list
// will be retrieved from the AJAX response
// i used the cityList array just for testing
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(cityList[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
});
}
$(document).ready(function()
{
addMarkers();
});
</script>
</head>
<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header" data-theme="b">
<h1>Map Location</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
The $.mobile.changePage uses the jQuery Mobile AJAX functionality. jQuery Mobile loads only the code which is inside the first data-role="page" element in the DOM.
As stated in the jQuery Mobile docs , in jQuery Mobile, AJAX is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler $(document).ready() only executes for the first page.
Below you can find a working example which includes two pages, the navigation is performed through Ajax and the map is loaded inside the second page:
Also note that you can perform a transition using rel="external" or data-ajax="false". The usage of these attributes will cause a full page refresh without animated transition.
Working Example:
Instructions:
Create a folder
Create a file with name maps.js inside the folder
Create a file with name map-intro.html inside the folder
Create a file with name map.html inside the folder
Fill each one of the created files with the corresponding code which can be found below
Add the below code inside the maps.js:
function initialize() {
var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
},
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$( document ).on( 'pageshow', '#map-page',function(event){
initialize();
});
$( document ).on( 'click', '#map-anchor', function(event){
event.preventDefault();
$.mobile.changePage( "map.html", { transition: "flip" } );
});
Add the below code inside the map-intro.html:
<!doctype html>
<html lang="en">
<head>
<title>Map Intro Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script src="./maps.js"></script>
</head>
<body>
<div id="map-intro-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">Map Example</a></h1>
</div>
<div data-role="content">
<ul data-role="listview" id="my-list">
<li>Go to Map</li>
</ul>
</div>
</div>
</body>
</html>
Add the below code inside the map.html:
<!DOCTYPE html>
<html>
<head>
<title>jQuery mobile with Google maps geo directions example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- /page -->
<div data-role="page" id="map-page">
<!-- /header -->
<div data-role="header">
<h1>Map</h1>
<a data-rel="back">Back</a>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:300px;"></div>
</div>
</div>
</body>
</html>
I hope this helps.