search

needim / wdt-emoji-bundle

Slack like emoji picker with apple/ios, twitter/twemoji, google, emojione, facebook, messenger emoji support
http://ned.im/wdt-emoji-bundle
MIT License
420 stars 86 forks source link

Cannot read property 'querySelector' of null #6

Closed hamidhadi closed 7 years ago

hamidhadi commented 8 years ago

I get this error on wdt-emoji-bundle.js:70: "Cannot read property 'querySelector' of null"

bajramemini commented 8 years ago

I get the same error. Any help?

bajramemini commented 8 years ago

Found the answer to this one.

Just put this HTML in your file and it should work:

<div class="wdt-emoji-popup">
        <a href="#" class="wdt-emoji-popup-mobile-closer"> &times; </a>
        <div class="wdt-emoji-menu-content">
            <div id="wdt-emoji-menu-header">
                <a class="wdt-emoji-tab active" data-group-name="Recent"></a>
                <a class="wdt-emoji-tab" data-group-name="People"></a>
                <a class="wdt-emoji-tab" data-group-name="Nature"></a>
                <a class="wdt-emoji-tab" data-group-name="Foods"></a>
                <a class="wdt-emoji-tab" data-group-name="Activity"></a>
                <a class="wdt-emoji-tab" data-group-name="Places"></a>
                <a class="wdt-emoji-tab" data-group-name="Objects"></a>
                <a class="wdt-emoji-tab" data-group-name="Symbols"></a>
                <a class="wdt-emoji-tab" data-group-name="Flags"></a>
                <a class="wdt-emoji-tab" data-group-name="Custom"></a>
            </div>
            <div class="wdt-emoji-scroll-wrapper">
                <div id="wdt-emoji-menu-items">
                    <input id="wdt-emoji-search" type="text" placeholder="Search">
                    <h3 id="wdt-emoji-search-result-title">Search Results</h3>
                    <div class="wdt-emoji-sections"></div>
                    <div id="wdt-emoji-no-result">No emoji found</div>
                </div>
            </div>
            <div id="wdt-emoji-footer">
                <div id="wdt-emoji-preview">
                    <span id="wdt-emoji-preview-img"></span>
                    <div id="wdt-emoji-preview-text">
                        <span id="wdt-emoji-preview-name"></span><br>
                        <span id="wdt-emoji-preview-aliases"></span>
                    </div>
                </div>

                <div id="wdt-emoji-preview-bundle">
                    <span>WDT Emoji Bundle</span>
                </div>
            </div>
        </div>
hamidhadi commented 8 years ago

@bajramemini Thanks. The error does not appear with your solution. But when I click on emoji icon, the emojies list doesn't appear.

bajramemini commented 8 years ago

@Hamiid check if the list beneath your view. I had the icon on the bottom of my page and couldn't see the emoji-popup either.