Streaming live at 10am (PST)

Custom function change element attribute

Hello,

I cannot figure out how to code a button that, when pressed, changes a specific element attribute.

I would like several buttons, which allow users to choose the colour of an element.

THANKS!

Hi,

let us see what you have done so far:
Please share a read-only link of your project:

Thanks,
Matthias

Hi,

heres the link of what i am trying to accomplish:

https://preview.webflow.com/preview/colors-e4b606?utm_medium=preview_link&utm_source=designer&utm_content=colors-e4b606&preview=ac56044c28089490ca878e4ef0cbebb1&mode=preview

I have already tried functions along the following lines without success:

('.button').click(function() { (’.target’).style(color: “blue”);
});

I 100% want the solution to be with code as I have further use cases. Such as repeatedly moving an object in a given direction everytime a button is pressed. The interactions only allow for a max two such transformations, as theres only 1st and 2nd click.

Thanks a lot!

Best,

Joseph

You don’t have to code to change a color. Use interaction “Mouse click” and change the bg-color.

Okay thanks so much!!! But what about moving? Im actually asking this so that I can learn the code for this sort of css change in javascript. I will using it for complex interactions on different sites.
In the following project my top slider should move a div block every-time a new sliderpage shows, like a slider nav. But it seems impossible to achieve with given interactions. I was only able to do it, by having multiple div blocks and changing their opacity. But what I want is a single div block that moves everytime slider is moved.

https://preview.webflow.com/preview/josephs-stupendous-project-50563f?utm_medium=preview_link&utm_source=designer&utm_content=josephs-stupendous-project-50563f&preview=c5c6077f274280515591d5aa1f4ec840

(i think you will need to open and close project to see effect of moving the first slider.)

Best,

Joseph

do you have an example of what you are trying to achieve - I am having trouble visualizing what you need… perhaps a site where you saw this implemented?

Yes, the site is the postmates feed (https://postmates.com/feed)

Here is my version: https://preview.webflow.com/preview/josephs-stupendous-project-50563f?utm_medium=preview_link&utm_source=designer&utm_content=josephs-stupendous-project-50563f&preview=c5c6077f274280515591d5aa1f4ec840&mode=preview

Thanks for the help!

you are probably better off with a js carousel/slider - something like swiper.js - but there are others around

Thank you!

However are you saying that these simple transformations are not possible in code on webflow?
I am coming from wix and there it was very simple to make these custom transformations in code (wix corvid)…

I use to use Corvid quite a bit - and there are some instances where it is easier to implement certain things - but overall I believe webflow is superior. In any event when you say it is not possible in code - it is possible - webflow automatically pre-loads jquery - and if you are familiar with it, you can implement the code directly in webflow - you write the code in “custom code” section of the page. Otherwise you can load an external library like swiper.js and using their examples configure the custom behavior you would need.

@Joseph_Albers
If you want to change color by jQuery, your code can’t work

 ('.button').click(function() { (’.target’).style(color: “blue”);
 });

replace it with

<script>
  $(".w-button").click(function(){
    $(".target").css("backgroundColor","blue");
  });
// You have to publish your site first!
</script>
1 Like

Appreciate the help :slight_smile:

Thanks so much Matthias!