Set dropdown selector

  • farlington

    (@farlington)


    4 years, 2 months ago

    I’m trying to combine multiple font samplers on one page, hide the dropdown selector for all but one fontsampler and link their fonts so that a change to the visible dropdown font selector changes any other hidden one. I’m using the fontsampler.event.activatefont event.
    This allows me to use multiple single line data blocks that makes it easier to control line length per block. (so not ticked ‘allow line breaks’)
    Hiding font selectors works ok but is there any ?CSS to deal with the unexpected blank row gap?

    
$('.font-lister').not(':last').hide();

    And I have got stuck setting the font selection for the to be hidden font sampler selectors. Things I have tried:

    
$(myevent.target).find(".font-lister option:selected").html('Arimo Bold')  // now there are multiple fontsamplers I’m not sure this is the best way to select / change
$(myevent.target).find(".font-lister option:selected").val(2)

fl=$('.font-lister:eq(2)')  / a better way to select?

la=$('.label:eq(2)')  // get reference to third fontsampler
la.html('Arimo Bold')  //  changes dropdown for third fontsampler to Arimo Bold but doesn’t change the font in the data block.

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author kontur

    (@kontur)

    4 years, 1 month ago

    Hey,

    do you have a sample page online somewhere so I can follow along a bit more easily? Hard to say without seeing what’s happening 🙂

    What do you mean with the “unexpected blank row gap”?

    Why do you need to change the hidden font sampler selectors? Or are you trying to use that to switch the fonts loaded in those other samplers? You could use jQuery’s .trigger(‘change’) on those selects.

    Cheers,
    Johannes

    Thread Starter farlington

    (@farlington)

    4 years, 1 month ago

    Hi Johannes
    I created a quick test site here to show the concept
    https://muddy-mealy.jurassic.ninja/sample-page/

    a) See the ‘gap’ between line 1 and line 2 text boxes due to the hidden selector. Can this gap be reduced ?
    b) If you change the line 3 selector it does set the line two selector to ‘Princess Sofia’ but is doesn’t change the line 2 test box font. I’ve tried trigger attempts in various manners and also as per https://stackoverflow.com/questions/10547622/trigger-change-event-select-using-jquery/10547666
    NB I’ve put a debugger statement in the code to allow easy inspection
    Thanks!

    Plugin Author kontur

    (@kontur)

    4 years, 1 month ago

    Hey,

    you can try add this code to the page on which you want the dropdowns to be in sync.

    <script>
jQuery(function ($) {
	$("body").on("fontsampler.event.activatefont", ".fontsampler-wrapper", function () {
		var selectedFontIndex = $(this).find(".font-lister option:selected").index(),
			$otherSelects = $(".fontsampler-wrapper").not(this).find(".font-lister select")

		$otherSelects.each(function () {
			// Only change if the selected font is not the one we want
			if ($(this).val() != selectedFontIndex) {
				$(this).val(selectedFontIndex)

				// Create and trigger a native 'change' event so the selectric 
				// plugin will change the dropdown
				var evt = document.createEvent('HTMLEvents');
		        evt.initEvent("change", true, true);
		        $(this)[0].dispatchEvent(evt);
		    }
		})
	})
})
</script>

    For the gap, try adding this CSS to your page:

    This will hide the “hidden” dropdown of your first Fontsampler, notice the id

    .fontsampler-id-1 .fontsampler-ui-block-fontpicker { 
   display: none;
}

    This will decrease the space around the text inputs of all Fontsamplers:

    .current-font {
    margin-bottom: 0 !important;
}

    Hope this helps 😉

    Thread Starter farlington

    (@farlington)

    4 years, 1 month ago

    Hi Johannes
    That works great but I googled and see that Event.initEvent() is supposedly deprecated. https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually
    https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

    Would this sort of approach work (but couldn’t get it to work)
    document.querySelector('.font-lister').dispatchEvent(new Event('change', { 'bubbles': true })):

    Thanks again

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Set dropdown selector’ is closed to new replies.