CODEWITHSUNDEEP
javascriptajaxhtml
Sulejman Vulaj
Sulejman Vulaj

Reputation: 73

Load menu just when it is needed

I get my page overloaded after I add to many contents I'm calling contextmenu (righmenu) via javascript but when it haves many contents pages loads so slowly

here is my JavaScript rightClick menu:

<script>
    $(document).ready(function() {
        context.init({preventDoubleContext: false});


        context.attach('#ID', [
        {text: '<i class="el-icon-download-alt" style="color: #1AADC1"></i> &nbsp;&nbsp;Download', href: '#', extra: 'target="_blank"'},
        {divider: true},
        {text: '<i class="el-icon-link" style="color: #3CC8DB"></i> &nbsp;&nbsp;Export Link', href: '#link_ID', extra: 'class="popup-with-form"'},
        {text: '<i class="el-icon-share-alt" style="color: #3CC8DB"></i> &nbsp;&nbsp;Share', subMenu: [
        {text: '<i class="fa fa-envelope fa-lg" style="color: #009688"></i> &nbsp;&nbsp;Email', href: '#', target:'_blank', },
        {text: '<i class="fa fa-facebook fa-lg" style="color: #0D47A1"></i> &nbsp;&nbsp;Facebook', href: '#', target:'_blank', },
        {text: '<i class="fa fa-google-plus fa-lg" style="color: #F44336"></i> &nbsp;&nbsp;Google+', href: '#', target:'_blank', },
        {text: '<i class="fa fa-twitter fa-lg" style="color: #42A5F5"></i> &nbsp;&nbsp;Twitter', href: '#', target:'_blank', }
        ]}, 
        {divider: true},
        {text: '<i class="el-icon-remove" style="color: #DB3C4C"></i> &nbsp;&nbsp;Delete', href: '#del_ID', extra: 'class="modal-basic"'},
        {text: '<i class="el-icon-font" style="color: #3CDBAE"></i> &nbsp;&nbsp;Edit', href: '#', extra: 'class="simple-ajax-popup"'},
        {divider: true},
        {text: '<i class="el-icon-cog" style="color: #48A360"></i> &nbsp;&nbsp;Properties', href: '#info_ID', extra: 'class="popup-with-form"'},
    ]);

    context.settings({compress: true});
});
</script>

ID is different on all.

HTML code:

<div id="ID"  class="thumbnail">
    <label for="cID"><div class="thumb-preview">
    <a class="thumb-image" href="<TMPL_VAR img_preview>">
        <img src="#" class="img-responsive" alt="Project">
    </a>
    <div class="mg-thumb-options">
        <div class="mg-toolbar">
            <div class="mg-option checkbox-custom checkbox-inline">
                <input type="checkbox" name="demo" id="cID" value="ID">
                <label for="c<TMPL_VAR file_id>">SELECT</label>
            </div>
        </div>
    </label>
</div>
<h5 class="mg-title text-weight-semibold">Demo Test</h5>

So I have that it's okay if i have just 4 or 5 content but up of that its slow down my site, I want to have just one dropdown menu, menus I dont need to add JavaScript code for all HTML content.

Upvotes: 0

Views: 58

Answers (1)

line-segment
line-segment

Reputation: 389

Don't put your HTML code in jQuery function. Instead use jQuery to only hide or show the drop down menu. No need to add HTML inside it. Put the HTML back wrap it with a div. Show/hide that div using jQuery $(#id).show()/hide().

Upvotes: 1

Related Questions