2013-08-12, 13:38
[Tutorial] Fast topic edit |
[infos="Outdated"]This tutorial is outdated, check out the more advanced Fast edit topic without page refresh https://punbb-design.forumotion.com/t501-javascript-fast-edit-without-refresh-window-v109022014-jq191 (Registration required to see a tutorial).[/infos]
This tutorial will allow you to fast edit your post without page change.
1. Create new javascript
Admin Panel Modules HTML & JAVASCRIPT JavaScript Code Management New JavaScript
- Code:
$(function(){
$('head').append('<style>#locsdeidit [name="subject"], #locsdeidit [name="topic_color"]{display:none}#locsdeidit textarea{width: 70% !important;height: 200px !important;}#locsdeidit input:hover{background:rgba(200,200,200,0.2)}#locsdeidit input{margin-bottom:1%;margin-top:1%;padding:5px 15px;border:1px solid black;cursor:pointer;background:rgba(200,200,200,0.4)}</style>');
$('a[href*="mode=editpost"]').click(function(){
if($(this).parents('.post').find('#contedit').length){
$('#contedit').fadeOut().remove();
}else{
$('#contedit').remove();
mylinkpathname = $(this).attr('href');
$(this).after('
<div id="contedit" style="box-shadow:0 0 10px grey;border:1px solid #555;margin-left:7%;padding:10px 15px;background:#f4f4f4;position:absolute;z-index:999;margin-top: 1%;margin-left: 981px;margin-top: -0px;">
<p><div id="normedit" onmouseout="$(this).css(\'background\',\'rgba(255,255,255,0.8)\')" onmouseover="$(this).css(\'background\',\'rgba(200,200,200,0.5)\')" style="font-weight:bold;color:#7D7D7D;transition:all 0.4s;border-bottom:1px solid grey;margin-bottom:1%;padding:10px 15px;background:rgba(255,255,255,0.8);cursor:pointer;">Full Editor</div></p>
<p><div id="rapidedit" onmouseout="$(this).css(\'background\',\'rgba(255,255,255,0.8)\')" onmouseover="$(this).css(\'background\',\'rgba(200,200,200,0.5)\')" style="font-weight:bold;color:#7D7D7D;transition:all 0.4s;padding:10px 15px;background:rgba(255,255,255,0.8);cursor:pointer;">Fast Editor</div></p>
</div>
');
$('#rapidedit').bind('click', function(){
if($(this).parents('.post').find('#locsdeidit').length){
$('#locsdeidit').remove()}else{$('#locsdeidit').remove();
$(this).parents('.post').find('.post-entry').after('<div style="padding-left: 1.79%;" id="locsdeidit"><img src="http://www.wingshootingusa.org/2012/Images/loading_transparent.gif"></div>');
$('#locsdeidit').hide().fadeIn();
$.get(mylinkpathname, function(locg){
var html0 = $('.frm-form .frm-input', locg).html();
var html1 = $('.frm-form .frm-textarea', locg).html();
var html2 = $('.frm-form .frm-buttons', locg).html();
var htmlfinal = '<form onsubmit="return vB_Editor[\'text_editor\'].prepare_submit(0,0)" name="post" method="post" action="/post" enctype="multipart/form-data">' + html0 + html1 + html2 + '</form>';
$('#locsdeidit').html(htmlfinal);
});
jQuery('html,body').animate({scrollTop: jQuery('#locsdeidit').offset().top}, 1000);
$('#contedit').remove();
}
});
$('#normedit').bind('click', function(){
window.open(mylinkpathname, '_self')
});
$('#contedit').hide().fadeIn();
}
return false;
});
});
And thats it