Content Editor Webpart (2) Add JQuery and html code

Content Editor Webpart (2) Add JQuery and html code

In the previous article (Content Editor Webpart (1) referencing JQuery), we introduced how to reference JQuery in Content Editor Webpart, this article introduces how to add html and JQuery code in the Content Editor Webpart.

Follow the previous step to edit the source code of the Content Editor Webpart and enter the following code:

<div style="height: 200px;"><script type="text/javascript" src="/sites/apps/Style%20Library/jquery-1.10.2.min.js"></script><script> $(document).ready(function(){    $("#btnStr").click(function(){        $("#move").animate({left: '250px'});    });});</script><button id="btnStr" onclick="moveDiv()">Start Animation</button><p>By default, all HTML elements have a static position, and cannot be moved.       <br/>To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p><div id="move" style="height: 100px; width: 100px; position: absolute; background: #98bf21;"></div> </div>

 

After saving, it is displayed as follows:

Click Start Animation to move the green div block: