The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Like & dislike Bar

View previous topic View next topic Go down

Solved Like & dislike Bar

Post by runawayhorses on April 14th 2012, 12:59 pm

How do you make the images in the like and dislike bar even. The + button is higher than the - button.



Here's the code I'm using right now.

Code:
    var CopyrightNotice = 'Professional like/dislike bar for forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
    $(function() {
        $('#main-content').prepend('<style type="text/css">ul.profile-icons li.ddvote{height:20px;line-height:20px;background:#fff;color:#000;border:1px solid #a0b0c0;font-size:12px;font-weight:bold}ul.profile-icons li.ddvote a{display:inline}.postbody ul.profile-icons li.ddvote img{cursor:default;vertical-align:middle}.postbody ul.profile-icons li.ddvote a img{cursor:pointer}</style>');
        var x=$('.vote').get();
        for (i=x.length-1; i>=0; i--) {
            var plus='0';
            var minus='0';

            var vplus='<img style="position:relative;top:-3px;margin-right:3px" title="Like" src="URL EDITED" />';
            var vminus='<img style="margin:0px 3px 0px 10px" title="Dislike" src="URL EDITED" />';

            var y=$(x[i]).find('.vote-button a').get();
            for (j=0; j<y.length; j++) {
                if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
                else if (y[j].innerHTML=='-') {vminus='<a href="'+y[j].href+'">'+vminus+'</a>';}
            }
            var y=$(x[i]).find('.vote-bar')[0];
            if (y) {
                var z=y.title.split(' ');
                var pct=parseInt(z[3].replace(/%/,''))/100;
                var num=parseInt(z[4].replace(/\(/,''));
                plus=String(Math.round(num*pct));
                minus=String(num-plus);
            }
            if (x[i].parentNode.parentNode.parentNode.className=='module row1') {
                $(x[i].parentNode).find('.profile-icons').prepend('<li class="ddvote"> ' + vplus + plus + vminus + minus + ' <li>');
                $(x[i].parentNode).find('.h3').css('border','none');
            }
            else {
                $(x[i].parentNode.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + vminus + minus + ' <li>');
            }
            x[i].parentNode.removeChild(x[i]);
        }
    });


Last edited by runawayhorses on April 14th 2012, 5:20 pm; edited 1 time in total

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Like & dislike Bar

Post by Guest on April 14th 2012, 3:19 pm

Hi!

Find in that code: top:-3px and replace -3px to a bigger value, like -5px Wink

Guest
Guest


Back to top Go down

Solved Re: Like & dislike Bar

Post by runawayhorses on April 14th 2012, 3:37 pm

Thanks, but changing the number to 5 made the + button go even higher, so I changed the number to 0 and now they are even. Smile

Is there a number for the - button too because I would change them both to 1. I think that would put them both in the middle of the bar even better.

I wonder why they thought the + button looked better higher than the - button?? I think it makes them look unbalanced like the person doesn't know tables..lol.

Here is how they look now:


runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Like & dislike Bar

Post by Guest on April 14th 2012, 4:31 pm

Because the script is maden by LGforum and he just applied a CSS code to move it higher.

And yes, you can put it to 0. I missunderstanded your question. Replace it to:
Code:
    var CopyrightNotice = 'Professional like/dislike bar for forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
    $(function() {
        $('#main-content').prepend('<style type="text/css">ul.profile-icons li.ddvote{height:20px;line-height:20px;background:#fff;color:#000;border:1px solid #a0b0c0;font-size:12px;font-weight:bold}ul.profile-icons li.ddvote a{display:inline}.postbody ul.profile-icons li.ddvote img{cursor:default;vertical-align:middle}.postbody ul.profile-icons li.ddvote a img{cursor:pointer}</style>');
        var x=$('.vote').get();
        for (i=x.length-1; i>=0; i--) {
            var plus='0';
            var minus='0';

            var vplus='<img style="position:relative;bottom:1px;margin-right:3px" title="Like" src="URL EDITED" />';
            var vminus='<img style="position:relative;bottom:1px;margin:0px 3px 0px 10px" title="Dislike" src="URL EDITED" />';

            var y=$(x[i]).find('.vote-button a').get();
            for (j=0; j<y.length; j++) {
                if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
                else if (y[j].innerHTML=='-') {vminus='<a href="'+y[j].href+'">'+vminus+'</a>';}
            }
            var y=$(x[i]).find('.vote-bar')[0];
            if (y) {
                var z=y.title.split(' ');
                var pct=parseInt(z[3].replace(/%/,''))/100;
                var num=parseInt(z[4].replace(/\(/,''));
                plus=String(Math.round(num*pct));
                minus=String(num-plus);
            }
            if (x[i].parentNode.parentNode.parentNode.className=='module row1') {
                $(x[i].parentNode).find('.profile-icons').prepend('<li class="ddvote"> ' + vplus + plus + vminus + minus + ' <li>');
                $(x[i].parentNode).find('.h3').css('border','none');
            }
            else {
                $(x[i].parentNode.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + vminus + minus + ' <li>');
            }
            x[i].parentNode.removeChild(x[i]);
        }
    });
You can replace bottom:1px to 2, or more, if you want. Wink

Hey, you deleted your post. I merged double posting...

Add to CSS Stylesheet:
Code:
.ddvote a{
margin-right: 1px !important;
margin-left: 1px !important;
}

Guest
Guest


Back to top Go down

Solved Re: Like & dislike Bar

Post by runawayhorses on April 14th 2012, 5:03 pm

Never mind on that last code I don't need it. It doesn't need the space between border and + button I changed my mind on that, so I deleted my last post about that but I noticed you posted while I was deleting..lol

Anyway, here is the final completed button bar:



thanks Coddy Smile

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Like & dislike Bar

Post by Guest on April 14th 2012, 5:08 pm

You're welcome! Very Happy

Guest
Guest


Back to top Go down

Solved Re: Like & dislike Bar

Post by Base on April 14th 2012, 6:44 pm

Topic Solved & Locked

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

View previous topic View next topic Back to top


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