Fmdpa Posted June 28, 2010 Share Posted June 28, 2010 I finally got fluent enough in javascript to write a significant script (significant to me, anyway). I know it’s pretty simple, but I’m proud of it. It’s sort of the same concept as the lightbox script (have a div that pops up in the center, and the background’s opacity lowers), but I’m using it for a contact form. Of course it’s not as streamlined as lightbox (all the fades and stuff). The reason I posted this is because I want to know if there is a more efficient way to do any of this, or any improvements I could make? See post below Link to comment Share on other sites More sharing options...
boen_robot Posted June 28, 2010 Share Posted June 28, 2010 Could you possibly give a link? It's much easier to suggest judging interactive stuff when you can experience the interactivity. Link to comment Share on other sites More sharing options...
Fmdpa Posted June 29, 2010 Author Share Posted June 29, 2010 Here's a demo file. I tried to minimize the number of images so you'll get less alt text. Just paste it into a notepad doc and save it as sample.html (or .htm): <!DOCTYPE HTML><html><head><title>Contact form</title><script type="text/javascript">function hide(){document.getElementById("contact").style.visibility="hidden";}//displays the contact form and dims the background (all other divs)function contact(){document.getElementById("menu").style.opacity="0.15";document.getElementById("menu").style.filter = "alpha(opacity=15)";document.getElementById("contact").style.visibility="visible";document.getElementById("contact").style.position="fixed";}/*confirmation to close the contact form; if true, the form is hidden, and the background returns to full opacity.*/ function recover(){var r=confirm("Do you want to close this contact form?")if (r==true){document.getElementById("menu").style.opacity="1";document.getElementById("menu").style.filter = "alpha(opacity=100)";document.getElementById("contact").style.visibility="hidden";}//if confirmation returns false, then do nothingelse{return false;}}//focus textbox effectsfunction input(x){document.getElementById(x).style.background='url("GIF/focus.gif")';}//blur tb effectsfunction inputblur(x){document.getElementById(x).style.background='url("GIF/blur.gif")';}</script><style type="text/css">body { background:#000000; color:#ffffff; }.menu { width:960px; height:900px; margin: 0 auto; overflow:hidden; border:1px solid #333; background: #000000 no-repeat center top;} .contact { height:520px; width:610px; position:absolute; left:400px; top:50px; background-color:#0b0b0b; border:1px solid #333333; z-index:4; box-shadow: 20px 30px 50px #000000; -moz-box-shadow: 20px 30px 50px #000000; } p { width:700px; text-align:justify; margin:0 auto; } h3.title { color:#fff; position:relative; padding-left:20px; } .tb { position:relative; left:120px; background:none; border:1px solid #333333; color:#e7e7e7; font-size:110%; font-family:Vani; text-shadow: 2px 0px 9px #fff;}</style></head><body onload="hide()"><div id="menu" class="menu"><h2 style="cursor:hand; border-bottom:1px dotted #333; text-align:center;" onclick="contact()">Click to contact:</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas tincidunt ornare. Nunc tristique, libero vitae laoreet fringilla, dui turpis facilisis lectus, vitae ultricies odio risus molestie enim. Aliquam mollis consequat libero, feugiat dictum urna sollicitudin sit amet. Donec venenatis volutpat ante nec bibendum. Etiam sed lectus sit amet ligula fermentum posuere. Nullam elementum bibendum eros sed mollis. Etiam placerat varius est, vitae ultricies dui bibendum sed. Nam non cursus dolor. Nunc volutpat, neque vitae convallis malesuada, enim risus volutpat elit, eu egestas ante felis auctor est. Cras est augue, condimentum a faucibus et, consequat consectetur turpis. Nullam elit augue, accumsan vitae fringilla id, euismod dignissim felis. Nullam semper egestas erat sed luctus. Nulla lobortis risus id nulla posuere eu mattis enim feugiat. Donec eros sapien, egestas iaculis molestie et, tristique quis lacus. Sed et dolor vitae augue tincidunt molestie. Vivamus iaculis leo ut dolor congue tincidunt. Phasellus magna augue, hendrerit ut auctor eu, venenatis aliquam mi.</p><br/><br/><p>Ut sit amet leo ac risus tristique convallis malesuada ac libero. Mauris porttitor euismod est, nec fringilla nisl molestie in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ut sapien ac tortor pulvinar hendrerit eget quis massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean placerat pellentesque mollis. Proin sodales mi eu est imperdiet in venenatis nunc cursus. Etiam id augue nisl. Quisque tempor sapien ut nibh auctor at bibendum mi fermentum. Proin eleifend odio ac justo hendrerit vestibulum. Etiam fringilla urna vel orci dignissim sed consectetur metus posuere. Curabitur pellentesque lorem at neque aliquet et pulvinar erat dapibus. Vestibulum suscipit libero porta dui ullamcorper ac hendrerit velit faucibus. Nam nulla nisl, imperdiet sed interdum a, vehicula sed mauris. Duis quis urna ac ante interdum mattis.</p><br/><br/><p>Ut sodales bibendum venenatis. Aliquam erat volutpat. In quis dolor arcu. Proin in ipsum metus, quis porttitor diam. Curabitur condimentum ante vel ipsum aliquam molestie. Nullam nec eros at erat ullamcorper porta in sit amet nisi. Phasellus ullamcorper tincidunt nisl, tincidunt pretium neque fringilla at. In malesuada dui vitae orci tristique tempor. Etiam pretium consequat arcu quis aliquam. In neque lectus, pharetra eget laoreet vel, ornare ut risus. Aenean eleifend tincidunt felis ultrices convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam molestie tortor est, at dignissim diam. Sed et gravida nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse aliquet quam sodales urna viverra vitae accumsan mi lacinia. Maecenas iaculis tempus lectus nec cursus. Nunc euismod quam quis magna rhoncus quis scelerisque nisl fringilla.</p><br/><p>Suspendisse potenti. Maecenas condimentum molestie tempor. Duis ut auctor arcu. Sed blandit purus sit amet lacus interdum porta malesuada nibh tempus. In sit amet metus nec leo euismod lobortis. Suspendisse ut ante nisl, ac facilisis ante. Praesent id nisi lacus. In dignissim vulputate mattis. Nunc sem metus, dignissim quis varius nec, iaculis sit amet lectus. Pellentesque sed lectus mauris, id consectetur enim. In hac habitasse platea dictumst. Donec vehicula, metus eget ultricies bibendum, libero velit consectetur ante, nec blandit mauris justo at orci. Proin volutpat ligula nec mauris facilisis vestibulum sodales libero commodo. Donec in metus a sem posuere iaculis. Pellentesque nec nibh ac enim porttitor porta. In purus urna, varius ac ultricies in, mollis a tortor. Integer blandit massa nec sapien posuere imperdiet. Cras et mauris et neque porttitor interdum.</p></div><div class="contact" id="contact" style="z-index:10;"><h2 style="color:white; position:relative; text-align:center;">—Contact form—</h2><p style="font-size:115%; color:red; position:relative; top:-20px; left:229px;">All fields are required</p><form name="form1" method="post" action="send_contact.php" onsubmit="return vForm(document.form1);"><h3 class="title">Subject:</h3><input style="top:-40px;" name="subject" class="tb" onfocus="input(this.id)" onblur="inputblur(this.id)" type="text" id="subject" size="32"><h3 class="title" style="top:-35px;">Message:</h3><textarea style="top:-75px;" name="detail" class="tb" onfocus="input(this.id)" onblur="inputblur(this.id)" cols="32" rows="5" id="detail"></textarea><h3 class="title" style="top:-70px;">Name:</h3><input style="top:-110px;" name="name" class="tb" onfocus="input(this.id)" onblur="inputblur(this.id)" type="text" id="name" size="32"><h3 class="title" style="top:-110px;">Email:</h3><input style="top:-150px;" name="customer_mail" class="tb" onfocus="input(this.id)" onblur="inputblur(this.id)" type="text" id="customer_mail" size="32"><input type="reset" style="cursor:hand; position:relative; left:-30px; top:-105px;" alt="reset" title="Reset" name="Submit2" value="Reset"><input style="cursor:hand; position:relative; left:-20px; top:-105px;" alt="submit" title="Submit e-mail" type="submit" name="Submit" value="Submit"></form><input type="image" src="GIF/close.gif" style="height:35px; width:43px; border:0px; opacity:0.5; filter:alpha(opacity=50); color:white; position:relative; left:35px; top:-580px; cursor:hand;" title="Close" alt="close" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onclick="recover()"></div></body></html> Link to comment Share on other sites More sharing options...
Fmdpa Posted June 29, 2010 Author Share Posted June 29, 2010 One thing I just did to make it easier to add to pages is to change the function call from <body onload="hide()"> to window.onload = function() {hide()}; in the JS. Link to comment Share on other sites More sharing options...
boen_robot Posted June 30, 2010 Share Posted June 30, 2010 I'd suggest you do the same for all elements - remove all on* attributes in favor of such additions in the JavaScript. Similarly for your styles - move them to an external CSS file, or in the style element. Also, remove the <br /> elements between paragraphs, and instead add margins to the paragraphs (margin-bottom to the top one(s), or margin-top to the bottom ones). Link to comment Share on other sites More sharing options...
Fmdpa Posted June 30, 2010 Author Share Posted June 30, 2010 I do have my scripts and styles in external files, but for the purpose of this example, I merged them into one document. How would I move the on* function calls to javascript, namely, the onfocus and onblur calls? Maybe something like document.form1.subject.onfocus = function() {(input(this.id))} ? Link to comment Share on other sites More sharing options...
boen_robot Posted June 30, 2010 Share Posted June 30, 2010 I do have my scripts and styles in external files, but for the purpose of this example, I merged them into one document.That's exactly why I suggested you give a link, and not just source code. Interactive stuff needs to be experienced in its fullest, or in a reduced enough sample (i.e. no images, styles, and extra scripts).How would I move the on* function calls to javascript, namely, the onfocus and onblur calls? Maybe something like document.form1.subject.onfocus = function() {(input(this.id))} ?It would be easiest if you have IDs on your form elements (as you appear to have for the most part). In that case, it's as easy asdocument.getElementById('subject').onfocus = function() {/*behaviour here*/}; Link to comment Share on other sites More sharing options...
Fmdpa Posted June 30, 2010 Author Share Posted June 30, 2010 I'm sorry, but unfortunately I haven't gotten around to putting the site up yet. I want to get it as close to completion before I pay to have it on the web (and I don't really want free-you-get-what-you-pay-for hosting). Link to comment Share on other sites More sharing options...
music_lp90 Posted June 30, 2010 Share Posted June 30, 2010 I didn't take the time to look at your code, but took a look at the form to see what it looked like. Looks very nice! I would suggest doing the same check on the "Reset" button as you do on the close button to make sure they really wanted to reset it and they weren't actually intending to hit the submit button. Also, I would make the close button a little more obvious. Link to comment Share on other sites More sharing options...
Fmdpa Posted June 30, 2010 Author Share Posted June 30, 2010 Thanks for comment. The close button is an image, and since the code I posted isn't including the images, all you can see is the alt text. Link to comment Share on other sites More sharing options...
Fmdpa Posted July 9, 2010 Author Share Posted July 9, 2010 I just thought of something else. The only "error" I've come across is that the div/module box is displayed for a couple seconds before visibility="hidden"; was read. So I was thinking I could use the createElement() function to display the module box. What are your opinions? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.