7/14 Outside of Codecademy


#1

I tried to use the code outside of Codecademy. I copied and pasted the same exact code and pointed all the links in the right directions on my server. I can see the car in my browser but I can't move it. The HTML and CSS code works fine but not the jQuery. Does anyone have idea why? Thanks.


#2

Did it move before you copy and pasted it?


#3

Hi Mark,

I think the issue may be your link to jQuery starting off with //, when it should be http(s):// :)
If that's not it, would you mind posting and formatting your code?
You can format code by pressing Ctrl/Cmd + Shift + C or adding a new line and three backticks before and after your code, like this:

 
```
<code> will show up here
```

#4

It worked in Codecademy, yes.


#5

Then you must have miss copied and pasted it or the place that you are putting it isn't allowing you to make it move.


#6
 HTML

   <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title></title>
            <link rel='stylesheet' type='text/css' href='http://lemoinemark.net/css/car.css'/>
            <script type='text/javascript' src='http://lemoinemark.net/js/car.js'></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    	</head>
    	<body>
            <div id="car">
                <div id="top"></div>
                <div id="bottom"></div>
                <div id="fwheel"></div>
                <div id="bwheel"></div>
            </div>   
    	</body>
    </html>

CSS

    #top {
        position: relative;
        height: 50px;
        width: 50px;
        border-radius: 5px;
        background-color: #cc0000;
        left: 25px;
    }
    #bottom {
    	position: relative;
    	height:25px;
    	width: 100px;
    	background-color: #cc0000;
    	border-top-left-radius: 5px;
    	border-top-right-radius: 5px;
    	top: -25px;
    }
    #fwheel {
    	position: relative;
    	height:20px;
    	width:20px;
    	border-radius: 100%;
    	background-color: black;
    	top: -35px;
    	left: 5px;
    }
    #bwheel {
    	position: relative;
    	height:20px;
    	width:20px;
    	border-radius: 100%;
    	background-color: black;
    	top: -55px;
    	left: 75px;
    }

JS

$(document).ready(function(){
$("#car").draggable()
});


#8

@malmn You need to link to your script.js after the external scripts. <head> should look like roughly this:

<head>
  <meta charset="utf-8">
  
  <title>Page title</title>
  
  <link rel="stylesheet" href="http://lemoinemark.net/css/car.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  
          <!-- ↓ jquery has to come first for jquery ui to work-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
          <!-- ↑ then jquery ui comes... -->
  <script src="http://lemoinemark.net/js/car.js"></script>
          <!-- ↑ and finally, `car.js` -->
</head>

#9

Ok, thank you. I will give it a try.


#10

It works! Thank you very much! I learned something today. :wink:


#11