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.
Related
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 have a small problem, I would like a div to be displayed when someone hovers over an image, the problem is that this image is inside php, and there for document.getElementById doesn't work. Is there a way to get round this?
<?php echo "<img onmouseover='xxxxxx' src='img/img.png'>" ?>
what goes in x?
You need to create a javascript function on the webpage where this particular line of code is echoed to the client that will handle the onmouseover event, like this:
<html>
<head>
<script language="javascript" type="text/javascript">
function imageSwap() {
var img = document.getElementById("img1");
//swap out the image...
}
</script>
</head>
<body>
<?php echo "<img id='img1' onmouseover='imageSwap()' src='img/img.png'>" ?>
</body>
</html>
I have a small problem, I would like a div to be displayed when someone hovers over an image
Make sure the information is accessible to people who don't use a pointing device too
the problem is that this image is inside php, and there for document.getElementById doesn't work.
You have misdiagnosed the problem. PHP runs on the server and its output is sent to the client. It cannot prevent something from working (although it can be written badly so it outputs something you don't expect).
If you think PHP is the cause of your problem then you need to stop asking "Why does the JS embedded in this PHP not work?" and start asking "Why is the JS that is outputted from PHP different from the JS I'm trying to write?"
what goes in x?
It is hard to say without seeing the rest of the code.
It depends on why you can't see the div in the first place. Is it invisible? Is it not displayed? Is it not part of the document? Is it covered up by something else? etc. etc.
As a rule of thumb though, you should avoid intrinsic event attributes in favour of assigning event handlers via JavaScript stored in external files. This is part of unobtrusive JavaScript.
You could change the code of Brian Driscoll to make it dynamic like so:
<html>
<head>
<script language="javascript" type="text/javascript">
function imageSwap(el) {
var img = el.id;
//swap out the image...
}
</script>
</head>
<body>
<?php echo "<img id='img1' onmouseover='imageSwap(this)' src='img/img.png'>" ?>
</body>
</html>
This way you will always have the correct id from the image your are hovering on. No matter the amount of images
I had one page in Views in CakePHP, it have normal javascript block,
Just inserted:
<script language="JavaScript" type="text/javascript">
---code---
</script>
Inside page, and it was all working okay...
But now... It doesn't show...
How can I change configuration or something to enable showing javascript blocks without CakePHP commands.
Javascript needs data from that page so I can't use outer file,
and it's too long to use $javascript->codeBlock
Is there any way to reconfigure stupid CakePHP to start showing those blocks?
Some files are showing javascript, and it's working all okay, but some of them won't show...
Please help...
If you mean that you want to view the code when the page is displayed, try surrounding it with <pre>...</pre>
If you mean you want the browser to process the code, then provided you are
actually going to that view file and
the code isn't commented out (<!-- ... --> or <?php /* ?> ... <?php */ ?> etc.) and
the code isn't being obliviated by a php conditional (if ... then ... else... endif)
then it will be there. Try Firefox ctrl-u to view the source.
Also try posting the view code here so that we can give you some sort of informed solution.
If you look at the source of this page http://kingston.talking-newspapers.co.uk/ you will see a large amount of inline javascript near the top.
I don't really want all this extra stuff floating around in my page source, I'd much rather get it off into a script tag, and then I can minify it and all sorts.
If I call it as a php file, this SHOULD work in theory, I just end the js file extension with php instead, and in the header I put the following:
header("Content-type:application/x-javascript");
but... a lot of the php variables used to generate the playlist within the javascript are setup at the beginning of the main index.php file, and in calling this php-generated js playlist file like this, it seems to evaluate it entirely separately, so it's full of errors.
The only way round it I can think of is to have the page write a file, then immediately read it in. The other thing is, the playlist is likely to change often and dynamically, so I think I need to get minify to NOT cache it?
I made the solution by following this tutorial, which redirects the generate inline script to a file, then immediately reads that file in.
http://my.opera.com/zomg/blog/2007/10/03/how-to-easily-redirect-php-output-to-a-file
So now my page looks like:
<?php
require("./filewriter.php");
$obfw = new OB_FileWriter('jplay_gen_playlist.js');
$obfw->start();
require($includesdir . "jplayerscript.php");
$obfw->end();
?>
<script type="text/javascript" src="jplay_gen_playlist.js"></script>
et voila! All nicely external, can be minified, cached etc.
You can do it in two ways. First would be set up the variable inline and then include the script:
<script type="text/javascript">
var myPlayList = [
{
name: "Introduction and guidance on usage",
mp3:"http://www.talking-newspapers.co.uk/find/soundfiles/TnHomePageIntro.mp3",
ogg:"http://www.talking-newspapers.co.uk/find/soundfiles/kingstonkt9.ogg"
}
...
</script>
<script type="text/javascript" src="myinclude.js"></script>
The other would be to have your included .js file a simple library of functions which you include at the top of the page and then call from some inline javascript:
<script type="text/javascript" src="myinclude.js"></script>
....
<script type="text/javascript">
$(function() {
var myPlayList = [ ... ];
startPlaylist(myPlayList);
});
</script>
I would personally choose the second method. You shouldn't need to generate any of the script dynamically (as far as I can see, it can all be hard-coded except for the playlist, right?) Any other things you need to pass to the script could still be passed in by your startPlaylist() method call anyway.
Is there a way to make sure a (large, 300K) background picture is always displayed first BEFORE any other content is shown on the page?
On the server we have access to PHP.
All the html content is served and parsed before it even starts to fetch the image, so you have a problem before you start.
You could circumvent this by programmatically hiding the content, and then triggering a "show" of it when the image is loaded.
ie:
<html>
<body>
<image here/>
<div id="content" style="display:none;" >
</div>
<script type="psudocode">
when(image.loaded){
$("#content").show();
}
</script>
</body>
</html>
If you have all content inside a container, you can probably come pretty close using this techique. It will also fail gracefully if javascript is disabled/unavailable.
So if you have to do this because of a manager or something, this is the method I would use.
<html><head><!-- head section --></head>
<body>
<div id="container">
<script type="text/javascript">
<!--
document.getElementById('container').style.display = 'none';
-->
</script>
Content goes here
</div>
<script type="text/javascript">
<!--
document.getElementById('container').style.display = 'block';
-->
</script>
</body></html>
If you have very little content, however, it probably won't do much good.
You could of course add a timer on the second javascript block, to delay it for a second or so :P
<html><head>
<script type="text/javascript">
//Hide on load
onload=function(){
document.body.style.display="none";
var imag = new Image();
imag.onload=function(){
var main = document.body;
main.style.backgroundImage="url("+this.src+")";
main.style.display="";
};
imag.src="http://dayton.hq.nasa.gov/IMAGES/MEDIUM/GPN-2000-001935.jpg";
}
</script>
</head>
<body>
YOU CAN' T SEE MEE!!
</body>
</html>
A possible way, if you don't want to rely on JavaScript, is to make a dummy page with only the background image. After a few seconds, it redirects to the real page, and the background will load quickly because it is already in cache.
Not a super attractive solution, if the timing is fixed, I reckon.
Note that 300KB is quite big for a background image. I have seen worse, somebody using a 1MB image: even with a relatively fast connexion, I could see the background load way after the elements of the page.
I think the only way you'll be able to do this is with javascript - Send the user HTML that only contains your background image and some javascript that either waits for a certain amount of time before displaying the rest of the content or uses AJAX to retrieve the rest of the content (essentially the same thing).
You could load the image within the page as a base64 image then it will already be loaded with the page.