Trying out jQuery Exercises in Brackets


#1


If there is a better place to post these slightly related topics please let me know and I'll head there from now on :slight_smile:

I've downloaded the Brackets text editor and I'm trying to move examples off the site to try from scratch.

Issue:

Putting in the following code in the Brackets editor results in the div disappearing then reappearing right away. Whereas in exercise 1.1 of the jQuery course, the div only disappears. Does Code Academy have any extra code hidden from view? Or is it something on my end/with Brackets?

I'm using Live Preview mode in Brackets, and trying it on both Chrome and Firefox.


// In the HTML file
<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
      <link href="/style.css" type="text/css" rel="stylesheet">
      <script src="jquery-3.2.1.js"></script>
      <script src="script.js" type="text/javascript"></script>
  </head>
    
  <body>
    <h1>Hello World!</h1>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="yellow"></div>
    <div id="green"></div>
  </body>
</html>

// In the script.js file---------------------------------------------------

$(document).ready(function() {
   $('div').mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       });
   });
   $('div').mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       }); 
   });
   $('div').click(function() {
       $(this).toggle(1000);
   }); 
});

// In the CSS file-------------------------------------------------

div {
    height:100px;
    width:100px;
    display: inline-block;
}

#red {
    background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}


#2

This is looking at the root of your local volume. If the file is in the directory as your index.html, script.js and jQuery files, then remove the leading /.


#3

I read about that earlier, tried both ways without any change to the issue. I will make sure my section avoid the / since all 4 files are within the same folder.

<head>
    <title>My First Page</title>
      <link href="style.css" type="text/css" rel="stylesheet">
      <script src="jquery-3.2.1.js"></script>
      <script  type="text/javascript" src="script.js"></script>
</head>

I'm viewing my site without Live Preview now, so it should look exactly the same no matter what code editor I wrote the stuff above in. Still have the issue of no permanent toggle.


#4

Please post a link to the lesson you are emulating. Thanks.


#5

Oh sorry! I thought I posted it.

  1. See It to Believe It
    https://www.codecademy.com/en/courses/web-beginner-en-bay3D/0/1?curriculum_id=50a3fad8c7a770b5fd0007a1.

Is it possible that my issue could be caused my running a local testing server? There are some issues posted in this Mozilla article about local hosting. Problem is that this starts getting beyond my knowledge of terminology.


#6

It should not be an issue using a local testing server. The issue in your case is there is nothing to receive the restore click once the div is removed. Below is an example that gets around this problem. The code is quite a bit different from yours, but there may be some things you can spot that relate directly back to it.

function attention(){
    $(this).animate({
        height: '+=10px'
    });
}
function atEase(){
    $(this).animate({
        height: '-=10px'
    });
} 
function toggleEl(){
    $(this).toggle(500);
}
function toggleSibs(){
    $(this).siblings().slideToggle(500);
}
function init(){
    $d = $('div');
    $d.hover(attention,atEase);
    $d.eq(0).siblings().click(toggleEl);
    $d.eq(0).click(toggleSibs);
}
$(init);

In the above, the first div never toggles. Clicking it toggles all siblings; click again and it toggles them back. Note the difference in behavior of toggle and slideToggle.

To return to your code...

$(document).ready(function() {
   $('div').mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       }).mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       }).click(function() {
           $(this).toggle(1000);
       }); 
   }); 
});

The above demonstrates method chaining. Since the context object is any DIV, we only need to the one jQuery object.


#7

Very cool approach! Haven't yet encountered functions on their own such as this. I've put this into my script.js file and try to get a feel for this. A lot of this makes sense.

My earlier approach was to make 4 buttons below each colored div, then adding:

$(document).ready(function() {
    $('#green-btn').on('click', function() {
        $('#green').toggle(1000);
    });
    $('#red-btn').on('click', function() {
        $('#red').toggle(1000);
    });
    $('#blue-btn').on('click', function() {
        $('#blue').toggle(1000);
    });
    $('#yellow-btn').on('click', function() {
        $('#yellow').toggle(1000);
    });
});

I guess it was the most brute force approach to remove a selected div with a click, and without having it come back right away.

I'm still confused as to why the course exercise posted above (The 1.1 Exercise) has no visible code to account for this issue. Is it addressed similarly to your answer and just not visible to the user?

As always, thanks a lot for your time mtf. Very helpful stuff.


#8

My code goes well beyond the normal constraints of the lesson, which are best acknowledged until the concepts are clear. Stick to the lesson plan as closely as possible and resolve any issues without looking for cool solutions. Once you pass the lesson, continue through the track and come back later for more practice. That is the time to explore other methodology, such as the functional approach. It's very important that you recognize the basic approach, the basic syntax, and get a feel for the jQuery methods.

Below I'll try to give some insight into my code...

$(document).ready(function () {});

My code uses the shorthand for the above...

$()

The idea here is to pass a callback to jQuery, which it will automatically defer until the DOM content is loaded. The callback is init, which as you can see is a function.

My function handles the initialization:

  1. $d is a jQuery object in memory, where it remains for the entire session so we never have to query it again. It is a node list of all the DIV elements in the page.
  2. $d.hover() is a method that takes two functions (which if you haven't encountered yet, you will very shortly). We can replace the anonymous functions in the handler with two callbacks.
  3. $d.eq(0).siblings().click(toggleEl); uses the jQuery method, eq to grab the siblings of the first node in the node list. They all get a click event binding in one stroke. The handler function is replaced with a callback.
  4. $d.eq(0).click(toggleSibs); hooks the first node and binds a click event listener. As above, the anonymous function is replaced with a callback.

#9

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