What other technique can I use to replace the creation of a jquery division?

Question

What other technique can I use to replace the creation of a jquery division?

I`m relatively new to all things related to web technologies and I am currently practicing and learning about them.

On my practice page, I've experimented with various elements, including changing div heights based on the viewport height. Here's an example:

<script>
<!--
 document.write('<div class=\"head\" id=\"head\" style=\"height:'+viewportheight/6+'px\">');
//-->
</script>
</div>

I realize that this code is not ideal, but it gets the job done. However, I've encountered issues with using the .css method in jQuery. Even after including the jQuery library, the following code doesn't seem to work:

$( 'body' ).css( {
    'width'   : viewportwidth + 'px',
    'height'  : viewportheight + 'px'
} );

I have confirmed that the variables for height and width contain valid values by outputting them using document.write(). I have also tried using constant values but to no avail.

Could you please provide guidance on how to create divs with dynamic values without needing a script tag each time, or how to properly utilize the .css method in this context?

Thank you and happy holidays!

javascript jquery html css

Answer 1

Answer №1

My new practice page features various elements designed to adjust the height of a div based on the viewport height.

Why resort to jQuery or Javascript for this task? You can easily achieve this with CSS alone:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
 /* add styles here
 ...
*/
}

In the realm of Web development, all HTML styling can be accomplished using jQuery or JavaScript, as well as CSS. However, utilizing them for basic styling or viewport adjustments can be excessive, akin to using a missile instead of a gun to achieve your goal.

Further reading available here:

EDIT: (for width)

To gain insight into the functionality of media queries, refer to this example on JSFiddle

@media screen and (max-width: 1500px) {
    body {
        background: grey;
        border-top: 2px solid #DDDDDD;
    }
}
@media screen and (max-width: 800px) {
    body {
        background: red;
        border-top: 2px solid #DDDDDD;
    }
}
@media screen and (max-width: 400px) {
    body {
        background: black;
        border-top: 2px solid #DDDDDD;
    }
}

Adjust the browser viewport width to observe the color changes of the body...similarly, you can apply different styles to various div elements.

EDIT (for height)

View the demonstration here

html, body {
    /* apply universal styling */
    background-color: grey;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
@media (max-height: 600px) {
    body {
        background-color: red;
    }
    @media (max-height: 400px) {
        body {
            background-color: yellow;
        }
        @media (max-height: 200px) {
            body {
                background-color: black;
            }
        }

Answer 2

My new practice page features various elements designed to adjust the height of a div based on the viewport height.

Why resort to jQuery or Javascript for this task? You can easily achieve this with CSS alone:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
 /* add styles here
 ...
*/
}

In the realm of Web development, all HTML styling can be accomplished using jQuery or JavaScript, as well as CSS. However, utilizing them for basic styling or viewport adjustments can be excessive, akin to using a missile instead of a gun to achieve your goal.

Further reading available here:

EDIT: (for width)

To gain insight into the functionality of media queries, refer to this example on JSFiddle

@media screen and (max-width: 1500px) {
    body {
        background: grey;
        border-top: 2px solid #DDDDDD;
    }
}
@media screen and (max-width: 800px) {
    body {
        background: red;
        border-top: 2px solid #DDDDDD;
    }
}
@media screen and (max-width: 400px) {
    body {
        background: black;
        border-top: 2px solid #DDDDDD;
    }
}

Adjust the browser viewport width to observe the color changes of the body...similarly, you can apply different styles to various div elements.

EDIT (for height)

View the demonstration here

html, body {
    /* apply universal styling */
    background-color: grey;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
@media (max-height: 600px) {
    body {
        background-color: red;
    }
    @media (max-height: 400px) {
        body {
            background-color: yellow;
        }
        @media (max-height: 200px) {
            body {
                background-color: black;
            }
        }

Answer 3

Answer №2

What do you think of this solution?

Javascript:

This code snippet targets an element with the id mydiv and adjusts its height to 500 pixels.

document.getElementById('mydiv').style.height="500px";

HTML:

 <div id="mydiv">My div!!</div>

Check out the demonstration on this JSFiddle link

Answer 4

What do you think of this solution?

Javascript:

This code snippet targets an element with the id mydiv and adjusts its height to 500 pixels.

document.getElementById('mydiv').style.height="500px";

HTML:

 <div id="mydiv">My div!!</div>

Check out the demonstration on this JSFiddle link

What other technique can I use to replace the creation of a jquery division?

Answer №1

Answer №2

Similar questions

I'm experiencing an issue with res.redirect() as it is not directing me to the expected page. Despite no errors being shown, I am left wondering what

Exploring the different routing options for Nuxt.js: Dynamic versus Basic Routing

Django: Error - < found where unexpected

The onSubmit event handler seems to be malfunctioning within a Reactjs form

What steps can be taken to prevent a wrapper's CSS from affecting its enclosed elements?

Error: The callback specified is not a valid function

Iterate over the MVC model and deliver the results

Display the date that is 3 days after the selected date from the Date Picker in the text field

Tips on incorporating Prisma model into prisma-offset-pagination

Combining switch statements from various classes

After receiving the response, the Ajax success function does not run as expected

Inquiring about design layout for an iPhone application incorporating CSS, jQuery, and JQTouch

The cursor seems to be playing a game of hopscotch every time I

Is it possible to adjust the height of the dropdown menu in a mat-select component in Angular 7?

Is there a way to remove specific mesh elements from a scene in Unity?

Exploring the power of colors in Tailwind CSS and Material UI for your CSS/SCSS styling

Using Unobtrusive Ajax, learn to integrate data-ajax-confirm with sweetalert

Steps to Utilize Google Apps Script from a Website

Uploading base64 arrays from AngularJS to a Node.js server: Allowing Access-Control-Origin

Vue.js - Trouble with Rendering Elements