I'm developing a Wordpress video plugin. I want the video to start loading AFTER the rest of the page has loaded. I have:
Created videosplash.php which contains code to create a div #video-splash.
Created videosplash-video.php which contains code for loading the video itself. This code works perfectly when it is included directly within the above DIV.
Attempted to use jquery bind the second PHP file to div #video-splash with directions for this to happen AFTER the rest of the page has loaded.
Both PHP files are within the same plugin directory.
I've tried the following ways of doing this with no luck; and I can't find any clarification of the matter by searching online.
Attempted Method 1
As a JS script normally calls things from whatever directory it is running from, I would have thought this should work - but it doesn't:
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load('videosplash-video.php');
});
</script>
Attempted Method 2
I've also tried this way to load the file dynamically, but I don't think the plugins_url is a valid means of calling the file in javascript:
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load( plugins_url('/assets/php/videosplash-video.php',__FILE__ ) );
});
</script>
and
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load( plugins_url('/videosplash-video.php',__FILE__ ) );
});
</script>
What am I missing folks? And thank you in advance
You cannot include wordpress plugins url via javascript,
one thing you can do, first hide the video div by giving the style="display:none", then on load you can make it display:block using javascript
for example consider this following is your video div,
<div id="video-splash" style="display:none;">
some video content inside
</div>
then use javascript to enable it after page load like this,
$(document).on("load", function() {
$('#video-splash').show();
});
Is it possible to change styles of a div that resides inside an iframe on the page using CSS only?
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to an iframe element which is coming from your own server.
I use the Prototype framework to make it easier:
frame1.$('mydiv').style.border = '1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
In short no.
You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.
Yes. Take a look at this other thread for details:
How to apply CSS to iframe?
const cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['frame1'].contentWindow.document.body.appendChild(cssLink);
// ^frame1 is the #id of the iframe: <iframe id="frame1">
You can retrieve the contents of an iframe first and then use jQuery selectors against them as usual.
$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")
$("#iframe-id").contents().find("img").addClass("fancy-zoom")
$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });
Good Luck!
The quick answer is: No, sorry.
It's not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice (which I've read a little about, but am not to familiar with myself) to insert some needed styles dynamically, but you would need direct control over the iframe content, which it sounds like you do not have.
Use Jquery and wait till the source is loaded,
This is how I have achieved(Used angular interval, you can use javascript setInterval method):
var addCssToIframe = function() {
if ($('#myIframe').contents().find("head") != undefined) {
$('#myIframe')
.contents()
.find("head")
.append(
'<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
$interval.cancel(addCssInterval);
}
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);
Combining the different solutions, this is what worked for me.
$(document).ready(function () {
$('iframe').on('load', function() {
$("iframe").contents().find("#back-link").css("display", "none");
});
});
Apparently it can be done via jQuery:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
https://stackoverflow.com/a/13959836/1625795
probably not the way you are thinking. the iframe would have to <link> in the css file too. AND you can't do it even with javascript if it's on a different domain.
Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine.
The only solution is to fetch the page from the server side code and change the needed CSS.
A sort of hack-ish way of doing things is like Eugene said. I ended up following his code and linking to my custom Css for the page. The problem for me was that, With a twitter timeline you have to do some sidestepping of twitter to override their code a smidgen. Now we have a rolling timeline with our css to it, I.E. Larger font, proper line height and making the scrollbar hidden for heights larger than their limits.
var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
Just add this and all works well:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
If the iframe comes from another server, you will have CORS ERRORS like:
Uncaught DOMException: Blocked a frame with origin "https://your-site.com" from accessing a cross-origin frame.
Only in the case you have control of both pages, you can use https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage to safely send messages like this:
On you main site(one that loads the iframe):
const iframe = document.querySelector('#frame-id');
iframe.contentWindow.postMessage(/*any variable or object here*/, 'https://iframe-site.example.com');
on the iframe site:
// Called sometime after postMessage is called
window.addEventListener("message", (event) => {
// Do we trust the sender of this message?
if (event.origin !== "http://your-main-site.com")
return;
...
...
});
Yes, it's possible although cumbersome. You would need to print/echo the HTML of the page into the body of your page then apply a CSS rule change function. Using the same examples given above, you would essentially be using a parsing method of finding the divs in the page, and then applying the CSS to it and then reprinting/echoing it out to the end user. I don't need this so I don't want to code that function into every item in the CSS of another webpage just to aphtply.
References:
Printing content of IFRAME
Accessing and printing HTML source code using PHP or JavaScript
http://www.w3schools.com/js/js_htmldom_html.asp
http://www.w3schools.com/js/js_htmldom_css.asp
I am loading a view using iframe.Now i wants to hide a div inside the iFrame using jQuery. But it shows $ is not defined.jQuery file is already included there.How can i do this?
<script type="text/javascript">
$(function(){
$("#wrap").hide();
});
</script>
jQuery has some major issues with iframes. You'll have to include a script inside your iframe and go from there.
What are you trying to use as a trigger to hide the div?
If it's at all possible I would suggest not using iframes for your website. Iframes come in handy when you're trying to embed a youtube video or something.
So since joining I've learned a lot - compared to where I was - but I still don't know the terminology and functions well enough I suppose... so here's my problem:
I'm making several js-based galleries. The idea being that there will be 3-4 pages containing some thumbnails that will populate a specific div with the corresponding art and copy (a div I'm calling using innerHTML) and so far that works. Here is the script:
function changeDiv(target,id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
This works great... when I have the 'target' and all 'id's in the same page. I even went as far as using a php include on the page (I added it to the footer) and nested it inside an inline div that I set to visibility:hidden. A shot in the dark but this worked too. EXCEPT that my footer was now about another 100px taller with nothing but blank space. Apparently it HID the content, but made plenty of room for it.
But what I really want to do is include the source of the divs I'm calling (we'll call them artwork.php) into the gallery page ( ...and gallery1.php) the same way a css or js is linked in the header or the same way it is included with a php tag but without messing up any of my objects.
I hope that made sense, but in brief: How can I call an external php document that won't display but can be called upon by the js?
Any thoughts?
1) visibility:hidden; keeps the place on the page. Use display:none instead.
2) Jo have two possibilities.
a) Use Ajax (google it!) if your artwork.php will change dynamically.
b) Use artwork.php as JS file, ie like this:
<?php
/* artwork.php */
header('Content-type: application/javascript');
echo "var myImages = [{'name':'First image','src':'image1.jpg'},{'name':'Next image','src':'image2.png'}];\n";
?>
//... any other JS functions here ...
And gallery1.php:
<html>
<head>
<script type="text/javascript" src="artwork.php"> </script>
</head>
<body>
...
</body>
hmm i am not actually getting what u are trying to say but i think this might help
save your php page lets say "artwork.php"
then use the jquery Load to call the page and hide the div where you have loaded the page.
$("#any_div_u_want").load('artwork.php',function(){
$(this).hide();
});
now u can show the div which contains your php script wheneveer u ant with just
$("#any_div_u_want").show();
Hope this helps
I've searched the entire web for a clear answer but haven't found one yet.
I have this site:
www.helixagent.com/todo/
and I want to load that entire site into a portlet in my main index page.
I tried an iFrame approach but it fails to load the site correctly. The styles and javascript files don't get loaded (i think)
Is there a way to make a portal that mimics a new browser page and load the content exactly as it would if it was directly accessed via the url bar?
It’s possible to perform cross-domain requests using jQuery.
Simply include this file after loading jQuery, and then you can do funky stuff like:
$('html').load('http://helixagent.com/todo/');
Note that this of course won’t load the embedded CSS and JS files. You’ll need to use an iframe for that:
$(function() {
$('body').append('<iframe src="http://www.helixagent.com/todo/" />');
});
Live example: http://jsbin.com/uruka
Here's an example using jQuery and iframe:
$(document).ready(function(){
$('#somediv').html("<iframe src='http://www.helixagent.com/todo/'></iframe>");
});
This should be placed inside the <head> tag of your page and it will load the entire site with all the js and css too into a div.
Have you looked at using Server Side Includes.