When i click the more. I wanted the content should expand. I my page i have about 10 question with more option. The question content is coming through the php script.
<?php
$result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
//fetch the data.
if (mysqli_num_rows($result) > 0) {
while($data = mysqli_fetch_assoc($result)) {
$question = $data['question'];
echo "<span class=\"spanstyle\" id=\"fullquestion\">" . substr($question, 0, 170);
echo "...more</span><br>";
}
}
?>
I try to do that by javascript. ContectExpand() fire of when i click.
<script>
function contentExpand() {
var question = <?php echo $question; ?>;
document.getElementById("content").innerHTML = question;
}
</script>
Problem is, $question is changing the value as it is inside the loop. It doesn't have a fixed value.
Also I want to know that I can do that only along with php without javascipt.
For my solution you need some sort of $data['id'], which is unique for each question.. I think it cannot be done only in PHP, but you should try to use jQuery, it makes javascript much easier
<?php
$result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
//fetch the data.
if (mysqli_num_rows($result) > 0) {
while($data = mysqli_fetch_assoc($result)) {
$question = $data['question'];
echo "<span class='spanstyle' id='shortQuestion{$data['id']}'>" . substr($question, 0, 170).
"...<a href='#' onClick='return contentExpand({$data['id']});'>more</a></span>
<span class='spanstyle' id='longQuestion{$data['id']}'>{$data['question']}</span>
<br>";
}
}
?>
Javascript
<script>
function contentExpand( fullcontentId ) {
document.getElementById('shortQuestion'+fullcontentId).style.display = "none";
document.getElementById('longQuestion'+fullcontentId).style.display = "inline";
return false;
}
</script>
There are several issues with you code. Regarding your question, the most important are:
The while loop is generating several span elements with the same id.
The onClick function should content a reference to the element you want to expand.
You dind't include any code constraining the size of the span element, so there is nothing to be expanded.
How to fix them:
Modify the while loop
Create a $i variable that counts the rows and add it to the span id, to the link id and to the javascript function in this way:
$i = 0;
while($data = mysqli_fetch_assoc($result)) {
$i++;
$question = $data['question'];
echo "<span class='spanstyle' id='fullquestion_" . $i. "' >";
echo "<a href='#' id='link_" . $i . "' onClick='contentExpand(" . $i. ");'>more</a> ";
echo $question."</span><br>";
}
Create a javascript function that resize the span element:
You didn't tell us how you want to expand the content. There would be a lot of different ways to achieve it. This is just one that tries to respect your HTML markup, but surely not the best:
<script>
function contentExpand(id) {
var link = document.getElementById('link_'+id);
var span = document.getElementById('fullquestion_'+id);
if(link.innerHTML=='more')
{
link.innerHTML = 'less';
span.style.width = '100px';
}else{
link.innerHTML = 'more';
span.style.width = 'auto';
}
}
</script>
Modify the css of the span element:
A block element like a div would suit better anyway, but maybe you have very good reasons to use a span.
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
How to do it without javascript (just PHP):
It is certainly possible, but I guess you don't want to do it.
But if still you want to do so, generate the loop with just partial information about the related $question (as you do in the original code, substr($question, 0, 170)) but put the elements inside a form.
When the user click the more span element, submit the form to send from the client back to the server the information about the selected item.
Then, the PHP script would generate again the page but, this time, the selected item will load the full text of the question ($question instead of substr($question, 0, 170)).
So, you will have to make a new HTTP request call (that means to reload the page, AJAX is not an option if you don't want to use javascript).
Doing all this add a new layer of complexity and make it less efficient.
My advice is, if you don't have strong reasons to don't use javascript, use it.
Related
i am working on my first own website. i try to display which cinema seats are already booked, by turning theire backgroundcolor red. i store the reservations in an sql database. i do get the correct value and i can display it on my website, but still the getById won t work.
This is how i create the divs i want to tune:
<?php
for ($i=0; $i < $saalinfo[2]; $i++) {
echo "<div class='rowsaal'>";
for ($j=0; $j < $saalinfo[3]; $j++) {
$k = $i+1;
echo "<a onclick='JavaScript:removeday($k$j)';>";
echo "<div id='$k$j' class='seat' >";
echo "</div>";
echo "</a>";
}
echo "</div>";
}
?>
This is the way i try to change the background color. I used the exact same js wording in other occasions and it did work so i am guessing my id value is not right:
function getres(){
var date = document.getElementById('labeldate').value;
document.getElementById('showdate').innerHTML = date;
var booked;
booked = "<?php echo $dis; ?>"; //$dis is one value i get back from mysqli_fetch_array in this case its 34
document.getElementById(booked).backgroundColor = "red";
document.getElementById('showdate').innerHTML = document.getElementById('showdate').innerHTML + booked;
}
For clarification: booked shows the correct value which is 34 in this case. In the database itself its saved as a txt value. if i look into the html source code i can see that the value 34 is assigned for booked.
booked = "34";
but the div id is set in the following pattern as it is limitted in the use of '' because they are formed in php
</a><a onclick='JavaScript:removeday(34)';><div id='34' class='seat' ></div></a>
i already had some issues where the use of "" and '' lead to different results. Is this the same case here? and how can i fix the issue? Many thanks in advance.
I have not checked all of your code but there is no "backgroundColor" on the element. You need the style property.
document.getElementById(booked).backgroundColor = "red";
should be
document.getElementById(booked).style.backgroundColor = "red";
I want to open a comment page, When someone click on the image.
I'm getting all the images from database and added onclick event listener to open the comment page.
i also want to transfer image id (id of clicked img ) which is 'IDpic' in database as value for comment page. below is the code Snippet.
<?php
error_reporting (0);
$cat;
include 'dbcon.php';
$cat=$_SESSION["cat"];
$sql = "SELECT img FROM img WHERE cat LIKE '$cat'";
$result = mysqli_query($conn, $sql);
if($cat!=""){
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo '<img src ="'.$row["img"].'"'.'alt="pic" height="200px" width="250px" align = left onclick="clickedButton()" />';
}
} else {
echo "no pic upload ";
}
}
mysqli_close($conn);
?>
<script type="text/javascript" language="JavaScript">
function clickedButton() {
window.location = 'cmnt.php';
}
</script>
I want the solution without jQuery !
Why not just give:
<a href="cmnt.php?id=12">
No JavaScript also!
To do
Remove your onClick Event.
Remove JS Code (clickedButton Function).
Why should you remove it?
Your case doesn't require a JS method. Your image is enclosed by an Anchor tag that has your link. That will take care of your need.
Try the code below.
<?php
echo '<img src ="'.$row["img"].'"'.'alt="pic" height="200px" width="250px" align = left />';
?>
You can put your page in a form and set and store the link in hidden input type and retrieve it using GET , POST methods
You can use window variables if you want if page does not reload.
Use window.location = '/your_page?data=' + name;
I'm trying to add a script element to the HTML from the PHP code and instantly remove it so it won't be visible in the HTML. The script only contains things to execute at the same moment and not functions. Generally, I'm trying to replicate ASP.NETs runat property, so I'll be able to set values of elements (inputs for now) right from the PHP code.
This is what I tried so far (which I found in a different question, with some changes of mine) and it adds the script properly, but won't remove it.
function JSSetValue($id, $value) // Input 'value' only
{
echo '<script>
var input = document.getElementById("' . $id . '");
input.value = "' . $value . '"
</script>';
$html = <<<HTML
...
HTML;
$dom = new DOMDocument();
$dom->loadHTML($html);
$script = $dom->getElementsByTagName('script');
foreach($script as $item)
{
$item->parentNode->removeChild($item);
break;
}
$html = $dom->saveHTML();
}
Thanks for everyone who were trying to help. Anyway, I found a solution to my question, which is this:
function JSSetValue($id, $value) // Input 'value' only
{
echo '<script id="phpjs">
var input = document.getElementById("' . $id . '");
input.value = "' . $value . '";
document.getElementById("phpjs").remove();
</script>';
}
It adds the script and removes it, so it won't be visible when inspecting elements anymore.
I've read multiple examples on infinite scrolling, but I find it hard to implement it to my code. Here's the code, where data get shown from MySQL database :
<div class="container" align="center" style="margin-top:100px;margin-bottom:100px"><div class="row">
<?php
$result = mysql_query("SELECT * FROM batai WHERE svarbumas=1 ORDER BY id DESC");
while ($row = mysql_fetch_array($result))
{
extract($row);
$link=$row["linkas"];
echo "<div class='col-md-4'>";
$sites_html = file_get_contents($link);
$html = new DOMDocument();
#$html->loadHTML($sites_html);
$meta_og_img = null;
//Get all meta tags and loop through them.
foreach($html->getElementsByTagName('meta') as $meta) {
//If the property attribute of the meta tag is og:image
if($meta->getAttribute('property')=='og:image'){
//Assign the value from content attribute to $meta_og_img
$meta_og_img = $meta->getAttribute('content');
}
}
list($width, $height) = getimagesize($meta_og_img);
$skaicius = abs($width - $height);
if($width > $height) {
echo "<img src=\"$meta_og_img\" style='height:234px;margin-left:-33%' onclick='window.open(\"$link\", \"_blank\");'>";
}
else if($width < $height) {
if($skaicius < 100){
echo "<img src=\"$meta_og_img\" style='width:234px'
onclick='window.open(\"$link\", \"_blank\");'>";
}
else {
echo "<img src=\"$meta_og_img\" style='width:234px;margin-top:-33%'
onclick='window.open(\"$link\", \"_blank\");'>";
}
}
echo "</div>";
}
?>
Stored in the database is a link to, for example, a internet shop page. What the code does is it takes a image for facebook preview from the link stored in the db, which is tagged og:image and then positions it to center. The problem is that page tries to load every image and that takes a ton of time to load the page, thats why I want to somehow make it into a load on scroll page. Btw, Im using Bootstrap's grid system here. I hope you can help me. P.S. If you don't get what I mean because of my bad english, ask me and I'll try to answer it more clearly
I am making a program for a quiz show in our school programme. I have a table that contains WHO asked the question (among the teachers), WHAT is the question and another table as to what the answer to that question is. So, I have a table with THREE COLUMNS.
Now, what I was trying to do is that when the page loads, it will display a number of links labeled . I echoed each link such that when you click any of them, a random row will be taken from MySQL table and the "Question" as well as who asked that particular question will be displayed publicly.
so far, i was able to do all that just fine. But here's the problem.
I want to do it in such a way that after clicking the question, (after displaying it, to be exact,) that specific row will be DELETED from the MySQL table. I didn't want to use a timer because the time allotted for each question differs. I was wondering if there is some kind of "after click" function (or some way to do it) in javascript and AJAX. or perhaps a PHP code?
sorry for the noobish question. History teacher here. :)
by the way, here is a part of my code:
<?php
$checkrow = $db->query("SELECT * FROM questions WHERE `who` = $teachers");
while ($row = $checkrow->fetch(PDO::FETCH_ASSOC))
{
$who = $row['who'];
$question = $row['question'];
$date =$row['date_asked'];
$ask = $db->query("SELECT COUNT(*) FROM teachers WHERE science = $from AND who = $teachers");
$count = $ask->fetch(PDO::FETCH_NUM);
if($count[0] == 0) {
echo ' MYSTERY QUESTION ';
$fromwho = "From science Department.";
echo "<br>";
} else {
echo ' MYSTERY QUESTION ';
$fromwho = "From your Arts Department.";
echo "<br>";
}
}
?>
and here is my javascript.
<script language="javascript">
function readmsg(){
var qst = "<?php echo $question; ?>";
var dte = "<?php echo $date; ?>";
var frm = "<?php echo $fromwho; ?>";
document.getElementById("displaymsg1").textContent = qst;
document.getElementById("displaymsg2").textContent = dte;
document.getElementById("displaymsg3").textContent = frm;
}
</script>
1st, you have to make page delete_question.php (or method like this):
<?php
$db->query(('DELETE FROM questions WHERE ID=' . $_GET['uid']); // make it safer
echo '{result:"done"}';
?>
2nd, make delete onclick handler function with ajax sends UID to specified
function delete_question(el) {
$.ajax({
url : 'delete_question.php',
dataType : 'json',
data : {
uid : el.dataset.uid
},
success : function(response) {
// remove line?
$(el).parent().remove();
alert(response.result);
}
});
3nd: add handler to element
<a href="#" onclick="delete_question(this)" data-uid="<?php echo $row['ID'] ?>">