The issue of CSS not functioning properly in a template that includes JavaScript, despite the HTML file being located within a

I'm a complete beginner when it comes to working with templates. I've run into an issue where my CSS doesn't seem to work when I place my HTML in a different folder.

After some investigation, I've discovered that the CSS is being applied through JavaScript, which is also new territory for me. Even after carefully setting up the links for the CSS and JS files in their correct folders, the styles still aren't being applied.

The problematic files are located at /Linear/index.html and /Linear/builds/index.html, along with the corresponding js and css folders.

Here's the link to download the files: https://www.dropbox.com/s/cmmdybvbhvff0w4/Linear.zip?dl=0

javascripthtmlcsslocalhost

Answer №1

To ensure that your template functions correctly with files located in other folders, you will need to adjust the skel.js file that is used. This will allow for seamless integration of files from different directories.

Furthermore, the presence of "noscript" tags in your index.html file indicates that if a browser does not support JavaScript, the CSS file will be loaded instead. Removing these tags will enable smooth operation similar to files residing in the root folder.


    <script type="text/javascript" src="../js/skel.min.js"></script>
    <script type="text/javascript" src="../js/skel-panels.min.js"></script>
    <script type="text/javascript" src="../js/init.js"></script>

    <link rel="stylesheet" href="../css/skel-noscript.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <link rel="stylesheet" href="../css/style-desktop.css" />

</head>

Answer №2

To fix this issue, remove the noscript tag surrounding the css link as shown below:

Instead of

<noscript>
        <link rel="stylesheet" href="../css/skel-noscript.css" />
        <link rel="stylesheet" href="../css/style.css" />
        <link rel="stylesheet" href="../css/style-desktop.css" />
</noscript>

Use the following code;

<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />

You can access and download the updated version from the link provided below

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to relocate (or alternate) a vertical scroll bar

Is it possible to move a vertical scrollbar? I currently have a scrollbar in my div, but I would like to relocate it to the right side next to "Panel 2". Unfortunately, using CSS styles position: fixed and margin-right is not an option. Are there alterna ...

jquerycssscrollbar

Utilizing special German characters such as Umlaut in HTML code

Attempting to include German characters in HTML has proven challenging for me. I have tried using special character codes such as &Uuml; and &#220; but have not had any success with proper rendering. Can someone help me troubleshoot this issue? Tha ...

javascripthtmlcharacter-encodingsquarespace

The Power of PhoneGap's InAppBrowser Feature

I recently installed a plugin from the following link: https://github.com/apache/cordova-plugin-inappbrowser I carefully followed their installation instructions: Installation cordova plugin add cordova-plugin-inappbrowser If you want all page loads in y ...

androidhtmlcordova

Add an image to a div element and determine its height, then apply the height to the CSS property

Here is my JavaScript code that utilizes jQuery: $(".article_big_photo").click(function() { $('#screen').css({ opacity: 0.5, 'width':$(document).width(),'height':$(document).height()}); $('#screen').show() ...

javascriptjquery

The symbiotic partnership between JSF bean and the dynamic capabilities of HTML

As I develop my project in JSF using Primefaces 4.0 and a Tomcat 7 server, I encounter the need to retrieve an image from a MS SQL database and apply clickable areas on it. The coordinates for each area are also obtained from the database. Unfortunately, t ...

htmljsfhtml5-canvas

What made me decide to use the specific name as placeholders?

<fieldset> <?php $q3=mysql_query("SELECT * FROM tz_kliendid"); echo "<select name='nimetus' id='nimetus'><option value=''>--- Valige klient ---</option>"; while($f3=mysql_fetch_assoc($q3)){ $klient ...

phphtmlforms

Using HTML to create interactive table cells

I am looking to add functionality to make a cell in an HTML table clickable. When this action is triggered, I want a pop-up or window to appear with specific information. Below is my current HTML code: <table class="table1"> <thead> <tr ...

phphtmlpopupwindow

What is the best way to merge multiple arrays nested within another array while removing the final character from each word?

We have a 2D array: let userGroup = [ ['user1-', 'user2-', 'user3-'], ['user4-', 'user5-', 'user6-'], ['user7-', 'user8-', 'user9-'] ]; How can we c ...

javascriptarraysfunction

Tips for preventing focus/autofocus on the initial form input using bootstrap/jquery

I am currently working on updating an application that utilizes jQuery 3.4 and Bootstrap 3.4. A form has been added to the bottom of the page, but it has an unintended consequence of the browser focusing on the first input element (checkbox) within that fo ...

javascriptjquerytwitter-bootstrap-3

What's causing these divs to be misaligned in various directions?

I am currently working with a front-end framework based on flexbox called Material-UI, and I have noticed that the layout of certain components, particularly the quantity control elements, appears to be different even though they all share the same styling ...

javascriptcssreactjsflexboxmaterial-ui

Guide to setting up membership functions with Express, MySQL, and JWT

I have successfully implemented user login and membership functionalities using Express with MySQL. Now, I am looking to integrate JWT for enhanced security. I was advised to utilize Passport for developing API solely through Postman instead of web inter ...

javascriptmysqlnode.jsexpressjwt

There was an issue exporting bands on Google Earth Engines in Javascript due to incompatible data types: Float32 and UInt16 were found to be inconsistent

I am attempting to export a basic AOI of a Landsat-8 image, but I keep encountering the error mentioned in the title. Can you help me understand why this error is occurring? All the bands in my image are floats so I don't see where the issue lies. var ...

javascriptspatialgeotiff

Discord.js: Merging strings while pushing to an array

I am currently updating an embed message to notify users who have "enlisted" in a list by reacting. However, I am encountering an issue where the strings from the entire array are getting combined when the length of the array reaches 2 before adding a new ...

javascriptarraysdiscord.js

The addition of ngRoute causes the controller in AngularJS to malfunction

Currently, I am attempting to implement routes in my angularJS application and have encountered an issue where integrating 'ngRoute' into the app causes the main controller to malfunction. Furthermore, I am experiencing difficulties with ngRoute ...

javascriptangularjsngroute

Display the chosen date from the datepicker in the input field

Utilizing a JQuery DatePicker to be constantly displayed, I have assigned it to a div. Despite wanting it to display the selected date in the input box like in this example, it just isn't functioning as desired for me. Is there a way to have the selec ...

javascriptjqueryhtmldatepicker

How can I utilize columns from a junction table in the "where" clause in sequelize?

Looking to execute a Sequelize query on multiple related models: SELECT Cou.country_id, cou.country_name, Sta.state_id, Sta.state_name, Dis.district_id, Dis.district_name, Cit.city_id, Cit.city_name, Loc.location_id, Loc.location_name, Sub_Loc.sub_locatio ...

javascriptmysqlnode.jssequelize.js

Troubleshooting Floating Divs in ExtJs TreePanel Component

I am currently utilizing the treepanel object in ExtJs and I am trying to implement two divs side by side within the treepanel items. Is it feasible to have one of them set with a fluid width and the other with an auto width? Despite my HTML and CSS codes ...

htmlcssextjs

I possess an item that I must display its title as a <choice> in a <menu> while returning a different variable

I am working with an object: company: { name: 'Google', id: '123asd890jio345mcn', } My goal is to display the company name as an option in a material-ui selector (Autocomplete with TextField rendering). However, when a user selects ...

javascriptreactjstypescriptmaterial-ui

sending arguments to the event handler function

It seems like I may be overlooking some basic concepts of JavaScript events. Could someone kindly explain why these two calls are returning different results? // 1 $(window).on('load', function(){ spiderLoad(); }); and // 2 $(window).on(& ...

javascriptjquery

Concealing a navigation tab with Angular4 in Typescript: A tutorial

I have successfully implemented 3 tabs in my Angular 4 project. At the moment, I am focusing on working with the first two tabs and planning to tackle the third tab in the near future. To keep things clean and organized, I am looking to use JavaScript/Typ ...

javascriptangulartypescript