Issue with displaying jQuery 3.5.1 mobile CSS formatting on live server preview using Visual Studio Code

Despite my best efforts, I can't seem to make the jQuery CSS stylesheet work properly. I've been using the live preview extension in VSCode and got the CSS directly from the jQuery website.

<!DOCTYPE html>
<html>

<head>
    <title>Physics Simulator App</title>
    <link rel="stylesheet" href="css\jquery.mobile-1.4.5.min.css">
    <script src="scripts\jquery-3.5.1.min.js">  </script>
    <script src="scripts\jquery.mobile-1.4.5.min.js">  </script>
    <script type='text/javascript' src='scripts\Week 2 homework.js'>  </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div data-role="page">
        <div data-role="navbar">
            <ul>
                <li><a href="week 1 homework.html"> Information</a> </li>
                <li><a href="Week 2 App.html" class="ui-btn-active ui-state-persist"> Interface</a> </li>
            </ul>
        </div>
        <div data-role="header">Binary Operators Demo</div>
        <div data-role="content">
            <label for="input">A</label>
            <input type="checkbox" name="inputA" id="inputA">
            <br />
            <label for="input">B</label>
            <input type="checkbox" name="inputB" id="inputB">
            <br />
            <button onclick="AND();">AND</button>
            <button onclick="OR();">OR</button>
            <button onclick="NOT();">NOT</button>
            <button onclick="XOR();">XOR</button>
        </div>
        <table id="data">
            <tr>
                <td>Result: </td>
                <td id="resultA"></td>

            </tr>
        </table>
        <div data-role="footer">
            <small>binary operations demo app</small>
        </div>
    </div>
</body>

</html>

I have checked for any missing brackets or syntax errors, and double-checked the file paths for my own CSS files. I even tried adding 'data-theme="a"' to my page tag but still no luck. All I'm getting is this. result

Could it be a version compatibility issue?

Answer №1

Hello friend, I may have mistakenly assumed that you are not fluent in English. However, it seems like your issue lies with jquery.mobile.css. Have you tried using the CDN? I took your code and replaced the with the CDN since I couldn't locate the Week 2 homework.js file. Replace the with the CDN and give this test a shot: Paste the following code block:

        <div class = "ui-grid-d">
            <div class = "ui-block-a">
                <a href="#" class="ui-btn ui-corner-all ui-shadow"> button </a> <br>
                <span> any info </span>
            </div>
        </div>

This code utilizes the styling from jquery.mobile.css. If it works, then the problem might lie in how you imported the files. I have two suggestions for you: avoid using spaces in file names (consider changing "Week 2" to "Week_2_homework"), and when using <label for = "">, make sure to refer to the name or id of the input, not just the word "input". If my assumption about your issue is incorrect, please let me know so I can better assist you. Best regards

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

Having trouble inserting a Button element into a li parent element

I'm attempting to insert a button inside an li element using the .appendChild method, but for some reason, it's not working. I also tried changing the parent's inner HTML. let inputElement = document.querySelector('#input'); let ...

What is the best way to position a bigger character directly above a smaller container?

My goal is to center a single character, using CSS, in a span that is smaller than the character itself. The setup I have is: <span id="A">X</span><span id="B">Y</span><span id="C">Z</span> All three spans are styled ...

Update the value of a JavaScript variable in an HTML template by targeting the element with a specific

Within my testFile.html HTML file, the following code is present: <div id="image-type-placeholder">marinaa</div> In my JavaScript file: const CourseImageUpload = BaseComponent.extend({ /** * @property {function} */ templat ...

Showing text instantly upon clicking a radio button, in real-time

I'm working with a set of radio buttons that are linked to numbers ranging from 1 to 24. I need to show the selected number in another part of the page when a radio button is clicked. What would be the best way to achieve this? ...

How can I extract text from a website without retaining number, dot, and alphabet bullets in the list?

I am currently using Python 2.7.8 for a project involving a website with text displayed in an ordered list format using ol tags. I need to extract the specific text items listed below: Coffee Tea Milk This is an example of the HTML code used on my websit ...

prepend an element before the li element

I am currently working with Angular Material and I am trying to add the md-fab-speed-dial in front of an li element. However, when I attempt to do this, the md-fab-speed-dial appears below the li element, as shown in this image: https://i.sstatic.net/Rqz ...

What is the best method for choosing multiple child elements using jQuery?

Completely new to jQuery here. I have a scenario where I need to move each span.caption element inside its preceding A tag using jQuery with the following HTML example. Original: <ul class="gallery"> <li><a href="http://mysite.com/mural. ...

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>" dir="ltr"> <?php echo $this->getChildHtml('head') ?> <bod ...

Using information retrieved from a JSON response

In my current project, I have set up a JavaScript object within a script tag. <script> searchdata = {"employees":[{"name":"john doe","sal": "10000"}]}; </script> I am utilizing the searchdata object in various functions as shown below: fu ...

Issue 1173575 has been identified in the Chrome bug tracker, indicating that non-JavaScript module files are no longer

Hey there! I'm completely new to the world of web development and currently enrolled in a Udemy bootcamp. While working on my app, everything was going smoothly until my browser suddenly stopped rendering and displayed this error message: VM10:6747 c ...

Changing the style of a single element in various components in Vue

I need to alter the design of a specific div that is used in different components within my Vue.js application. The #app div should have a padding of 172px only in the Hello.vue component, while it should remain at 0px in all other components. Is there a w ...

Accessing an item within a JSON object using jQuery

Trying to access an element within a JSON object, part of the code is shown below: { " academy": { "business": { "E-commerce": [ I have successfully accessed the academy as the first element using the following code: $.getJSON("p ...

Automated Copy and Paste Feature - JavaScript using Ajax

I am working on a unique auto-increment IMDB ID grabber that retrieves the ID as you type the name of a TV show. Currently, I have managed to create functionality where it checks if the field is empty; if not, it displays a button that directs you to a pag ...

Ensure that all checkboxes are only selected within a single table

I have a challenge with selecting all check boxes in multiple tables when the header check box is selected. I am attempting to achieve this using jQuery without needing to parse or pass in the table id. Currently, when I select one header check box, all th ...

Persistent error function arises from Ajax request in Laravel

Greetings everyone. I'm currently working on my Laravel application and trying to verify the attendance for a specific date, subject, grade in my database table. If the data exists, I have implemented an if statement to display the desired results bas ...

Is there a way to trigger the bootstrap datetimepicker when a custom button is clicked, while also storing the selected value in a hidden textbox

When the ADD button is clicked, a datetimepicker should open. After selecting a value from the datetimepicker, it should be saved in the textbox with ID #myTextBox. <div> <input id="myTextBox" type="text" ng-model="c" data-provide="datepicker ...

Ways to enlarge a YouTube thumbnail upon loading using JavaScript

I recently found a solution to my question on how to prevent YouTube videos from repeating even when different embedded codes are used. I have a specific need to resize the thumbnail image of my YouTube video to width:146px and height:124px when the page l ...

Adjust the size and orientation of an image according to the dimensions of the window and the image

As I delve into HTML and Javascript, I am facing a challenge with resizing an image based on the window size. The goal is for the image to occupy the entire window while maintaining its aspect ratio during resizing. Additionally, if the window size exceeds ...

Saving sortable portlet items to a database using JQuery AJAX

I've searched through numerous resources to find a solution to my problem, but none of them have been successful. Here is the code I am working with: http://plnkr.co/edit/pcfz33lzHz4wdehjGEuQ I am trying to utilize AJAX to save the order of two port ...

Utilize the get method to showcase data in a material UI table for a React application

Just starting out with React. Managed to create a table component with hard-coded data. However, I now have all the data stored in table.json. Can someone guide me on how to fetch values from table.json using an axios get request an ...