Develop Reference

How to remove "display: none" from my html and body tag

i have just entered my website and all of the contect doesnt seems to appear, in the source there is an inline css style display:none in the html tag and the body tag... is there a way to track what does give this css property to the body and html tag, so i could remove it.. I tried Firebug plugin for Mozilla Firefox, but i cant find anything... The website is running on Wordpress
here is the link http://p315468.for-test-only.ru/

elements hidden with JQuery in (index):
$('html, body').hide()
just remark this line.

You can also try this
$(document).ready(function(e) {
$('.classname').css('display','block');
});
or using Id
$(document).ready(function(e) {
$('#ElementId').css('display','block');
});

If you want to track down what JavaScript is causing that issue and you are using Wordpress, the first thing you can turn to is deactivate all the plugins and reactivate it one after another to see which plugin is causing that issue.

$('#Element').css('display','');
$('#Element').css('display','block');

give a class to it and in jquery do
$( window ).load(function() {
$(".classname").show();
});

The problem is you write inline css in your home page,
so you need to remove dispaly:none; from your html and body tag from your home page
and it's working perfect.

How can I adjust the width of an Iframe with Javascript?

<div style="width: 550px;" id="zuora_payment">
<div style="display: inline;" class="z-overlay" id="z-overlay"></div>
<div class="z-container" id="z-container">
<div class="z-data" id="z-data">
<iframe style="display: block;" class="z_hppm_iframe" allowtransparency="true" scrolling="no" overflow="visible" id="z_hppm_iframe" src="https://www.zuora.com/allowtransparencypps/PublicHostedPageLite.do?..." frameborder="0" height="912" width="300">
</iframe>
</div>
</div>
</div>
I have tried: document.getElementById('z_hppm_iframe').setAttribute("style","width:500px");
I just need to adjust the width of the iFrame element, but it shows as null in the console, so I guess I'm not selecting the element correctly.
Thank you for any help you can provide.
The iFrame is added dynamically inside a
$( document ).ready(function() {}
which is is in head of the page. So I suspect it is not available at the time the .setAttribute() runs which is inside a script tag at the end of the body. I'm not doing much in this area (as you can tell), so I just need to figure out how to run this line of js after the iframe is added (I guess).

The problem is that you're trying to use the element before it was even rendered by the browser.
You should place your <script> tag just before ending the body tag.
Another solution is to use the DOMContentLoaded event, e.g:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('z_hppm_iframe').setAttribute("style", "width:500px");
});
I suggest you to change the width by doing style.width = '500px';, instead of doing by attribute, because doing the way you are, the style attribute will going to be completely replaced.

The problem is that you're trying to use the element before it was even rendered by the browser.
^ Well that only pertains to the method the OP tried. However, since the Iframe is being added dynamically and because the DOM does not need to be rendered in order to manipulate objects, he really doesn't need to move his <script> tags to the bottom of the page. Therefore, we cannot say that this is the source of the problem.
as to the OP...
The iFrame is added dynamically...
since "width" is technically one attribute and "style", another...
var iframe = document.create('iframe');
iframe.width = 500;
//or
iframe.style.width = '500px';
hopefully this helps

Get iframe's element by attribute using javascript

all, I`ve a question about get iframe's element by attribute using javascript.
1.html
<iframe id="if" src="2.html">
<div attr="test">
2.html
<div attr="test">
I`ve already known that if parent page want to get the its element by attribute, we can use jQuery like
$("div[attr='test']")
But how can parent get it's iframe's element by attribute?
Please write some simple code for explain, great thanks!
Jarod
I`ve found out a solution and test fine:
$("iframe[data-label='if']").contents().find("div[attr='test']");

If I'm not totally off:
$("iframe div[attr='test']")...
Or with id:
$("#if div[attr='test']")...

Did you tried?
window.frameElement.getAttribute("data-media");

Transferring text from iFRAME to a textarea using js or jquery

I'm currently working on a little html/js site and my current goal is to load a .txt file into a page (accomplished this with iFrame src), then transfer the text from the iFrame to a textArea.
The latter I cannot do for some reason. I have tried to get various scripts to help me but none of them seem to work.
Currently lets imagine i have only this in the html:
<iframe name=my_frame id=my_frame src=textfile.txt height=100% width=100% frameborder=0 scrolling=auto marginheight=5 marginwidth=5></iframe>
The java code i am using to validate whether I am getting the inner text of the iFrame is a simple alert:
<script>
alert($('my_frame').*[attribute]*);
</script>
The ''attribute'' part is a dummy in this case. I've used things like HTML, innerHTML, innerTEXT, text, value, body, instead - but none of them work....
Perhaps someone here could assist with a little script to accomplish moving plain text from iFRAME to textArea, or even suggest a better way of approaching this?
I would be extremely grateful for any and all assistance.
Cpt.Mgn.

I think you must change your code:
<script>
alert($('#my_frame').html());
</script>
# Is a selector for id.
html() return all the html inside the element.
I hope this helps :)
EDIT:
<iframe name=my_frame id=my_frame src=textfile.txt height=100% width=100% frameborder=0 scrolling=auto marginheight=5 marginwidth=5>Hello </iframe>
And alert said: Hello
Link to code: http://jsfiddle.net/rEM6H/

if your file is hosted and the textfile is public-ally accessible, then you can try this
$.get("http://yourdomain.com/a.txt", null, function(response){
$("#theTextArea").val(response); // where theTextArea is the ID of the textarea you want to put the data into.
});

Is it OK to write Javascript code to solve a browsers compatibility issue?

Is it OK to write Javascript code to solve a browsers compatibility problem or I should never need that and everything should be solved using CSS only?
My problem:
I have a menu in an ASP.Net application, this menu renders a hidden image control supposing that height=0 and width=0 will not render anything. That's true in IE but it keeps an empty area in Chrome and it looks ugly.
This is the generated code:
<img alt="Skip Navigation Links" src="/WebResource.axd?d=6z..."
width="0" height="0" style="border-width:0px;" />
I wrote the following code to solve the problem:
<script type="text/javascript">
$('img[height="0"]').css('display', 'none');
</script>
Is what I did true and the only way to solve such problems?
Note: The code in my example is generated for an ASP.Net menu control and I have no access on it to set a specific style

I don't think javascript is nessessary in this case as you can either add a class or id to the element and set a style or use:
img[height="0"] {
display: none;
}

You are using javascript to change a CSS style property.
Why not simply use it like this: style="border-width:0px; display:none;" ?
[Edit]
If you really have no access to how the code is generated, you might try adding a style for the specific img element withing your menu div: .parentClass img { display:none; }.
It's a bit strange if there is no possibility to define css classes for any of these elements.