PHP code (functions.php)
$main = $db_sql->query_array("SELECT catid,titel,subcat,startorder FROM $cat_table WHERE catid='$subcat'");
$tpl->register('category_title',stripslashes($main['titel']));
$tpl->register('category_id',$main['catid']);
So I want to add an if statement where if {category_id} is not 0 then do the following code
<img src="{GRAFURL}/{category_id}.jpg" alt="{category_title}" width="50" height="50" border="0" align="middle" /> {category_title}
what would be the correct syntax?
need more code still for the html file?
HTML doesn't have dynamic features like if-statements. Think of HTML as a language to define a layout - unchangeable using HTML itself.
This should do the trick:
<?php
if ( false === is_empty( $category_id )) {
echo "<img src='{$GRAFURL}/{$category_id}.jpg' alt='{$category_title}'
width='50' height='50'
border='0' align='middle' /> {$category_title} ";
}
?>
In case you need to add client-side dynamic features to your HTML-pages, have a look at jQuery or jQuery UI.
HTML has no such capability. You would need to generate your HTML using a programming language. Then the syntax would depend on which language you were using.
e.g. in TT:
[% IF category_id %]
<img src="[% GRAFURL %]/[% category_id %].jpg"
alt="{category_title}" width="50"
height="50" border="0" align="middle"
/> [% category_title %]
[% END %]
Use javascript for generating it client side, PHP for server side. Javascript can change things on the page and provide dynamic content after the page is sent to the client; PHP can determine the content before sending it to the user (while it can edit it afterwords, it is much more convoluted).
For example, if you wanted to add it to a tag with id "dynamic", you could use this:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var img_tag = document.createElement('img');
img_tag.src = "{GRAFURL}/{category_id}.jpg";
img_tag.alt = "{category_title}";
img_tag.width = 50;
img_tag.height = 50;
img_tag.border = 0;
img_tag.align = "middle";
document.getElementById("dynamic").appendChild(img_tag);
};
</script>
</head>
<body>
<div id="dynamic">
</div>
<body>
</html>
I thoroughly recommend learning jQuery, however, where you could do things easier and faster. Also, it is up to you to replace the values in braces with the correct values (either through PHP or javascript), I couldn't tell what you were doing.
Related
I am trying to accomplish something like this :
<?php $url = 'http://www.mydomain.com/img/picture.jpg'; ?>
<img src='<?php echo $url ?>' />
Only the problem is I want to accomplish this using javascript. Something like this
<script>url = 'http://www.mydomain.com/img/picture.jpg'</script>
<img src='<script>document.write(url)</script>' />
Of course it wouldn't work, but you got the idea. Any thought ?
Try - http://jsfiddle.net/m2Prh/
<img id="image" />
<script>
var url = 'http://lorempixel.com/300/200';
document.getElementById("image").src = url;
</script>
I suggest reading jquery ,you can acesss every html element
I've got a HTML file which I've created and is stored in a directory elsewhere.
The problem is, I'd like to be able to get content externally and place it within the HTML file.
I figured I could use PHP for this, because it's server-side and can access the files I want.
So, I created a PHP script which opens and echoes a HTML file, and afterwards, echos some JavaScript to change elements that are on the screen.
Here's my PHP file:
<?php
$html = file_get_contents('file.html');
$imageurl = file_get_contents('url.txt');
$js = '<script type=\'text/javascript\'>updateImage(\'img1\', '.$imageurl.');</script>';
echo $html;
echo $js;
?>
..and the HTML file:
<html>
<script type="text/javascript">
function updateImage(id, url) {
var img = document.getElementsByName(id)[0];
img.src = url;
}
</script>
<body>
<img src="" name="img1" />
</body>
</html>
It's not the best method, but it works.
I would like to know a way to do this within PHP, not using JavaScript.
I'm not sure as of the best approach to this.
You could use include and ob_get_contents to get the html as string and do some str_replace or preg_replace on that.
Your HTML:
<html>
<body>
<img src="{IMAGE_SRC}" width="512" height="512" name="image" />
</body>
</html>
Your PHP:
ob_start();
include 'your_file.html';
$buffer = ob_get_contents();
ob_end_clean();
$buffer = str_replace('{IMAGE_SRC}', 'your_image.png', $buffer);
print $buffer;
That is a pretty basic question. You should read some PHP and HTML Tutorials. Something like this will do the trick:
<html>
<body>
<img src="" width="512" height="512" name="<?= $somePhpVariableContainingTheName ?>" />
</body>
</html>
Ok,
Firstly, if you click on the questions link at the top of this page, each question has some buttons at the bottom that pertain to the question. when you mouseover them it shows more about the button. How is this done? I want to do this on my site.
So basically, i am using a php while loop to echo listitems's queried from a users id in mysql.
each listitem contains some more block and inline elements. some of those block elements have onmouseover/mouseout events attached to them. yet if i use the same class name on those elements, when i trigger a mouseover, it triggers every element with that class name. I am new to php / js / jquery, and not sure on the best way to go about it. any help would be grand. Example below.
<ul class="ulclass">
<?php
$link = mysql_query("SELECT * FROM table WHERE id='".$_SESSION['id']."' ORDER BY lid");
$i = 1;
while ($row=mysql_fetch_assoc($link)) {
$ico = $row['url'];
echo '
<li>
<a href="'.$row['url'].'" target="_blank" >
<div class="title">'.$row['title'].'</div>
</a>
<div onclick="/*here i want to change the next div.css display to block*/">
<img src="something.png" class="something_img"/>
<div class="drop_menu" id="drop_menu'.$i.'"
onmouseout="t=setTimeout(\'/*here i want to change this div.
css display back to none*/\',300);" >
<form method="post" action="" onmouseover="clearTimeout(t);">
<input type="hidden" name="deletetitle" value="'.$row['hash'].'"/>
<input type="submit" class="" name="delete" value="x"/>
</form>
</div>
</div>
</li>';
$i++;
}
?>
</ul>
let's fix some little things first. You don't really need to put all the HTML in a string, you can just do stuff like:
<?php
while ( $i < 10 ) {
?>
<li>Line number <?php echo $i; ?></li>
<?php
$i++;
}
?>
This way you will retain syntax highlighting and you won't have all kinds of problems that will arise from using string (like having to escape all single quotes etc.).
On the subject of JavaScript / jQuery – you shouldn't really use inline event handlers, such as onclick / onmouseover. It's really hard to maintain mixed up code, it's already enough there is HTML and PHP, don't add JavaScript to the same place. You should put in a separate file (or at least in a separate <script> tag before the closing </body> tag) and hook to the elements by their classes. I simplified your code a little, I am also not 100% sure what you wanted to achieve with the code you posted, but judging by the example of stackoverlow tag links, I will do something similiar:
<a href="'.$row['url'].'" target="_blank" class="tag">
<div class="title">'.$row['title'].'</div>
<div class="drop-out">Content of the drop-out.</div>
</a>
So, we have class tag for the link, and we want to hover it and see the internal element, and we take the mouse out it should disappear, let's see what jQuery we need for that (don't forget to add it to your page):
$('.tag').hover(
function () {
// `this` points to the DOM element we are hovering
$(this).children('.drop-out').css({
display : 'block'
, opacity : 1
});
}
, function () {
$(this).children('.drop-out').animate({
opacity : 0
}, 350, function () {
$(this).css('display', 'none');
});
}
);
Here's the example: http://jsfiddle.net/R6sYD/
jQuery methods used in this example:
http://api.jquery.com/hover/
http://api.jquery.com/children/
http://api.jquery.com/css/
http://api.jquery.com/animate/
Hope this helps.
I have the following code (I formated it to more lines, but in my source code I have it in one line, because innerHTML doesn't like new lines somehow - but that isn't the problem...):
<?php
echo "
<img
src='1.png'
onclick='
document.getElementById(\"my_div\").innerHTML=\"
<img src=\\\"1.png\\\" onclick=\\\"alert(\\\\\\\"text\\\\\\\");\\\" />
\";
'
/>
";
?>
And somewhere in the body I have :
<div id="my_div"></div>
So, when I click on the image, i'll have the same image inside my_div. The problem is, that when I click on the 2nd image, javascript doesn't alert anything.
But when I change this:
alert(\\\\\\\"text\\\\\\\");
to this:
alert(MyText);
and add JavaScript variable MyText:
<script>
MyText = "text";
</script>
it now works.
I think the problem is with those nested quotes:
\\\\\\\"
(level 4). Any ideas? Thanks.
EDIT: please don't post here another methods of doing this, I'd like to know why those quotes doesn't work here..
SECOND EDIT: I need that php there, because this is only a piece of my code (in full code I need it to display images in cycle...)
If you want a quote character as data (instead of as an attribute delimiter) in HTML, you represent it as " not \"
There's nothing "dynamic" in your script - you're not inserting PHP variables, so why build that all from within a PHP echo? Simply have:
Or if you want to make it even cleaner:
<script type="text/javascript">
function addImg() {
document.getElementById('my_div').innerHTML='<img src="1.png" onclick="alert(\'text\')" />';
}
</script>
<img src="1.png" onclick="addImg()" />
refactor your JS into an external file (with a function that will do the onclick logic), and try outputting something simpler with php's echo
Use jQuery!
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<div id="my_div"></div>
<img src="1.png" class="my_img" />
<img src="2.png" class="my_img" />
<img src="3.png" class="my_img" />
<script type="text/javascript">
jQuery(function() {
$('.my_img').click(function() {
$('#my_div').html($(this).clone().unbind());
alert('text');
});
});
</script>
<?php
$xml = simplexml_load_file('http://www.google.com/ig/api?weather=London');
$information = $xml->xpath("/xml_api_reply/weather/forecast_information");
$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
$forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");
?>
<html>
<head>
<title>Google Weather API</title>
</head>
<body>
<h1><?php print $information[0]->city['data']; ?></h1>
<h2>Today's weather</h2>
<div class="weather">
<img src="<?php echo 'http://www.google.com' . $current[0]->icon['data']?>" alt="weather"?>
<span class="condition">
<?php echo round(conver_f_c($current[0]->temp_f['data'])); ?>° C,
<?php echo $current[0]->condition['data'] ?>
</span>
</div>
<h2>Forecast</h2>
<?php foreach ($forecast_list as $forecast) : ?>
<div class="weather">
<img src="<?php echo 'http://www.google.com' . $forecast->icon['data']?>" alt="weather"?>
<div><?php echo $forecast->day_of_week['data']; ?></div>
<span class="condition">
<?php echo round(conver_f_c($forecast->low['data'])); ?>° C - <?php echo round(conver_f_c($forecast->high['data'])); ?>° C,
<?php echo $forecast->condition['data'] ?>
</span>
</div>
<?php endforeach ?>
</body>
</html>
<?php
function conver_f_c($F){
return $C = ($F − 32) * 5/9;
}
I want Out somthing like this manner of the horizontal ,
Even i tried UL LI WITH display inline but it goes failed,
Tell me some good suggestion for my probme,
I want exactly like horizontal, expecting exactly like screen shot ,
Tell me How to render using php
Thanks
alt text http://img163.imageshack.us/img163/7518/weatherhori.jpg
Above snippet present display out verticly , i want o change that verticle to horizonatal ,
somthing like this screen shot
<table>...</table>
Update
From your latest comment so far:
i know how to fetch array and display
it, but i dont know to fetch and
display in the verticl manner that is
the stuck up
I feel this is going to be a stupid answer but it appears to be what you don't understand...
The web is based in a markup language called HTML. This language has tags (delimited by angle-brackets) that allow you to define the structure of a document. On top of this, you have another language called CSS. This other lang allow you to define how HTML is going to be displayed on screen.
You may argue that you already have a web page and you've written it with the PHP language instead of the two other langs I've mentioned. That's not enterely true: you code in PHP, sure, but you use PHP to generate HTML. And it's HTML what finally reaches the browser (Firefox, Explorer...). PHP is executed in the web server, not in the browser. The browser can only see whatever HTML you've generated.
To sum up: you have to forget about PHP, Google and the whole weather thingy. You first need to write a static HTML document and style it with CSS. Once you've done with it, you can finally replace the parts of the information that are dynamic with values taken from your PHP variables.
And since you seem to need a table to display tabular data, the appropriate HTML tag is <table>:
<table>
<tr>
<th>Web</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td><img src="/path/to/pics/cloudy.png" width="25" height="25" alt="Cloudy"></td>
<td><img src="/path/to/pics/sunny.png" width="25" height="25" alt="Sunny"></td>
<td><img src="/path/to/pics/rainy.png" width="25" height="25" alt="Rainy"></td>
<td><img src="/path/to/pics/cloudy.png" width="25" height="25" alt="Cloudy"></td>
</tr>
<tr>
<td>26ºC</td>
<td>26ºC</td>
<td>22ºC</td>
<td>25ºC</td>
</tr>
<table>
I suggest you find some tutorials about basic HTML and CSS. They'll be of invaluable help.
This is what's done by Google :
http://jsfiddle.net/bW8NA/1