HTML & CSS Color generator code for Jcink mobile view

[Bryn]

First of all, I have been referred to by someone I know regarding quite a tricky problem regarding the development of a new skin for my forum (which runs on Jcink). The new skin, while on a test board for now, has a color slider originally made by Reid but for some reason, it's completely absent from the forum's Mobile Version and I personally don't want any mobile users feel left out from this nice little feature whenever it's released.

For anyone curious, here are the codes for the color slider itself:

<style>
.slide_input {
    margin-left: 10px;
}

#css_display, #blahs {
    width: 50%;
}

span.bleh table {
    width: 100%;
    margin: 10px auto;
    padding: 10px;
}

div.ui-slider-range {
    width: 0 !important;
}
</style>

<span class="bleh">
<table class="tableborder">
    <tr><td colspan="2" style="text-align: right">Color generator by Reid</td></tr>
    <tr><td>Hue:</td><td style="display: flex"> <input type="text" id="hue_slider" class="slide_input" value="199"/></td></tr>
    <tr><td>Saturation:</td><td style="display: flex"> <input type="text" id="sat_slider" class="slide_input" value="75"/></td></tr>
    <tr><td>Lightness:</td><td style="display: flex"> <input type="text" id="light_slider" class="slide_input" value="35"/></td></tr>
    <tr><td colspan="2"><button type="button" id="reset_theme">Reset to original colors</button></td></tr>
</table></span>

And here is the line of code containing the JavaScript that allows it to work:

<script src="https://files.jcink.net/uploads/cory/rotate_colors.js"></script>

And the link to the test board containing the new skin project is here: Jsandbox

Do note that the color sliders exist in the Light, Dark and Mixed versions of the skin.

If anybody can help tweaking the above codes so that it can be safely used for mobile view, I would really appreciate it.

 

[tomliv]

First of all, I have been referred to by someone I know regarding quite a tricky problem regarding the development of a new skin for my forum (which runs on Jcink). The new skin, while on a test board for now, has a color slider originally made by Reid but for some reason, it's completely absent from the forum's Mobile Version and I personally don't want any mobile users feel left out from this nice little feature whenever it's released.

For anyone curious, here are the codes for the color slider itself:

<style>
.slide_input {
    margin-left: 10px;
}

#css_display, #blahs {
    width: 50%;
}

span.bleh table {
    width: 100%;
    margin: 10px auto;
    padding: 10px;
}

div.ui-slider-range {
    width: 0 !important;
}
</style>

<span class="bleh">
<table class="tableborder">
    <tr><td colspan="2" style="text-align: right">Color generator by Reid</td></tr>
    <tr><td>Hue:</td><td style="display: flex"> <input type="text" id="hue_slider" class="slide_input" value="199"/></td></tr>
    <tr><td>Saturation:</td><td style="display: flex"> <input type="text" id="sat_slider" class="slide_input" value="75"/></td></tr>
    <tr><td>Lightness:</td><td style="display: flex"> <input type="text" id="light_slider" class="slide_input" value="35"/></td></tr>
    <tr><td colspan="2"><button type="button" id="reset_theme">Reset to original colors</button></td></tr>
</table></span>

And here is the line of code containing the JavaScript that allows it to work:

<script src="https://files.jcink.net/uploads/cory/rotate_colors.js"></script>

And the link to the test board containing the new skin project is here: Jsandbox

Do note that the color sliders exist in the Light, Dark and Mixed versions of the skin.

If anybody can help tweaking the above codes so that it can be safely used for mobile view, I would really appreciate it.

It appears to not even be in the DOM on mobile so some script/component isn't even being sent to mobile devices. When I inspected Safari on my phone, it isn't even in the DOM.

CleanShot 2024-11-21 at 12.33.46

Screenshot uploaded to CleanShot Cloud

cln.sh

The phone in the screenshot is my actual iPhone being mirrored on my laptop. It is not a simulator.

Here's a vid of the inspector:

CleanShot 2024-11-21 at 12.52.47

Video uploaded to CleanShot Cloud

cln.sh

 

[Bryn]

So... do you think it could be added to the DOM of mobile view anyway, or not? 😕

 

[tomliv]

So... do you think it could be added to the DOM of mobile view anyway, or not? 😕

I don’t see why not but I don’t know what’s keeping it from being rendered. You’d need to track that down. It will probably need some mobile layout tweaks.

 

[Bryn]

That's something that my right-hand man of the forum (Cory, who is my forum's official Developer) to try and sort out... and perhaps tweaking the mobile layout might make it suddenly appear in mobile view.

And I can allow anybody else to try and do this should Cory be unable to do so, where I can make them an "Assistant" that way (which allows them to access certain parts of the Admin CP, such as Skins & Templates).

 

[tomliv]

That's something that my right-hand man of the forum (Cory, who is my forum's official Developer) to try and sort out... and perhaps tweaking the mobile layout might make it suddenly appear in mobile view.

And I can allow anybody else to try and do this should Cory be unable to do so, where I can make them an "Assistant" that way (which allows them to access certain parts of the Admin CP, such as Skins & Templates).

It's not just being hidden from view. It's literally not in the code that the browser receives to display the page. Whatever is controlling whether or not you see a mobile layout or desktop layout - which doesn't appear to be the CSS - is most likely also controlling whether you get the color sliders or not.

 

[Bryn]

Just to say, the reason why the sliders are completely absent from mobile view is because mobile view generally ignores whatever's in the board wrappers and because of this, something about a "mobile logo" macro would have to be added in, to which Cory will test out whenever he can.

Thanks for your assistance so far @tomliv

 

[Bryn]

Bumping this... to say that Cory hasn't had the time to do what I stated and, I wonder if anybody can help make the colour sliders visible for these skins when viewing on mobile mode. Either any of you can provide me code for this to happen, or volunteer to be an "Assistant" if you join the test board to do this, I'm open for anything 🙂