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.
- When user clicks the button on the dropdown, get the type of font/font name
- 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: Screen Recording 2020-04-17...
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,
When I put an alert(font) in your code this is the result: Selecione uma fonteTimes New RomanTimesserifArial
Best,
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);
}
});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: How do I get the text value of a selected option? | jQuery Learning Center
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.
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?
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);
});
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!
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).
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')
