Award selector

Go down

Solved Award selector

Post by Joost on January 10th 2018, 10:53 am

Hello,

I'm testing with a award bbcode, i have add a new profile field with this code:

Code:
[table]
[tr]
 [td][url=http://google.com/][img]IMAGE LINK[/img][/url][/td]
 [td][img]IMAGE LINK[/img][/td]
 [td][img]IMAGE LINK[/img][/td]
 [td][img]IMAGE LINK[/img][/td]
[/tr]
[/table]

ACP settings:


Result:


How can i add a selector, something like this (Screen) ?
My forum is in testing mode, i have a testing account for you, the url from my testing forum: http://beta-hpmagicworld.actieforum.com

Many thanks for your help and time. Very Happy

Regards, Joost


Last edited by Joost on January 27th 2018, 5:05 pm; edited 1 time in total
avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by Kami-sama on January 11th 2018, 5:23 pm

Take a look here: http://freefrontend.com/css-carousels/
I think that is what you are looking for.
avatar
Kami-sama
Forumember

Female Posts : 405
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Award selector

Post by Joost on January 11th 2018, 6:16 pm

@Kami-sama wrote:Take a look here: http://freefrontend.com/css-carousels/
I think that is what you are looking for.

Yes, indeed i'm looking for a carousel.
How can i install this in my profile field ? Smile
avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by pedxz on January 13th 2018, 3:38 pm

Hey,
you can create a test account?

to see better,
thanks
avatar
pedxz
Forumember

Male Posts : 100
Reputation : 20
Language : português

http://ajuda.forumeiros.com/u62843

Back to top Go down

Solved Re: Award selector

Post by Joost on January 13th 2018, 6:07 pm

@pedxz wrote:Hey,
you can create a test account?

to see better,
thanks

I send a Pb, many thanks for your help! Smile
avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by Joost on January 16th 2018, 1:23 pm

@pedxz , do you have a idea about these ?
avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by Ikerepc on January 16th 2018, 1:46 pm

Hi. Please provide me test account for your site and it would be nice if I can see live example of what do you need exactly.

Thanks
avatar
Ikerepc
Active Poster

Male Posts : 1150
Reputation : 155
Language : Croatian, HTML, HTML5, CSS, CSS3, jQuery, PHP, SQL, Bascom, Python, C, C++, FBD & LAD for PLC and more... Little English :D
Location : Where web help & support is needed

http://admins.forumotion.com

Back to top Go down

Solved Re: Award selector

Post by Joost on January 16th 2018, 2:00 pm

@Ikerepc wrote:Hi. Please provide me test account for your site and it would be nice if I can see live example of what do you need exactly.

Thanks

I have send you a pb , many thanks! :wouhou:
avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by Ikerepc on January 16th 2018, 3:54 pm

You can use some css like this:
Apply it to table or tbody.

Code:
width: 100%;
overflow-x: scroll;
display: inline-block;

I will try to make you that arrows later. I need to figure out how to get id of post and I haven't been at forumotion for awhile. I have another job now Smile
avatar
Ikerepc
Active Poster

Male Posts : 1150
Reputation : 155
Language : Croatian, HTML, HTML5, CSS, CSS3, jQuery, PHP, SQL, Bascom, Python, C, C++, FBD & LAD for PLC and more... Little English :D
Location : Where web help & support is needed

http://admins.forumotion.com

Back to top Go down

Solved Re: Award selector

Post by APE on January 16th 2018, 7:14 pm

I have this on my forum " well sort of "

This is the code is use

Code:
[center][table][tr][td class="scrollable-zone"]Your_Items_Will_Go_Here[/td][/tr][/table][/center]

Then you can change the look of it and the size by CSS files.

Code:
.scrollable-zone {
    color: #CCC;
    background-color: #222;
    border-color: #fff;
    display: block;
    max-height: 50px;
    overflow: auto;
    border: 1px solid #000 !important;
    box-shadow: 0px 10px 6px rgba(255, 255, 255, 0.13) inset, 0px -10px 6px rgba(0, 0, 0, 0.05) inset;
}



avatar
APE
Administrator
Administrator

Male Posts : 12303
Reputation : 1276
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Award selector

Post by SarkZKalie on January 17th 2018, 5:33 pm

Will be great if FM give us an option like Achivement system or something like that Very Happy Not manually at all.
avatar
SarkZKalie
Forumember

Male Posts : 756
Reputation : 111
Language : English

http://rotavn.forumotion.com

Back to top Go down

Solved Re: Award selector

Post by Joost on January 21st 2018, 10:35 am

@APE wrote:I have this on my forum " well sort of "

This is the code is use

Code:
[center][table][tr][td class="scrollable-zone"]Your_Items_Will_Go_Here[/td][/tr][/table][/center]

Then you can change the look of it and the size by CSS files.

Code:
.scrollable-zone {
    color: #CCC;
    background-color: #222;
    border-color: #fff;
    display: block;
    max-height: 50px;
    overflow: auto;
    border: 1px solid #000 !important;
    box-shadow: 0px 10px 6px rgba(255, 255, 255, 0.13) inset, 0px -10px 6px rgba(0, 0, 0, 0.05) inset;
}

Thank you for sharing, i have use your awards system, how can i change the scrollbar to purple ?
My scrollbar css:

Code:
/* SCROLLBARS */
body::-webkit-scrollbar-thumb:vertical,textarea::-webkit-scrollbar-thumb:vertical,div::-webkit-scrollbar-thumb:vertical,#chatbox::-webkit-scrollbar-thumb:vertical {
background-color: #9E04BD;
height: 10px;
}

body::-webkit-scrollbar-thumb:horizontal,textarea::-webkit-scrollbar-thumb:horizontal,div::-webkit-scrollbar-thumb:horizontal,#chatbox::-webkit-scrollbar-thumb:horizontal {
background-color: #333333;
height: 10px!important;
}

body::-webkit-scrollbar,textarea::-webkit-scrollbar,div::-webkit-scrollbar,#chatbox::-webkit-scrollbar {
background-color: #333333;
height: 10px;
width: 8px;
}

And how can i add a tooltip by my image? Smile
avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by APE on January 21st 2018, 11:29 am

Give this a read it will help.
Sadly not all browsers supported https://css-tricks.com/almanac/properties/s/scrollbar/

As for the tooltip I have no idea and would love to know that one me self Wink



avatar
APE
Administrator
Administrator

Male Posts : 12303
Reputation : 1276
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Award selector

Post by Ange Tuteur on January 22nd 2018, 10:14 pm

Hi,

Please see the two following posts, if you're looking for the same exact scrolling functionality. The first post is for the design and profile field setup, the second is the script used for the scrolling functionality -- both steps should be followed. Also the script may only be compatible with phpbb3 based themes/versions, such as ModernBB, Forumactif Edge, and the default phpbb3 templates.

1. Profile Field Setup
@Ange Tuteur wrote:You can use our award design, but you'll have to handle distribution manually.

Your profile field should be a text zone so you can format bbcodes. Then you should add this value to the profile field :
Code:
[table class="fa fmd_awards"][tr][td class="a_member"][/td][/tr][/table]

Then add this to your CSS :
Code:
/* -- award css -- */
.postprofile .fmd_awards {
  display:block;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.postprofile .fmd_awards tbody { display:block; }

.fmd_awards td {
  color:#FFF;
  background:#69C;
  height:32px;
  width:32px;
  border-radius:100px;
  position:relative;
  display:inline-block;
  text-align:center;
  line-height:32px;
  font-size:18px;
  margin:1px;
  cursor:default;
}
 
.a_member:before { content:"\f00c"; } /* registered */

Basically the awards are created with TD tags and designed with CSS. For example,
Code:
[td class="a_member"][/td]
creates the registered award and the class
Code:
.a_member
is used for the icon. Whenever you add a new award, you just need to copy and paste the TD tag and change the class name -- you also need to create a new style in the CSS.

Source : http://fmdesign.forumotion.com/t1318-need-help-installing-forumactif-edge-theme#30092


2. Award Scroller Script
@Ange Tuteur wrote:Go to Admin Panel > Modules > JS codes management > New

Placement : In the topics
Code:
(function() {
  window.fmd_award_list = {
    stop : function() {
      if (fmd_award_list.interval) {
        window.clearInterval(fmd_award_list.interval);
        fmd_award_list.interval = null;
      }
    },

    scroll : function(that, by, max) {
      if (!fmd_award_list.interval) {
        var node = that.parentNode.firstChild;

        fmd_award_list.interval = window.setInterval(function() {
          var margin = +node.style.marginLeft.replace(/px/, '');
          (by < 0 && margin <= max) || (by > 0 && margin >= max) ? fmd_award_list.stop() : node.style.marginLeft = margin + by + 'px';
        }, 1);
      }
    }
  };

  document.write('<style type="text/css">a.award_scroller { color:#FFF !important;  background:#369; font-size:20px; text-align:center; text-decoration:none !important; position:absolute; bottom:0; width:20px; height:38px; line-height:38px; opacity:0; } .fmd_awards:hover a.award_scroller { opacity:0.8 } .fmd_awards a.award_scroller:hover { opacity:1 } a.award_scroller.scroll_left { left:-3px; } a.award_scroller.scroll_right { right:-3px; }</style>');

  $(function() {
    for (var a = $('.postprofile .fmd_awards tbody'), i = 0, j = a.length; i < j; i++) {
      if (a[i].scrollWidth > a[i].clientWidth) {
        a[i].style.marginLeft = '0px';
        a[i].insertAdjacentHTML('afterend', '<a class="award_scroller scroll_left" href="#" onmousedown="fmd_award_list.scroll(this, 1, 0);" onclick="fmd_award_list.stop(); return false;" onmouseout="fmd_award_list.stop();"><</a><a class="award_scroller scroll_right" href="#" onmousedown="fmd_award_list.scroll(this, -1, -' + (a[i].scrollWidth - a[i].clientWidth) + ');" onclick="fmd_award_list.stop(); return false;" onmouseout="fmd_award_list.stop();">></a>');
      }
    }
  });
 
  'par ange tuteur';
}());
It should work on FAE / phpbb3 without issue.

Source : http://fmdesign.forumotion.com/t1318-need-help-installing-forumactif-edge-theme#30120

Have a good day. bye


Last edited by Ange Tuteur on January 27th 2018, 4:36 pm; edited 1 time in total
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Award selector

Post by Joost on January 23rd 2018, 10:37 am

@Ange Tuteur , many thanks for your help and time, i have add your CSS and Javascript i don't see the selector on my forum.
And how can i add a text tooltip by the awards. Very Happy

avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by Ange Tuteur on January 24th 2018, 5:33 pm

Hi again,

Does your award table bbcode look like this in the profile fields ?
Code:
[table class="fa fmd_awards"][tr][td class="a_member"][/td][/tr][/table]

Basically the only part that's necessary is the class for the table tag :
Code:
[table class="fa fmd_awards"]

Make sure that you've forced the new value for all members. If you've done this and it still isn't working, would you happen to have a test account I could use ?
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Award selector

Post by Joost on January 25th 2018, 9:56 am

@Ange Tuteur wrote:Hi again,

Does your award table bbcode look like this in the profile fields ?
Code:
[table class="fa fmd_awards"][tr][td class="a_member"][/td][/tr][/table]

Basically the only part that's necessary is the class for the table tag :
Code:
[table class="fa fmd_awards"]

Make sure that you've forced the new value for all members. If you've done this and it still isn't working, would you happen to have a test account I could use ?

I have click on the button 'Replace the content' i don't see nothing from a selector. Smile Sad
Can i send you a Pb with a testing account ? Smile

Many thanks for your help.
avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by Ange Tuteur on January 25th 2018, 11:52 pm

Sure, that'll be fine. Wink
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Award selector

Post by Joost on January 26th 2018, 10:38 am

@Ange Tuteur wrote:Sure, that'll be fine. Wink

Thank you, i have send a Pb. Smile
avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by Ange Tuteur on January 27th 2018, 4:52 pm

Thanks. :rose:

After looking over it, it seems I forgot to include some CSS for the table itself. If added the necessary code to your stylesheet and updated my prior post with it. You can find the same CSS at the bottom of your stylesheet and an example of the scroller working here.

As for tooltips, you can insert them into the [td] tags via the title attribute. See the example below.
Code:
[td class="a_member" title="AWARD TITLE"][/td]

Of course the problem with this method is that we're limited to 65,535 characters in the text field, so adding titles directly will end up making you reach the limit faster. Not to mention if you make a typo or want to change the title you have to edit everyone's profile who has it. The method I used on my forum used javascript to insert the titles ; it's more convenient since you only have to edit a single file to update the titles.

Admin Panel > JavaScript > New
Placement : All pages
Code:
$(function() {
  var titles = {
    a_member : 'Registered'
  },

  a = document.getElementsByTagName('TD'),
  i = 0,
  j = a.length,
  c;

  // apply the titles based on the award class name
  for (; i < j; i++) {
    c = a[i].className;
    if (c && /^a_.*?$/.test(c)) {
      a[i].title = titles[c] || c.slice(2);
    }
  }
});

Simply edit the titles object to add more titles to the script.
Code:
  var titles = {
    a_member : 'Registered'
  },
It uses CLASS:TITLE pairs, so all [td] tags with the class a_member will show the texts registered when hovered. You don't have to prefix your classes with a_, you can use something else such as award_ if you want, but I recommend keeping it short to save space in the profile field.

Here's an example of a bunch of awards with different titles, so you can get an idea of how it's formatted.
Code:
  var titles = {
    a_awardmaker : 'Award Maker',
        a_membotm : 'Member of the Month',
        a_member : 'Registered',
    a_helloworld : 'Hello world!',
        a_avatar : 'Picture Perfect',
      a_signature : 'John Hancock this please',
        a_website : 'Site sweet site...',
      a_hobbyist : 'Hobbyist',
        a_ptitle : 'They call me...',
      a_affiliate : 'Affiliate',
          a_beta : 'Beta Tester',
      a_promoter : 'Self promotion rules!',
      a_bugbuster : 'Bug Buster',
    a_suggestion : 'The Power of Suggestion',
      a_banhammer : 'The Almighty Ban Hammer',
        a_thinker : 'Thinking out loud',
        a_fmdbday : 'Happy Birthday',

    a_collector1 : 'Award Collector',
    a_collector2 : 'Award Hunter',
    a_collector3 : 'Award Freak',
    a_collector4 : 'God of Awards',

      a_likeable : 'Likeable',
      a_loveable : 'Loveable',
          a_idol : 'Idol',

    a_contributor : 'Contributor',
        a_writer : 'Born Writer',
    a_keywarrior : 'Keyboard Warrior',

    a_pressstart : 'Press Start',
      a_highscore : 'High Score!',
        a_number1 : 'Number 1',

          a_year1 : '1st Year',
          a_year2 : '2nd Year',
          a_year3 : '3rd Year',

        a_group1 : 'Welcome to the Club',
        a_group2 : 'The Inner Circle',
        a_group3 : 'Club Juggler',

        a_friend : 'Friendly',
        a_friend2 : 'Friend Lord',
        a_friend3 : 'Friendzone Master',

            a_pm : 'Between you and me...',
            a_pm2 : 'Privacy is Precious',
            a_pm3 : 'Keeper of Secrets',

          a_liker : 'I like you',
        a_liker2 : 'I love you',
        a_liker3 : 'I idolize you',

          a_topic : 'My First Topic',
        a_topic2 : 'Stay on Topic',
        a_topic3 : 'Topic Starter',

        a_tester : 'Test Dummy',
        a_tester2 : 'QA Team Leader',
        a_tester3 : 'Mad Scientist',

        a_artist : 'My First Piece',
        a_artist2 : 'Aspiring Artist',
        a_artist3 : 'Art is Love',

        a_teacher : 'I\'m your new Teacher',
      a_teacher2 : 'Today\'s lesson is...',
      a_teacher3 : 'Best Teacher Ever',

        a_month1 : 'Postman',
        a_month2 : 'Carrier Pigeon',
        a_month3 : 'Spam Bot'
  },
If any questions let me know.

Have a good weekend. Doff
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Award selector

Post by Joost on January 27th 2018, 5:01 pm

Thank you very much @Ange Tuteur , it's works!
My question is solved! :wouhou:
avatar
Joost
Forumember

Male Posts : 802
Reputation : 16
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Award selector

Post by APE on January 27th 2018, 6:15 pm

Thank you @Ange Tuteur for helping us on this one .
Problem solved & topic archived.
Please read our forum rules: ESF General Rules



avatar
APE
Administrator
Administrator

Male Posts : 12303
Reputation : 1276
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum