Using jQuery with Codenvy

Create a Jquery application using our Factory:

 

Codenvy supports JavaScript, HTML and a cross-browser JavaScript library jQuery. To use this library in your Codenvy projects, you’ll need to download jQuery from the official site, upload it to your HTML/JavaScript project, refer to jQuery.js from HTML file, and of course, use jQuery syntax. Below is an example:

  • create a simple JS project (use create a new project wizard and delete js file from there)
  • download jQuery from an official site
  • upload jQuery library to your project root folder (File > Upload File)

jquery

  • paste the following content into HTML file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var bt = true;
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
  $(this).html( "Click to fade " + ( ( bt =! bt ) ? "in" : "out" ) );
});
});
</script>
</head>
<body>
<p>Simple jQuery Toggle() example</p>
<button>Click to fade in/out boxes</button>
<div id="div1" style="width:300px;height:120px;background:url(http://docs.codenvy.com/wp-content/uploads/img1.png);"></div>
<br>
<div id="div2" style="width:300px;height:120px;background:url(http://docs.codenvy.com/wp-content/uploads/img2.png);"></div>
<br>
<div id="div3" style="width:300px;height:120px;background:url(http://docs.codenvy.com/wp-content/uploads/img3.gif);"></div>

</body>
</html>

Simple jQuery Toggle() example