I have 4 divs and on mouseover of each, I want the src of an img to change.
I have to get the images from PHP.
How can I use the array that I get in PHP over in my jQquery script?
And I know with just 4, I could just set up the array in javascript and put each image name, but that's not the functionality I'm looking for.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div{
height:100px;
width:100px;
display:inline-block;
background-color:blue;
}
#my_image{
height:100px;
width:100px;
display:inline-block;
}
</style>
<?php
$images = scandir("images", 1);
?>
<script>
$(document).ready(function(){
$(div).mouseover(function(){
$("#my_image").attr("src", /*my php array*/);
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<img id="my_image" />
</body>
</html>
var images = <?php echo json_encode($images); ?>;
Then you have an array called images that you can use in your JavaScript code. Using it at the position of your comment makes no sense though. You can't assign an array to the src of an image.
Related
There's a need to change meta tag
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
from text/html to text/plain of external website accessed on personal domain through iframe.
Code:
<html lang="en">
<head>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>
</head>
<body>
<div>
<iframe src="http://other-domain-website.com">
</iframe>
</div>
</body>
</html>
If you need to change more then this you can try to get this website as a text. Parse it, change tag then insert as iframe with src="mydomain/parse.php".
Or more simple way, you can use JQuery:
$("#iframe").contents().find('meta[http-equiv="Content-Type"]').attr('content', 'text/plain; charset=utf-8');
More info in documentation: http://api.jquery.com/contents/
I am trying to do slide right but not working, When i am tryiing to write 'right' or 'left' instead of 'toggle'. it is not working. Please help me My code is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul').hide();
});
function next(){
$('ul').animate({width: 'toggle'}, 1000);
}
</script>
<style>
ul{height:30px; overflow: hidden; }
ul li{ display: inline-block; padding: 10px; }
</style>
</head>
<body><p onclick="next()">next</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
Working demo here: Demo
JS Code:
$(document).ready(function(){
$("ul").hide();
$("p").click(function(){
$("ul").show("slide",{direction: 'right'})
});
});
You can try Sliding solution provided at: jQuery .slideRight effect
$(document).ready(function() {
$('#slider').click(function() {
$(this).animate(
{
'margin-left':'1000px'
// to move it towards the right and, probably, off-screen.
},1000,
function() {
$(this).slideUp('fast');
// once it's finished moving to the right, just
// removes the the element from the display, you could use
// `remove()` instead, or whatever.
}
);
});
});
I can't figure out exactly how to make this work. I am new to PHP by the way.
Here is what I current have (zerkms's solution), and it still isn't working for some strange reason:
here is a link to the page on the server:
http://tinyurl.com/kd3gynk
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<?php
$srcmsg = 'http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg';
?>
<script type="text/javascript">
//<![CDATA[
//
var msr = "<?php echo $srcmsg; ?>";
window.onload = document.getElementsByTagName('img').src= msr;
//]]>
</script>
</head>
<body>
<img src="#" alt="Picture of the world" height="42" width="42" />
</body>
</html>
This has nothing to do with the PHP part.
This is not working purely because you are attempting to change an image that doesn't exist yet.
Either move your script to the end of the <body> (right before the </body> tag), or use window.onload = function() { /* your code here */ }, or implement some kind of deferring system.
it produces output when it is saved as filename.html
but when i try to change it to filename.php
then open the link in the brown using filename.php
it doesnt produce output anymore
NOTE: i removed some of the code too long
<?php
echo"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
print code requirement
function printpage()
{
window.print();
}
</script>
print code requirement
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>WildFlowers by FCT</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
#wrapper #header-wrapper #header h1 a strong {
font-family: Georgia, "Times New Roman", Times, serif;
size: '100';
font-size: 40px;
</body>
</html>
";
?>
You have to remove <?php and ?>. Between these two tags there must be php-code and no html.
Edit: Maybe no errors are reported, because your server is configured to suppress errors.
Put some space after the echo..And use single quote['] insted of double.And change all single quotes from your code to double quote.(")
eg: -
<?php echo '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body> Bla bla bla
</body>
</html>';
?>
The problem in your code is, you just started the codes with double quote.So the PHP server consider the next double quote is the closing of the echo statement.So there is nothing to print inside the first two double quote.But if you take the page source, you can see
<!DOCTYPE html PUBLIC
This is because you open PHP tag at the beginning of file:
<?php
Close it before your HTML markup:
<?php
// your php code
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
You can not have html in your php tags, if you want to use html you have to end the close your php first so something like this:
<?php
// php code here
?>
html code here
<?php
// php here
?>
If You need to write html inside php code use the echo statement.
ex:
<?php echo"
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head></head>
<body>
//your code here
</body>
</html>";
?>
I have this HTML that works very well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script language="JavaScript"><!--
function refreshIt() {
if (!document.images) return;
var myImage = document.getElementById('signals');
myImage.src = 'http://lessthanrandom.com/screencast/signals.jpg?' + Math.random();
setTimeout('refreshIt()', 900000); // refresh every 60 seconds
//setTimeout('refreshIt()', 1800000); // refresh every 1/2 hour
}
//--></script>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body onLoad="setTimeout('refreshIt()', 900000)">
<table>
<tr><td class="content">
<img src="http://lessthanrandom.com/screencast/signals.jpg" width="100%" id="signals" name="signals"></td></tr>
</table>
</body>
</html>
If I add the following PHP above this and change to a PHP file, the image displays, but does not refresh. I'm new to PHP and Javascript.
<?php
include_once "/home/lesadmin/public_html/wp-load.php";
if (current_user_can("access_s2member_level1"))
{
}
else
exit("Must have a valid membership to view this content.");
?>