I echoed some html code using php in order to show search results and every search result is a href link. When I hover I can see that the link is correct but when I click in the href the text will disappear and I won't be redirected to the link.
<?php
require ('db/connect.php');
if (isset($_POST['query'])) {
$query = "SELECT * FROM Users WHERE FullName LIKE '{$_POST['query']}%' LIMIT 100";
$result = mysqli_query($con, $query);
if (mysqli_num_rows($result) > 0) {
while ($res = mysqli_fetch_array($result)) {
echo '<style>
.searchResult:active {
position: absolute;
text-decoration: none;
color: black;
display: initial;
}
</style>';
echo '<a class="searchResult" href=profile.php?user='.$res['Username'].'>'.$res['FullName'].'</a></br>';
}
} else {
echo "
<div class='alert alert-danger mt-3 text-center' role='alert'>
No user found!
</div>
";
}
}
?>
I tried to add the href inside a div or inside any <p> tag but It won't work.
Related
A couple of months ago, I asked a similar question like this and the answer that where given worked for me. I now have another change I would like to add to my page. I would like that each post I create has its own unique div. My page currently looks like this:
the previous question helped me break the div each 3 post, so what I tried was within the if statement that creates a new dive each 3 div was to add another if which would break each 1 div so that each post has its own div and it still breaks to a new div section each 3, maybe I just complicated everything with my description, but I want to get something like:
Here is my code
CSS:
.column {
display: inline-flex;
border: 5px black;
border-style: solid;
padding: 10px;
background: #ffa500;
}
PHP:
else {
$break = 0;
$nRows = $connection->prepare("SELECT post_id, post_title,
post_author, post_file, post_time
FROM posts
ORDER BY post_id DESC");
$nRows->execute();
if($nRows->rowCount() > 0) {
while ($row = $nRows->fetch()) {
$post_title = str_replace('_', ' ', $row['post_title']);
$post_author = $ed->encrypt_decrypt('decrypt',$row['post_author']);
$post_file = $row['post_file'];
$post_date = $row['post_time'];
// Create a new div each 3 columns
if ($break % 3 === 0) {
echo '<br><div class="column"><br>';
}
$break++;
?>
<!-- Blog Content BEGIN Display-->
<div class="box"><?php
// Display the content
$file_parts = pathinfo($post_file);
if(isset($file_parts['extension'])) {
switch ($file_parts['extension']) {
case "jpg":
if(!empty($post_file)) { ?>
<img src="post/postFiles/<?php echo $post_file;?>"><?php
}
break;
case "mp4":?>
<div class="thumbnail">
<video preload="auto" loop muted>
<source src="post/postFiles/<?php echo $post_file;?>">
</video>
</div>
<!-- Preview video on hover -->
<script>
$(document).ready(function () {
$(".thumbnail").hover(function () {
$(this).children("video")[0].play();
}, function () {
var el = $(this).children("video")[0];
el.pause();
el.currentTime = 0;
});
});
</script><?php
break;
case "": // Handle file extension for files ending in '.'
case NULL: // Handle no file extension
break;
}
}
// Title URL Variable
$urlFetchPostId = '<h2><a href="post/postFetch/fetchByTitle/fetchByPT.php?post_id=';
$urlFetchPostTitle = '&post_title=';
$urlFetchPostAuthor = '&post_author=';
echo $urlFetchPostId . $row['post_id'] . $urlFetchPostAuthor. $row['post_author']. $urlFetchPostTitle . $row['post_title'] . '"' . 'class="link-post-title" style="font-family: Arial">' . " ". $post_title . '</a></h2>';
// Author/User URL Variable
$urlFetchPostUser = '<a href="post/postFetch/fetchByAuthor/fetchByPA.php?post_author=';
echo $urlFetchPostUser . $row['post_author'] . '"' . 'class="link-post-author" style="font-family: Arial">' . " ". strtoupper($post_author) . '</a>';
// Posted Date
echo '<br><p style="font-family: Arial">Posted on ' . $post_date . '</p>';
?>
</div><?php
if ($break % 3 === 0) {
echo '<br></div><br>';
}?>
<!-- Blog Content END Display --><?php
}
} else { ?>
<p style="color: darkgoldenrod" class="mssgAlign"><u>NO RECORDS</u></p><?php
}
$nRows = null;
}
Any help, tip or improvement suggestion is welcomed
You want to use margins. Margins specify a buffer around the outside of your container. As opposed to padding, which specifies buffer inside the container. Add this to your css
.column {
display: inline-flex;
border: 5px black;
border-style: solid;
padding: 10px;
background: #ffa500;
margin-left: 20px;
margin-right: 20px;
}
I have this structure on my page:
*{
margin: 0px;
}
.div1{
width: 1000px;
background-color: grey;
overflow: hidden;
}
.div2{
width: 300px;
background-color: orange;
height: 500px
}
.div3{
width: 300px;
background-color: orange;
height: 500px;
}
.float_left{
float: left;
}
.float_right{
float: right;
}
<div class="div1">
<div class="div2 float_left">
</div>
<div class="div3 float_right">
</div>
</div>
And inside the two orange container's I want to put some smaller divs, but I read the data from a database. The first row should be in div1, the second in div2, the third in div1 and so on.
$sql = "SELECT * FROM question ORDER BY question_id DESC";
$result = mysqli_query($db,$sql);
while($row = mysqli_fetch_assoc($result)){
}
But how can I do something like that? Can I open a div container closed container to place a div container inside the container?
You should really read and try by yourself, this is pretty basic question.
There are many ways, here is one of them.
Declare 2 variables to store the results for Div1 and Div2.
Declare a count variable and use the odd and even property to decide who turn is it to store the results.
Output the results.
PHP:
$sql = "SELECT * FROM question ORDER BY question_id DESC";
$result = mysqli_query($db,$sql);
$resultsForDiv1 = "";
$resultsForDiv2 = "";
$count = 0;
while($row = mysqli_fetch_assoc($result)){
if ($count%2 == 0) {
$resultsForDiv1 .= $row[0]; // You should change it to whatever data you need from $row.
}
else {
$resultsForDiv2 .= $row[0]; // You should change it to whatever data you need from $row.
}
$count++;
}
Html:
<div class="div1">
<div class="div2 float_left">
<?php echo $resultsForDiv1; ?>
</div>
<div class="div3 float_right">
<?php echo $resultsForDiv2; ?>
</div>
</div>
What you should do is store the data from the $row variable into new variables which you can then output in the two columns. Like this:
<?php
$sql = "SELECT * FROM question ORDER BY question_id DESC";
$result = mysqli_query($db, $sql);
// Use this to toggle column on the sql results
$left_right = true;
while ($row = mysqli_fetch_assoc($result)) {
if ($left_right) {
// Add to left column variable
// [some code to add the data from $row to $left_column_content]
} else {
// Add to right column variable
// [some code to add the data from $row to $right_column_content]
}
// Switch columns by inverting the boolean from true to false, false to true
$left_right = !$left_right;
}
?>
<div class="div1">
<div class="div2 float_left">
<?php echo $left_column_content; ?>
</div>
<div class="div3 float_right">
<?php echo right_column_content; ?>
</div>
</div>
having an issue with the jquery sortable code - it's not so much the jquery but how my list of images is showing. Prior to adding the sortable code it displayed the images in my wrapper in a grid like formation perfectly - now I have added a little style from the jquery it seems to have thrown it but im not sure why...
here is the Jquery style:
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li {float: left; }
</style>
Here is my list of images that worked perfectly ok before:
<div id="images">
<hr style="margin-top: 10px" />
<ul id="sortable">
<?php
// get folio for user
if(isset($_GET['userid'])) {
$query = 'SELECT * FROM folio WHERE userid=\'' . $_GET['userid'] . '\' ORDER BY ord';
}
else {
$query = 'SELECT * FROM folio WHERE userid=\'' . $_SESSION['userid'] . '\' ORDER BY ord';
}
$result = mysqli_query($connection, $query);
if(!$result) {
// error with MYSQL
die('Failed to retrieve images! - ' . mysqli_error($connection));
}
// list images
$numRows = mysqli_num_rows($result);
if($numRows < 1) {
echo '';
}
else {
$filepath = 'uploads/folio/';
while($imagerow = mysqli_fetch_assoc($result)) {
?>
<li>
<div class="outimgbox"> <a class="fancybox fancybox.ajax" rel="gallery1" style="text-decoration: none;" data-fancybox-type="ajax" href="profile_image_fancybox.php?imgid=<?php echo $imagerow['imgid']; ?>">
<div id="mainwrapper">
<div id="box-3" class="box"> <img class="uploads" src="<?php echo $filepath . $imagerow['filename']; ?>" alt="<?php echo $imagerow['description']; ?>"/> <span class="caption fade-caption">
<h3 ><?php echo $imagerow['title']; ?></h3>
</span> </div>
</div>
</a> </div>
</li>
<!-- class outingbox -->
<?php }} ?>
</ul>
For some odd reason:
<style>
#sortable { list-style-type: none; }
#sortable li {float: left; }
</style>
This resolved the issue....
I am brand new to php and a beginner with jQuery. I have a php page that is populated with data from a mySQL table. What I am trying to achieve is for the h3 that contains "View Job" to have a unique id assigned to it, as well as the div that prints out the job description. Then, I would like to reference these with jQuery so that if someone clicks View Job, only the description for that job will show. I hope this makes sense.
I tried this with classes and of course all the job descriptions revealed themselves when any View Job was clicked.
I tried the solution here, but this ended up with 36 "View Job" links on my page, and I need to assign the unique ID to the h3 and div as they are created.
I am open to suggestions for another way to achieve what I'm looking for - basically to hide/collapse each description as the user clicks on View Job for each job.
here is my code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.job-post{border-bottom: 1px solid red; padding: 0; margin: 10px 0;}
h3, p{padding: 0; margin:0;}
.view-job{cursor: pointer;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("div#job-details").css("display" , "none");
$("h3#view-job").click(function() {
$("div#job-details").css("display" , "block");
});
});
</script>
<?php
// Connects to your Database
mysql_connect("xx", "xx", "xx") or die(mysql_error());
mysql_select_db("lcwebsignups") or die(mysql_error());
$data = mysql_query("SELECT * FROM openjobs")
or die(mysql_error());
?>
<div id="job-container">
<?php
Print "";
while($info = mysql_fetch_array( $data ))
{
Print "<div class='job-post'>";
Print "<h3>Position / Location:</h3> <p>".$info['jobtitle'] . ", ".$info['joblocation'] . "</p>";
Print "<h3 id='view-job'>View Job:</h3> <div id='job-details'>".$info['jobdesc'] . " </div>";
Print "</div>";
}
?>
</div><!--//END job-container-->
Assign the classNames instead of id's
Then use the this context to select your div which will only search for the one in the context and not all the divs
$("h3.view-job").on('click',function() {
$(this).next("div.job-details").css("display" , "block");
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.job-details{display:none;}
.job-post{border-bottom: 1px solid red; padding: 0; margin: 10px 0;}
h3, p{padding: 0; margin:0;}
.view-job{cursor: pointer;}
</style>
<script type="text/javascript">
$(document).ready(function() {
// Please hide this class on CSS
// $("div.job-details").css("display" , "none");
$("h3.view-job").click(function() {
// you ned to use this keyword
// it is very important when you use javascript or jquery
// this keyword only pick element on which you click
$(this).parent().find(".job-details").show();
});
});
</script>
<?php
// Connects to your Database
mysql_connect("xx", "xx", "xx") or die(mysql_error());
mysql_select_db("lcwebsignups") or die(mysql_error());
$data = mysql_query("SELECT * FROM openjobs")
or die(mysql_error());
?>
<div id="job-container">
<?php
// First of all Please use echo instead of Print
echo "";
while($info = mysql_fetch_array( $data ))
{
echo "<div class='job-post'>";
echo "<h3>Position / Location:</h3> <p>".$info['jobtitle'] . ", ".$info['joblocation'] . "</p>";
// you can't use id multiple time in a same page so instead of id use Class
// if you want to use id then you have to generate uniq id
// check below I generate id --> I don't know your database field that's why I used jobId
echo "<h3 class='view-job' id='job".$info['jobId']."'>View Job:</h3> <div class='job-details'>".$info['jobdesc'] . " </div>";
echo "</div>";
}
?>
</div><!--//END job-container-->
This should do what you want (tested okay). Just replace your mysql login info and the example should work.
I completed your job-details div (it was missing the data from php), but what you were really looking for is the jQuery code.
When an <h3> tag whose id begins with the characters view-job is clicked, the jQuery click event handler will:
re-hide all divs whose id starts with the chars job-details
display the next div in the DOM tree
CODE:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.job-post{border-bottom: 1px solid red; padding: 0; margin: 10px 0;}
h3, p{padding: 0; margin:0;}
.view-job{cursor: pointer;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("div[id^='job-details']").css("display" , "none");
$('h3[id^="view-job"]').click(function() {
$("div[id^='job-details']").hide(500);
$(this).next('div').show(500);
});
});
</script>
<?php
// Connects to your Database
mysql_connect("xx", "xx", "xx") or die(mysql_error());
mysql_select_db("lcwebsignups") or die(mysql_error());
$data = mysql_query("SELECT * FROM openjobs") or die(mysql_error());
$data = mysql_query("SELECT * FROM openjobs") or die(mysql_error());
?>
<div id="job-container">
<?php
echo "<br>";
while($info = mysql_fetch_assoc( $data )) {
echo "<div class='job-post'>";
echo "<h3>Position / Location:</h3> <p>".$info['jobtitle'] . ", ".$info['joblocation'] . "</p>";
echo "<h3>View Job:</h3> <div id='job-details'>".$info['jobdetails']."</div>";
echo "</div>";
}
?>
</div><!--//END job-container-->
I have a div which is not being pushed down by the content inside it. Instead the content just overlaps the div. I assume this is because there's a PHP while loop between the div tags? How do I fix this?
session_start();
if (!$_SESSION["user_name"])
{
header("Location: index.php");
}
include('header.php');
$id = $_GET['id'];
if(isset($id)) {
connect_to_db();
mysql_query("DELETE FROM content WHERE id='$id'");
$deleted = 'Content Successfully Deleted.<br>';
}
echo '<div id="content">';
echo '<h2>Delete Content</h2>';
if(isset($deleted)){
echo $deleted;
}
connect_to_db();
$query="SELECT id, date, title, image FROM content ORDER BY date DESC";
$result=mysql_query($query);
while($row = mysql_fetch_array($result)){
echo '<div id="delete" align="center">';
echo '<img src="'.$row['image'].'" style="border:1px solid black; width:100px;"><br>Delete';
echo '</div>';
}
echo '</div>';
Put overflow: hidden; CSS rule on the div which has the overlapping content in it.
try clearing the div inside the while loop, maybe something like
while($row = mysql_fetch_array($result)){
echo '<div id="delete" align="center">';
echo '<img src="'.$row['image'].'" style="border:1px solid black; width:100px;"><br>Delete';
echo '<div style="clear:both"></div></div>';
}
may help?
or declare the <a> element as a block element?
Using a PHP loop is not related to this issue, what matters is the HTML code that is served to your web browser.
Try adding a clear: both; style to the div in question:
<div id="delete" align="center" style="clear: both;">
You may also align using CSS instead of a HTML attribute:
<div id="delete" style="text-align: center; clear: both;">
UPDATE I see that your DIV elements are overleaping, not floating next to each other as I originally thought.
Check your CSS and see if you can find any position: absolute that applies to these DIV elements, and remove it. In addition, you should use class="delete" instead of id="delete", as multiple elements should not share the same id attribute.
For testing, you can try:
<div id="delete" style="text-align: center; position: block;">