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

"Creating dynamic web apps with the powerful duo of Meteor and Zurb

Just starting out with programming and currently working on a new web application using Meteor and AngularJS. I would like to incorporate the elements/css from 'Zurb Foundation For Apps' into my project... I am familiar with including Bootstrap ...

Can a single SVG file be referenced and reused multiple times in a project?

Instead of repeating these code blocks: <svg class="icon-user"> <use href="LONGFILENAME.svg#icon-user"> </use> </svg> <svg class="icon-user2"> <use href="LONGFILENAME.svg#icon-user2"> </use> </ ...

Leveraging the power of jQuery with AJAX operations

In my collection of PHP files, I have three named: index page books user Index Page <link href="colorbox.css" type="text/css" rel="stylesheet" media="all" /> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <scrip ...

Repeating X and Y Axis Labels on Highcharts

Highchart is new to me. I recently created a basic chart showing the count of males and females over the past five years. I have included a screenshot for reference. I am wondering if it's possible to remove duplicate labels from both axes? Below is ...

Create text that alternates between blinking and changing content simultaneously

I'm currently working on a website and I am curious about how to achieve the effect of making text blink and change content simultaneously, similar to what is seen on this particular website . Sorry for not being more specific in my question. Thank yo ...

The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears: https://i.stack.imgur.com/HeN41.png ...

Tips for updating the content of a div with the click of another div

Is there a way to dynamically change the content of a div upon clicking on a menu item? Here is the current layout for reference: https://i.stack.imgur.com/nOnlQ.png Below is the CSS and HTML code snippet: body { background-color: #555657; ...

Check out this awesome jQuery Image Hover Plugin that allows you to create dynamic animations when hovering over other elements

Is it possible to use Adipolo in a way that allows hovering over a different element for the image animations to work? Currently, I am using the following code: $('#img-caption-one').adipoli({ 'startEffect' : 'grayscale' ...

Implementing a color change for icons in React upon onClick event

export default function Post({post}) { const [like,setLike] = useState(post.like) const [islike,setIslike] = useState(false) const handler=()=>{ setLike(islike? like-1:like+1 ) setIslike(!islike) } return ( <> <div classNam ...

Numerous covert fields within HTML

I am currently working on a popup dialog box where I need to include a set of values in hidden format. However, when I retrieve the value through AJAX post, only the last value is returned. In my PHP code snippet: $plan_ids=array(); foreach($test_plan as ...

Fill the rows of the <Table> using HTML code

I am encountering an issue with displaying data in a table on a screen: <table id="TransactionTable" class="table table-responsive table-striped"> <thead> <tr> <th></th> <th>Date</ ...

Error in NVD3 causing charts to be inaccurately rendered

While utilizing a stacked area chart in the Stacked display mode, there appears to be an issue with the shading under the graph, particularly on the left side of the displayed plot below. We are currently working with d3 v3.4.9 and nvd3 v1.1.15b. Do you ...

Having issues initializing jQuery knob on a jQuery mobile webpage

I'm trying to implement the jquery knob plugin to showcase a circular rating system, but I'm encountering difficulties in getting it to display properly. Below is the code snippet I'm using - can someone please point out what's causing ...

How can I choose the inner HTML of an element that has a particular value using jQuery, and then store it in a variable?

Below is the specific code snippet I'm referring to: <dl class="item-options"> <dt>dt1</dt> <dd>dd1</dd> <dt>dt2</dt> <dd>ss2</dd> </dl> I am seeking a way to target dt1 bas ...

jQuery Refuses to Perform Animation

I'm facing an issue with animating a specific element using jQuery while scrolling down the page. My goal is to change the background color of the element from transparent to black, but so far, my attempts have been unsuccessful. Can someone please pr ...

What is the best method to generate a distinct identifier for individual input fields using either JavaScript or jQuery?

I have attempted to copy the table n number of times using a for loop. Unfortunately, the for loop seems to only work on the first iteration. I am aware that this is due to not having unique IDs assigned to each table. As a beginner, I am unsure how to cre ...

The transition effects between iOS5 and jquery-mobile can cause brief flickering

I have been struggling to eliminate a bothersome flickering effect on jqmobile transitions when using iOS 5. Despite trying various methods mentioned in other posts, such as -webkit-backface, I have not been able to find a complete solution. Upon closer ob ...

What is the best way to seamlessly transition layers from one location to another as the mouse exits and re-enters the window?

I have been working on refining a parallax effect to achieve a seamless transition between two positions based on where the mouse exits and enters the window. In the JSFiddle example provided, there is a slight 'pop' that I am looking to replace ...

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

Executing an Ajax request to a document containing <script> elements

Recently, I developed a sample page that effectively mimics table layout pages but without relying on the traditional mobile-unfriendly table features. The structure of the page is as follows: <html> ... <body> <div type="page" ...