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
Related
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.
I'm looking to make a webpage that will show a random web site (within the current web page) and only show it for 15 seconds then show another page, etc. I would like the web page to get the list of web sites to show from a MySQL database.
I'm not sure if this is possible to do in PHP because I know you can use iframes in Javascript, but if it's possible I'd like to do it in PHP. If anyone could point me in the right direction or write a little bit of code it would be greatly appreciated.
Add this to your HTML head:
<meta http-equiv="refresh" content="15;url=http://www.yourdomain.com">
Then, you can serve that page with a different iframe every time.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Random website</title>
<meta http-equiv="refresh" content="15;url=http://www.yourdomain.com">
</head>
<body>
<iframe src="<?php echo $website_pulled_from_database; ?>"></iframe>
</body>
</html>
You can use the sleep function in PHP instead of using jS if u are so adament on using pure PHP. But I see no point in doing that.
http://php.net/manual/en/function.sleep.php
You should also look into ajax in PHP.
You can use header() in PHP
header('refresh:15;url=http://www.google.com/');
The code above will redirect the user to Google after 15 seconds
Well, I dont think u need to do this in pure PHP. You can retrieve the contents from the DB and display them at whatever time you want using javascript. You can use the setInterval function for javascript(jQuery).
for. eg:
<script type="text/javascript">
$(function(){
var i=0;
$('li').not(':first').hide();//Hide everything other than the first li item
setInterval(function(){
$('li').eq(i).hide();//Hide the current li item
i++;
if($('li').eq(i).text().length==0) //check if it is the last li item
{
i=0;
}
$('li').eq(i).fadeIn(1000); //FadeIn the next li item
},3000);
});
</script>
Hope this was of some help for you.
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'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>
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.