I'm trying to do this:
Load content of a div on another page
but it doesnt work for me. and I'm not sure why.
what im wanting to do is, i have a mobile site im working with, and i want to pull the story content data thats on the main sites div, and place it on the mobile sites content div that way i dont have to really edit anything. whatever gets published on the main gets reflected on the mobile.
any ideas as to the best way to accomplish this? is there a way to do like an include in php or html but that it ONLY takes the targeted divs content and not everything else?
If I'm reading you correctly, this is what you need:
$('#result').load('ajax/test.html #container');
This will load the page ajax/test.html, grab the content of the element with id "container" and load this into your current pages' element with the id "result".
More info can be found at http://api.jquery.com/load/
Edit: Working code based on your test files:
<html>
<head>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$(document).ready(function(){
$('#result').load('pull4m.shtml #hello');
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
Related
My problem:
I can display content of a php file including(image background) using iframe. When I go to include my php file using
include("modules/form.php");
or
file_get_contents("modules/form.php");
it displays content, but background image becomes invisible. It is a big site. So, is there any alternate of iframe for this purpose? I do not want to use iframe because my ranking in google is becoming down.
You can't archive this using php , till far i know. PHP is a server side script it does not know anything from the client side. You can use jquery , first you will have to create a div and in it set the content of the page.Use the code below
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.4'></script>
<script type='text/javascript'>
$(document).ready(function (){
$('#divId').load(full url to modules/form.php); // Paste the full url here
});
</script>
</head>
<body>
<div id="divId"></div>
</body>
</html>
Hope this helps you
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
Im trying to find a way to display the title of the generated page in the body as text.
I have tried using the following code to display the title.
<script type="text/javascript">
document.write('You have visited the page ' + document.title );
</script>
Although the code does what i want, i think that i must use another way to do it, more SEO friendly! When i open the page and check the code, i see this code and not the result of (document.title).
Add the title to the server-side script that generates this page. You'll need to post some of your server-side code to get a more specific answer. In general:
<?php
$title = "My Page"
echo <<<EOT
<html>
<head>
<title>$title</title>
</head>
<body>
You have visited the page $title
</body>
</html>
EOT
?>
Javascript does not affect the source code of the page. It gets rendered after the page loads and you see the result. Use PHP for sorting like this.
Any client side generated html isn't going to appear in the source. You need to do it server side, in PHP or whatever, if you want it in the source.
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.