CODEWITHSUNDEEP
javascriptjqueryhtml
teslasimus
teslasimus

Reputation: 1298

jQuery: hide element

I have a "feedback widget" that i want to hide for low resolution screens. my problem is that it's injecting the following code right after <body> and no metter what i try i can't hide reformal_tab element

<a id="reformal_tab" href="http://domain.com" onclick="Reformal.widgetOpen();return false;" onmouseover="Reformal.widgetPreload();" onmouseout="Reformal.widgetAbortPreload();"><img alt="" src="domain.com/tab.png"></a>

what i've tried

<script>
        $('reformal_tab').hide();
        $('#reformal_tab').hide();
</script>

this is the actual widget if that can help http://reformal.ru/

the code:

<script type="text/javascript">
$(function() {
    $('#reformal_tab').hide();
});

    var reformalOptions = {
        project_id: 93459,
        project_host: "domain.com",
        tab_orientation: "left",
        tab_indent: "50%",
        tab_bg_color: "#F05A00",
        tab_border_color: "#FFFFFF",
        tab_border_width: 2
    };

    (function() {
        var script = document.createElement('script');
        script.type = 'text/javascript'; script.async = true;
        script.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'media.reformal.ru/widgets/v3/reformal.js';
        document.getElementsByTagName('head')[0].appendChild(script);
    })();
</script>

you can see it live here http://jsfiddle.net/PQsQq/2/

Upvotes: 0

Views: 205

Answers (3)

Aesthete
Aesthete

Reputation: 18858

The second call is the valid one. The # references the element by id.

$('#reformal_tab').hide();

You'll also need to call it when the document is ready.

$(function() {
    $('#reformal_tab').hide();
});

Why don't you just make it hidden when you inject it, and then you can show it for higher res screens?

<a id="reformal_tab" style="display:none;" href="http://domain.com" ...

Then somewhere in your script..

if(highResolution) {
  $("#reformal_tab").show();
}

Upvotes: 3

adeneo
adeneo

Reputation: 318342

If the element is injected with javascript, it's probably inserted dynamically after DOM ready. The solution is rather simple, in your CSS do:

#reformal_tab {display: none;}

Upvotes: 0

Mike Brant
Mike Brant

Reputation: 71422

Why not just remove it?

$('#reformal_tab').remove();

Upvotes: 0

Related Questions