Tip jar

If you like CaB and wish to support it, you can use PayPal or KoFi. Thank you, and I hope you continue to enjoy the site - Neil.

Buy Me a Coffee at ko-fi.com

Support CaB

Recent

Welcome to Cook'd and Bomb'd. Please login or sign up.

April 27, 2024, 11:25:40 AM

Login with username, password and session length

Anyone familiar with javascript, I'm losing my shit

Started by QDRPHNC, January 27, 2023, 10:01:50 PM

Previous topic - Next topic

QDRPHNC

Working on a website, trying to change the colour of one thing via javascript, been at it for about 4 hours now. I don't know what I'm doing help

touchingcloth

I know a very tiny amount, though probably not as much as you. All I can offer is to suggest whether it could be CSS or something which is overriding whatever colours you're setting in JS?

I'm sure someone on here will have decent knowledge, but have you tried Stack Overflow?

QDRPHNC

I am absolutely sure I know less than you, I ever only knew enough to get by making websites, and even that is at least a decade out of date. It's a very specific issue:

- Using a Wordpress builder called Semplice, it has an option to create custom cursors.
- As far as I can tell, all the parameters/styling for the custom cursors are generated with javascript and embedded inline in whatever page the cursors appear on.

Here's the code (I've had to trim out a bunch of other extraneous stuff, so to be honest I'm not even sure that this is formatted correctly):

Quote<script type='text/javascript' id='semplice-frontend-js-js-extra'>
/* <![CDATA[ */
var semplice = {"customize":{"cursor":{"custom_cursor":"enabled","color":"#21ff00","size":"0","mouseover_color":"#0400ff","inner_color":"transparent","mouseover_blend_mode":"normal","custom_mouseovers":"gallery_next","gallery_next_cursor_text":"NEXT","gallery_next_cursor_color":"#ff0008","gallery_next_cursor_inner_color":"#ffffff","logo_cursor_inner_color":"#ffffff","nav_cursor_inner_color":"#000000","nav_cursor_color":"transparent","font_family":"font_98z1g30ev","nav_cursor_type":"text","nav_cursor_text":"GO","letter_spacing":"0.016666666666666666rem","font_size":"2.4444444444444446rem","mouseover_size":"100","logo_cursor_color":"transparent","logo_cursor_type":"text","logo_cursor_text":"FUCKNUT","gallery_next_cursor_blendmode":"normal","blend_mode":"normal","gallery_prev_cursor_blendmode":"normal","gallery_prev_cursor_inner_color":"#ffffff","gallery_next_cursor_type":"text","gallery_prev_cursor_type":"text","gallery_prev_cursor_text":"PREVIOUS","nav_cursor_blendmode":"multiply","logo_cursor_blendmode":"exclusion","show_more_cursor_type":"text","show_more_cursor_text":"SHOWMEMORE","gallery_prev_cursor_color":"#ff0008"}}};
/* ]]> */
</script>

So where it says "gallery_next_cursor_color":"#ff0008" and "gallery_prev_cursor_color":"#ff0008" - I just need to add an opacity of 0 to those values. I can change them to "transparent" in the Semplice GUI, but then it seems to not define any colour and defaults to give them the parent element cursor colour, which I don't want.

The big problem is the fact this is inline code - I can't find anywhere in the theme js and css files to make changes directly.

Also! Since the code with the opacity will be embedded alongside the original code generated by Semplice, I'm hoping there is some kind of flag to set (like !important in CSS) that will tell it to override anything else on the page.

QDRPHNC

#3
Tried this, but doesn't work.

Quote<script type='text/javascript'>
var semplice = {"customize":{"cursor":{"gallery_next_cursor_color":"rgba(255, 255, 255, 0)","gallery_prev_cursor_color":"rgba(255, 255, 255, 0)"}}};
</script>

If it helps, the javascript that I am able to embed on the page (via a "Code" module in the Semplice GUI) is being added above the relevant code that Semplice itself is generating.

QDRPHNC

Just solved it by manually typing an alpha value into the colour picker in Semplice.

5 hours yesterday. Is this how coders feel a lot?

touchingcloth

Quote from: QDRPHNC on January 28, 2023, 02:09:52 PM5 hours yesterday. Is this how coders feel a lot?

I did a computer science degree, but never got on with the coding side of things, pretty much for this exact reason. I think career coders must enjoy the problem solving aspect of it in a way I don't. I like problem solving and puzzles in general, but when you're trying to make a piece of code work and it's just utterly fucked, I think it's the lack of measurable progress that puts me off. In your example, it'd be something if you were trying to get to red and your changes were making it vary between pink and orange and yellow. But when it just doesn't change at all? Nah, this is why I'll never be a coder.

(That said, I quite enjoy writing SQL. Probably the difference is that it's rare to have SQL code which starts of doing fuck all and remains doing fuck all no matter how many changes you make to it.)

BlodwynPig

Hope the client doesn't get offended

"logo_cursor_text":"FUCKNUT"

QDRPHNC

I'm the client in this case and it is completely deserved.

Quote from: touchingcloth on January 28, 2023, 07:03:42 PMI did a computer science degree, but never got on with the coding side of things, pretty much for this exact reason.

Going back maybe 20 years, I used to code websites when it was all done manually, and yesterday's problems did sort of take me back to the fun of it - ruthlessly logical, and you feel like a detective chasing several strands of possibility back to their sources, but after a day of nothing but that, I think I made a good decision not continuing with it as a career.

El Unicornio, mang

I don't know how well this works but this is what ChatGPT has to say:

QuoteIt is difficult to say what the intended function of this code is without more context. However, it appears to be defining a JavaScript object called "semplice" with a nested object called "customize" that contains properties for customizing the cursor on a website.

There are some issues with this code that I can point out.

There is an offensive word which is not appropriate to use.
The code is not indented, making it difficult to read and understand.
The object properties and values are not properly formatted, making it difficult to read and understand.
Here's an example of how it could be refactored:

<script>
const semplice = {
  customize: {
    cursor: {
      custom_cursor: "enabled",
      color: "#21ff00",
      size: "0",
      mouseover_color: "#0400ff",
      inner_color: "transparent",
      mouseover_blend_mode: "normal",
      custom_mouseovers: "gallery_next",
      gallery_next_cursor_text: "NEXT",
      gallery_next_cursor_color: "#ff0008",
      gallery_next_cursor_inner_color: "#ffffff",
      // ...
    }
  }
};
</script>

This is just an example of how it could be refactored, but it would be best to consult with the developer who wrote this code or the person who is using it to get a better understanding of the intended functionality, and make any changes accordingly.

QDRPHNC

That does look a lot better actually, but ChapGPL needs to learning what minified means. Neat idea though, I might give that a go in the future. So far I've only been using ChatGPL to write articles that I can put into mock-ups.

Norton Canes

Couldn't you just set transparency in the hex value? #00ff0008

Memorex MP3

Quote from: Norton Canes on January 30, 2023, 11:07:38 PMCouldn't you just set transparency in the hex value? #00ff0008
this is relatively new but fairly widely supported now.

if you're having any issues with it rgba(0, 255, 0, 8) should work

QDRPHNC

Quote from: Norton Canes on January 30, 2023, 11:07:38 PMCouldn't you just set transparency in the hex value? #00ff0008

That's what I ended up doing - it just didn't occur to me because the GUI colour pickers I'm used to using (Photoshop etc) are pretty strict about only having 6 characters. Semplice is much less strongest it seems, but there's also no indication you can do it.