Unfortunately, I am not sure to understand anything to java, jquery and all this kind of thing. Nevertheless, I am trying to get some inspiration on forums in order to make a personal website that contains a vertical navbar and a div container in which external html pages will be loaded. Each html file uses an html5 applet called JSmol, which plots 3D molecules that can be manipulated interactively. The main page looks like this:
<!DOCTYPE html>
<html>
<head>
<title> 3D Chemistry </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="lnk", when one of them is clicked, get its "href" value
// load the content from that URL and check the "status" of the request
// place the response or an error message into the tag with id="content"
$('a.lnk').click(function() {
var url = $(this).attr('href');
$('#content').load(url, function(response, status, xhr) {
// check the status, if "success", place the response into #content
// else, if "error", define an error message and insert it into #content
// else, display an Alert with the status
if(status=='success') {
$('#content').html(response);
}
else if(status=='error') {
var ermsg = '<i>There was an error: '+ xhr.status+ ' '+ xhr.statusText+ '</i>';
$('#content').html(ermsg);
}
else { alert(status); }
});
return false;
})
});
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div id="header"> <a id="UPS-link" href="http://www.univ-tlse3.fr/" title="Paul Sabatier University - Toulouse III">
<img src="Chem3D-IMAGES/UT3_PRES_logoQ.png" alt="Paul Sabatier University" id="logoUPS" width=300px />
</a>
</div>
<div id="vmenu">
<ul>
<li>Home</li>
<li>3D Molecules
<ul>
<li>Mol1</li>
<li>Mol2</li>
</ul>
</li>
<li>Symmetry
<ul>
<li>Symmetry Elements
<ul>
<li>C<sub>2</sub>H<sub>6</sub></li>
<li>Ru<sub>4</sub>H<sub>4</sub>(CO)<sub>12</sub></li>
</ul>
</li>
<li>Point Groups
</li>
</ul>
</li>
<li>Solids
<ul>
<li>fcc</li>
<li>hcp</li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div class="s_author" id="footer">
author: romuald.poteau_at_univ-tlse3.fr
<br/>last modification: 2013/12/16
</div>
</body>
</html>
Up to now, I have worked on the PG.html file (Point Group entry in the vertical menu), which works perfectly fine when it is loaded separately. But is not the case when it is loaded inside the main page as an external html page. The title is the only thing that appears, it seems that the jsmol application is not properly initialized. May be this is specific to the invocation of jsmol ; or is this a general issue when one wants to load hmtl files with embedded scripts ?
<!DOCTYPE html>
<html>
<head>
<title> POINT GROUPS </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta name="Format" content="text/html" />
<meta name="Language" content="en" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="./JSmol.min.js"></script>
<script type="text/javascript">
// ---------------------------------------------------------------------------------
////// every page will need one variable and one Info object for each applet object
var Info = {
width: 500,
height: 500,
color: "0xC0C0C0",
use: "HTML5",
jarPath: "java",
j2sPath: "j2s",
jarFile: "JmolApplet.jar",
isSigned: false,
addSelectionOptions: false,
serverURL: "php/jsmol.php",
readyFunction: jmol_isReady,
console: "jmol_infodiv",
disableInitialConsole: true,
debug: false,
}
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div class="s_title" id="titlePG">
Point Groups
</div>
<div class="s_normal" id="mainPG">
<table border="0">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<script type="text/javascript">
Jmol.getApplet("Jmol1", Info);
Jmol.script(Jmol1,'load Chem3D-data/nh2cl.xyz;');
Jmol.resizeApplet(Jmol1, 500);
</script>
<br>
</td>
<td>
<script>
Jmol.setButtonCss(null,"style='width:300px'")
Jmol.jmolButton(Jmol1,"load Chem3D-data/nh2cl.xyz;", "NH2Cl (Cs)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/cis-dichloroethylene.xyz;", "cis-dichloroethylene (C2v)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/trans-dichloroethylene.xyz;", "trans-dichloroethylene (C2h)");
</script>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have tried to find an answer to this question by checking previous posts, but my poor skills do not allow me to identify relevant suggestions for such issue.
Thanks for any help.
// Create a DOM object from a URL
$html = file_get_html('http://www.google.com/');
// Create a DOM object from a HTML file
$html = file_get_html('test.htm');
Related
I am kinda new to website development, so I am asking for some help on the matter. I have the following snippet of html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS Styles -->
<link rel="stylesheet" href="../assets/css/styles.css"/>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder"></div>
<!--end of Navigation bar-->
</body>
<script src="../assets/js/navigation_bar.js" type="text/javascript", locator="about"></script>
</html>
It calls the navigation_bar.js script provided here
locator = document.currentScript.getAttribute('locator');
function changeActiveElement(element_id){
console.log("Called");
nav_element = document.getElementById("navigation");
for (i = 0; i < nav_element.length; i++) {
console.log(nav_element[i].id)
if(nav_element[i].id == element_id) document.getElementById(element_id).className = "active-nav-link";
else document.getElementById(element_id).className = "nav-link";
}
}
$(function()
{$("#nav-placeholder").load("/assets/html/nav.html", function(){
changeActiveElement(locator);
});}
);
whereas the nav.html file is here:
<nav>
<h1>Some name</h1>
<ul id="navigation" class="navigation">
<li><a id="about" href="/pages/about.html" class="nav-link">About</a></li>
<li><a id="compt" href="#compt" class="nav-link">Competences</a></li>
<li><a id="projects" href="#projects" class="nav-link">Projects</a></li>
<li><a id="contact" href="#contact" class="nav-link">Contact</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>
</button>
</nav>
The scope of the snippet is to change the class of the a tags listed in the navigation element. The navigation bar is correctly loaded via $("#nav-placeholder").load("/assets/html/nav.html"), yet changeActiveElement function is never executed via the callback.
Can someone explain me this behaviour?
I tested your code and everything is working except that nav_element is not a list and therefore nav_element.length throws an error. You could use document.querySelectorAll("#navigation"); instead, which returns a node list of all selected elements. Although, I would not recommend doing a for loop on elements by id. Use classes to select the elements. Id is only for one element.
I have a webpage that links some javascript via tags. The script is amazon-localiser.js which will change an amazon link to one appropriate for the visitor. e.g. an Amazon.com link will swap to amazon.co.uk for a UK visitor or Amazon.de for a german visitor.It also appends to the link the relevant amazon affiliate link.
When the user lands on the page they click through some options (javascript) however by the time you reach an amazon link the page must be refreshed for the amazon-localiser.js script to work. I have tried using a page refresh in HTML but this sends me back to the very beginning of the questions. How do I reload the javascript without affecting the users location on the site?
The site is www.wfbsir.com, if you select "Scifi" then "Maybe" you will get to an amazon.com link, if you hover over it you will see it links to amazon.com if you refresh the page it will show you the link to your local store with an affiliate link appended.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>What book should I read?</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 text-right">
<button class="btn btn-default btn-corner" type="submit" data-bind="click: startOver, visible: queryData().id > 0">Start over</button>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="c12 text-center">
<h1 data-bind="text: queryData().text"></h1>
<h3 data-bind="text: queryData().subhead"></h3>
<h3><a data-bind="text: queryData().link, attr: {href: url}"></a></h3>
<div class="option-group" data-bind="foreach: queryData().answers">
<button class="btn btn-default btn-lg" type="submit" data-bind="click: $parent.goToTarget, text: text"></button>
</div>
<button class="btn btn-default" type="submit" data-bind="click: stepBack, visible: navHistory().length > 1">Previous Step</button>
<button class="btn btn-default" type="submit" data-bind="click: buyBook, visible: navHistory().length > 1">Buy the book</button>
</div>
</div>
</div>
<div class="push"></div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="app.js?v=0.4.0"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="amazon-localiser.js"></script>
<script>
</script>
I have tried using jQuery getScript and also window.location.reload(); but neither reload just the javascript, the only thing that I can find to work is F5/Refresh.
I noticed that the amazon-localiser.js invokes the function findLocation onload of the page, as you can see below.
if (window.addEventListener) {
window.addEventListener("load", findLocation, false)
} else {
window.attachEvent("onload", findLocation)
}
So, a possible solution to your problem, could be to invoke this function again when you need to update your amazon link.
I tried invoking it from the console and it works, so try to invoke findLocation() manually when needed and see if it serves your scope.
Simone
You can add dynamically script on the page with some condition, for example:
var script = document.createElement('script');
var src;
if (true) {
src = 'amazon.co.uk';
} else {
src = 'amazon.com';
}
script.src = src;
document.head.appendChild(script);
As gnllucena told, you can view the question or there is the solution.
Build the loader function:
Put the following code in the document
<script type="text/javascript">
function LoadMyJs(scriptName) {
var docHeadObj = document.getElementsByTagName("head")[0];
var newScript= document.createElement("script");
newScript.type = "text/javascript";
newScript.src = scriptName;
docHeadObj.appendChild(newScript);
}
</script>
// place a button for reloading script.
<input type="button" name="reloadNewJs" value="Reload JavaScript" onClick="LoadMyJs('needed_script.js')">
The code for the website I'm currently working on (posted below) is currently not functional. When it was all contained in only the index.html file (meaning all of my code, other libraries / plugins were referenced correctly and stored elsewhere of course), everything worked perfectly. I'm trying to change the structure of the site to function using JQuery's load function, however, so I can swap the #content-display div out for different information when someone clicks a link, allowing me to add JQuery animations for a seamless experience.
There may be an easier way to accomplish this effect, but I'd like to learn what's going wrong with the load function now so that I can use it effectively for projects in the future.
I'm including all of the relevant code below. I'd like to get the slideshow operational again and then from there I should be able to fix the other functions myself. The slideshow uses the plugin MaxImage2.
index.html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Personal Portfolio of Christopher Willingham" name=
"description">
<meta content="" name="author">
<title>CWPhotography</title>
<link href="img/icons/favicon.ico" rel="icon">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:Light' rel='stylesheet' type='text/css'>
<link charset="utf-8" href="css/jquery.maximage.css?v=1.2" media="screen"rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-md-offset-1">
christopher willingham photography
</div>
<ul class="col-md-5 alignright" id="navlist">
<li>
<a id="link-portfolio">portfolio</a>
</li>
<li>
<a id="link-about">about</a>
</li>
<li>
<a id="link-contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content-display"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script charset="utf-8" src="js/lib/jquery.cycle.all.js" type="text/javascript"></script>
<script charset="utf-8" src="js/lib/jquery.maximage.js" type="text/javascript"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/modules/jfunc.js">
(function(){
Main.init();
Main.bindUI();
}());
</script>
</body>
</html>
jfunc.js (located under js/modules/jfunc, relative to the index):
var Main = {
init: function() {
$('#content-display').load("slideshow.html");
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 800,
timeout: 7200,
},
onFirstImageLoaded: function() {
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn('fast');
}
});
},
bindUI: function() {
$('#link-portfolio').click(function() {
$('#content-display').fadeOut('fast');
$('#content-display').empty();
$.ajax({
url: 'portfolio.html',
success: function() {
$.get('portfolio.html', function(page) {
$('#content-display').html(page);
});
}
});
$('#content-display').fadeIn('fast');
});
$('#link-about').click(function() {
$('#content-display').fadeOut('fast');
$('#content-display').empty();
$.ajax({
url: 'about.html',
success: function() {
$.get('about.html', function(page) {
$('#content-display').html(page);
});
}
});
$('#content-display').fadeIn('fast');
});
$('#link-contact').click(function() {
$('#content-display').fadeOut('fast');
$('#content-display').empty();
$.ajax({
url: 'contact.html',
success: function() {
$.get('contact.html', function(page) {
$('#content-display').html(page);
});
}
});
$('#content-display').fadeIn('fast');
});
$('#link-slideshow').click(function() {
$('#content-display').fadeOut('fast');
$('#content-display').empty();
$.ajax({
url: 'slideshow.html',
success: function() {
$.get('slideshow.html', function(page) {
$('#content-display').html(page);
});
}
});
$('#content-display').fadeIn('fast');
});
}
};
slideshow.html (stored in the same folder as index.html):
<html lang="en">
<div id="maximage" class="mc-cycle transitDiv" >
<div class="first-item">
<img src="img/slideshow/slide1.jpg" alt="" width="2048" height="1152" />
</div>
<img src="img/slideshow/slide2.jpg" alt="" width="2048" height="1152" />
<img src="img/slideshow/slide3.jpg" alt="" width="2048" height="1152" />
<img src="img/slideshow/slide4.jpg" alt="" width="2048" height="1152" />
</div>
</html>
Once again, just to reiterate, I wasn't having any issues until I tried separating the code into different objects and calling the .load function from the js file, so I'm assuming the issue is with my pathing or in the syntax I use to call the functions, but I've been trying everything I can think of and I'm at wit's end now. Your help is truly appreciated.
You cannot have a <script> tag with both a .src property and script between the tags. You must use two separate <script> tags for that.
Change this:
<script src="js/modules/jfunc.js">
(function(){
Main.init();
Main.bindUI();
}());
</script>
to this:
<script src="js/modules/jfunc.js"></script>
<script>
(function(){
Main.init();
Main.bindUI();
}());
</script>
P.S. there appears to be no reason for the IIFE either. You're just making two function calls. No reason to wrap another function around that.
I want to have a swipe function in my first html page of the mobile application that I am implementing. I use Phonegap 2.9 and Eclipse. For this function, I used from this files the Page_scrolling.html and the JavaScripts it calls.
My head in .html file that I want to have the swipe function:
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Guide-Me For-All</title>
<link href='http://fonts.googleapis.com/css?family=Patrick+Hand|Permanent+Marker|Exo|Nunito|Limelight|Ubuntu|Montserrat|Audiowide|Architects+Daughter' rel='stylesheet' type='text/css'>
<!-- import stylesheets -->
<link rel="stylesheet" type="text/css" href="../../css/home/home.css">
<link rel="stylesheet" type="text/css" href="../../css/home/home-eng-fonts.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link rel="stylesheet" href="../../jQuery-Mobile-Bootstrap-Theme-master/themes/Bootstrap.css">
<!-- <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" /> -->
<link href="css/main.css" type="text/css" rel="stylesheet" />
<!-- import js -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="../../jss/connect.js"></script>
<script type="text/javascript" charset="utf-8" src="../../jss/home/change_page.js"></script>
<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script type="text/javascript" src="../../plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="../../plugins/js/main.js"></script>
<script src="../../plugins/swipe.js"></script>
According to the link, I needed the last .css link and the last four .js links. The forth JavaScript is the one that is inside the Page_scrolling.html in the tutorial I put above. The only file that I changed, is the last JavaScript:
My Swipe.js contains :
$(function() {
$("#trust_us").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
$("#how_it_works").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
$("#owners").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
$("#sign_up_in").swipe( { swipeLeft:swipe2, swipeRight:swipe2} );
//Swipe handlers.
function swipe1(event, direction, distance, duration, fingerCount) {
$(this).text( "You have swiped " + direction +' with ' + fingerCount +' fingers' );
}
function swipe2(event, phase, direction, distance) {
$(this).text( phase +" you have swiped " + distance + "px in direction:" + direction );
}
});
//{ swipeStatus:swipe2, allowPageScroll:"horizontal"}
My body file is divided in the divs I want to swipe:
<body>
<div id="logo">
<img id="lg" src="../../imgs/logo.png" alt="Logo">
</div>
<div id="trust_us">
<div id="trust_us_h2">
<h3>Why you should trust us :</h3>
</div>
<ul>
<li><p>All the info about the shops, are being validated with their owners.</p></li>
<li><p>You can send your thoughts or complaints to the shops' owners, so that they will do improvements to it. *</p></li>
</ul>
<div id="notice">*Only for occasions when there was a contact between administrator - shop's owner!</div>
</div> <!--trust us-->
<div id="how_it_works">
<div id="how_it_works_h2">
<h3>How it works :</h3>
</div>
<div id="first">
<h5>First:</h5>
</div>
<div id="Sign_Up" class="float-left">
<img src="../../imgs/1sign-up.png" alt="Sign-Up">
<p> 1. Register</p>
</div>
<div id="Rate" class="float-right">
<img src="../../imgs/5rate.png" alt="Rate">
<p>5. Rate it according to your experience</p>
</div>
</div> <!--how it works-->
<div id="owners">
<div id="owners_h2">
<h3>For the owners of a shop :</h3>
</div>
<ol>
<li><p>Register</p></li>
<li><p>After that, you can take interesting reports and useful statistics about your shop. *</p></li>
<li><p>Now, you can do improvements to your shop according to what the customers need so you can get even more of them.</p></li>
</ol>
<div id="notice">*Contact the admin of the app for more information.</div>
</div> <!--owners-->
<div id="sign_up_in">
<h2>...REGISTER NOW OR SIGN IN...</h2>
Sign-Up Now!
</div>
<div id="last_line">
<br>
</div>
<div id="footer">
<p>Copyright (c) 2014 Guide-Me For-All. Design by Marialena S.</p>
</div>
</body>
What Is happening right now, Is when I swipe to the left or to the right a div, it disappears and in it's place it appears a message. And all the divs are in a vertical row. There are all viewable from the start when you scroll the page. What I want now, is when I swipe to the right the first div for example, to display the second div. In the same way I want to do the swipe to left function to display the previous div. That's all. I tried many other options but this looks the most simple.
I couldn't find the solution to my problem but I found this very nice tutorial and it's really simple to to do the swipe function. But if anyone finds my mistakes to the above code, please post the answer so that I can learn how to do the swipe function with this method too.
I'm creating a simple web application with Metro UI framework (http://metroui.org.ua/) where I would like to show a map.
I have decided to use Nokia HERE maps and its javascript API but even if I follow this example https://developer.here.com/javascript-apis/documentation/maps/topics/quick-start.html I'm getting just a white div with the HERE logo. The only browser where the map displays correctly is Chrome.
I figured out that problem must be somewhere in the compatibility between maps and metro-bootstrap.css because when I remove it, the maps show correctly. I use ASP.NET MVC with master page rendering.
Is there anyone who knows how to solve this issue?
Here is my HTML code
<!DOCTYPE html>
<html lang="cs">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="/js/jquery-2.1.0.min.js"></script>
<script src="/js/jquery-ui-1.10.4.min.js"></script>
<script src="http://js.api.here.com/se/2.5.4/jsl.js?with=all" type="text/javascript" charset="utf-8"></script>
<script src="/js/metro.min.js"></script>
<link href="/css/metro-bootstrap.css" rel="stylesheet" />
<link href="/css/metro-bootstrap-responsive.css" rel="stylesheet" />
<link href="/css/iconFont.min.css" rel="stylesheet" />
<link href="/css/customStyling.css" rel="stylesheet" />
<script src="/js/maps.js"></script>
</head>
<body class ="metro">
<div class="container">
<h1 class="fg-white"><span class="icon-cloudy on-left fg-white"></span>TEVI</h1>
<br />
<script src="/js/metro/metro-tile-transform.js"></script>
<script src="/js/user-interaction.js"></script>
<div id="tilesArea">
<div id="0" class="tile live double bg-lightBlue " data-role="live-tile" data-effect="slideUpDown" data-click="transform" data-period="3581" onclick="showDetails(this)">
<div class="tile-content text-left fg-white subheader text-left">
<div class="padding10"><span class="icon-thermometer on-left"></span>-10 °C</div>
</div>
<div class="tile-content text-left fg-white subheader text-left">
<div class="padding10"><span class="icon-rainy-2 on-left"></span>200 mm</div>
</div>
<div class="tile-status padding10">
<span class="name">Cidlo 1</span>
</div>
</div>
.
.
.
</div>
<hr />
<div id="detailsArea">
<p>
...
</p>
</div>
<hr />
</div>
<div id="mainMapArea"></div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"728fd54a207c4b32a11a57ed0a099b2b"}
</script>
<script type="text/javascript" src="http://localhost:49764/654ba5e681db49c6b825ad5f35203c7d/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
And here is javascript file maps.js which contain function to show the map:
function showStartupMap() {
nokia.Settings.set("app_id", "my app id");
nokia.Settings.set("app_code", "my app code");
nokia.Settings.set("serviceMode", "cit");
var map = new nokia.maps.map.Display(
document.getElementById("mainMapArea"), {
// Zoom level for the map
zoomLevel: 10,
// Map center coordinates
center: [52.51, 13.4]
}
);
}
$(document).ready(function () {
showStartupMap();
})
Any suggestions are welcome. Thank you