How is it possible to use the href for this full div tag?
<?php
echo '<div id="" onclick="location.href="viewpost.php";" style="cursor:pointer;"> test </div>';
echo "<div class='nieuwscol' onclick='location.href='viewpost.php';' style='cursor:pointer;'>";
echo "<img class='imgnews' src='".$row['imgNewspost']."'>";
//echo '<p>'.$row['postAuteur'].'</p>';
echo '<div class="newstitle"><p>'.$row['postTitle'].'</p></div>';
echo '<p>'.$row['postDesc'].'</p>';
echo '<a style="font-size: 14px;" href="viewpost.php?id='.$row['postID'].'#commentsID"><img src="img/commenticon.png" alt="" height="20" width="20" ><div class="newsdate" float: right;> <p style="font-size: 14px;"> 000 </a>'.date('jS M Y', strtotime($row['postDate'])).'</p></div>';
echo '</div>';
echo '</a>';
?>
As you can see, the a href is working for newstitles, but now I would like to use the same weblink for the whole div.
Any suggestions?
You should set the url with the div like :
<div data-bind="<?php echo 'viewpost.php?id='.$row['postID'];?>" class="div-class"></div>
Then write jquery function like following:
$(document).on("click",".div-class",function(){
window.location = $(this).data('bind');
});
Simply add <a href=""> which contains whole div.
In your code we see </a> in the last echo which don't have start anywhere above first echo;
Related
Thanks for taking the time. I trying to make some image links inside of a DIV in html. The links are stored in a SQL DB. The links work just fine when outside of this specific div, but I really want to put them inside for styling purposes. The social images div is the one
echo "<div class=column-3>";
echo "<h3 id=\"artistNameLabel\"><strong>$artist_name</strong></h3>";
echo "<img id=\"artistImage\"src=\"imageuploads/$imageFilePath\">";
echo "<p><img alt=\"Artist Instagram\" src=\"images/instagramLogo.png\" width=\"25%\"></p>";//link doesnt work
echo "<p><img alt=\"Artist Streaming Account\" src=\"images/spotifyLogo.png\" width=\"25%\"></p>";//link doesnt work
echo "</div>";
The images appear just fine, but the link doesn't work. Also the text value that is the link is loaded just fine. Thanks for any help
echo "<div class=column-3>";
echo "<h3 id='artistNameLabel'><strong>".$artist_name."</strong></h3>";
echo "<img id='artistImage' src='imageuploads/".$imageFilePath."'>";
echo "<p><a href='".$artistInstagram."' target='_blank'><img alt='Artist Instagram' src='images/instagramLogo.png' width='25%'></a></p>";//link doesnt work
echo "<p><a href='".$artistStreaming."' target='_blank'><img alt='Artist Streaming Account' src='images/spotifyLogo.png' width='25%'></a></p>";//link doesnt work
echo "</div>";
You can try like this way :
$artistInstagram = "https://www.instagram.com/";
$artistStreaming = "https://www.example.com/";
$artist_name = "Test";
$imageFilePath = "https://via.placeholder.com/150";
$html = <<< EOT
<div class=column-3>
<h3 id="artistNameLabel"><strong>$artist_name</strong></h3>
<img id="artistImage"src=$imageFilePath>
<p>
<a href=$artistInstagram target="_blank">
<img alt="Artist Instagram" src="https://via.placeholder.com/150" width="5%">
</a>
</p>
<p>
<a href=$artistStreaming target="_blank">
<img alt="Artist Streaming Account" src="https://via.placeholder.com/150" width="5%">
</a>
</p>
</div>
EOT;
echo $html;
I think this will solve your problem
You need to style you anchor tag with "display:inline-block" and it will work fine. no matter if image is there or not.
I am retrievieng from a query 4 rows.
This rows recover the id (to set the href), the image path and the title.
For example the code for the first row is:
<div class="row">
<div class="col">
<a href="id">
<img src="file">
<p class="titulo-noticia">The title</p>
</a>
</div>
<div class="col">
<a href="id">
<img src="file">
<p class="titulo-noticia">Another title</p>
</a>
</div>
</div>
I achieve this using:
echo "<div class='table'>"
for($i=0;$i<2;$i++){
echo "<div class='row'>"
for($j=0;$j<2;$j++){
echo "<div class='col'>"
echo "<a href='id'>
<img src='file'>
<p class='titulo-noticia'>".$title."</p>
</a>"
echo "</div>"
} //end col loop
echo "</div>"
} //end row loop
echo "</div>"
CSS is:
.col{
display: table-cell;
}
.row{
display: row;
}
.table{
display: table;
}
Is this the correct way to show a 2*2 matrix of php content? Or there is a better way using css?
Thank you.
I don't think there's really a best way, but here's another way with CSS. Basically just echo out all your query results into one container div without worrying about rows. Display each result in a div with float: left and width: 50% and they'll make their own rows.
<div class="matrix">
<?php while ($row = however_youre_fetching_them()): ?>
<div class="cell">
<a href="<?= $row['id'] ?>">
<img src="<?= $row['path'] ?>">
<p><?= $row['title'] ?></p>
</a>
</div>
<?php endwhile ?>
</div>
And the CSS
.cell {
height: 100px;
width: 50%;
float: left;
}
Setting a constant height on the cells should ensure that the rows line up properly.
You over-complicating this.
You need to do it by chunks, array_chunk() perfect for that:
foreach(array_chunk($array, 2) as $chunks){
//<div class="row">
foreach($chunk as $chunk){
//<div class="col"></div>
}
//</div>
}
I´m trying to style the following php echo
<a href="" title="<?php
echo"
<div class='test'>".$name."</div>'/n'
<div class='test2'>".$itemLevel."</div>'/n'
";
?>">Test Link</a>
But i think i don´t insert the div class and the '/n' at the right place. Could anyone help me?
You don't echo the HTML content inside the a href's title.
This will work:
<a href=""><?php echo"
<div class='test'>".$name."</div>'/n'
<div class='test2'>".$itemLevel."</div>'/n'
";
?>Test Link</a>
Optimizing your code:
<?php echo '
<a href="">
<div class="test">'.$name.'</div>
<div class="test2">'.$itemLevel.'</div>
Test Link</a>';
You must encode your html in order to put it into the title property
<?php
$title = '<div class="test">'.$name.'</div>' . PHP_EOL .
'<div class="test2">'.$itemLevel.'</div>' . PHP_EOL;
?>
Test Link
I am having a problem while changing the css property of elements having similar kind if id's using javascript.
I am running a php loop through a series of hidden elements. So I am having there id's like this imgstat_1, imgstat_2 and so on.
The code i am using is
foreach($img as $img1){?>
<li>
<a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
<img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $img1->vchImgStatus?>" />
</a>
</li>
<input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
<?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">
and javascript like this
function changeimgstat(obj)
{
var xyz = document.getElementById('newimg').value;
alert(document.getElementById('abc_'+xyz));
document.getElementById('abc_'+obj).style.border="3px solid red";
var status = document.getElementById('imgstat_'+obj).value;
document.getElementById('newimg').value = status;
}
So could someone suggest what i am doing wrong
As I found there is no error in your code, but have you defined $counter before foreach loop. And your img id should be abc_<?php echo $counter?> rather than abc_<?php echo $img1->vchImgStatus?> which you are using in javascript.
Try:
CSS
.img3{border:3px solid red;}
.img{border:none;}
HTML and PHP
<?php
$counter=1;
foreach($img as $img1){?>
<li>
<a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
<img class="img" src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $counter?>" />
</a>
</li>
<input type="hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
<?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">
SCRIPT
<script>
function removeAllClass()
{
var allimg=document.getElementsByClassName("img");
for(var index=0;index<allimg.length;index++)
{
allimg[index].className = "img";
}
}
function changeimgstat(obj)
{
removeAllClass();
document.getElementById('abc_'+obj).className="img img3";
var status = document.getElementById('imgstat_'+obj).value;
document.getElementById('newimg').value = status;
}
</script>
The best solution is to add a css class attribute to elements. And write styles for the class.
In the onclick function you can add the class to the elements
It seems you have:
<img ... id="abc_<?php echo $img1->vchImgStatus?>">
and
<input ... value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
Are you sure these two elements will have the id you expect?
try the following:
foreach($img as $img1){?>
<li>
<a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
<img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $counter;?>" />
</a>
</li>
<input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
<?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">
Javascript:
function changeimgstat(obj)
{
var xyz = document.getElementById('newimg').value;
alert(document.getElementById('abc_'+xyz));
document.getElementById('abc_'+obj).style.border="3px solid red";
var status = document.getElementById('imgstat_'+obj).value;
document.getElementById('newimg').value = status;
}
I have changes the id="abc_"
because in the javascript function the parameter passed by you is the counter so the same shoul be the id value.
I have a simple ajax call inside a javascript function to a php file, which searches the DB and returns formatted html. Alls fine, but for some reason the returned html is being wrongly formatted.
Javascript:
$.ajax(
{
url: "getItems.php?lastID=10",
success: function(html)
{
if(html)
{
$("#main").prepend(html);
}
}
});
getItems.php
<?php
mysql_connect();
$lastID = $_GET['lastID'];
$result = mysql_query("SELECT ...");
while ($row = mysql_fetch_assoc($result))
{
echo '<span class="iteminfo"> ';
echo '<a class="username" href="http://x.com/'.$row['UserName'].'" target="_blank"/>'.$row['UserName'].'</a><br/>';
echo '<a class="status" href="http://x.com/'.$row['UserName'].'/c/'" target="_blank" />'.$created_at.'</a></span>';
}
?>
which should return (and it returns this correctly in Firebug)
<span class="iteminfo">
<a class="username" href="http://x.com/username" target="_blank"/>username</a><br/>
<a class="status" href="http://x.com/username/c/" target="_blank" />the date</a>
</span>
but instead its outputting:
<span class="iteminfo">
<a class="username" href="http://x.com/username" target="_blank"/></a>username<br/>
<a class="status" href="http://x.com/username/c/" target="_blank" /></a>the date
</span>
and I've no idea why.
while ($row = mysql_fetch_assoc($result))
{
echo '<span class="iteminfo"> ';
echo '<a class="username" href="http://x.com/'.$row['UserName'].'" target="_blank">'.$row['UserName'].'</a><br/>';
echo '<a class="status" href="http://x.com/'.$row['UserName'].'/c/'" target="_blank" >'.$created_at.'</a></span>';
}
You have closed a tag wrong manner
<a> content </a>
but u have used
<a/></a>
It's a fairly simple problem -- you're closing your anchor tags and then trying to close them again. The HTML spec I think gives browsers the option of creating an additional tag here.
Here's the code you want to change:
echo '<a class="username" href="http://x.com/'.$row['UserName'].'" target="_blank">'.$row['UserName'].'</a><br/>';
echo '<a class="status" href="http://x.com/'.$row['UserName'].'/c/'" target="_blank" >'.$created_at.'</a></span>';
}
The only difference is that the <a> tags are terminated by '>' and not '/>' which would imply that you're closing it at the same time.