help me with this java scripte

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Other
Screenshot of problem : https://2img.net/h/oi63.tinypic.com/e5mlna.png
Who the problem concerns : All members
Forum link : http://alla-omar.mo-rpg.com

Description of problem

Code:

$(document).ready(function () {
$('div.postbody div').each(function () {
        if ($(this).text().indexOf('[TBL]') != -1) $(this).html($(this).html().replace(/\[TBL\](.+?)\[\/TBL\]/gi, '<div style="width: 1000px; position: relative;left: 54px;height: 317px;background-image: url(alla13);"></div>
<br>
<div style="width: 1000px; position: relative;bottom: 18px;left: 54px;background-image: url(alla13);"><br><br><div align="center">$1</div></div>
'));      
      });
});
$(function(){
  $(function(){
    $('<a class="sceditor-button sceditor-button-TBL" unselectable="on"><div unselectable="on" style="background-image:url(http://i21.servimg.com/u/f21/19/09/73/59/back10.png)">TBL</div></a>').insertBefore('.sceditor-button-size').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[TBL]","[/TBL]");
    });
      });
      });

in the place of alla13 هin the code i wante the url img that i did put between [TBL][/TBL] became Automatically there
the code is for making background for the topic
this gif explaine how the code Must work
https://i.imgur.com/OP24iy0.gif
vid
https://www.youtube.com/watch?v=o9uBMbwBeZY&feature=youtu.be
 @angetuteur please help me

Hi,

Forumotion does not support the

Code: [TBL]

bbcode, so it will not be parsed server-side. I think what you're looking for may be similar to this tutorial, though :
• Button to choose the message background

just do then this
Button to choose the message background
after that you should be able to use

Code:

[postbg=رابط الصورة]

also your forum is Arabic you should check for help at
Arabic Ahlamontada
i cannot use Arabic language here this is English support forum you should understand that

alla13 wrote:

and the arabic support  They said this is impossible to do

Impossible ..? Sounds like whoever said that never tried to achieve the "impossible.."

Firstly, lets try to start fresh with a new button. Add the following script to your JavaScripts.
Modules > JS codes management > New

Placement : In all the pages

Code:

$(function() {
  if ($.sceditor) {
    $.sceditor.command.set('tbl', {

      exec : function() {
        this.insert('[tbl=',']');
      },

      txtExec : function() {
        this.insert('[tbl=',']');
      },

      tooltip : 'Button title'

    });

    toolbar += ',tbl';
  }

  for (var a = $('.postbody'), i = 0, j = a.length; i < j; i++) {
    if (/\[tbl=.*?\]/i.test(a[i].innerHTML)) {
      a[i].innerHTML = a[i].innerHTML.replace(/\[tbl=(.*?)\]/i, function(M, $1) {
        a[i].style.backgroundImage = 'url(' + $1 + ')';
        return '';
      });
    }
  }
});

This will add a button for the [tbl] tag, and parse it client-side as well. However, due to some limitations, the tag was modified to work like this :

Code:

[tbl=http://r34.imgfast.net/users/3412/19/22/63/smiles/45347.png]

It only requires a single tag. After the equal sign is the url of the background image. Give this a try and let me know how it works for you.

Lastly, if you want to change the button image, add this CSS to your stylesheet :

Code:

.sceditor-button-tbl div {
  background-image:url('IMAGE') !important;
}

Replace IMAGE with an image URL.

that s what i call magician work
is working like charme
one think how can i controle the Dimensions of the background

By default it'll repeat, and consist of the image's normal dimensions. You can use the following CSS to set a global default :

Code:

.postbody {
  background-repeat:no-repeat;
  background-size:cover;
}

The above CSS will prevent the image from repeating, and will stretch it to fit the post.

Ange Tuteur wrote:Impossible ..? Sounds like whoever said that never tried to achieve the "impossible.."

thats because there is almost no coders there is like 2 people are only and they are able to use HTML or CSS only
the botton works 100%
its only make line break i think but still worls fine
also sorry for jumping in the topic

if it possible to controle the width  
i will be thankfull

bumps

bumps

replace the script with this :

Code:

$(function() {
  if ($.sceditor) {
    $.sceditor.command.set('tbl', {
 
      exec : function() {
        this.insert('[tbl="','" size="100% 100%"]');
      },
 
      txtExec : function() {
        this.insert('[tbl="','" size="100% 100%"]');
      },
 
      tooltip : 'Button title'
 
    });
 
    toolbar += ',tbl';
  }
 
  for (var a = $('.postbody'), i = 0, j = a.length; i < j; i++) {
    if (/\[tbl=".*?" size=".*?"\]/i.test(a[i].innerHTML)) {
      a[i].innerHTML = a[i].innerHTML.replace(/\[tbl="(.*?)" size="(.*?)"\]/i, function(M, $1) {
        a[i].style.backgroundImage = 'url(' + $1 + ')';
        a[i].style.backgroundSize = $2;
        return '';
      });
    }
  }
});

Then you should be able to specify the size via the size attribute. Ex :

Code:

[tbl="..." size="100% 100%"]

it s working but Cause the disappearance of posting box

Bumps

Bumps

Bumps

Did you set the JavaScript for all pages or in topics?  It needs to be set for all pages.

Also do you have other JavaScripts?

1-when i set it for all pages do not work
2- yes i have other java scripts

I'm getting A LOT of errors on your forum. Could you try testing this script on a forum that isn't heavily modified to see if it's working as you want it ?


In regards to the errors, I'd recommend retracing your steps and undoing your most recent changes. It looks more like the jQuery library isn't defined.

topic solved