I want to make the delete option appear when the image is hover.i dont know how to do it.so guys please help me?my view is like this:
<?php include('inc/header.php');?>
<div class="main">
<?php
foreach ($view as $row) {
echo "<div class='grow'>";
echo "<img src='".base_url()."images/".$row->image."' >";
echo "</div>";
}//end for each
?>
</div>
<?php include('inc/footer.php');?>
My image already hovers but dont know how to embed the delete option within the image.
Add a delete div -
<?php include('inc/header.php');?>
<div class="main">
<?php
foreach ($view as $row) {
echo "<div class='grow'>";
echo "<div class='delete'><a href='#'>delete</a></div>";
echo "<img src='".base_url()."images/".$row->image."' >";
echo "</div>";
}//end for each
?>
</div>
<?php include('inc/footer.php');?>
Then in script write a code to show/hide delete div -
$('.grow').hover(function () {
$(this).find('.delete').show();
},
function () {
$(this).find('.delete').hide();
})
Related
So far I have managed that when a button is clicked it will print all values within the array. I need it to be smarter and only print the value of the element clicked.
<?php
$Arr_shoppingList = array(
array("Volvo",22,18,0),
array("BMW",15,13,1),
array("Saab",5,2,2),
array("Land Rover",17,15,3)
);
//Looped through array and printed values
foreach ($Arr_shoppingList as $value) {
echo "<div class='ColumnRow Spacing Color2 Border'>";
echo "<h1> $value[0] </h1> <br>";
echo "<p>'MPG'. $value[1]</p> <br>";
echo "<p>'Stock' . $value[2]</p> <br>";
echo "<form method='GET'>";
echo "<button class='Border' type='submit' id='$value[0]' class='Button'> $value[0]
</button>";
echo "</form>";
echo "</div>";
}
?>
<script>
$('button').on('click', function (event) {
event.preventDefault()
$('button').each(function(index, value){
console.log(value.id)
})
});
</script>
EDIT: The first section has been completed many thanks, but similarly, but I also need the stock and MPG values to also be targeted, how would I go about incorporating that into this code? this is part of a checkout basket I'm attempting to create.
You can use event.target.id to get the id of the clicked element
<?php
$Arr_shoppingList = array(
array("Volvo",22,18,0),
array("BMW",15,13,1),
array("Saab",5,2,2),
array("Land Rover",17,15,3)
);
//Looped through array and printed values
foreach ($Arr_shoppingList as $value) {
echo "<div class='ColumnRow Spacing Color2 Border'>";
echo "<h1> $value[0] </h1> <br>";
echo "<p>'MPG'. $value[1]</p> <br>";
echo "<p>'Stock' . $value[2]</p> <br>";
echo "<form method='GET'>";
echo "<button class='Border' type='submit' id='$value[0]' class='Button'> $value[0]
</button>";
echo "</form>";
echo "</div>";
}
?>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('button').on('click', function (event) {
event.preventDefault()
console.log(event.target.id);
});
</script>
I'm trying to use jquery to click a link in one div and have it open an HTML document in another div (named infoblock) that sits beside the original div. I found an example here but I can't get it to work. I found a couple other variations on the net, but still no luck. Part of the link needs to transmit a variable so I'm not sure if that's part of the problem. I tried attaching the click function to a div surrounding the link with an ID of "nav" as well as the link itself with an ID of "details". When I click on the link, it opens the correct page in the full window, not in the div it's supposed to go to. Thank you in advance for any help.
$(document).ready(function() {
$("#reservename").click(function() {
$("#infoblock").load("createhandle.html");
});
$("#uploadpic").click(function() {
$("#infoblock").load("uploadpic.php");
});
$("#deletechar").click(function() {
$("#infoblock").load("selectdelete.php");
});
$("#nav").click(function() {
$("#infoblock").load($(this).find("a").attr("href"));
return false;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="charlist" class="block">
<b>Your Characters:<b>
<br>
<button id="reservename">Reserve A Name</button>
<button id="uploadpic">Upload A Picture</button>
<button id="deletechar">Delete</button>
<?php
$result5 = mysqli_query($con,"SELECT * FROM handle WHERE user='$handle' ORDER BY charname ASC");
while($row = mysqli_fetch_array($result5))
{
echo "<table>";
echo "<tr>";
echo "<td rowspan=5 align=left><img src='../pictures/" . $row['face'] . "' border=3></td>";
echo "<th align=left><a href='chat.php?charname=" . $row['charname'] . "'>" . $row['charname'] . "</a></th>";
echo "</tr>";
echo "<tr>";
echo "<th align=left><a href='choosepic.php?charname=" . $row['charname'] . "'>Choose Picture</a></th>";
echo "</tr>";
echo "<tr>";
echo "<th align=left><div id='nav'><a id='details' href='../details.html?charname=" . $row['charname'] . "'>Details</a></div></th>";
echo "</tr>";
if ($row['type'] == 'new'){
echo "<tr>";
echo "<th align=left><a href='createsheet.php?charname=" . $row['charname'] . "'>Create</a></th>";
echo "</tr>";
}
echo "<hr>";
echo "</table>";
}
?>
</div>
<p id="infoblock" class="block"></p>
You have to prevent the default behaviour when anchor tag is clicked In order to do that that you have to be listen for click on the anchor itself not div and return false in order to prevent its default behaviour. So your code will become like this
$('#details').click(function(e){
{
e.preventDefault(); //instead of this you can also return false
$("#infoblock").load($('#details').attr("href"));
}
});
This works for me:
$(document).ready(function(){
$('#details').click(function(e){
e.preventDefault();
$("#infoblock").html('<object type="text/html" data="'+$('#details').attr("href")+'" >');
});
});
I am trying to display my images in a for loop in the form tag using PHP but it does not seem to work. I have also tried doing a return statement but nothing still appears.
<?php
$data = array("images/architecture-57e8d34a48_640.jpg",
"images/gateway-arch-57e2d64548_640.jpg",
"images/horseshoe-bend-57e6d6434f_640.jpg",
"images/lake-irene-57e6d24a4d_640.jpg",
"images/silhouette-57e8d5444e_640.jpg");
function displayCheckboxes(){
for ($i=0; $i<count($data); $i++) {
echo "<img src='".$data[$i] . "<br>";
}
}
?>
<body>
<main id ="main">
<form id="pics" action="process.php" method="get">
<label>Name: </label>
<?php echo displayCheckboxes();?>
</form>
</main>
</body>
Maybe Like This:
<?php
$data = array("images/architecture-57e8d34a48_640.jpg",
"images/gateway-arch-57e2d64548_640.jpg",
"images/horseshoe-bend-57e6d6434f_640.jpg",
"images/lake-irene-57e6d24a4d_640.jpg",
"images/silhouette-57e8d5444e_640.jpg");
function displayCheckboxes(){
global $data;
for ($i=0; $i<count($data); $i++) {
echo "<img src='".$data[$i]."'>" . "<br>";
}
}
displayCheckboxes();
?>
function displayCheckboxes($img_array){
foreach($img_array as $img) {
echo "<img src='".$img."'>'" . "<br>";
}
}
and
echo displayCheckboxes($data);
There is several errors with your function :
- $data is not inside the function
- .jpg is already in the image name.
this should work,call the function with $data
$data = array("images/architecture-57e8d34a48_640.jpg",
"images/gateway-arch-57e2d64548_640.jpg",
"images/horseshoe-bend-57e6d6434f_640.jpg",
"images/lake-irene-57e6d24a4d_640.jpg",
"images/silhouette-57e8d5444e_640.jpg");
/* Write your displayCheckboxes() function here */
displayCheckboxes($data);
function displayCheckboxes($data){
for ($i=0; $i<count($data); $i++) {
echo "<img src='".$data[$i]."'.jpg>'" . "<br>";
}
}
?>
<?php
$data = array(
"images/architecture-57e8d34a48_640.jpg",
"images/gateway-arch-57e2d64548_640.jpg",
"images/horseshoe-bend-57e6d6434f_640.jpg",
"images/lake-irene-57e6d24a4d_640.jpg",
"images/silhouette-57e8d5444e_640.jpg"
);
?>
<body>
<main id ="main">
<form id="pics" action="process.php" method="get">
<label>Name: </label>
<?php foreach($data as $image): ?>
<img src="<?= $image; ?>"></br>
<?php endforeach; ?>
</form>
</main>
</body>
This is an alternative way. Looks much cleaner and readable. And I actually don't think we need a function for printing HTML.
I would say NEVER put HTML inside PHP echo unless it is compulsory. The reason I am stating this is if you put HTML inside PHP, the code becomes easily messy. It becomes hard to understand the logic unless you are the one who coded. Particularly, if you are working with some designers or in future, they will have a hard time making even little changes.
Even I think using <?= than <?php echo is better.
You are trying to give an extension ".jpg" of the images that you previously gave to it in the path of images in the array "$data".
For exemple:We will take the first element in the array $data with index = 0 "$data[0]" (images/architecture-57e8d34a48_640.jpg):
In PHP looks like -> echo "<img src='".$data[0]."jpg'>" . "<br>";
,but in HTML looks like -> <img src='images/architecture-57e8d34a48_640.jpg.jpg'>
You shold have to delete the extension ".jpg" from your echo to seem like:
echo "<img src='".$data[$i]."'>" . "<br>";
I have a list of image in a div. which come from database query. I want one image from this div should display into another div after first div is loaded with images.
code:
Although question is not clear still
<?php
// for php
$dataSet = array();
while($show = $result->fetch_array(MYSQLI_ASSOC)) {
$dataSet[] = $show;
}
?>
<div><?php echo $dataSet[0]['photo']; ?></div>
....
<?php
foreach($dataSet as $data) {
?>
<div><?php echo $data['photo']; ?></div>
<div><?php echo $data['name']; ?></div>
<?php } ?>
So I've made a database where people can upload pictures to. The pictures are linked to a place which is linked to a category.
I'm trying to create a gallery page that displays all the images, and then the categories available. When you click on a category it's meant to show all the pictures for that category.
I've got my categories in my database as well, which I'm using php to echo out:
<?php
include('includes/connectdb.php');
/* Selects id and name from the table 'category' */
$query = "SELECT id, name FROM category";
$result_category = mysqli_query($dbc,$query);
?>
<h1>Category</h1>
<!-- iterate through the WHILE LOOP -->
<?php while($row = mysqli_fetch_array($result_category)): ?>
<!-- Echo out values {id} and {name} -->
<button name="category[]" value=" <?php echo $row['id']; ?> "><?php echo $row['name'] . '<br />'; ?></button>
<?php endwhile; ?>
When a button is clicked I need it to run this php:
<?php
if(isset($_POST['category[]'])){
displayimage();
function displayimage()
{
$con=mysql_connect("localhost","root","");
mysql_select_db("ssdb",$con);
$qry="SELECT pictures.name, pictures.image, pictures.place_id
FROM pictures
INNER JOIN sted
ON pictures.place_id = sted.id
INNER JOIN placecategory
ON sted.id = placecategory.place_id
INNER JOIN category
ON placecategory.category_id = category.id
WHERE placecategory.category_id = $row['id']";
$result=mysql_query($qry,$con);
while($row = mysql_fetch_array($result))
{
//var_dump($row);
echo '<img height="300" width="300" src="data:image;base64,'.$row["image"].' "> ';
echo '<p style="display:inline-block">'.$row["name"].' </p> ';
}
mysql_close($con);
}
}
?>
I found out that it should be possible with ajax, so I added the following to my ajax.php file:
<?php
if (isset($_POST['action'])) {
switch ($_POST['action']) {
case 'category':
category();
break;
}
}
function category() {
displayimage();
function displayimage()
{
$con=mysql_connect("localhost","root","");
mysql_select_db("ssdb",$con);
$qry="SELECT pictures.name, pictures.image, pictures.place_id
FROM pictures
INNER JOIN sted
ON pictures.place_id = sted.id
INNER JOIN placecategory
ON sted.id = placecategory.place_id
INNER JOIN category
ON placecategory.category_id = category.id
WHERE placecategory.category_id = $row['id']";
$result=mysql_query($qry,$con);
while($row = mysql_fetch_array($result))
{
//var_dump($row);
echo '<img height="300" width="300" src="data:image;base64,'.$row["image"].' "> ';
echo '<p style="display:inline-block">'.$row["name"].' </p> ';
}
mysql_close($con);
}
exit;
}
?>
And this to my gallery.php file where I'm displaying the pictures and categories.
<script>
$(document).ready(function(){
$('.button').click(function(){
var clickBtnValue = $(this).val();
var ajaxurl = 'ajax.php',
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function (response) {
// Response div goes here.
alert("action performed successfully");
});
});
});
</script>
And lastly I changed my button to be
<?php while($row = mysqli_fetch_array($result_category)): ?>
<!-- Echo out values {id} and {name} -->
<input type="submit" class="button" name="category[]" value=" <?php echo $row['id']; ?> "><?php echo $row['name'] . '<br />'; ?>
<?php endwhile; ?>
I'm linking to the jquery library and I've tested the SQL statement that I need to run, and it works when I specify what the placecategory.category_id is.