search

dyerc / jQuery-Font-Chooser

A custom combo box to allow font selection from a preset list, whilst previewing the font
MIT License
30 stars 16 forks source link

Multiple Choosers #1

Closed robmoffat closed 11 years ago

robmoffat commented 11 years ago

HI,

I think I have an issue where I have 2 choosers on the page. Only the function of the second selector set up gets called.

Any idea how I can fix that?

(Great plugin, btw) thanks,

Rob

dyerc commented 11 years ago

Hi Rob,

Thanks, glad it is useful for you!

I had some changes locally that I forgotten to commit which seem to fix this issue. I have also updated the example to show 2 choosers on one page.

Let me know if this doesn't fix your issue?

Regards, Chris

robmoffat commented 11 years ago

HI,

Actually, Chris I don't think that fixed it.

I've made a small change to your example, so that the alert shows "first changed" and "Second changed". Whenever I change either box, "Second changed" appears.

<!DOCTYPE html>
<html>
<head>
    <title>Font Selector</title>

    <link rel="stylesheet" href="fontselector.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="../src/jquery.fontselector.js"></script>

    <script type="text/javascript">

    $(function() {
        $('#fontSelect').fontSelector({
            'hide_fallbacks' : true,
            'initial' : 'Courier New,Courier New,Courier,monospace',
            'selected' : function(style) { alert("first changed"); },
            'fonts' : [
                'Arial,Arial,Helvetica,sans-serif',
                'Arial Black,Arial Black,Gadget,sans-serif',
                'Comic Sans MS,Comic Sans MS,cursive',
                'Courier New,Courier New,Courier,monospace',
                'Georgia,Georgia,serif',
                'Impact,Charcoal,sans-serif',
                'Lucida Console,Monaco,monospace',
                'Lucida Sans Unicode,Lucida Grande,sans-serif',
                'Palatino Linotype,Book Antiqua,Palatino,serif',
                'Tahoma,Geneva,sans-serif',
                'Times New Roman,Times,serif',
                'Trebuchet MS,Helvetica,sans-serif',
                'Verdana,Geneva,sans-serif',
                'Gill Sans,Geneva,sans-serif'
                ]
        });

        $('#fontSelect2').fontSelector({
            'hide_fallbacks' : true,
            'initial' : 'Courier New,Courier New,Courier,monospace',
            'selected' : function(style) { alert("second changed"); },
            'fonts' : [
                'Arial,Arial,Helvetica,sans-serif',
                'Arial Black,Arial Black,Gadget,sans-serif',
                'Comic Sans MS,Comic Sans MS,cursive',
                'Courier New,Courier New,Courier,monospace',
                'Georgia,Georgia,serif'
                ]
        });
    });

    </script>
</head>
<body>

    <div style="width:300px;margin:100px auto;">

        <div id="fontSelect" class="fontSelect">
            <div class="arrow-down"></div>
        </div>

        <div id="fontSelect2" class="fontSelect">
            <div class="arrow-down"></div>
        </div>

    </div>

</body>
</html>
dyerc commented 11 years ago

Hi Rob,

Hmm, it seems the settings variables were being overwritten. That last commit isn't an ideal solution but it fixed your example for me.

Regards, Chris

robmoffat commented 11 years ago

and for me too. Thanks very much! Working lovely now!