Combining CSS, jQuery, and HTML into a single .html file would allow for seamless integration

Question

Combining CSS, jQuery, and HTML into a single .html file would allow for seamless integration

I've been searching extensively, but I haven't been able to locate exactly what I need. My goal is to merge my jQuery and CSS into a single .html file, but I'm struggling to get the jQuery functionality to work. Although I have experience with coding, I am relatively new to jQuery. Here is the code I have been working on:

http://jsfiddle.net/b63nLkfa/1/

<div class=aboutMe>aboutMe</div>

<style>
    .bodyAmendment{
        width:100px;
    }
    .aboutMe{
        background-color: #CCCCCC;
        height:250px;
        width:200px;
        color: white;
        font-size:32px;
    }
</style>

<script src="jquery-1.11.2.js"></script>
<script>
    $(document).ready(function() {
        $('.aboutMe').click(function() {
            $(this).toggleClass('bodyAmendment');
        });
    });
</script>

My ultimate objective is to switch between classes upon clicking (essentially adjusting the width of the div).

javascript jquery html css

Answer 1

Answer №1

It appears that you forgot to include jQuery from the jsfiddle sidebar. Please make sure to add

<script src="jquery-1.11.2.js"></script>

or you can also use

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

For your convenience, here is the updated link.

Answer 2

It appears that you forgot to include jQuery from the jsfiddle sidebar. Please make sure to add

<script src="jquery-1.11.2.js"></script>

or you can also use

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

For your convenience, here is the updated link.

Answer 3

Answer №2

Both description and noteAddition each have a specific height set. When using the modifyHeight() function, the class is appended, resulting in

<div class="description noteAddition">

. The CSS rule height: 150px takes precedence, giving the impression that no changes are being made. Consider trying

.noteAddition{
    height: 200px !important;
}

or a different combination to avoid duplicating the same property in both classes.

Answer 4

Both description and noteAddition each have a specific height set. When using the modifyHeight() function, the class is appended, resulting in

<div class="description noteAddition">

. The CSS rule height: 150px takes precedence, giving the impression that no changes are being made. Consider trying

.noteAddition{
    height: 200px !important;
}

or a different combination to avoid duplicating the same property in both classes.

Answer 5

Answer №3

http://jsfiddle.net/e98fPtzq/2/

.introSection{
    background-color: #AABBCC;
    height:300px;
    width:250px;
    color: black;
    font-size:28px;
}
.contentUpdate{
     width:150px;
}

Your issue involves managing css priorities. I recommend reviewing my fiddle and using tools like firebug for assistance. Don't forget to prioritize this step.

Answer 6

http://jsfiddle.net/e98fPtzq/2/

.introSection{
    background-color: #AABBCC;
    height:300px;
    width:250px;
    color: black;
    font-size:28px;
}
.contentUpdate{
     width:150px;
}

Your issue involves managing css priorities. I recommend reviewing my fiddle and using tools like firebug for assistance. Don't forget to prioritize this step.

Answer 7

Answer №4

Your fiddle is missing jQuery, causing your code to not function properly. Additionally, in CSS, the last rule added will have priority, regardless of the order in which the classes were added.

.test2 {
    width: 100px;
    background-color: #F00;
}

.test1 {
    width: 200px;
    background-color: #F00;
}

HTML

<div class="test1">This is 200px</div>
<div class="test1 test2">This is also 200px!</div>
<div class="test2">This is 100px</div>

CSS rules cascade downwards in the document, with each subsequent rule taking precedence over the previous ones.

http://jsfiddle.net/b63nLkfa/21/

Answer 8

Your fiddle is missing jQuery, causing your code to not function properly. Additionally, in CSS, the last rule added will have priority, regardless of the order in which the classes were added.

.test2 {
    width: 100px;
    background-color: #F00;
}

.test1 {
    width: 200px;
    background-color: #F00;
}

HTML

<div class="test1">This is 200px</div>
<div class="test1 test2">This is also 200px!</div>
<div class="test2">This is 100px</div>

CSS rules cascade downwards in the document, with each subsequent rule taking precedence over the previous ones.

http://jsfiddle.net/b63nLkfa/21/

Answer 9

Answer №5

My usual practice involves using .php files and including all my script calls in one file named js.php.

<? include "includes/js.php"; ?>

This method simplifies the process of updating an entire website from a single file.

Answer 10

My usual practice involves using .php files and including all my script calls in one file named js.php.

<? include "includes/js.php"; ?>

This method simplifies the process of updating an entire website from a single file.

Answer 11

Answer №6

attempt

<div class="personalDetails">personalDetails</div>

on occasion the " " play a crucial role

Answer 12

attempt

<div class="personalDetails">personalDetails</div>

on occasion the " " play a crucial role

Combining CSS, jQuery, and HTML into a single .html file would allow for seamless integration

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The focus functionality in Angular seems to be malfunctioning

Assign a value to the Angular directive for the SharePoint People Picker

Receiving the latest global variable in JavaScript using jQuery

"if the condition is not met, the outcome will not be shown in the while

Encountering an Internal Server error with Mongoose in Node.js

Automatically remove the entered data

Display a dropdown list using ng-repeat to prevent selecting the same value multiple times

JavaScript client side event that references the sender object ID in an aspx file

Validation of user input alongside input masking using jQuery

Is there a way to prevent the text box from expanding beyond the small breakpoint?

Tips on getting your card to stay at the top

Identifying touchscreen capability through media queries

In Chrome, the `Jquery $('input[name=""]').change(function will not be triggered unless there is an unhandled error following it

"Uncovering the ways iOS disrupts background-size functionality

Ways to restart script following Ajax call when additional search results are loaded

The pipe property cannot be accessed for the specified type "OperatorFunction<unknown, [unknown, boolean, any]>"

Getting an Array of all values in <th> using jQuery

working with the express locals function

Error: Angular2 RC5 | Router unable to find any matching routes

Align the ion content (or text or label) to the center vertically