Can we manipulate elements wich has been faded out?

I have some buttons on the page which are faded out by default and will be visible only when the user will click on the page content. This is working just fine. I am now in the need to assign some data attribute to one of this buttons just before the user will click on the content making them visible.

It is possible to point to the faded element and add the needed data attribute?

All my attempts were unsuccessful.

Any help with this will be appreciated.

EDIT:

<div class="ui-draggable">
    <div id="119a7" class="container template-block drg-elem">
        <div class="row clearfix drg ui-sortable" contenteditable="true">
            <div class="column col-md-6">
                <h1>Lorem Ipsum</h1>
                <p>Lorem Ipsum is simply dummy text. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                <div class="row-arrange ui-sortable-handle">
                    <div class="btn-xs arrange-handle">
                        <i class="fa fa-arrows"></i>
                    </div>
                </div>
            </div>
            <div class="column col-md-6">
                <img src="assets/builder/images/e09-1.jpg">
                <div class="row-arrange ui-sortable-handle">
                    <div class="btn-xs arrange-handle">
                        <i class="fa fa-arrows"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tool-box">
        <div class="row-settings">
            <i class="fa fa-wrench"></i>
        </div>
    </div>
</div>

There is nothing special in here. This is a template which is dropped on the html page.

The tool-box is the element in question which is faded out.

I have tried to refer to this element but it can not be found. The question is how can I refer to an invisible element.

Answers 1

  • have you remove the element after the element fade out?if not you can,otherwise can't.

    $.extend($.fn, {
        fill: function () {
            return this.data('foo', 'bar');
        },
        inspect: function () {
            console.log(this.data('foo'));
            return this;
        }
    });
    $('button').click(function () {
        $('main div')[this.id]();
    });
    main div {
        width: 100px;
        height: 100px;
        background: #333;
        margin: 0 auto;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="fadeOut">Fade Out</button>
    <button id="remove">Remove</button>
    <button id="fill">Fill Data</button>
    <button id="inspect">Inspect</button>
    <main><div></div></main>


Related Articles