How to make jQuery effects work outside of codecademy


#1

This is a general issue, that i think is being neglected in the tutorials...

I am trying to make the described examples work on my machine (real html documents) but they just wont work...

For example the ".selectable()" function :

I have my css & js files properly linked to my html but $('ol').selectable() wont work
( I have the exact html, css and js files as shown in the example )

Thanks in advance!


#2

Hey,

Can you show me your code


#3

Did you use a <link> to the most recent version of jQuery?


#4

you mean: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> , right?

and i have this:

<link rel='stylesheet' type='text/css' href='stylesheet.css'/>


#5

Your code is not visible. Please enclose the tags in backticks (`).


#6

< !DOCTYPE html>
< html>
< head>
< title>Behold!

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>


</head>
<body>
     <ol>
        <li>Super Mario Bros.</li>
        <li>Tetris</li>
        <li>Legend of Zelda: Link's Awakening</li>
        <li>Kirby's Dream World</li>
        <li>Burger Time</li>
        <li>Pokémon Red</li>
        <li>Pokémon Blue</li>
    </ol>   
</body>

div {
height:100px;
width:100px;
background-color:#FF0000;
border-radius:5px;
}

ol {
list-style-type: none;
position: relative;
left: -20px;
}

ol li {
background: #eeeeee;
border-radius: 5px;
border: 1px solid black;
margin: 3px;
padding: 0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
}

ol .ui-selected {
background: #F39814; color: white;
}

$(document).ready(function() {

$('ol').selectable()

});


#7

ok , i might have found it myself:

i need to add jquery ui also:

< script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">