I'm loading some content (NOT THE HTML headers or anything, just HTML formatted content from a PHP) via jquery .load() into a div.
It works, perfectly for everything BUT some Flash-based amCharts (www.amcharts.com) dynamically loaded with amCharts PHP, using swfObject. The file, loaded seperately, works and loads the Flash charts. When being loaded in using .load() the file seems to be loaded, but scripts not executed and swfObject not enacted.
Now, i'm not sure what code to give you here, so ill just give some stuff around it...
So, in header of main parent is the code listening for the nav click to load the content (which is our amcharts):-
$('a.leftNav').click(function() {
page = $(this).attr('page');
metID = $(this).attr('metID');
if($("#mainRight").is(":visible")) { $('#mainRight').hide(200); }
switch(page) {
case 'metrics': $("#mainRight").load("content.php?load=mets", { metID: '5000227' }); break;
}
$('#mainRight').show(300);
});
So that works. Loads the correct page and works executing the PHP as proved by going to the page content.php?load=mets. The code on that page generated by the PHP is:-
<div class="amChart" id="chart_views_div">
Chart loading ...
That should be the exchanged swfObject code, which I know (i've outputted to a text file the PHP's code generated) is working.
What happens with .load() and loaded swfObject and JS generally?
You need to call a function to initialise the swfObject replacement when jquery .load() has completed as i believe that swfObject would usually initialise on window.load.
something like this:
$("#mainRight").load("content.php?load=mets", function() {
// initialise swfObject here e.g.
swfobject.embedSWF("myContent.swf", "chart_views_div", "300", "120", "9.0.0");
});
Am Charts still uses swfobject 1.5
Swfobject 2.x offers much more IMHO amcharts should update to use the new version.
2.x has createswf which should be used in this case
Related
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();
});
I have a wordpress theme that uses PHP to output different blocks of Javascript depending on settings. The code uses a function from an external javascript file (backstretch) that is loaded in the footer.
The theme doesn't load the appropriate images properly unless the backstretch javascript is loaded in the head, and I think it's because the PHP is echo'ing the blocks of code that call the script way before the footer is even loaded (probably wrong assumption).
Is there a way to echo the blocks of Javascript calling Backstretch code straight to the footer (or after backstretch is loaded in the footer)?
The php is echoing the JS like this:
if (x == x) { ?>
<script>
jQuery(document).ready(function(){ //code});
</script>
<?php // more code
If I run the javascript in the head (Backstretch javascript) the console sends this error:
"Uncaught TypeError: Object function (e,t){return new b.fn.init(e,t,r)} has no method 'backstretch' "
(jQuery is being loaded in the head by the way)
Thanks guys
Actually, theoretically, the position of the script shouldn't matter much for this. The point of jQuery.ready() is that the inside function will not run until the entire DOM has been loaded. "The entire DOM" includes the page's footer, and the Javascript files you're waiting on. However, it's possible that they also wait on the DOM before initializing, and thus jQuery's ready function is called first.
Some of your time-thinking terminology is a little hard to understand though - remember that PHP writes its entire document out to the user a long, long time (computer-wise) before your browser begins parsing any of the HTML.
You could just move your code block to the right place, or alternatively try this:
Start your PHP code with $footer = "";
Then as you go along you can do $footer .= "<script>jQuery(document).ready(...)</script>";
And finally in the right place just echo $footer;.
Edit your functions.php file
enclose the script in a php function e.g:
<?php
function my_javascript_function_call(){
<script>
....
</script>
}
?>
now add this function
add_action('wp_footer', 'function my_javascript_function_call');
The javascript will fire in your footer..
happy coding :)
I have a very simple javascript animation that looks like this
$(function() {
$('#slider1').cycle();
$('#slider2').cycle();
});
Im then calling in this script like this into my head:
<script type="text/javascript" src="js/slider.js"></script>
Then the divs that have the id "slider1" and "slider2" are contained in php include files being called into the page like this:
<?php include('assets/col1.php'); ?>
The code in the include file looks like this:
<div id="slider1">
<img src="images/image1.png" />
<img src="images/imgae2.png" />
<img src="images/image3.png" />
<img src="images/image4.png" />
</div>
Which works fine except when you get to IE8 or IE9. The javascript will work about 75% of the time which is why this has me baffled. When you load the page or come back to the page, every once in awhile it just doesn't activate the javascript and all the images render in one long column (essentially what it looks like with no js function)
I suspect its something in the order in which IE9 is loading the PHP and the javascript but I am only a novice in both js and php so some very clear help on how to fix this would be really great. Thanks in advance.
Soooo long story long...
PHP will return interpreted HTML. Every time you include a file, PHP will flush the buffers, which means, certain content is returned to the browser prior to others. While this happens, the page is still in a loading state.
For this reason, you need to make sure you call $(document).ready(function(e){ ... });. This will give you code a chance to finish flushing the buffers and load into the browser, before the javascript is executed..
I had encountered a similar issue while using Dojo, which I solved as follows:
Set the main or the parent div display style as none:
<div id="g_body" style="display:none">
Now once Dojo finishes loading, I change the display style to block using the dojo.ready function:
require(["dojo/ready", "dojo/parser", "dijit/registry"], function(ready, parser, registry){
ready(function(){
if(document.getElementById("g_body")!= null){
document.getElementById("g_body").setAttribute("style","display:block");
}
});
});
The pages then only shows when Dojo elements are completely loaded.
I believe there is something similar in jQuery, but I am not sure. Probably:
$(document).ready(function() {});
Hope this helps.
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.