Geek Answers Handbook

Creating an HTML file for editing by clicking the edit button

I try to make both DIVs editable when I click on the edit icon in the bottom left. How can i do this?

<li class="question" id="question2"> <div class="question-header curves dense-shadows"> What color is the sky? </div> <div class="question-content dense-shadows"> <ol type="A"> <li><input type="radio" id="q2a1" name="question2" /> Red</li> <li><input type="radio" id="q2a2" name="question2" /> Green</li> <li><input type="radio" id="q2a3" name="question2" /> Blue</li> <li><input type="radio" id="q2a4" name="question2" /> Brown</li> </ol> <div style="text-align:right"> <a href="#"><span style="margin-left:5px;"><img src="images/editbutton.png" onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a> <a href="#"><span style="margin-left:5px;"><img src="images/deletebutton.png" onmouseover="this.src='images/deletebuttonhover.png'" onmouseout="this.src='images/deletebutton.png'" title="Delete" alt="delete"/></span></a> </div> </div> </li>
+1
javascript jquery html css edit
source share
2 answers

Ok, you can do something like this:

 <li class="question" id="question2"> <div class="question-header curves dense-shadows"> What color is the sky? </div> <div class="question-content dense-shadows"> <ol type="A"> <li><input type="radio" id="q2a1" name="question2" /> Red</li> <li><input type="radio" id="q2a2" name="question2" /> Green</li> <li><input type="radio" id="q2a3" name="question2" /> Blue</li> <li><input type="radio" id="q2a4" name="question2" /> Brown</li> </ol> <div style="text-align:right"> <a href="#" class="edit"><span style="margin-left:5px;"><img src="images/editbutton.png" onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a> <a href="#" class="delete"><span style="margin-left:5px;"><img src="images/deletebutton.png" onmouseover="this.src='images/deletebuttonhover.png'" onmouseout="this.src='images/deletebutton.png'" title="Delete" alt="delete"/></span></a> </div> </div> </li> <script> $('a.edit').on('click',function(){ $(this).closest('li').find('.question-header, .question-content').attr('contenteditable','true'); }); </script>

Please note that I added the class="edit" and class="delete" buttons to your buttons.

0
source share

Well, you do not understand, but I will try to guess. If you want to make the div editable, you can mark it with contenteditable

to do this, replace the code

  <a href="#"><span style="margin-left:5px;"><img src="images/editbutton.png" onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>

from

 <a href="javascript:void(0)" class="edit"><span style="margin-left:5px;"><img src="images/editbutton.png" onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>

then add script

 <script> $("a.edit").click(function(){ $("div.question-content").attr("contenteditable", "true"); }); </script>

Note that I added a class for reference and replaces HREF

Here is my example http://jsfiddle.net/r9HTe/

0
source share

More articles:


All Articles