jQuery: hide element

Question

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/

It may be injecting the reformal_tab element after you are attempting to call hide. $('#reformal_tab').hide(); should do it. — Garrett
– Garrett, Commented Mar 28, 2013 at 0:15
load the jquey in head tag and put the hide() after body tag in script tag. — Dieepak
– Dieepak, Commented Mar 28, 2013 at 0:56

Aesthete · Accepted Answer · 2013-03-28 00:34:06Z

3

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();
}

edited Mar 28, 2013 at 0:34

answered Mar 28, 2013 at 0:14

Aesthete

18.9k6 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aesthete Over a year ago

@teslasimus - Ok, made some changes.

Mal Over a year ago

This should definitely work jsfiddle.net/PQsQq delete the javascript or change .hide to .show. Check that you've referenced your jquery javascript correctly?

Aesthete Over a year ago

@Mal - The OP's issue is the HTML is injected into the DOM, so hide() is called before the element is injected, and therefore doesn't exist at the time.

teslasimus Over a year ago

@Aesthete not sure if it's posible, please check the "widget code"

Mal Over a year ago

@Aesthete Ahh! Okay sorry I didn't pick up on this.

Mike Brant · Accepted Answer · 2013-03-28 00:15:20Z

0

Why not just remove it?

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

answered Mar 28, 2013 at 0:15

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

Comments

adeneo · Accepted Answer · 2013-03-28 00:25:42Z

0

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;}

answered Mar 28, 2013 at 0:25

adeneo

319k29 gold badges410 silver badges392 bronze badges

3 Comments

adeneo Over a year ago

@teslasimus - The element is inside an iFrame, which you don't have access to. Just set it in CSS, and it seems you need !important to override the styles -> FIDDLE

teslasimus Over a year ago

but how can i implement it with jquery? i want to show it acording to resolution.

adeneo Over a year ago

@teslasimus - You can't really, but you can use CSS media queries to make it resolution dependent, and that would be the right way to do it, as you don't need jQuery for this.

Collectives™ on Stack Overflow

jQuery: hide element

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related