javascript - How do I use submitted form values to create and style a div? -


here links site, stylesheet, , javascript.

i'm trying use submitted form values create , style div in javascript, , append next available cell in table.

more specifically, script grabs form values onsubmit, finds first available row (4 divs row), finds first available cell, creates , styles div, appends table. if has correct class , id, div should slide in others when page refreshes.

the form value indexlink url div sends to, , imagelink background-image of div.

my question is: navigating , manipulating dom properly? functions navigating table? if there obvious errors in code, i'd appreciate tips on fixing them. thanks!

oh, , css webkit compatible @ moment.

edit: here's code, sorry fluff:

html:

<!doctype html> <html> <head>     <title>project site</title>     <link rel="stylesheet" type="text/css" href="css.css">      <script type="text/javascript" src="javascript.js"></script> </head> <body> <!-- useless navbar -->      <div id="navbar">     <a class="navlink" href="http://www.netflix.com/wimovie/drinking_buddies/70272917?trkid=13462061">drinking buddies</a>      <a class="navlink" href="https://animebytes.tv/">animebytes</a>     <a class="navlink">nothing</a> </div> <!-- table containing projectdivs --> <table id="projectdivcontainer">     <tr>         <td><div class="projectdiv" id="div0">             <a class="projectdivlink" href="http://google.com"></a>             </div>         </td>            <td><div class="projectdiv" id="div1">                 <a class="projectdivlink" href="http://google.com"></a>             </div>         </td>         <td><div class="projectdiv" id="div2">                 <a class="projectdivlink" href="http://google.com"></a>             </div>           </td>      </tr> </table> <!-- div containg form used in javascript --> <div id="newprojectformcontainer">     <h4 style="text-align: center;">submit new project<h4/>     <form id="newprojectform" style="margin-left: 10px;">         project name: <input type="text" name="projectname" value=" "><br>         index link: &nbsp &nbsp &nbsp &nbsp<input type="text" name="indexlink" value=""><br>         image link: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="imagelink" value=""><br>         <input type="submit" value"submit" style="position:relative;left: 206px;">     </form>  </div>    </body> </html> <!-- hosting24 analytics code --> <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script> <!-- end of analytics code -->

css:

body {     padding: 0;     margin: 0; } #navbar {     height: 50px; width: 100%;     background: #b33030;     font-family: helvetica;      position: fixed;     z-index: 2; } .navlink {     color: white;     text-decoration: none;     position: relative;     float: left;     margin: 15px 10px 10px 10px; } .navlink:hover {     text-decoration: underline; } #projectdivcontainer {     height: 750px; width: 950px;     /*border-style: solid;     border-width: 2px;     border-color: gray; */     margin: 0px 0px 0px 0px;     overflow: hidden;     display: block;      float: left;     position: relative;     top: 51px; left: 0%;  } .projectdiv {     cursor: pointer;     height: 250px; width: 190px;     border-radius: 3px;     background-size: 190px 250px;     margin: 10px 10px 10px 10px;     box-shadow: ;      float: left;     position: relative;     top: 50px; left: 50px;      -webkit-animation: slide .75s;     -webkit-animation-timing-function: cubic-bezier(0,0,0,1);     -webkit-transition: -webkit-transform .1s ease-in-out; } .projectdiv:hover{     -webkit-transform: scale(1.1); } .projectdiv:active{     height: 250px; width: 190px;  } .projectdivlink{     display: block;     height: 250px; width: 190px;     border-radius: 3px;     background: red;     opacity: 0;  } #div0 {     background-image: url('http://www.eatbrie.com/large_posters_files/killbill13.jpg'); } #div1 {     background-image: url('http://www.impawards.com/tv/posters/mad_men_xlg.jpg'); } #div2 {     background-image: url('http://www.cigarettestime.com/gallery/default/original/20465/365px-marlboro_logo.png?1326977198'); } #div3 {     background-image: url('http://www.impawards.com/tv/posters/portlandia.jpg'); }  #newprojectformcontainer {     height: 500px; width: 300px;     margin: 0px 60px 0px 0px;      background: #b33030;     border-radius: 3px;      float: right;     position: relative;     right: 1%; top: 111px;      color: white;     font-family: helvetica; } #newprojectform{    } @-webkit-keyframes slide {     {top: 1200px;opacity: 0.01;}     {top:50px;opacity:1;}  }

javascript: 

var i=0; window.onload = function(){     document.getelementbyid('newprojectform').onsubmit = function() {      //collect form values, no use projectname yet     var projectname = document.getelementbyid('newprojectform').projectname.value;         indexlink =  document.getelementbyid('newprojectform').indexlink.value;         imagelink = document.getelementbyid('newprojectform').imagelink.value;         table = document.getelementbyid('projectdivcontainer');         console.log(projectname);         console.log(indexlink);         console.log(imagelink);          function searchrow() {             for(j=0;j<table.rows[i].cells.length;j++) {                  if(!table.rows[i].cells[j]) { //find next available cell                      //create elements cell                     var div = document.createelement('div');                         td = document.createelement('td');                         = document.createelement('a');                      //style elements , give them attributes(the form values)                     a.classname = "projectdivlink";                     a.setattribute("href", indexlink);                     div.classname = "projectdiv";                     div.setattribute("id", "div"+table.rows[i].cells.length);                     document.getelementbyid("div"+table.rows[i].cells.length).style.backgroundimage = "url(imagelink)";                     console.log(table.rows[i].cells[2]);                     //begin appending here, building cell first, div, link                     table.rows[i].appendchild(td);                     table.rows[i].cells[j].appendchild(div);                     table.rows[i].cells[j].div.appendchild(a);                  }             }         }            function searchtable() {             //begin navigating table containing projectdivs             if(table.rows[i].cells.length<5) { //check how many cells ex0ist in row                 searchrow();                 } else {                 = i+1; //move next row, begin again                 searchtable();                 }                }        } }


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more