Create Dynamic Type Utilizing JQuery and CSS
On this publish you’ll study to create Dynamic Type utilizing JQuery and CSS.
- Html file – index.html On this file, a div is assigned to a kind.
|
1 |
<!DOCTYPE html><html><head><title>Create Dynamic Type Utilizing jQuery and CSS</title><link href="style.css" rel="stylesheet"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="jquery.js"></script></head><body><div id="container"><h2>Dynamically Created Type Utilizing jQuery</h2><div id="form1"><!-- Dynamic Form Div --></div></div></body></html> |
- Css file – type.css Right here, feel and appear of the shape is optimized utilizing css.
|
1 |
@import "http://fonts.googleapis.com/css?household=Raleway";div#form1{width:250px;peak:430px;border:2px strong #a5a5a5;padding:20px;background-color:#f3f3f3;border-radius:3px;float:left;text-align:middle;margin-left:100px;margin-top:50px}h3,p{text-align:middle;font-family:'Raleway',sans-serif;shade:#006400}enter{width:100%;margin:10px 0;padding:5px;peak:35px;box-shadow:1px 1px 1px 1px grey;border-radius:3px}enter#submit{width:100%;margin:10px 15px 10px 0;padding:5px;background-color:#3fb8e8;box-shadow:Zero 3px Zero 0 #3293ba;border-radius:3px;shade:#fff;peak:41px;font-size:16px}textarea{margin:10px 0;padding:5px;box-shadow:1px 1px 1px 1px grey;border-radius:3px}div#container{margin:50px auto;width:960px}h2{font-family:'Raleway',sans-serif;shade:#006400;text-shadow:1px 1px 1px grey} |
- jQuery file – jquery.js Right here, kind parts are appended in a kind utilizing jQuery script.
|
1 |
$(doc).prepared(perform() {$("div#form1").append(// Creating Type Div and Including <h2> and <p> Paragraph Tag in it.$("</p></h2><h3></h3>").textual content("Contact Type"), $("<p></p>").textual content("That is my kind. Please fill it out. It is superior!"), $("<form></form>", {motion: '#',technique: '#'}).append(// Create <form> Tag and Appending in HTML Div form1.$("<input>", {sort: 'textual content',id: 'vname',identify: 'identify',placeholder: 'Your Identify'}), // Creating Enter Component With Attribute.$("<input>", {sort: 'textual content',id: 'vemail',identify: 'e mail',placeholder: 'Your Electronic mail'}), $("<textarea></textarea></form> |
