When compiled on a device, Cordova is not utilizing CSS and JS files

Question

When compiled on a device, Cordova is not utilizing CSS and JS files

I am currently in the process of developing an app using Cordova with an HTML file. However, after building the app, I encountered issues where it is not incorporating CSS and does not seem to be utilizing JavaScript.

  <!doctype html>
  <html lang="en">
    <head>
        <script>
        function displayContent() {
           document.getElementById('welcomeDiv').style.display = "block";
        }
        </script>
      <meta charset="utf-8">

      <title>MyApp</title>

      <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="./main.css">
    </head>

    <body>
        <input type="button" name="answer" value="Show Content" onclick="displayContent()" />
        <div id="contentArea"  style="display:none;" class="response_section" > WELCOME</div>
        <div class="jumbotron" id="abc">
          <h1 id="def">Wednesday 20/4 Week 16:</h1>
          <h1 id="ghi">
             <small>Math GymNorwegian</small>
          </h1>
        </div>
        <div class="jumbotron" id="abc">
          <h1 id="ghi"><small>Homework for Thursday:</small></h1>
        </div>
        <div class="jumbotron" id="xyz">
          <h1 id="def">No homework today!</h1>
        </div>
    </body>
   </html>

The CSS files I am using are located within the WWW folder, along with the index.html file. Additionally, some CSS styles are being imported from bootstrap as well. I am uncertain if this could be causing the issue. Furthermore, the JavaScript code placed in the header section does not execute as expected, resulting in the div not displaying properly. Could this be due to a problem with CSS compatibility, especially given the use of style.display method?

Thank you!

javascript html css cordova

Answer 1

Answer №1

I encountered a similar issue when placing the script in the head section and calling the function from an HTML element, just like you did. However, I resolved it by moving the script to the bottom of the page, like so:

...
<div class="jumbotron" id="nbm">
          <h1 id="sub">ayylmao no homework</h1>
        </div>
        <script>
        function showDiv() {
           document.getElementById('welcomeDiv').style.display = "block";
        }
        </script>
    </body>
   </html>

Otherwise, the script would have been executed after the DOM had finished loading!

Answer 2

I encountered a similar issue when placing the script in the head section and calling the function from an HTML element, just like you did. However, I resolved it by moving the script to the bottom of the page, like so:

...
<div class="jumbotron" id="nbm">
          <h1 id="sub">ayylmao no homework</h1>
        </div>
        <script>
        function showDiv() {
           document.getElementById('welcomeDiv').style.display = "block";
        }
        </script>
    </body>
   </html>

Otherwise, the script would have been executed after the DOM had finished loading!

Answer 3

Answer №2

Ensure that the location of your css file and index file is correct

if you are referencing the css file in the wrong way

<link rel="stylesheet" href="./main.css">

If both your index file and css file are in the same folder

www/index.html & www/main.css

Then link it like this

<link rel="stylesheet" href="main.css">

or if the css file is located in a subfolder named style or elsewhere

<link rel="stylesheet" href="style/main.css">

This approach should work for you

Updated

index.html

<head>
    <meta charset="utf-8">
    <title>InstaPlan</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style/main.css">
    <script src="cordova.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />
    <div id="welcomeDiv"  style="display:none;" class="answer_list" >WELCOME</div>
    <div class="jumbotron" id="nbn">
        <h1 id="sub">Onsdag 20/4 Uke 16:</h1>
        <h1 id="mid">
            <small>Gym MatteNorsk</small>
        </h1>
    </div>
    <div class="jumbotron" id="nbn">
        <h1 id="mid"><small>Lekser til Torsdag:</small></h1>
    </div>
    <div class="jumbotron" id="nbm">
        <h1 id="sub">ayylmao ingen lekser</h1>
    </div>
</body>

Created folder for style in www folder

style/main.css

.jumbotron h1{
   font-size: 12px;
   text-decoration: underline;
   font-weight: 200;
}

Created folder for js in www folder

js/main.js

function showDiv() 
{
    document.getElementById('welcomeDiv').style.display = "block";
}

It's working for me with the bootstrap css and my custom css

Please give this a try and let me know if it works for you as well.

Answer 4

Ensure that the location of your css file and index file is correct

if you are referencing the css file in the wrong way

<link rel="stylesheet" href="./main.css">

If both your index file and css file are in the same folder

www/index.html & www/main.css

Then link it like this

<link rel="stylesheet" href="main.css">

or if the css file is located in a subfolder named style or elsewhere

<link rel="stylesheet" href="style/main.css">

This approach should work for you

Updated

index.html

<head>
    <meta charset="utf-8">
    <title>InstaPlan</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style/main.css">
    <script src="cordova.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />
    <div id="welcomeDiv"  style="display:none;" class="answer_list" >WELCOME</div>
    <div class="jumbotron" id="nbn">
        <h1 id="sub">Onsdag 20/4 Uke 16:</h1>
        <h1 id="mid">
            <small>Gym MatteNorsk</small>
        </h1>
    </div>
    <div class="jumbotron" id="nbn">
        <h1 id="mid"><small>Lekser til Torsdag:</small></h1>
    </div>
    <div class="jumbotron" id="nbm">
        <h1 id="sub">ayylmao ingen lekser</h1>
    </div>
</body>

Created folder for style in www folder

style/main.css

.jumbotron h1{
   font-size: 12px;
   text-decoration: underline;
   font-weight: 200;
}

Created folder for js in www folder

js/main.js

function showDiv() 
{
    document.getElementById('welcomeDiv').style.display = "block";
}

It's working for me with the bootstrap css and my custom css

Please give this a try and let me know if it works for you as well.

Answer 5

Answer №3

If you are encountering difficulties, it could be due to the cordova-whitelist problem. To resolve this, take a look at the cordova-whitelist plugin for guidance on how to include external css files.

https://github.com/apache/cordova-plugin-whitelist

Answer 6

If you are encountering difficulties, it could be due to the cordova-whitelist problem. To resolve this, take a look at the cordova-whitelist plugin for guidance on how to include external css files.

https://github.com/apache/cordova-plugin-whitelist

When compiled on a device, Cordova is not utilizing CSS and JS files

Answer №1

Answer №2

Updated

Answer №3

Similar questions

Finding the difference or sum within an array to identify the two numbers that produce a new array

Exploring Angular2: The Router Event NavigationCancel occurring prior to the resolution of the Route Guard

Updating the database table using javascript

hyperlink triggers spacing problem in Internet Explorer

Setting the height of columns in a Bootstrap panel to 100%

I am encountering errors when running NPM start

Tips on integrating JavaScript with embedded Ruby code

Ensure that the bar width in react-chart-js-2 remains consistent regardless of the number of bars displayed

Make CKEDITOR cease the unwrapping of blocks

Building Your Initial HTTP Server using Node.js

The values in my JavaScript don't correspond to the values in my CSS

View content from a text file on a webpage

Improving the innerHTML syntax

Guide to dynamically refreshing a section of the webpage while fetching data from the database

wrap <td> data in a link with vue depending on certain conditions

Tips for increasing the width of a button within an HTML table heading

How can I retrieve the Sequelize results in the form of a 2D array rather than an array of objects?

Using ReactJS, the for loop can be utilized to dynamically create buttons and assign variables based on the integer being iter

What is the best way to add a new project and make updates to an existing project within an array?

The issue arises when trying to use ::v-deep in conjunction with v-dialog's content-class when using scoped scss