Text wrap in posts by means of css
Adds the buttons to the form of reply next to the button of pictures uploading. They allow setting the position of a text in the right/left of image.
Author: Deff
Platform: MyBB
Put the link, mark it out and push the right button.
Additional advantages: doesn’t add buttons to the form of reply, additional buttons appear only if you point to the icon of picture uploading.
To HTML-top (Admin > Options: 1st form)
<!--// CSS-version of text wrap in posts //-->
<style>.postimg[alt="float:right"]{float:right;padding-left:12px;pointer-events:none}.postimg[alt="float:left"]{float:left;padding-right:12px;pointer-events:none}
#add_float{position:absolute;padding:2px;top:-8px;left:50%;margin-left:-29px!important;width:57px!important;background: url("http://savepic.ru/7021157.png") no-repeat 50%!important;}
#button-image #add_float img{display:block;position:relative;z-index:4;}
#button-image>img{position:relative;z-index:2;}
#button-image>center{opacity:0;visibility:hidden; transition-duration: .8s;}
#button-image:hover>center{opacity:1; visibility:visible;}
</style>
<script>$(function(){$('.postimg[title="float:right"],.postimg[title="float:left"]').mouseover(function(e){e.preventDefault();});
var a ='<center style="position:relative;"><table id=add_float><tr><td id="text-left" title="Text wrap: text in the left">@@</td><td></td><td id="text-right" title="Text wrap: text in the right">##</td></tr></table></center>',b3="]'";
var b1 = '<img onclick="bbcode(\'[img=float:right'+b3+',\'[/img'+b3+')" src="/i/blank.gif"/>',b2 = '<img onclick="bbcode(\'[img=float:left'+b3+',\'[/img'+b3+')" src="/i/blank.gif"/>';
a = a.replace('@@',b1).replace('##',b2);
$('#post #button-image').prepend(a);});
</script>* ATTENTION! Replace the link in the style with your own picture of button and set the code for YOUR style.
Text wrap. © Romych
Adds the buttons to the form of reply next to the button of pictures uploading. They allow setting the position of a text in the right/left of image.
Author: Romych
Platform: MyBB
to html-bottom (if it doesn’t work, put it to the form of reply):
<!—text wrap 2.4.4-->
<script language="javascript">
$(function(){
$('td#button-link').before('<td id="floatbut" style=\'background-image:url("http://s002.radikal.ru/i198/1009/43/f183caeae434.gif")\'></td>');
$('#floatbut, .vibor').click(function(){
$('div#float').toggle();});
});
elm=document.getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content")
{
post = elm[x].innerHTML;
if(post.indexOf("[/float]") != -1) {
floats = /\[float=(.*?)\]([^\[]{1,11000})\[\/float\]/gi
elm[x].innerHTML = elm[x].innerHTML.replace(floats, "<span style='float: $1; margin: 15px; text-align: $1;'>$2</span>")
}}
</script>
<div id="float" style="display:none;background:#FFFFCC;border:1px solid black; width:auto; padding:8px; position:absolute; margin-top:-32%; margin-left:35%; z-index:20">
<div><strong>Position of text wrap</strong></div><br>
<div align="center">
<img class="vibor" src="http://s001.radikal.ru/i193/1009/96/695abc799ddb.png" title="left" onclick="bbcode('[float=left]', '[/float]')" />
<img class="vibor" src="http://s002.radikal.ru/i199/1009/ac/95c10fcc7d82.png" title="right" onclick="bbcode('[float=right]', '[/float]')" />
</div></div>you will get this button in the form of reply -
If you push it, you get the choice of right/left text wrapThanks for helping and testing: mkusherу and rps
