As you'll see, I'm a newbie to all this ajax stuff but I can do a bit of php and so I plumped for xajax to take care of the javascript for me.
I've got an array with items listed in different section. I want to use this array to produce an unordered list that expands when someone clicks on a section.
I've adapted a script I found here:
Sliding Draw
My script currently looks like this:
<?php
include ("xajax_core/xajax.inc.php");
$subs = array(
"Mortice" => array("Union Deadlock 2.5", "Union Deadlock 3", "Union Sashlock 2.5", "Union Sashlock 3"),
"Cylinders" => array("30/30 Euro", "30/40 Euro", "30/50 Euro", "30/60 Euro"),
"uPVC" => array("30/92 Fullex", "35/92 Fullex", "Sash jammer")
);
function addsub($show, $key)
{
$objResponse=new xajaxResponse();
if ($show=="true") {
$objResponse->assign("list", "style.display", "block");
$objResponse->replace("$key","innerHTML","true","false");
}
else {
$objResponse->assign("list", "style.display", "none");
$objResponse->replace("$key","innerHTML","false","true");
}
return $objResponse;
}
$xajax = new xajax();
$xajax->registerFunction("addsub");
$xajax->processRequest();
?>
<!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" />
<?php $xajax->printJavascript() ?>
<title>Expand menu test</title>
<style type="text/css">
.list {display: none;}
</style>
</head>
<body>
<?php
echo "<ul>\n";
foreach ($subs as $key => $group) {
echo "<li id=\"".$key."\" onClick=\"xajax_addsub('true','$key');\">".$key."\n";
echo "<ul class=\"list\" id=\"list\">\n";
while (list($list, $each) = each($group)) {
echo "<li id=\"list\">".$each."</li>\n";
}
echo "</ul>\n</li>\n";
}
echo "</ul>";
?>
</body>
</html>
The idea is that when an element is clicked on it changes the style display to block (thus showing the rest of the list) and sets the function to 'false' so if it's clicked again it will change the display back to none and hide the list.
Needless to say it doesn't work so if someone could point out to me why I'd be eternally grateful.
Cheers,
Nick.
Solved - I sorted it by placing the lists to be shown (or hidden) into <divs> and assigning them each a unique id and setting their style as display: none.
Then I just had to make a request to set the style as block when it was clicked on.
Thanks.
I think you should look into jQuery as your default javascript library, it's used by many web professionals and is very good. There you will find the Accordion control, which I think will suite this need very well.
Good luck!
Related
I am new to PHP. I am trying to create a simple personal project where several coins move around the page when users refresh it from their browser. I keep on getting a weird error ().
This is what my file looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Treasure Map</title>
</head>
<body style="background-image:url(Bluemap.jpg); background-repeat: no-repeat">
<?php
$numberOfCoins = rand(3, 10);
while ($numberOfCoins) {
$xPosition = rand("10", "650");
$yPosition = rand("10", "400");
print '<div style="position: absolute;';
print 'left:' . $xPosition . 'px;';
print 'top:' . $yPosition . 'px">';
print '<img src="goldCoin.png" height="50px"/>';
print '</div>';
$numberOfCoins--;
}
?>
</body>
</html>
what am I doing wrong?
The file is an HTML document, therefore it cannot run PHP code.
You need to rename it from index3.html to index3.php and also make sure you are running it on a server that runs PHP
You should save the file as .php. This just shows the code itself, which means that it is not parsed.
Apart from that, your code is slightly off too.
The variable $numberOfCoins now contains a random number between 3 and 10. If you want to iterate a random number of times, an if loop might be more convenient:
$numberOfCoins = rand(3,10);
for($i = 0; $i < $numberOfCoins; $i++)
{
}
I would like to create a system to issue opinions on a given thing. I'm at a good point, but I can not get created for each element taken from the database a correspond div. Let me explain, for example if I have three reviews made by the three authors, I would like three divs for the reviews, and three for the authors, then automatically generated by the loop. How can i do?
You can do this.. First of all add <body> tag to your html document
<!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" />
</head>
<body>
<?php
$Content = mysql_query("SELECT * FROM feedback");
while($Row = mysql_fetch_array($Content)) {
$Feedback = $Row['FeedbackUser'];
$UserNick = $Row['UserNickname'];
$UserMail = $Row['UserEmail'];
echo "<div>{$Feedback}</div>"; // Displaying feedback as div
echo "<div>{$UserNick }</div>"; // Displaying UserNick as div
echo "<div>{$UserMail }</div>"; // Displaying UserMail as div
}
?>
</body>
Hope this is what you are looking for
I am working on an Opencart site and for the categories on the left hand side I need them to alternate in different colours eg. red, purple, green, blue etc and then repeating when more categories are added to the menu.
Can anyone give me advice of the easiest way to do this?
You can view the site below:
http://getsmarta.co/_ecommerce/easy-leaf/
<!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></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var color = ['Red', 'Green', 'Yellow'];
$('ul#test').find('li').each(function (i) {
$(this).addClass(color[((i + 3) % 3)]);
});
});
</script>
<style type="text/css">
.Red
{
background-color: Red;
}
.Green
{
background-color: Green;
}
.Yellow
{
background-color: Yellow;
}
</style>
</head>
<body>
<ul id="test">
<li>a</li><li>b</li><li>c</li>
<li>a</li><li>b</li><li>c</li>
<li>a</li><li>b</li><li>c</li>
<li>a</li><li>b</li><li>c</li>
</ul>
</body>
</html>
I am not familiar with Opencart, but can't this be achieved with css? You can most likely use the n-th child thing to make this work.
Or you can colour it by using jquery, using a for loop and a class name of colour1, colour2 and so on. Loop through the number of colours and addClass() to each element.
There are probably better solutions these are just what came up now.
Edit: ok maybe the n-th child won't be good for earlier browsers so the jquery solution would be good unless you want to add the colour class in the page itself using the same concept as the jquery
I'd do this server side.
In part code / part comments that you'll need to fill in:
$i = 0;
// loop through rows
$i++;
$alt=false;
if ($i % 2 == 0) {
$alt = true;
}
// output row
// make sure to use a if ($alt) { echo 'class="alt""'; } or something similar so you can style away
// end loop
I am not giving you the code. Write it yourself. Here is the idea.
Write 4 classes for 4 different colors.
Now write a function to add correct class to each li item. ie, you
can check the li item's position and add correct class to it.
You can use either javascript or php to do this.
Now the link color will change automatically with new categories adding.
I'm trying to echo a PHP tag by doing this:
echo "<?php echo \"test\"; ?>";
The result should be just "test" without quotes, but my code isn't working. What is happening is that nothing is shown on the page, but the source code is "<?php echo "teste"; ?>"
Most of you will want to know why I want to do this. I'm trying to make my own template system; the simplest way is just using file_get_contents and replacing what I want with str_replace and then using echo.
The problem is, that in the template file, I have to have some PHP functions that doesn't work when I echo the page, is there another simple way to do this? Or if you just answer my question will help a lot!
Here is an example of what I am trying to accomplish:
template.tpl:
<!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>[__TITULO__]</title>
</head>
<body >
<p>Nome: [__NOME__] <br />
Email: [__EMAIL__]<br />
<?php
if ($cidade != "") {?>
Cidade: [__CIDADE__]<br />
<?php
}
?>
Telefone: ([__DDD__]) [__TELEFONE__] <br />
Fax:
([__DDDFAX__]) [__FAX__] <br />
Interesse: [__INTERESSE__]<br />
Mensagem:
[__MENSAGEM__] </p>
</body>
</html>
index.php
<?php
$cidade = "Teste";
$file = file_get_contents('template.php');
$file = str_replace("[__TITULO__]","Esse Título é téste!", $file);
$file = str_replace("[__NOME__]","Cárlos", $file);
$file = str_replace("[__EMAIL__]","moura.kadu#gmail.com", $file);
if ($cidade != "") {
$file = str_replace("[__CIDADE__]",$cidade, $file);
}
echo $file;
?>
I can solve all this just not showing the div that has no content. like if i have a template, and in it i have 2 divs:
<div id="content1">[__content1__]</div>
<div id="content2">[__content2__]</div>
if the time that i set the content to replace the template I set the content1 and not set content 2 the div content2 will not show...
Use htmlspecialchars
That will convert the < > to < and >
You are dealing with two sets of source code here that should never be confused - the server code (PHP, which is whatever is in the <?php ?> tags) and the client (or browser) code which includes all HTML tags. The output of the server code is itself code that gets sent to the browser. Here you are in fact successfully echoing a PHP tag, but it is meaningless to the browser, which is why the browser ignores it and doesn't show anything unless you look at the client code that got sent to it.
To implement templates in this style, either they should not have any PHP code, or the resulting string (which you have stored in $file) should itself be executed as though it were PHP, rather than echoing it straight to the client. There are various ways to do this. One is to parse out the PHP tags in the string, echo everything that is not within the PHP tags and run eval() on everything that is.
My goal is to show a series of embedded youtube videos on one page but allowing the user to hide or show any youtube video by clicking a button associated with a specific youtube video on the page. I made a form that submits the youtube embed code to a mysql database and I created a php file to retrieve every embed code using a for loop. For each iteration of the for loop, a youtube video will pop up with a corresponding button which will allow the user to hide or show the youtube video.
It works when there is only one entry in the mysql table but does not work when more youtube embed codes are uploaded. For example, when there are two youtube embed codes uploaded, two buttons are created, but when I click either of the two buttons, it will only show or hide the first youtube embed. None of the buttons will show the second youtube video.
here is the code with some edits:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>hide/show iframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css">
<!--
#frDocViewer {
width:70%;
height:50%;
display:none;
}
-->
</style>
<script type="text/javascript">
<!--
function HideFrame() {
var fr = document.getElementById ("frDocViewer");
if(fr.style.display=="block") {
fr.style.display="none";
} else {
fr.style.display="block";
}
}
//-->
</script>
</head>
<body>
<?php
mysql_connect ("","","") or die(mysql_error());
mysql_select_db ("") or die(mysql_error());
$lastid = mysql_query ("SELECT * FROM embed ORDER BY id DESC LIMIT 1");
$lastid = mysql_fetch_assoc($lastid);
$lastid = $lastid['id'];
for ($count=1; $count<= $lastid ; $count++) {
$iframe = mysql_query ("SELECT * FROM embed WHERE id=$count ");
$iframe = mysql_fetch_assoc($iframe);
$iframe = $iframe['url'];
echo "
<image src='utube.gif' onclick='HideFrame()' />
<div id='frDocViewer'>
$iframe
</div>
";
}
?>
</body>
</html>
Because each div has the same ID. You need to create unique ID's for each DIV to show or hide ie. frDocViewer1, frDocViewer2 etc
Use your $count variable to echo it's value onto the ID as it will increment by 1 for each iteration of the loop.
echo "
<image src='utube.gif' onclick='HideFrame()' />
<div id='frDocViewer_{$count}'>
$iframe
</div>
";
Then you just need to make sure that you have corresponding Javascript for each of those DIV's. I would send the id into the javascript function using your onclick tag.
for ($count=1; $count<= $lastid ; $count++) {
$iframe = mysql_query ("SELECT * FROM embed WHERE id=$count ");
$iframe = mysql_fetch_assoc($iframe);
$iframe = $iframe['url'];
echo "
<image src='utube.gif' onclick='HideFrame({$count})' />
<div id='frDocViewer_{$count}' class='frDocViewer'>
$iframe
</div>
";
}
And then have the javascript code as something like:
var old_element = null;
function HideFrame(id) {
var fr = document.getElementById("frDocViewer_" + id);
if(fr != old_element)
{
fr.style.display = "block"
if(old_element != null) old_element.style.display = "hide";
old_element = fr;
}
}
Then finally you need to change your CSS to make frDocViewer a class rather than a unique style. Notice above in the PHP echo string I added in the new class attribute to the DIV
<style type="text/css">
.frDocViewer {
width:70%;
height:50%;
display:none;
}
</style>
PS: This code might not actually compile, it's just a rough guide.
I think the problem is with this line:
<div id='frDocViewer'>
IDs are supposed to be unique across the entire page, but you're creating a new element with the same ID on each iteration of your loop. I haven't tested this, but my assumption is that when your JavaScript executes to hide/show that ID, it's only picking up the first ID by that name that it finds.
You'll need to change your code to give a unique ID to each iteration, and pass a reference to that element when you call your HideFrame() function. The function can then operate on that specific ID.
hmm...where to start....
if you getElementById where your id is frDocViewer AND frDocViewer is used by every video there will be problems.
how about something like
<div onclick='HideFrame(this)' >
<image src='utube.gif'/>
....
</div>
function HideFrame(el) {
...
}
Not at all tested, but you NEED to go for something more GENERIC then hard coding an id....in my opinion