Streaming live at 10am (PST)

Dropdown menu to change font type

Hi,

Does anyone know a way that the user of my website can hit a dropdown and choose the font type of a div section?

Thanks

Hi @Othon_Guilherme_Bera, you could do this with jquery.

  1. When user clicks the button on the dropdown, get the type of font/font name
  2. Assign css Font-family to said font.

You’ll need to edit further depending how you want to grab the font-family name but something like this may work:

var font = ''; 

$('.font-select).on('click', function(){

  font = $(this).text()
  $('.affected-items').css('font-family', font);

});

Hi @dennyhartanto,

Thanks for your help. It is almost working.
See the video: https://share.getcloudapp.com/p9u7lLmp

Notice that when I click on the dropdown it changes once the font type of “Receituário Controle Especial”. However, when I select on the type of font in the list it doesn´t change.

Best,

@dennyhartanto,

When I put an alert(font) in your code this is the result: Selecione uma fonteTimes New RomanTimesserifArial

Best,

@Othon_Guilherme_Bera, can you share a read-only link I can have a look at?

Yes. Can it help as well?
https://share.getcloudapp.com/BluZJbwj

https://preview.webflow.com/preview/1purebrasil?utm_medium=preview_link&utm_source=designer&utm_content=1purebrasil&preview=6b09a0956cea392244085cebd70323ba&pageId=5e8ffd4abb64d4c8608c0dda&mode=preview

@dennyhartanto,

We need somehow to access the text in the option tag.

Yes, exactly! Can you try this? I have also added a check for value, because your first Option is a label has no value.

If still doesnt work, can you attach the publish link? so I can inspect as well.

  $("#Font-Type option").on('click', function(){
	if (value) {
    font = $(this).text();
    alert(font);
    $('#area_emitente').css('font-family', font);
    $('#area_prescricao').css('font-family', font);
   }

  });

@dennyhartanto,

Still doesn´t work: https://1purebrasil.webflow.io/dashboard/receita

The alert stoped sending the message.

I also tryed to include the word :selected after the option as here: https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

Can you try to change if(value) to if ($(this).val())

I made a mistake there, just value is nothing $(this).val() should check the value of the selected option.

@dennyhartanto,

Still not working. I have changed the if as you said.

Also, do you have a dummy account I access? Because the dashboard is behind a login screen I can’t inspect it.

Or you can duplicate the section out of the Dashboard?

@dennyhartanto,

Maybe it is not entering the if statement. I included a new alert inside and is it not alerting.

Okay got it, I hope. Edit: What happened was the $(#Font-Type option) is not triggering anything. So I found this code to trigger when the select value is changed.

$("select#Font-Type").change(function(){
        var font = $(this).children("option:selected").val();
       $('#area_emitente').css('font-family', font);
       $('#area_prescricao').css('font-family', font);
});

@dennyhartanto,

You are great! It is now working!! Let me include different fonts so we can see it more clear now!

Thank you so much!

No problem at all! Glad could get it working. Good luck with the website!

@dennyhartanto,

What I found strange is that 2 elements is not changing. They are both inside the div container.

I tryed to force them in the code as well but doesn´t work: #concentracao (class Paragrath 40) and #nome_paciente (class Paragrath 49).

Hi @Othon_Guilherme_Bera,

Likely because the text is being wrapped on a span. That span has its own family, so to target the span you need $('#concetracao span') and $('#nome_paciente span')

Screen Shot 2020-04-17 at 23.50.47

@dennyhartanto,

Great!! It is working. You saved me man!! You rock!