ColdEdge Posted May 14, 2010 Share Posted May 14, 2010 Hi, I have a question. I want to add a function to my site similar to the ones I have provided in the images. So there is a default text. For example lets say I used"Hey, feel free to add a comment." the moment user clicked that or clicked a Pencil icon to the side, the text "Hey, feel free to add a comment." becomes a text area with twobuttons under it, either Add Comment or Cancel.How would I be able to achieve this? One thing is clear I would have to use something like this... onclick="return show_add_comment_form();"Here are some images off what I am trying to make, if you can help me out or just point me in the right direction I will be very much appreciated...Before ClickAfter Clicked + Typed in some message- Thanks.. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 14, 2010 Share Posted May 14, 2010 heres one example, but needs work to incorporate multiple comment boxes with form input.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function showhide(){ var outerdiv = document.getElementById("outer"); var innerdivs = outerdiv.getElementsByTagName("div"); for(i=0;i<innerdivs.length;i++) { findatt=innerdivs.attributes['class'].nodeValue; if(findatt && findatt.indexOf("bottom_menu")==0 && innerdivs.style.display=="none") { innerdivs.style.display="" } else if(findatt && findatt.indexOf("bottom_menu")==0 && innerdivs.style.display=="") { innerdivs.style.display="none" } }} function init(){ var outerdiv = document.getElementById("outer"); var anchorlink = outerdiv.getElementsByTagName("a");var innerdivs = outerdiv.getElementsByTagName("div"); for(i=0;i<anchorlink.length;i++) { findatt=anchorlink.attributes['class'].nodeValue; if(findatt && findatt.indexOf("show_hide")==0) { anchorlink.setAttribute('onclick', 'showhide()'); anchorlink.onclick = function(){showhide();};//IE } } for(i=0;i<innerdivs.length;i++) { findatt=innerdivs.attributes['class'].nodeValue; if(findatt && findatt.indexOf("bottom_menu")==0) { innerdivs.style.display="none"; } } } window.onload=init;/*--*//*]]>*/</script><style type="text/css">a {text-decoration:none;}#outer {width:532px; margin:0 auto; overflow:hidden;background-color:#CCCCFF;}.inner-panel {float:left;width:484px; background-color:#FFFFFF; margin: 10px 0 10px 10px!important; margin:10px 0 15px 5px;} .edit_img {width:32px;height:32px;display:block;margin:3px!important;margin:3px 1px; float:right;background:url(OV.gif) no-repeat right top;}.cancel, .comment {width:120px;height:16px;display:block;float:right;background: #99CC00;margin:0 10px 10px 0; line-height:15px; text-align:center;}.comment {background: #CC99CC;}</style></head><body><div id="outer"><div class="outer_panel"><div class="inner-panel"><a class="show_hide" href="java script:void(0);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></div><a href="java script:void(0);" class="show_hide edit_img"></a></div><div class="bottom_menu"><a href="java script:void(0);" class="show_hide cancel">Cancel</a><a href="#" class="comment">Comment</a></div></div></body></html> Link to comment Share on other sites More sharing options...
ColdEdge Posted May 14, 2010 Author Share Posted May 14, 2010 @dsoneukThanks, I modified the code a bit.here is the new code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function show_hide(){var outerdiv = document.getElementById("outer");var innerdivs = outerdiv.getElementsByTagName("div");for(i=0;i<innerdivs.length;i++){findatt=innerdivs[i].attributes['class'].nodeValue;if(findatt && findatt.indexOf("bottom_menu")==0 && innerdivs[i].style.display=="none"){innerdivs[i].style.display=""}else if(findatt && findatt.indexOf("bottom_menu")==0 && innerdivs[i].style.display==""){innerdivs[i].style.display="none"}}} function init(){var outerdiv = document.getElementById("outer");var anchorlink = outerdiv.getElementsByTagName("a");var innerdivs = outerdiv.getElementsByTagName("div");for(i=0;i<anchorlink.length;i++){findatt=anchorlink[i].attributes['class'].nodeValue;if(findatt && findatt.indexOf("show_hide")==0){anchorlink[i].setAttribute('onclick', 'show_hide()');anchorlink[i].onclick = function(){show_hide();};//IE}}for(i=0;i<innerdivs.length;i++){findatt=innerdivs[i].attributes['class'].nodeValue;if(findatt && findatt.indexOf("bottom_menu")==0){innerdivs[i].style.display="none";}} } window.onload=init;/*--*//*]]>*/</script><style type="text/css">a {text-decoration:none;}#outer {width:532px; margin:0 auto; overflow:hidden;background-color:#CCCCFF;}.inner-panel {float:left;width:484px; background-color:#FFFFFF; margin: 10px 0 10px 10px!important; margin:10px 0 15px 5px;}.edit_img {width:32px;height:32px;display:block;margin:3px!important;margin:3px 1px; float:right;background:url(OV.gif) no-repeat right top;}.cancel, .comment {width:120px;height:16px;display:block;float:right;background: #99CC00;margin:0 10px 10px 0; line-height:15px; text-align:center;}.comment {background: #CC99CC;}</style></head><body><div id="outer"><div class="outer_panel"><div class="inner-panel"><a class="show_hide" href="java script:void(0);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></div><a href="java script:void(0);" class="show_hide edit_img"></a></div><div class="bottom_menu"><textarea></textarea><br><a href="java script:void(0);" class="show_hide cancel">Cancel</a><a href="#" class="comment">Comment</a></div></div></body></html> But when you click on Lorem ipsum dolor sit amet, consectetuer adipiscing elit, the bottom menu loads with text area, but the upper part is not hidden, what can I do to hide it? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 14, 2010 Share Posted May 14, 2010 try this out, save as php (hopefully you have php host)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function showhide(){ var outerdiv = document.getElementById("outer"); var innerdivs = outerdiv.getElementsByTagName("div"); var changethis=""; for(i=0;i<innerdivs.length;i++) { findatt=innerdivs.attributes['class'].nodeValue; changethis=-1; if(findatt && findatt.indexOf("bottom_menu")==0 && innerdivs.style.display=="none") { innerdivs.style.display=""; changethis=0; } else if(findatt && findatt.indexOf("bottom_menu")==0 && innerdivs.style.display=="") { innerdivs.style.display="none"; changethis=1; } } for(i=0;i<innerdivs.length;i++) { findatt=innerdivs.attributes['class'].nodeValue;if(findatt && findatt.indexOf("inner-panel")==0 && changethis ==0) { innerdivs.innerHTML=""; innerdivs.style.width="512px"; txa= document.createElement('textarea'); txa.style.width="512px"; txa.setAttribute('name', 'comment'); innerdivs.appendChild(txa); } if(findatt && findatt.indexOf("inner-panel")==0 && changethis ==1) { innerdivs.innerHTML=""; innerdivs.style.width="484px"; innerdivs.innerHTML='<a class="show_hide" href="java script:void(0);" onclick="showhide();">Lorem ipsum dolor sit amet, consectetuer adipiscing elitxx</a>'; }} var anchorlink = outerdiv.getElementsByTagName("a"); for(i=0;i<anchorlink.length;i++) { findatt=anchorlink.attributes['class'].nodeValue; if(findatt && findatt.indexOf("show_hide edit_img")==0 && changethis ==0) { anchorlink.style.display="none"; } else if(findatt && findatt.indexOf("show_hide edit_img")==0 && changethis ==1) {anchorlink.style.display="";}}} function init(){ var outerdiv = document.getElementById("outer"); var anchorlink = outerdiv.getElementsByTagName("a");var innerdivs = outerdiv.getElementsByTagName("div"); for(i=0;i<anchorlink.length;i++) { findatt=anchorlink.attributes['class'].nodeValue; if(findatt && findatt.indexOf("show_hide")==0) { anchorlink.setAttribute('onclick', 'showhide()'); anchorlink.onclick = function(){showhide();};//IE } } for(i=0;i<innerdivs.length;i++) { findatt=innerdivs.attributes['class'].nodeValue; if(findatt && findatt.indexOf("bottom_menu")==0) { innerdivs.style.display="none"; } } } window.onload=init;/*--*//*]]>*/</script><style type="text/css">a {text-decoration:none;}#outer {width:532px; margin:0 auto; overflow:hidden;background-color:#CCCCFF;}.inner-panel, .inner-panel_hid {float:left;width:484px; background-color:#FFFFFF; margin: 10px 0 10px 10px!important; margin:10px 0 15px 5px;overflow:visible;}.inner-panel textarea {width:512px; border-width:0px;} .edit_img {width:32px;height:32px;display:block;margin:3px!important;margin:3px 1px; float:right;background:url(OV.gif) no-repeat right top;}.cancel, .comment {width:120px;height:20px;display:block;float:right;background: #99CC00;margin:0 10px 10px 0; line-height:18px; text-align:center;}.comment {line-height:2px; background-color:#CCCCCC;}</style></head><body><div id="outer"><form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"><div class="outer_panel"><div class="inner-panel"><a class="show_hide" href="java script:void(0);">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></div><a href="java script:void(0);" class="show_hide edit_img"></a></div><div class="bottom_menu"><a href="java script:void(0);" class="show_hide cancel">Cancel</a><input class="comment" type="submit" value="submit" /><input type="hidden" value="15" name="userid"/></div></form></div><?phpecho $_POST['comment'].'<br />';echo $_POST['userid'].'<br />';?></body></html> Link to comment Share on other sites More sharing options...
ColdEdge Posted May 14, 2010 Author Share Posted May 14, 2010 @dsonesukWow, amazing it works. Thank you so much..... all I need to do now is just add a bit more PHP and I am all set ^^. Thank you dsonesuk very much. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.