I'm not sure if this is possible, but I'm trying to take the value of $css_color and set it as the hex value in the div. Also with the $x and $y values.
Essentially, I'm attempting to grab the $x$y info and the hex code value from an image and matching it to an array of color values I have in formatted_colors.js then rebuilding the "image" as divs with the background color as testing.
Example of my formatted_colors.js array var colors = []; colors["000000"] = "black"; colors["100000"] = "black";
Here is a snippet:
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script src="formatted_colors.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//iterate through pixels and match rounded color to array in formatted_colors.js
<div class="rounded_color" hex="<?php $css_color ?>" xy="<?php $x.$y ?>"</div>
<div id="<?php $x.$y ?>"></div>
$(document).ready(function() {
$(".rounded_color").each(function(){
var google_color = getColor($(this).attr("hex"));
$('#'+$(this).attr("id")).html(google_color);
$('#'+$(this).attr("id")).css('background-color:', google_color);
})
// get name of color function from formatted_colors.js
function getColor(target_color){
if (colors[target_color] == undefined) { // not found
return "no match";
} else {
return colors[target_color];
}
} // end getColor function
)} // end ready function
</script>
And here is my entire code: http://pastebin.com/A4tMsn2C
Try <?php echo $x.$y ?> instead (and similar for your other blocks). Or, if you've got shorttags enabled <?= $x . $y ?>. Your version is simply doing a concatentation and throwing out the results. You need to echo out the results of whatever you're doing inside the PHP block.
Related
I have a simple page that displays race results. The results are pulled from a CSV file which updates upon completion of each race. The changes could be subtle so would like to have an animation, fade in/out or colour change etc, only if results are different. I want to add a to the table ONLY if the CSV file has new results as a visual aid to the update.
EDIT: I am unsure where to start on implementation so no code is reflected below. The CSV is scanned every 1 second and table updated. The outcome I want is for the table results to have an animation if/when array results change, else no animation.
EDIT 2: I have attempted to output the current racer number from the results data ($csv[1]) to a file and then check that against the current race number but it doesn't seem to work. When I pull $lastrace[0] and $csv[1] they are always the same number. I thought having it higher in the PHP would get $lastrace before writing the new number but doesn't appear so.
// Get Racer No from previous race
$lastrace = str_getcsv(file_get_contents('lastraceno.txt'));
// Puts current racer no to CSV file
$file = fopen("lastraceno.txt","w");
fputcsv($file,explode(',',$csv[1]));
fclose($file);
My code as it stands is as below - have trimmed some irrelevant code.
index.php
<head>
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('table.php', function(){
setTimeout(refreshTable, 1000);
});
}
</script>
</head>
<body background="timebg.jpg">
<div id="tableHolder"></div>
</body>
table.php
<?php
$f_pointer=fopen("csv.txt","r"); // file pointer
while(! feof($f_pointer)){
$csv=fgetcsv($f_pointer);
foreach($csv as &$val){
if($val === "" || $val === false || $val === null) $val = "NA";
}
}
?>
<table>
<tr>
<td><?php echo $csv[2] ?> <?php echo $csv[3]?></td>
</tr>
</table>
Solved
The racer number is $csv1 in my Array from the results file. I found writing the $csv1 to a new CSV file and comparing $csv1 to $lastrace[0] each refresh to work.
Using an if else statement I compared the info and set a variable depending if there was a match or not.If the data matched the variable is '0' and no action is required. If $csv1 did not match $lastrace[0] the variable is '1' and the new race number sent to the lastraceno.txt for future updates.
I could then set a CSS class based on if the variable was 0 or 1.
CSS animation achieved with [https://daneden.github.io/animate.css/]Animate.CSS1
index.php
<head>
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('table.php', function(){
setTimeout(refreshTable, 1000);
});
}
</script>
</head>
<body background="timebg.jpg">
<div id="tableHolder"></div>
</body>
table.php
<?php
$f_pointer=fopen("csv.txt","r"); // file pointer
while(! feof($f_pointer)){
$csv=fgetcsv($f_pointer);
}
// Replace blank lines with NA
foreach($csv as &$val){
if($val === "" || $val === false || $val === null) $val = "NA";
}
// Get Racer No from previous race
$lastrace = str_getcsv(file_get_contents('lastraceno.txt'));
// Puts current racer no to CSV file
if ($lastrace[0]==="$csv[1]") {
$newrace = 0; // This is not a new race
} else {
$newrace = 1; // This is a new race
$file = fopen("lastraceno.txt","w");
fputcsv($file,explode(',',$csv[1]));
fclose($file);
}
if ($newrace == '1') {
$newtimes = "class='animated zoomIn'";
} else { }
<table <?php echo $newtimes ?>>
<tr>
<td>Text to animate</td>
</tr>
</table.
My php knowledge is limited so sorry if answer is obvious.
I'm using the .rand function to display random images from one of 3 pages when a link is clicked. The pages are all named the same and are in different folders (pages,media,text). The problem I'm having is that I want a combination of 3 different pages/images every time but instead it comes out as the same 3 page/image combination each time.
I want this
e.g.
Page1, Media2, Text1. next...
Page3, Media2, Text3. next...
Page1, Media3, Text2.
Instead it comes out
e.g.
Page1, Media1, Text1. next...
Page3, Media3, Text3. next...
Page2, Media2, Text2.
The solution is probably simple but I can't seem to figure it out.
here is my code :
<body>
<div id="wrapper">
<div id="click">CLICK HERE></div>
<div id="content">
<?php
if (!empty($_GET['p'])) {
$pages_dir = 'pages';
$pages = scandir($pages_dir, 0);
unset($pages[0], $pages[1]);
$p = $_GET['p'];
if (in_array($p.'.inc.php',$pages)) {
include($pages_dir.'/'.$p.'.inc.php');
} else {
echo 'Sorry, page not found.';
}
}
?>
</div>
<div id="content2">
<?php
if (!empty($_GET['p'])) {
$media_dir = 'media';
$media = scandir($media_dir, 0);
unset($media[0], $media[1]);
$p = $_GET['p'];
if (in_array($p.'.inc.php',$media)) {
include($media_dir.'/'.$p.'.inc.php');
} else {
echo 'Sorry, page not found.';
}
}
?>
</div>
<div id="content3">
<?php
if (!empty($_GET['p'])) {
$text_dir = 'text';
$text = scandir($text_dir, 0);
unset($text[0], $text[1]);
$p = $_GET['p'];
if (in_array($p.'.inc.php',$text)) {
include($text_dir.'/'.$p.'.inc.php');
} else {
echo 'Sorry, page not found.';
}
}
?>
</div>
</div>
</body>
you have used the function "rand()" just once , so you will have just one random number. If you want more numbers , use the function multiple times. for example :
$rnd_1 = rand(0,3);
$rnd_2 = rand(0,3);
$rnd_3 = rand(0,3);
Each of them may produce a unique number ;)
You use rand only once here:
<a href="index.php?p=<?php echo 'include-'.rand(1,3); ?>">
There are two solutions:
Don't use rand as GET parameter, just generate random numbers when $_GET['p'] is set.
Create another two GET parameters, ex. $_GET['m'] for media, $_GET['c'] for content and replace $_GET['p'] with them.
Try using shuffle(glob('*.png'));, or just shuffle(); an array of your pictures.
See:
http://php.net/manual/en/function.glob.php
and
http://php.net/manual/en/function.shuffle.php
The string inside glob can be replaced with any file extension.
Your code might look like this:
$allPics = shuffle(glob('*png')); $pic = array_slice($allPics, 0, 3);
Now $pic[0], $pic[1], and $pic[2] hold your images.
Personally, I Think You Should Use JavaScript if you're just trying to return 3 images. That code would look something like this this:
First the External picloader.js file:
//+ Jonas Raoni Soares Silva - Google
//# http://jsfromhell.com/array/shuffle [v1.0]
function shuffle(o){ //v1.0
for(var j,x,i=o.length; i; j=parseInt(Math.random()*i),x=o[--i],o[i]=o[j],o[j]=x);
return o;
}
//everything else by Jason Raymond Buckley
function E(e){
return document.getElementById(e);
}
function picLoader(clickId, outIdsArray, imageArray){
E(clickId).onclick = function(){
var oa = outIdsArray, il = oa.length, sh = shuffle(imageArray), pic = sh.slice(0, il);
for(var i in oa){
E(oa[i]).innerHTML = "<img src='"+pic[i]+"' />";
}
}
}
The code on your page should now look like:
<body>
<div id="wrapper">
<input type='button' value='CLICK HERE' id='showPics' />
<div id="content"></div>
<div id="content2"></div>
<div id="content3"></div>
</div>
<script type='text/javascript' src='picloader.js'></script>
<script type='text/javascript'>
var imageArray = ['img1.png', 'img2.png', 'img3.png', 'img4.png', 'img5.png', 'img6.jpg', 'img7.jpg'];
picLoader('showPics', ['content', 'content1', 'content2'], imageArray);
</script>
</body>
</html>
This should work for any amount of output elements, as long as the imageArray is at least as long as your array that contains output content ids.
I am having a bit of problems trying to show an information in a div tag using jQuery inside the PHP while loop.
My code looks like this:
$i=1;
while($pack = mysql_fetch_array($packs))
{
$pricepack = $price * $pack['refcount'];
$pricepack = number_format($pricepack,2);
if($users > $pack['refcount'] ) {
$contents .= "
<a class='refbutton' style='text-decoration:none;' onclick=\"document.rent.refs.value='{$pack['refcount']}';document.rent.submit(); return false;\" >{$pack['refcount']}</a>
<div id='refinfo' style='display:none;'>
<span style='font-size:18pt;font-weight:bold;' id='refprice'></span><br />
<span style='color:#D01F1E;'>You don't have enough funds for this package.</span>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$('.refbutton').hover(
function() {
$('#refinfo').show();
$('#refprice').text(\"$\"+\"$pricepack\");
},
function() {
$('#refinfo').hide()
}
);
});
</script>
";
$i++;
}
}
The problem is that the code is generating a div next to each anchor element. This will cause this when the mouse hovers:
What I am trying to obtain is this on every button hover:
As you can see in the second picture, there isn't any design errors or mix-ups. How can I obtain this?
Thank you.
You need to start by cleaning up your code. You only need one refinfo div, and only one javascript block. The only thing in your loop should be the refbutton, and that tag should contain all the values needed for the javscript hover and click events to do their business. Look into HTML5 custom data attributes http://html5doctor.com/html5-custom-data-attributes/
Something more like this should work and provide a sounder basis on which to debug layout issues if any remain.
<?php
$i=1;
while($pack = mysql_fetch_array($packs)) {
$pricepack = $price * $pack['refcount'];
$pricepack = number_format($pricepack,2);
if($users > $pack['refcount'] ) {
$contents .= "
<a class=\"refbutton\" data-pricepack=\"{$pricepack}\" style=\"text-decoration:none;\" >{$pack['refcount']}</a>";
$i++;
}
}
?>
<div id="refinfo" style="display:none;">
<span style="font-size:18pt;font-weight:bold;" id="refprice"></span><br />
<span style="color:#D01F1E;">You don't have enough funds for this package.</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.refbutton')
.bind('mouseover',function(event) {
$('#refinfo').show();
$('#refprice').text($(this).data("pricepack"));
})
.bind('click',function(event) {
document.rent.refs.value=$(this).text();
})
.bind('mouseout', function(event){
$('#refinfo').hide();
})
;
});
</script>
I want to change the innerHTML with PHP code. But I cannot get it to work, and I do not understand why. I want it to change some text on the page but from another file. And so I thought that I could use this:
document.getElementById ("page"). innerHTML = "<? php echo $ home?>";
But it does not work.
Here is my code:
<?php
$home = file_get_contents("home.php");
?>
<script type="text/javascript">
function ChangePage(page)
{
if(page == "home")
{
document.getElementById("page").innerHTML = "<?php echo $home ?";
}
}
</script>
There are many small typos. Try removing the space between $ and 'home' and before 'php'. This is the right statement:
document.getElementById ("page"). innerHTML = "<?php echo $home?>";
Also, where's your closing php tag?
<?php
$home = file_get_contents("home.php");
?>
<script type="text/javascript">
function ChangePage(page)
{
if(page == "home")
{
document.getElementById("page").innerHTML = "<?php echo $home; ?>";
}
}
</script>
Although this is a bad practice. Why would you want to do this instead of simply loading the php in the right place? Also, you do realize that 'page' should be the id of a pre-existing div in your html, right? Something like this would be better:
<html>
<body>
<div id = "page">
<?php echo file_get_contents("home.php"); ?>
</div>
</body>
</html>
I am having an issue with attempting to show different confirm text from an array when using a hyperlink. The text always ends up being from the last confirmation text in the array. I have seen 2 examples on this forum using a function() in a function but I was not able to get this working from viewing the examples.
Here is my code:
echo '
<script type="text/javascript">
function getDetails(message)
{
if (confirm(message))
return true;
else
{
var links = document.getElementsByTagName("a");
for(i=0;i<links.length;i++)
links[i].href = item_NoLink;
}
}
</script>';
foreach ($items as $item)
{
$link = 'http://test_url/mytest.php;report='. $item['id'];
echo '
<script type="text/javascript">
var item_detail = ', json_encode($item['reported_spam']['detail']),'
var item_NoLink = ', json_encode('http://test_url/mytest.php;'),'
</script>
<a id="mylink[]" onclick="getDetails(item_detail);" href="'.$link.'" style="text-decoration:none;">
<img id="myImage" alt="" src="http://test_url/images/reported.gif" title="'.$item['reported_spam']['title'].'" style="position:relative;border=0px;vertical-align:middle;right:5px;" />
</a>';
}
Thanks.
Edit: I figured it out.
#Grant Zhu: Arrays are not written like that in php and one can progress to the next key just using the empty square brackets. You were correct as I did make an err for the image id array and the js variables. Also for php when using single quotes inside echo with single quotes one must use the backslash (unless using php again).
I got it working as such:
echo '
<script type="text/javascript">
var item_NoLink = ', json_encode('http://test_url/mytest.php;'),'
function getDetails(message)
{
if (confirm(message))
return true;
else
{
var links = document.getElementsByTagName("a");
for(i=0;i<links.length;i++)
links[i].href = item_NoLink;
}
}
</script>';
foreach ($items as $item)
{
$link = 'http://test_url/mytest.php?report='. $item['id'];
echo '
<a id="mylink[]" onclick="getDetails(\'',$item['reported_spam']['detail'],'\');" href="'.$link.'" style="text-decoration:none;">
<img id="myImage[]" alt="" src="http://test_url/images/reported.gif" title="'.$item['reported_spam']['title'].'" style="position:relative;border=0px;vertical-align:middle;right:5px;" />
</a>';
}
Thank you.
$link = 'http://test_url/mytest.php;report='. $item['id'];
this code is weird , I think your code might be
$link = 'http://test_url/mytest.php?report='. $item['id'];
You should check the javascript generated and you will find there're multiple declarations of item_detail and item_NoLink. That means you assign the values to the same variables again and again. Of course, the last assignment takes effect in the end.
You can put the detail text directly in the getDetails function. Make sure the text is quoted by '. And you'd better make the id of <a> and <img> unique because that's what id means. I'm not familiar with PHP, check the syntax below if it's correct.
foreach ($items as $item)
{
$link = 'http://test_url/mytest.php;report='. $item['id'];
echo '
<a id="mylink$item['id']" onclick="getDetails(', json_encode($item['reported_spam']['detail']),');" href="'.$link.'" style="text-decoration:none;">
<img id="myImage$item['id']" alt="" src="http://test_url/images/reported.gif" title="'.$item['reported_spam']['title'].'" style="position:relative;border=0px;vertical-align:middle;right:5px;" />
</a>';
}