Images not showing on mobile device but showing on desktop, using PhoneGap - javascript

I am doing a project for college but having trouble with images displaying on the mobile device.
Desktop screenshot
So the image in the background displays on the desktop as shown above. and below is the mobile application with no background loading.
mobile screenshot
This is my code. My image location is correct seeing as the desktop loads it and i got the style code from another stack overflow answer but it hasn't helped.
<!DOCTYPE html>
<html>
<style>
#bg {
background: url(images/logo.jpg) repeat scroll 50% 0px / cover transparent;
background-image: url(images/logo.jpg);
width: 400px;
height: 400px;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,
user-scalable=yes, width=device-width">
<title>ITCOA</title>
</head>
<div id="bg">
<body>
<h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow Orientation App </h1>
<div id="navcontainer" style="margin-left:150px;margin-top:100px;">
<button type="button" id="findPathButton"onclick="parent.location='findPlace.html'">Find a place!</button><br><br>
<button type="button" id="showMapsButton" onclick="parent.location='showMaps.html'">Show Maps!</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
Thanks for any help.
Updated code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
<title>ITCOA</title>
<script src="cordova.js" defer></script>
<style>
#bg {
background: url('images/logo.jpg') center center / cover no-repeat;
width: 400px;
height: 400px;
}
button {
margin: 15px 0 15px 0;
display: block;
}
</style>
</head>
<body>
<div id="bg">
<h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow
Orientation App </h1>
<div id="navcontainer" style="margin-left:150px;margin-top:100px;">
<button type="button" id="findPathButton"
onclick="parent.location='findPlace.html'">Find a place!</button>
<button type="button" id="showMapsButton"
onclick="parent.location='showMaps.html'">Show Maps!</button>
</div>
</div>

First of all <style> tag should be in your <head>. <div id="bg"> is above html body element. Why #bg id has 2 background statements? background: url(images/logo.jpg) repeat scroll 50% 0px / cover transparent; and
background-image: url(images/logo.jpg); ? Please at least read W3s. Other thing is that your code is overall terrible. I advice to stop using inline styling elements and also stop using inline javaScript. You can add <script src="cordova.js" defer></script> to your <head> with defer flag. Consider adding css file to your project and add all of your styles there. Also since you already have js file you can put your click behavior there by addEventListener() Method.
Update:
jsfiddle
Update2:

Related

how to get exact content height inside the div using javascript?

I am trying to get exact content height inside the div .I am able to get exact value when there is no image inside the container . but if there is an image inside it give wrong result why ?
I am using clientHeight and offsetHeight both gives wrong output.
here is my code
https://codesandbox.io/s/cold-browser-dxj51?file=/index.html:907-919
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
padding: 20px;
width: 200px;
background-color: #eeeeee;
}
.logo img {
width: 100%;
}
.logo {
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="1.png" />
</div>
<div class="abc">
This is a static template, there is no bundler or bundling involved!
</div>
</div>
<script>
console.log(document.querySelector(".container").clientHeight);
console.log(document.querySelector(".container").offsetHeight);
</script>
</body>
</html>
Expected output : 154px+ 20px+20px =(194px)
myoutput : 142px
The problem is that your javascript is not waiting the image's full load before checking its height. You can use the event listener "load" to succesfully fire the script you want, once dependent resources have finished loading:
window.addEventListener("load", event => {
console.log(document.querySelector(".container").clientHeight);
console.log(document.querySelector(".container").offsetHeight);
});
The code above will give you your desired output.

How can i change the background color from a javascript file

html file
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background-color: blue;
}
</style>
</head>
<body>
<script src="test.js"></script>
<div id="dd" class="div1" onmouseover="mousecolor()" onmouseout="this.style.backgroundColor=null">
<p>hep</p>
</div>
</body>
</html>
javascript file
function mousecolor() {
console.log("hhhhhhh")
document.getElementById("dd").style.BackgroundColor = "000080"
}
function mouseout() {}
the console does seem to be working when i hover over the text, but the background color doesn't change
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
background-color: blue;
}
</style>
</head>
<body>
<div id="dd" class="div1" onmouseover="mousecolor()"
onmouseout="this.style.backgroundColor=null">
<p>hep</p>
</div>
<script src="test.js"></script>
</body>
</html>
JavaScript
function mousecolor() {
console.log("hhhhhhh");
document.getElementById("dd").style.backgroundColor = "#fcba03";
}
Used the color #fcba03 and changed BackgroundColor to backgroundColor. Worked for me
The code as given does work apart from the need to change BackgroundColor to backgroundColor in the JavaScript assignment to style.
On moving the mouse over the color changes from a bright blue to a dark (navy) blue.
Note that the mouseout action is rather strange - null is not a color. Possibly it was meant that the color be set to transparent:
onmouseout="this.style.backgroundColor='transparent';
Note the use of single quotes around the string that is the color (in this case transparent).

How to always display as Day view on shared outlook html calendar?

i like to share my outlook calendar with my team, and i have shared outlook calendar html link which i have iframed in to an html file. the calendar shows up but always in the week view but i want to show it as the day view.
current view:
below is the html code (i have removed id from the source link for privacy)
this page will be loaded in to a raspberry Pi which is connected to a small LCD screen to display my availability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Shared Calendar</title>
<style type="text/css">
<!--
body
{
color:#000000;
background-color:#FFFFFF;
background-image:url('Background Image');
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body itemscope itemtype="http://schema.org/Organization">
<iframe style="width: 768px; height: 1366px; overflow: hidden;" src="https://outlook.office365.com/owa/calendar/somethinghere/anotherhere/calendar.html" width="800" height="1200" scrolling="no">Iframes not supported</iframe>
</body>
</html>
Expected view:

How to display the leaflet popup on the right/left side of mouse pointer?

I want to display the leaflet pop up on the right or left side of the mouse pointer. By default it is displayed on the top of the mouse pointer.
how can I do that?
The demo is available here: http://jsfiddle.net/Wn5Kh
<!DOCTYPE html>
<html>
<head>
<title>CircleMarker tooltip</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css"
/>
<![endif]-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
</body>
</html>
In leaflet.css you can change:
.leaflet-popup {
position: absolute;
text-align: center;
}
Try to play around with the position and you will see that you can change where the popup will be opened.

Setting Div (#Map) height and width to 100%

I'm setting 100% width and height to the div (map), but my map shows only half of the page. I would like to display the full map below the div container.
I am using bootstrap and esri JavaScript api to build the page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
<script>
dojo.require("esri.map");
function init() {
var map = new esri.Map("map",{
basemap:"topo",
center:[-95.45,29.80], //long, lat
zoom:10,
sliderStyle:"small"
});
}
dojo.ready(init);
</script>
<style>
#map {
height:100%;
width:100%;
margin:0;
padding:0;
}
</style>
</head>
<body class="claro">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project Name</a>
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
<div id="map" class="claro"></div>
</div><!-- /.navbar -->
</body>
</html>
Add this (to your external css file or inline style tag):
html body {
height: 100%;
min-height: 100%;
}
At bootstrap 3.0 twitter bootstrap adds a .container css class which overrides the map container. The result is that a max-width is set on the .map .container. Add this to override and make the map fill the complete width:
html body {
height: 100%;
min-height: 100%;
}
.map .container{
max-width: 100%;
}
try this :
#map{height:100%; min-height:100%;}

Categories