Help with Custom Sliders!

Everything related to our vore chat room and vore roleplaying room can go here!

Help with Custom Sliders!

Postby Vidofinir » Fri Jan 23, 2015 1:32 pm

Hello all!

I've been wondering for months now, how to make additional sliders on my chat profile for custom kinks. I'm seeing it done more and more by other people, but the ones I've asked have been either busy, unwilling to share how it's done, or simply claimed it 'involved Javascript and is beyond my understanding'. As much as the existing sliders are plenty good enough, it would be amazing to know how to customize them and add a few.

Does anyone know how to do this, and would be willing to share? Is it indeed super-complicated, or is it something where pasting a sample of code and telling where to use it would be sufficient to helping me?

Thanks in advance to anyone willing to help ^^
User avatar
Vidofinir
Intermediate Vorarephile
 
Posts: 534
Joined: Wed Nov 14, 2007 12:00 am

Re: Help with Custom Sliders!

Postby masterofvore1 » Fri Jan 23, 2015 3:26 pm

I think I might have partly solved it, but it appears in slightly wrong place so I might need some tweaking.
basically, you could do something like this
Spoiler: show
Code: Select all
<div class="appendme">
<tr>
                    <td class="preftitle">Oral Vore</td>
                    <!-- <td class='preflabel prefpred leftlabel'>Always/Love</td> -->
                    <td class="pref">
<!--settings for pred -->
                                                <div class="prefbox prefpred">
                            <div class="leftbg"></div>
                            <div class="rightbg"></div>
                            <div class="colorbar" style="width: 50%; right: 50%; background-color: #FFFFFF;"></div>
                            <div class="plus">+</div>
                            <div class="minus">--</div>
                        </div>
<!-- settings for prey -->
                                                                        <div style="display: none;" class="prefbox prefprey">
                            <div class="leftbg"></div>
                            <div class="rightbg"></div>
                            <div class="colorbar" style="width: 50%; right: 50%; background-color: #FFFFFF;"></div>
                            <div class="plus">+</div>
                            <div class="minus">--</div>
                        </div>
                                            </td>
                                 </div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {

$(".appendme").appendTo("#pref-sliders-swap")
});
</script>

with the profile in "html mode(disable auto format)" ticked.
background color is in hexadecimal, you could look up html color to decide what to put there. "width" determines how much of the bar is filled on either side. replacing "right" with "left" yields a fill on the other side(for dislikes). in preftitle change "oral vore" to whatever you want the slider to be titled.
EDIT: found a way that makes it line up properly, but it's harder to read:
Code: Select all
<script>
$(document).ready(function() {

$("tbody").append("<tr><td class='preftitle'>Oral Voreaaa</td><td class='pref'><div class='prefbox prefpred'><div class='leftbg'></div><div class='rightbg'></div><div class='colorbar' style='width: 50%; right: 50%; background-color: #FFFFFF;'></div><div class='plus'>+</div> <div class='minus'>--</div> </div><div style='display: none;' class='prefbox prefprey'> <div class='leftbg'></div> <div class='rightbg'></div><div class='colorbar' style='width: 50%; right: 50%; background-color: #FFFFFF;'></div><div class='plus'>+</div><div class='minus'>--</div></div></td>");
});
</script>
User avatar
masterofvore1
---
 
Posts: 1042
Joined: Mon Feb 21, 2011 7:24 pm
Location: anywhere I can make something ;)

Re: Help with Custom Sliders!

Postby Vidofinir » Fri Jan 23, 2015 4:04 pm

Thank you! I will give this a try shortly and see how it works ^^

Edit: Thank you again! Works very well. Wondering how I might insert custom kinks into the middle of the other sliders as opposed to at the bottom, but with this in mind, I'll probably just go for all customs anyway.

Edit: Pasting '<td class='prefdetail'>DETAILS ABOUT SLIDER HERE</td>' into the script allows you to add a text-description to your slider, as you could with the preexisting ones. However, the [pred][/pred] and [prey][/prey] tags that normally allow you to have different text for each don't seem to work here, nor does inserting the prefdetail tag twice, once in each half of the slider's composition. While this isn't a problem for me, as the character I wanted this for is strictly predatory, I'm curious to know if anyone knows how to add text to both sides, for future profiles or the benefit of others reading this.
User avatar
Vidofinir
Intermediate Vorarephile
 
Posts: 534
Joined: Wed Nov 14, 2007 12:00 am

Re: Help with Custom Sliders!

Postby Jswrighting » Fri Nov 13, 2015 4:34 am

Hate to necro a post, but is there any way to stop the script from interfering with other HTML tables? It keeps adding custom prefs to the bottom of my abilities and items list. Thank you in advance! :-D

Fixed it! Went completely custom now. I forcefully removed all of the aryion.com default scripts and replace them with my own tables and I use your script to modify them! thanks!
-------------
W O O
-------------
User avatar
Jswrighting
Somewhat familiar
 
Posts: 68
Joined: Sun Aug 02, 2015 12:01 pm


Return to Our chat room

Who is online

Users browsing this forum: No registered users