Putting the sliders in a button using CSS/JS?

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

Putting the sliders in a button using CSS/JS?

Postby Vennaya » Tue Aug 14, 2018 3:54 am

I was curious if anyone knew how to do this, i've seen it done before. As per the title i'm pretty sure that it requires Custom Style Sheets/Javascript and is impossible to do with just the bog standard HTML alone.

Basically, what i mean is - Concealing the preference sliders on a character profile until a button is pressed. I've seen it been done before on a couple different profiles. For example on my characters i have div tab buttons for things like character description, OOC notices, and my Alt list etc etc, however, the Preference sliders are always at the bottom of the page. I wanted to move my preference sliders in to a button/div tab of its own.

Is there anyone reading this that knows how to do this? Would you be willing the share the code with how you did it, or explain how you did it on your profile?
User avatar
Vennaya
Somewhat familiar
 
Posts: 102
Joined: Wed Aug 12, 2015 2:39 pm

Re: Putting the sliders in a button using CSS/JS?

Postby gullvy » Tue Aug 14, 2018 5:03 am

I've been wondering about this as well. Editing the background color of the <body> only results in everything except for the sliders changing background color, as well. It seems pretty hard to manipulate them, and there's no real documentation for how to do so.
User avatar
gullvy
Somewhat familiar
 
Posts: 124
Joined: Tue Jan 03, 2017 2:37 pm

Re: Putting the sliders in a button using CSS/JS?

Postby Chain » Tue Aug 14, 2018 5:17 am

It shouldn't be that hard. You see, you have well-defined classes and id's, for instance pref-sliders. You would need to manually hide it (display:none), set it's position (position:absolute/relative) and display it when needed. It's some work, but it's doable. I have however not really been into character profiles for years now and I don't have any time either to do so. But maybe someone can continue my thought :)
User avatar
Chain
Been posting for a bit
 
Posts: 48
Joined: Mon May 22, 2006 11:00 pm

Re: Putting the sliders in a button using CSS/JS?

Postby Vennaya » Tue Aug 14, 2018 2:28 pm

gullvy wrote:I've been wondering about this as well. Editing the background color of the <body> only results in everything except for the sliders changing background color, as well. It seems pretty hard to manipulate them, and there's no real documentation for how to do so.


That wasn't exactly what i was asking but you bring up a good point. Out of everyone that i've seen move the sliders, i've only ever seen one person that has managed to change it, and im not sure how they did it by looking at the source code for their profile. However, the profiles have a black background for a reason so i think aslong as you keep the background in fairly dark colours then it's fine. The profiles have black backgrounds to help prevent eye strain, as people will usually be looking at these kind of things at night, perhaps even in a room with little to no lighting other than their computer screen, dark colours are almost always better due to that.

I'll see if i can ask that one person i mentioned how they changed the colour, if i can remember who they were. Their sliders wern't hidden in a button though so it might be a simple case of an absolute colour block background.

Chain wrote:It shouldn't be that hard. You see, you have well-defined classes and id's, for instance pref-sliders. You would need to manually hide it (display:none), set it's position (position:absolute/relative) and display it when needed. It's some work, but it's doable. I have however not really been into character profiles for years now and I don't have any time either to do so. But maybe someone can continue my thought :)


Now if the sliders code was in the main profile body then it would be very easy. However, it's embedded in every profile and thus is not possible to directly edit through the edit profile page. The code for it is there in the page's source, but you can't change it. So i'm not sure How you'd either move, hide it, or change how it looks (For example i've seen some people changing the positions of the plus and minus symbols on the sliders, again, no idea how they did that.
The only person i did ask a while back simply replied that they used JS and a bit of CSS to do it, but never specified how - I also can't look at their source page info for answers as JS is hidden in this case.
This all being said however, it looks like some things that are visible in the page source, but not visible in the edit profile page, may be able to be changed and edited in CSS - Again, i'm not very well versed in this and my understanding of even HTML is crude at best, so i'm not sure. But i have seen people change the profile header, where the characters name is usually displayed, to something else. Perhaps moving the sliders will require something similar, atleast in terms of changing code that is un-changeable in the profile body. If anyone can shed some light on this then that would be great!
User avatar
Vennaya
Somewhat familiar
 
Posts: 102
Joined: Wed Aug 12, 2015 2:39 pm

Re: Putting the sliders in a button using CSS/JS?

Postby Vennaya » Wed Aug 15, 2018 9:19 am

Ok, i found a solution. Although, it uses HTML instead of CSS or JS, and im not sure if this is intended or not, it seems very weird, it may even be a bug.
It seems that Chain was right - After finding someone online with a profile that i described, i asked them how they did it. They were unsure, as it was mostly an accident, but they gave me the code they used anyway. It was a massive passage of code, well over 1000 lines of the stuff, but i decided to experiment and see WHAT line was actually doing it.

It took me a while, but i finally narrowed it down to.

<div style="display: none;">


And that's it, i just put this inside one of my div tabs (buttons) and it slotted in perfectly. I'd immagine if you want more fine control of movement over it then you can use an inline CSS style in order to set its position, but i haven't tested this yet. Now, You see...This seems odd to me, there is not even a reference at all to the sliders div tag id at all, it just seems to be hiding a certain div tag, or even all of them, im not sure, forcing the formatting to collapse.

<div id="sliders-clearfix" class="clearfix"><!-- This shoves the sliders below any profile picture. --></div>

Is the piece of code you'll find in anyones page source that uses sliders, it even says that it shoves the sliders underneath a profile picture, or is usually the case at the bottom of the page. I think that the afformentioned line actually removed this formatting requirement and allowed it to be moved.

I'm not sure whether this is intended, and thus im not sure if this will apply a few years down the line should the site or html change at all. But if anyone can explain exactly how that works then that would be great, because im failing to understand how the html knows which one to display as none, or whether its simply hiding everything, in which case then this may not be usable everywhere.
User avatar
Vennaya
Somewhat familiar
 
Posts: 102
Joined: Wed Aug 12, 2015 2:39 pm

Re: Putting the sliders in a button using CSS/JS?

Postby Chain » Wed Aug 15, 2018 1:39 pm

Basically what you did was exploiting the position of the inputted character data with the information that I gave you. That is fortunate of course and not even a bug. It's simple luck, but it might break at any point.
I meant a simple

Code: Select all
#pref-sliders {display:none}


which should do the same and not rely on the position of the data (which might be moved around with further updates)

The clearfix does like the comment says. It breaks floating elements so the sliders will always be under your text. Should you need them for instance on the right or left of something, you would need to "edit" (overwrite, really) this class with custom CSS.

In any way, you can do a whole lot with CSS (and further in JS) because all the necessary bits are there in HTML - Thanks to Leshana and the others for that :)
User avatar
Chain
Been posting for a bit
 
Posts: 48
Joined: Mon May 22, 2006 11:00 pm

Re: Putting the sliders in a button using CSS/JS?

Postby Vennaya » Sat Aug 18, 2018 4:37 am

Yea i see what you mean by it being luck.
I had a div tab for where i list my alts behind that string of code, and it completely hid it. So i had to put my "sliders" tab behind the alts tab, or otherwise it wouldn't work. You might be able to see it here: https://puu.sh/BeQ3v/5fbc2bcccd.html

So i'll give the other snipet you suggested a try, and see if that does the trick but without hiding everything below it :P

EDIT: Just as an additional note, it seems that the div tag to hide it doesn't actually work if you close it off with a </div> so it not only needs luck to be in the right place but it also needs to be the very last div tag otherwise you won't be able to lose any others after that without loosing the effect. This happened both with the piece of code i have tried at first AND with the one that Chain has provided, so i don't think this is a be all end all solution here honestly.

Also, for those of you that happen to stumble upon this thread in the future, this is how i used Chain's code
Code: Select all
<div =#pref-sliders {display:none}>

You just need to put it in a div tag. Now i don't know whether that is causing the whole debuckle about closing the div tabs, if i did a botched job in writing in the code, but it works atleast ^^;

I'm also wondering a little bit how people have changed the fonts of the sliders, alongside moving the pluses and minueses up and down the scale.
User avatar
Vennaya
Somewhat familiar
 
Posts: 102
Joined: Wed Aug 12, 2015 2:39 pm

Re: Putting the sliders in a button using CSS/JS?

Postby Chain » Sat Aug 18, 2018 5:41 am

My Code was CSS. So you need to introduce it like this:

Code: Select all
<style type="text/css">
#pref-sliders {display:none}
</style>


Usually you put it on top of the page, which would be the very first line of your profile.
User avatar
Chain
Been posting for a bit
 
Posts: 48
Joined: Mon May 22, 2006 11:00 pm

Re: Putting the sliders in a button using CSS/JS?

Postby Filan » Sat Dec 29, 2018 4:56 am

I would like to know how to get the sliders to work at all, I have started to refresh an old alt and I setup the sliders and have the dot in show both pred and prey and they are not on the profile. no checkbox on the main character editing screen to include them either.
Elven Captain and Owner of the S.S. Hyperion, Hyperion Class Airship Luxury Liner Converted to Cargo hauler
Finest ship to fly the skies of Earth
User avatar
Filan
???
 
Posts: 2044
Joined: Wed Nov 29, 2006 12:00 am
Location: Mullica Hill, New Jersey

Re: Putting the sliders in a button using CSS/JS?

Postby AnalagousSam » Fri Mar 08, 2019 3:00 pm

Here's a simple Javascript snippet that'll hide your sliders beneath a button (put this in the "Javascript" box). This requires you have Bootstrap styles enabled, but it should animate correctly.

Code: Select all
$(function(){
  var $prefSliders = $("#pref-sliders").addClass("panel collapse");
  var $collapseButton = $(
    `<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#pref-sliders">RP Preferences</button>`
  );
  $prefSliders.before($collapseButton);
})
User avatar
AnalagousSam
Been posting for a bit
 
Posts: 59
Joined: Tue Mar 31, 2015 4:16 pm


Return to Our chat room

Who is online

Users browsing this forum: No registered users