Lesson 8 Changing Your Style


#1


https://www.codecademy.com/courses/web-beginner-en-v6phg/1/3?curriculum_id=50a3fad8c7a770b5fd0007a1#

My code is working. But I have a query! I had to use the event handler for border radius because the lesson was telling me it didn't recognise radius as an element. It seems like the heifen was causing trouble so I did border radius differently to height and width. I have three questions:

Why in the hint does it tell us to leave out the handler?
Does putting in the handler delay the change?
If there is a heife in my css element do I always have to code it this way in jQuery or am I missing something?

Thanks

$(document).ready(function() {
    $("div").height("200px");
    $("div").width("200px");
    $("div").css("border-radius","10px");
});


#2

The event in question is 'DOMContentLoaded', which triggers the ready() handler. If the script is loaded after the HTML, (at end of <body>) then we don't need to listen for that event. In other words,

$("div").height("200px");
$("div").width("200px");
$("div").css("border-radius","10px");

would take effect on all <div> elements in the page.

Only if the script is in the HEAD element, before the BODY. Script in the head will execute immediately, before the body element is populated. That is why the delay (deferral) is needed. We cannot act upon elements that do not yet exist. The script will run and nothing will happen.

This is a version that does not require deferral:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Result</title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  </head>
  <body>
    <div></div> 
    <script type='text/javascript' src='script.js'></script>  
  </body>
</html>

JS

$('div')
    .height('200')
    .width('200')
    .css('borderRadius', '10px');

Note that the first two methods have optional units, and default to px when none is given.

hyphen

In the jQuery .css() method we have two choices for writing the CSS property name, in quotes with the hyphen, as you have written it, and using JS style property names, 'borderRadius' (see above example).

When using only the parens to enclose the style property, only one can be given. Any others will be ignored. To write multiple properties with this method we need a declaration block (note the commas where semi-colons would normally be):

$('div').css({
    height: '200px', 
    width: '200px',
    borderRadius: '10px'
});

#3

Thank You! That is a really clear answer!


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.