Another noob question, this one is quite a mystery to me.
I'm trying to inject a JS code, and making use of iFrame for this.
Test url -> http://ultimateclassicmovies.com/horror/the-brain-that-wouldnt-die/
Here I initially created a hidden iFrame
and then i'm injecting into it a new JS code:
document.getElementById('movie_loader').src = 'jwplayer.php?id=5');
and making it visible:
document.getElementById('movie_loader').visibility = 'visible';
but nothing happens as you can see. both SRC and VISIBILIY props aren't updated.
The same happened when I used the DISPLAY property.
Any idea?
You're missing 'style'.
document.getElementById('movie_loader').style.visibility = 'visible';
or better, use "display" rather than "visibility (use display: none; to start):
document.getElementById('movie_loader').style.display = 'block';
You have a syntax error on the first line with an extra ) on the end, and you need to add .style on the second line, like this:
document.getElementById('movie_loader').src = 'jwplayer.php?id=5';
document.getElementById('movie_loader').style.visibility = 'visible';
Styles on an element are stored as an object under .style, not as direct properties.
Though, once you fix this... it can't find that jwplayer.php file, it's a 404, so you need to adjust the path somehow...I'm not sure exactly where on your site it's located, but it's not found at: http://ultimateclassicmovies.com/horror/the-brain-that-wouldnt-die/jwplayer.php?id=5
Related
How to remove the html elements that are displaying once the test cases are finished
Please find the below image
Depends on if you want to effectively 'hide' it, or actually delete it from the client's local code. Here's an example if just hiding it is fine:
document.getElementById('hideThisElement').style.display = 'none';
Otherwise you can actually delete it doing this:
document.getElementById('hideThisElement').remove();
I am using jQuery to append elements to a div, and all works fine.
var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");
However, I'd like the div to appear by fading in, instead of abruptly.
I notice though that I get an error when I try to access graphic properties on my dynamically generated element. So this, for example fails:
new_div.hide().fadeIn();
The console reports the following error:
TypeError: jQuery.curCSS is not a function
Do I understand this correctly, that this fails because current css properties are not defined for the dynamically generated element? Or what else can be goingg wrong?
Important edit
Additional checking and working on this pointed out to a complete misunderstanding from my part. This has nothing to do with the fact that the element was dynamically generated. I got the same thing by calling fadeIn() on whatever element.
I sincerely apologize!
I still didn't get, though, why this happens
Adding elements to the DOM takes some time, miliseconds maybe, but it's still a reason for jquery not be able to find the element.
This process might be even slower if the DOM is a large html page.
Write your code like this:
var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");
setTimeout( function(){
new_div.hide().fadeIn();
} , 150); // 100 could be also good
It might be enough time for jquery to catch the element.
I would add an id to keep track of all elements I'm creating (just my preference, but it makes it easier to code it).
var new_div = '<div id="myNewDiv1" style="display:none;">My Styff</div>'
$('body').append(new_div);
$('#myNewDiv1').fadeIn();
It does seem to be a compatibility question, although I wasn't able to figure out exactly why and how to fix it.
Adding this code fixes the problem though:
jQuery.curCSS = function(element, prop, val) {
return jQuery(element).css(prop, val);
};
What is wrong with this piece of code:
jQuery('<iframe id="groundplan_popup" class="groundplan_hidden" />').appendTo("#popup_holder");
var iframe = jQuery("#groundplan_popup");
iframe.attr("src","::censored::" + filename);
var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');
var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));
So i have to dynamically create an iframe element which will open up .pdf file in a popup and that part works. What I can't manage to do is create a div with an id of "groundplan_popup_exit" within that iframe. I don't know exactly why this doesnt' work and what exactly I'm doing wrong. When i inspect the iframe window console brings out this warning:
/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more
details.
Dont know if it has anything to do with the reason why this isn't working.
EDIT:
This is what my code looks like now.
Console prtscr:
Iframe console elements prtscr:
So i'm basically confused about the whole situation as I'm not that experienced in using jquery in general and this is my first time using it with iframes. I'm not even sure if the #groundplan_popup_exit div is even created and how do I find it if it is.
I see some problems:
var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');
Here you are already appending the element to the body.
var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));
After you have appended above, you are trying to append again with jQuery("#groundplan_popup_exit") which does not even exists.
Fix (untested) would be something like this:
var iframe_body = iframe.contents().find('body');
var exit_btn_gp = iframe_body.append('<div id="groundplan_popup_exit"></div>');
I found another similar questios, but almost all is for advanced things, like Android development. My question is simple, I think. I have this two codes:
function toggle(d)
{
var o=document.getElementById(d);
o.style.display=(o.style.display=='none')?'block':'none';
}
And in another file, I got that:
More Info
When I click on got the mouseover (second code), it just work after second try.
Anyone know where is the problem?
Obs.: The first code is in the header.php and the second on single.php (WORDPRESS)
The first time, d is set by CSS; JavaScript doesn't see that style property (See Get the Rendered Style). It initially sees o.style.display === "" (which is not 'none'). Consequently, the first click sets it to none and the second sets it to block.
Change it to:
o.style.display = (o.style.display === 'block') ? 'none':'block';
because the first time the display property is not set therefore it is not equal to "none"
Well, there's nothing wrong with your code above. Maybe something's up with your style declaration, like setting it to block in the start which you might not want. Here's a simple JSFiddle I made for testing your code: http://jsfiddle.net/77DMd/1/
Hope this helps.
i have created a html page which contain two iframe .
first iframe refer another html which contain a list of members
this list is not fixed and every member name there is a separate html page. which is shown by second iframe.
i have written some javascript code to get the value of that list but i am unable to update the src link of second iframe.
document.getElementById("frame2").setAttribute("src", name);
i have used this code to set the value but i didn't work. i have written this code in javascript file in setFileName(name) function.this is user define function.
might want to give this a try:
window.frames["frame2"].src = name
Information from: Changing Iframe source using Javascript
I have faced this query once and following article helped me. Hopefully it will be useful to resolve your issue.
http://www.dyn-web.com/tutorials/iframes/
i got my answer
top.parent.frame2.location = name;
like this we can change the src of another frame.
thanks all of you..