The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Like/Dislike Button Coding

2 posters

Go down

Solved Like/Dislike Button Coding

Post by Beela August 22nd 2019, 11:56 pm

Hello.. I'm trying to add the coding for the link/dislike button but it's not showing up on my forum. Please, help me. Thank you. I also have a premade skin I'm using as well and here is the url for my board. Thank you.

http://homeawayfromhome.forumotion.com/

Here is the coding I have for the CSS Stylesheet.

.bodyline{
-moz-border-radius:11px;
-webkit-border-radius: 11px;

border: 1px ##3A0D59 solid;
}
.bodylinewidth {
width:70%}
.forumline{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;}

border: 2px ##3A0D59 solid;
}

a.mainmenu{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
a.mainmenu:hover{
filter:alpha(opacity=70);
-moz-opacity: 0.65;
opacity: 0.65;
}

{ .fa_vote, .fa_voted, .fa_count {
font-size:12px;
font-family:Verdana, Arial, Helvetica, Sans-serif;
display:inline-block !important;
width:auto !important;
float:none !important;
transition:300ms;
}

.fa_voted, .fa_vote:hover { opacity:0.4 }
.fa_voted { cursor:default }

.fa_count {
font-weight:bold;
margin:0 3px;
cursor:default;
}

.fa_positive { color:#4A0 }
.fa_negative { color:#A44 }

.fa_votebar, .fa_votebar_inner {
background:#C44;
height:3px;
}

.fa_votebar_inner {
background:#4A0;
transition:300ms;
}

This is what I have for the JavaScript.

$(function() {
// General Configuration of the plugin
var config = {
position_left : true, // true for left || false for right
negative_vote : true, // true for negative votes || false for positive only
vote_bar : true, // display a small bar under the vote buttons

// button config
icon_plus : '<img src="https://i.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>',
icon_minus : '<img src="https://i.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',

// language config
title_plus : 'Like %Guest\'s post',
title_minus : 'Dislike %Guest\'s post',

title_like_singular : '%{VOTES} person likes %Guest\'s post',
title_like_plural : '%{VOTES} people like %Guest\'s post',

title_dislike_singular : '%{VOTES} person dislikes %Guest\'s post',
title_dislike_plural : '%{VOTES} people dislike %Guest\'s post',

title_vote_bar : '%{VOTES} people liked %Guest\'s post %{PERCENT}'
},


// function bound to the onclick handler of the vote buttons
submit_vote = function() {
var next = this.nextSibling, // the counter next to the vote button that was clicked
box = this.parentNode,
bar = box.getElementsByTagName('DIV'),
vote = box.getElementsByTagName('A'),
mode = /eval=plus/.test(this.href) ? 1 : 0,
i = 0, j = vote.length, pos, neg, percent;

// submit the vote asynchronously
$.get(this.href, function() {
next.innerHTML = +next.innerHTML + 1; // add to the vote count
next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });

pos = +vote[0].nextSibling.innerHTML;
neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';

if (bar[0]) {
bar[0].style.display = '';
bar[0].firstChild.style.width = percent;
box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
}
});

// revoke voting capabilities on the post once the vote is cast
for (; i < j; i++) {
vote[i].href = '#';
vote[i].className = vote[i].className.replace(/fa_vote/, 'fa_voted');
vote[i].onclick = function() { return false };
}

return false;
},

vote = $('.vote'), i = 0, j = vote.length,
version = $('.bodylinewidth')[0] ? 0 :
document.getElementById('phpbb') ? 1 :
$('.pun')[0] ? 2 :
document.getElementById('ipbwrapper') ? 3 :
document.getElementById('modernbb') ? 4 :
'badapple', // version check

// version data so we don't have to redefine these arrays during the loop
vdata = {
tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton', '.postprofile-name'][version],
actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons', '.profile-icons'][version]
},

post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop

// prevent execution if the version cannot be determined
if (version == 'badapple') {
if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
return;
}

for (; i < j; i++) {
post = $(vote[i]).closest('.post')[0];
bar = $('.vote-bar', vote[i])[0]; // vote bar
button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
ul = $(vdata.actions, post)[0]; // post actions
li = document.createElement(vdata.tag); // vote system container
li.className = 'fa_reputation';

if (li.tagName == 'SPAN') li.style.display = 'inline-block';

// calculate votes
if (bar) {
total = +bar.title.replace(/.*?\((\d+).*/, '$1');
percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');

n_pos = Math.round(total * (percent / 100));
n_neg = total - n_pos;
} else {
n_pos = 0;
n_neg = 0;
}

// set up negative and positive titles with the correct grammar, votes, and usernames
title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);

// define the vote counts
li.innerHTML = '<span class="fa_count fa_positive" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" title="' + title_neg + '">' + n_neg + '</span>' : '');
span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points

// create positive vote button
plus = document.createElement('A');
plus.href = button[0] ? button[0].href : '#';
plus.onclick = button[0] ? submit_vote : function() { return false };
plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
plus.innerHTML = config.icon_plus;
plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);

span[0] && li.insertBefore(plus, span[0]);

// create negative vote button
if (config.negative_vote) {
minus = document.createElement('A');
minus.href = button[1] ? button[1].href : '#';
minus.onclick = button[1] ? submit_vote : function() { return false };
minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
minus.innerHTML = config.icon_minus;
minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);

span[1] && li.insertBefore(minus, span[1]);
}

// create vote bar
if (config.vote_bar) {
vote_bar = document.createElement('DIV');
vote_bar.className = 'fa_votebar';
vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
vote_bar.style.display = bar ? '' : 'none';
li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
li.appendChild(vote_bar);
}

// finally insert the vote system and remove the default one
config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
vote[i].parentNode.removeChild(vote[i]);
}
});



Last edited by Beela on August 23rd 2019, 3:12 am; edited 2 times in total
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 12:37 am

Please use the code tags when posting coding.

You have some errors in your CSS stylesheet.  There are missing opening and closing brackets.


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 12:45 am

Okay, I will do that next time and I'm sorry. Is there a way you can help me add the tags where they need to be? I'm new at this. Just learning. Thank you.
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 12:49 am

Code:
.bodyline{
-moz-border-radius:11px;
-webkit-border-radius: 11px;   
 border: 1px ##3A0D59 solid;
}
.bodylinewidth {
   width:70%}
.forumline{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;   
 border: 2px ##3A0D59 solid;
 }

a.mainmenu{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
  }
a.mainmenu:hover{
          filter:alpha(opacity=70;
-moz-opacity: 0.65;
opacity: 0.65;
    }

                              .fa_vote, .fa_voted, .fa_count {
                  font-size:12px;
                  font-family:Verdana, Arial, Helvetica, Sans-serif;
                  display:inline-block !important;
                  width:auto !important;
                  float:none !important;
                  transition:300ms;
                }
             
                .fa_voted, .fa_vote:hover { opacity:0.4 }
                .fa_voted { cursor:default }
             
                .fa_count {
                  font-weight:bold;
                  margin:0 3px;
                  cursor:default;
                }
             
                .fa_positive { color:#4A0 }
                .fa_negative { color:#A44 }
             
                .fa_votebar, .fa_votebar_inner {
                  background:#C44;
                  height:3px;
                }
             
                .fa_votebar_inner {
                  background:#4A0;
                  transition:300ms;
                }


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 12:51 am

Thank you. Smile

I did copy and paste the code you posted and still nothing. Sad I did clean out my cookies/cache as well.


Last edited by Beela on August 23rd 2019, 12:55 am; edited 1 time in total
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 12:52 am

Did this solve the issue?


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 12:56 am

Nope
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 1:01 am

Where did you get the coding from?


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 1:02 am

In the Display Area where it says Pictures And Colors under Colors in the CSS Stylesheet.
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 1:14 am

I mean did you create this on your own or used a tutorial?  If a tutorial, where did you see it?


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 1:16 am

The first part of the code was from the premade skin I have installed on my board and the second part of the code in the CSS Styleheet I got from here. https://help.forumotion.com/t142870-improve-the-reputation-system-so-it-counts-votes?highlight=Reputation
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 1:24 am

Is your JavaScript Management activated?


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 1:27 am

Yes, it is and I added the code that was listed in the link. I added the title to it and copied the code the way it was and added it. Saved that. Cleaned out the cookies/cache and rested the browser and computer as well.
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 1:35 am

Did you click all pages?


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 1:37 am

Yes, I did click all pages and saved it.
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 2:13 am

Do you have the reputation feature activated?


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 2:14 am

How do you do that?

The icon isn't showing up yet at my board if that is what you mean.
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 2:15 am

AP > Modules > Points and Reputation > Reputation


Last edited by SLGray on August 23rd 2019, 2:18 am; edited 1 time in total


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 2:16 am

No, I don't. I will go do that now.

That worked. Thank you so much.
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 2:19 am

The tutorial exactly stated this:
This modification is applicable to any forum version, so long as your templates are not heavily modified. You must also have the reputation system enabled under Modules > Reputation > Activate reputation system.


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 2:26 am

Thank and now I understand. I wasn't aware of that. Again thank you for your help.
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 3:05 am

You're welcome.

If this is solved, please click the green solved button above the topic.


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by Beela August 23rd 2019, 3:12 am

Okay and I will.
Beela
Beela
New Member

Female Posts : 17
Reputation : 1
Language : English

http://homeawayfromhome.forumotion.com/

Back to top Go down

Solved Re: Like/Dislike Button Coding

Post by SLGray August 23rd 2019, 3:24 am

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


Like/Dislike Button Coding Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51581
Reputation : 3526
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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