paulmo Posted April 5, 2017 Share Posted April 5, 2017 Hello, captions need to appear below each form-submitted URL image in tile fashion on the page. I'm trying various things here and it's not happening. Live example here. Thanks in advance to team W3. <!DOCTYPE html> <html> <head> <title>appendChild Gallery</title> <style> body { font-family: Sans-Serif; font-size: medium; padding: 20px; } caption: { caption-side: bottom; } </style> </head> <body> <form action="#"> URL: <input type="text" name="image" id="idImage" value="" onClick="this.select();"/> <br><br> Description: <input type="text" name="des" id="idDes" value="" onClick="this.select();"/> <br><br> <input type="button" id="btn" name="submit" value="Load" /> <br><br> </form> <script> document.getElementById('btn').onclick = function() { //image var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val, img.src = src; document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; img.style.float = "left"; img.style.margin = "0px, 50px"; //description: this is the part that needs help. var valDes = document.getElementById('idDes').value; var des = document.createElement('P'); //also tried 'CAPTION' per specs src = valDes, des.src = src; //valDes.body.appendChild(des); //error "is not a function" ?? //des.setAttribute('label', valDes); //des.setAttribute('style', 'width: 150px;'); //document.getElementById("description").appendChild(des); var tex = document.createTextNode(valDes); description.appendChild(tex); description.style.display = 'inline-block'; //description.style.position = 'absolute'; des.style.float = 'left'; des.style.width = "150px"; des.style.height = "160px"; des.style.padding = "10px"; /* integrate localStorage localStorage.setImage('idDes', valDes); localStorage.setImage("idImage", val); imgStore = localStorage.getImage("idImage"); desStore = localStorage.getImage("idDes"); img1 = document.createElement('img1'); img1.src = imgStore; //stored image //desStore.src = desStore; document.body.appendChild(img1); document.getElementById('caption2').innerHTML = document.getElementById('desStore'); */ } </script> <p id="description"></p> </body> </html> Link to comment Share on other sites More sharing options...
Ingolme Posted April 5, 2017 Share Posted April 5, 2017 I don't see an issue on the example page you showed, what is it doing now and what did you expect it to do? Link to comment Share on other sites More sharing options...
paulmo Posted April 5, 2017 Author Share Posted April 5, 2017 15 minutes ago, Ingolme said: I don't see an issue on the example page you showed, what is it doing now and what did you expect it to do? Hi, the captions need to be under (below) the images, as mentioned in first post. Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted April 5, 2017 Share Posted April 5, 2017 The image is floated to the left, so all the rest of the content will be on the right of it. You should remove the float property from the image and wrap the image and paragraph into another element. Link to comment Share on other sites More sharing options...
paulmo Posted April 5, 2017 Author Share Posted April 5, 2017 (edited) Hi, so I've removed float property and wrapped the image and paragraph into an element together, but I wouldn't know how to wrap them in another element since they're both already rendered on the page, and document.createElement only accepts 1 parameter. Anyhow, my attempt is below. Thanks for any help. document.getElementById('btn').onclick = function() { //image var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val, //must redefine img.src = src; var imgOut = document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px, 50px"; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('P'); //also tried 'CAPTION' per specs src = valDes, des.src = src; //valDes.body.appendChild(des); //error "is not a function" ?? //des.setAttribute('label', valDes); //des.setAttribute('style', 'width: 150px;'); //document.getElementById("description").appendChild(des); var tex = document.createTextNode(valDes); var texOut = description.appendChild(tex); var combine = document.createElement('imgOut'.'texOut'); //trying this idea...doesn't work. document.body.appendChild(combine); description.style.display = 'inline-block'; //description.style.position = 'absolute'; //des.style.float = 'left'; des.style.width = "150px"; des.style.height = "160px"; des.style.padding = "10px"; Edited April 5, 2017 by paulmo clarification Link to comment Share on other sites More sharing options...
Ingolme Posted April 5, 2017 Share Posted April 5, 2017 Here's how you created nested elements: /* Create a container */ var container = document.createElement("div"); /* Create children */ var image = document.createElement("img"); //... Set attributes var paragraph = document.createElement("p"); // ... Set attributes and content /* Add children to the container */ container.appendChild(image); container.appendChild(paragraph); /* Add the container to the body */ document.body.appendChild(container); 1 Link to comment Share on other sites More sharing options...
paulmo Posted April 5, 2017 Author Share Posted April 5, 2017 Updated code, same behavior. Thanks for guidance. document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val, img.src = src; img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px, 50px"; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); src = valDes, des.src = src; var tex = document.createTextNode(valDes); des.style.display = 'inline-block'; des.style.position = 'absolute'; des.style.top = '0px'; des.style.left = '0px'; //des.style.height = "150px"; //des.style.padding = "10px"; container.appendChild(img); container.appendChild(des); //also tried tex document.body.appendChild(container); Link to comment Share on other sites More sharing options...
dsonesuk Posted April 6, 2017 Share Posted April 6, 2017 (edited) des is a paragraph, but a paragraph does not have or use a src attribute? des.src = src; It is bad idea to use position: absolute; because it taken out of the flow from the other elements and it occupies no space, unless you have a parent element with position: relative thr property top will take it to the closest position relative parent element, and if none found the top edge of browser window. If I was you I would do the html first to get it how you want, apply classnames and style it to those classnames. Then create the same layout using JavaScript adding same classname, you avoid adding all individual style properties that way, as the classnames will take care of that. Edited April 6, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted April 6, 2017 Share Posted April 6, 2017 (edited) You have to append text node(tex) to des the created paragraph, then append des( which now has textnode within it) to div container Edited April 6, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
paulmo Posted April 6, 2017 Author Share Posted April 6, 2017 Thanks, same behavior with these edits: document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val, img.src = src; //document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px, 50px"; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.style.display = 'inline-block'; des.style.top = '0px'; des.style.left = '0px'; des.style.height = "160px"; des.style.padding = "10px"; des.appendChild(tex); //also tried tex.appendChild(des); container.appendChild(img); container.appendChild(des); //container.appendChild(tex); also tried this document.body.appendChild(container); Link to comment Share on other sites More sharing options...
dsonesuk Posted April 6, 2017 Share Posted April 6, 2017 (edited) Misplaced ',' instead of ' ' in margin styling, and ending semi-colon ';' for 'src = val' document.getElementById('btn').onclick = function() { var container = document.createElement("div"); container.style.maxWidth = "270px"; /* just for testing purposes dsonesuk*/ container.style.backgroundColor = "red"; /* just for testing purposes dsonesuk*/ container.style.display = "inline-block"; /* just for testing purposes dsonesuk*/ container.style.verticalAlign = "top"; /* just for testing purposes dsonesuk*/ //image var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val; /* replaced ',' with ';' dsonesuk */ img.src = src; //document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px 50px"; /* removed ',' dsonesuk*/ //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.style.display = 'block'; des.style.backgroundColor = "green"; /* just for testing purposes dsonesuk*/ /* des.style.top = '0px'; des.style.left = '0px'; removed because obsolete without position used dsonesuk*/ des.style.height = "160px"; des.style.padding = "10px"; des.appendChild(tex); //also tried tex.appendChild(des); container.appendChild(img); container.appendChild(des); //container.appendChild(tex); also tried this document.body.appendChild(container); }; With css and class Name <style type="text/css"> .img_descrip_wrap { display: inline-block; max-width: 270px; vertical-align: top; } .img_descrip_wrap img {width:150px; height: 150px; padding:10px; margin: 0 50px; display: block;} </style> document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); container.className = "img_descrip_wrap"; var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val; img.src = src; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.appendChild(tex); container.appendChild(img); container.appendChild(des); document.body.appendChild(container); }; Edited April 6, 2017 by dsonesuk 1 Link to comment Share on other sites More sharing options...
paulmo Posted April 6, 2017 Author Share Posted April 6, 2017 Thanks so much! It's working great with your revision, and I'll play with the background color section. Question please: can commented sections /* */ and // interfere with code executing? Because code wasn't executing until I deleted those sections. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 6, 2017 Share Posted April 6, 2017 It shouldn't if done correctly, you may have an instance where part of code got caught by the commenting, but a good editor would show that, and should have highlighted your previous errors. Link to comment Share on other sites More sharing options...
paulmo Posted April 7, 2017 Author Share Posted April 7, 2017 gedit doesn't show much in the way of errors, I'm using Chrome(ium) developer console which shows everything. What's the preferred editor here? Thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2017 Share Posted April 7, 2017 I use Netbeans, because its not limited to just 1 or two server languages, but several, including frameworks Zend, smarty, Laravel, Java etc, It gives you traffic light indication to highlight errors in red and warnings in amber, it gives hints, in indicates what closing braces elements belong to. There is also Sublime, but I found Netbeans gives me what I want, and the ability to add more if I want. 1 Link to comment Share on other sites More sharing options...
paulmo Posted April 7, 2017 Author Share Posted April 7, 2017 (edited) Thanks, researching options, I just installed Visual Studio Code and already enjoying auto-completion. Edited April 8, 2017 by paulmo clarity Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now