I had an image slider that was working fine with solely html, but now that I have introduced PHP to generate the address for each image from a database, the slideshow loops unexpectedly when it first displays. After this it's fine and the images cycle normally.
Any help?
The result: http://colejohnsontrialsite.com/view.php
My Code:
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
<div id="slideshow" style="float:left;">
<?php
$con=mysqli_connect("localhost","username","pass","database_name");
$result = mysqli_query($con,"SELECT * FROM gifs");
while($row = mysqli_fetch_array($result)) {
echo ' <div> <img id="slideshow" src="' . $row['addresses'] . '">'; echo "</img></div>";
}
mysqli_close($con);
?>
</div>
Related
PHP
I am trying to change the image during hover. For hover I used jquery, but the problem is that the first image is showing from the SQL database but the image is not changing while I already saved the second image in database
<?php
include('dbconnect.php');
$sql = "SELECT * FROM `products` JOIN `images` ON products.product_id=images.product_id";
$res = mysqli_query($conn, $sql);
echo "</h3> Total: " . mysqli_num_rows($res) . " Items Found </h3>";
?>
<br><br>
<div class="container">
<div class="row">
<?php
while ($row = mysqli_fetch_assoc($res)) {
?>
<div class="col item_col">
<?php echo $row["img_id"] . "<br>" . $row["product_id"] ."<br>". "<img src ='".$row["image_path1"]."' width=100px height=100px data-src1='".$row['image_path1']."' data-src2='".$row['image_path2']."'>"; ?>
</div>
<?php
}
?>
</div>
</div>
<?php
include('dbclose.php');
?>
jquery
<script type="text/javascript">
$(document).ready(function () {
$(".imgs").each(function(i,el){
$(this).mouseenter(function(){
$(this).attr("src",$(this).attr("data-src2"))
}).mouseleave(function(){
$(this).attr("src",$(this).attr("data-src1"))
})
})
});
</script>
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 3 years ago.
i am working on website with buttons each button fire up a bootstrap modal contain data from mysql database i pass a variable from the jquery that fire up the model into a mysql query inside the modal the problam is the php variable cannot get the data send it from the jquery any hints please ?!
i am passing data through jquery post to ajax.php file
the modal code
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<span id="codeElem"></span>
<?php
$resultHead = mysqli_query($con2,"SELECT * FROM coops WHERE Code = $getCode ");// WHERE Code IN ('".$codeArrayStr."')
?>
<?php
$i=0;
$row3 = mysqli_fetch_array($resultHead);
?>
<h4 class="modal-title"><?=$row3['CoopName'];?></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<?php
$result = mysqli_query($con,"SELECT DISTINCT * FROM reports WHERE host = $getCode GROUP BY host DESC");
?>
<?php
$i=0;
while($row = mysqli_fetch_array($result)) {
?>
<div class="card card-figure has-hoverable">
<figure class="figure">
<img class="img-fluid" src="http://www.iroof.tv/screenshots/<?=$row['screenshot'];?>" alt="Card image cap">
<figcaption class="figure-caption">
<h6 class="figure-title"><?=$row['host'];?></h6>
<p class="text-muted mb-0"> <?=$row['timestamp'];?> </p>
<?php
// Assign JSON encoded string to a PHP variable
$statusJson = $row['status'];
// Decode JSON data into PHP associative array format
$arr = json_decode($statusJson, true);
// Call the function and print all the values
// $result2 = printValues($arr);
echo "<hr>";
echo "<h3> Player </h3>";
// Print a single value
echo "Status: ".$arr["player"]["status"] . "<br>";
echo $arr["player"]["filename"] . "<br>";
echo "<hr>";
echo "<h3> Graphics </h3>";
echo "Display: ".$arr["video"]["display"] . "<br>";
echo "Resolution: ".$arr["video"]["resolution"] . "<br>";
echo "Colors: ".$arr["video"]["colors"] . "<br>";
echo "<hr>";
echo "<h3> System </h3>";
echo "CPU: ".$arr["cpu"] . "<br>";
echo "Ram: ".$arr["ram"] . "<br>";
//echo "Temprature: ".$arr["temperature"] . "<br>";
echo "Fan: ".$arr["fan"] . "<br>";
?>
</figcaption>
</figure>
</div>
<?php $i++;
}
?>
</div>
<!-- Modal footer
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>-->
</div>
the jquery script
<script>
$(document).ready(
function() {
setInterval(function() {
$('.card');
}, 5000); //Delay here = 5 seconds
var gen;
$(".btn").click(function(){
gen = $(this).attr("data-code");
//$.post("ajax.php", {"code": gen},function(data){console.log(data);});
});
$('#myModal').on('shown.bs.modal', function () {
$.post("ajax.php", {"code": gen},function(data){console.log(data);});
//var phpCode = "<? $getCode = $_POST["code"]; ?>";
//$('#codeElem').html(phpCode);
})
});
</script>
ajax.php file
<?php
if(isset($_POST['code']) && isset($_POST['code'])){
//$_SESSION["code"] = $_POST["code"];
$_SESSION['header'] = $_POST['code'];
$getCode = $_POST["code"];
echo $_SESSION['header'];
}
?>
i expect the variable $getCode to get the code from jquery to complete the mysql query inside the modal :
$resultHead = mysqli_query($con2,"SELECT * FROM coops WHERE Code = $getCode");
I dont think its possible to post variables to a modal, I didnt see example like that when I was searching for popup modal login.
guess you need an action page to forvard infos to modal.
This is the solution to post variables:
Change variables to your needs..
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault();
var post_id =$("#mail-id").val();
var name =$("#mail-name").val();
var email =$("#mail-email").val();
var message =$("#mail-message").val();
var type =$("#mail-type").val();
var captcha_code =$("#captcha_code").val();
var submit =$("#mail-submit").val();
$(".form-message").load("heads/comment.php",{
post_id: post_id,
name: name,
email: email,
message: message,
type: type,
captcha_code: captcha_code,
submit: submit
});
});
});
you probably need some thing like this to show variables in popup
<p class="form-message"></p>
Or you can check Bootstrap modal table :
Here
I am trying to make tabs that contain information about student, these information is stored in the database. I want the first tab to show the information of all students. and the the second tab to show the information of the students that thier grade is A and the the third tab to show the information of the students that thier grade is B.
I made this code but just the first tab shows the information of the students but the second and third tabs don't show anything.
what is wrong with the code?
<html>
<head>
<title>students table</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<?php
$connection = mysql_connect("","","");
if (!$connection)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("", $connection);
$result = mysql_query("SELECT * FROM studentTable");
while($row = mysql_fetch_array($result))
{
?>
<div id="tabs-1">
<?php
echo "Student id: '" . $row["id"];
echo "Student name: '" . $row["name"];
echo "Student grade: '" . $row["grade"];
echo '</table>';
}
?>
</div>
<?Php
$result2 = mysql_query("SELECT * FROM studentTable WHERE grade = 'A'");
while($row = mysql_fetch_array($result2))
{
?>
<div id="tabs-2">
<?php
echo "Student id: '" . $row["id"];
echo "Student name: '" . $row["name"];
echo "Student grade: '" . $row["grade"];
echo '</table>';
}
?>
</div>
<?php
$result3 = mysql_query("SELECT * FROM studentTable WHERE grade = 'B'");
while($row = mysql_fetch_array($result3))
{
?>
<div id="tabs-3">
<?php
echo "Student id: '" . $row["id"];
echo "Student name: '" . $row["name"];
echo "Student grade: '" . $row["grade"];
echo '</table>';
}
?>
</div>
</div>
</body>
</html>
I think your issue is because you have your tabs-# <div> opening tags inside your while() loops.
$result = mysql_query("SELECT * FROM studentTable");
while($row = mysql_fetch_array($result))
{
?>
<div id="tabs-1"> //this here needs to be above/outside while($row = mysql_fetch_array($result)){
This is creating n number of <div id="tabs-1">,<div id="tabs-2">,<div id="tabs-3">, without matching closing tags </div>, so now <div id="tabs-2"> & <div id="tabs-3"> are nested in <div id="tabs-1"> and jQuery doesn't know which one to bind tabs to.
try moving them before the while() loops -
<div id="tabs-1">
<?php
$result = mysql_query("SELECT * FROM studentTable");
while($row = mysql_fetch_array($result))
{
...
}
?>
</div>
<div id="tabs-2">
<?php
$result2 = mysql_query("SELECT * FROM studentTable WHERE grade = 'A'");
while($row = mysql_fetch_array($result2))
{
...
}
?>
</div>
<div id="tabs-3">
<?php
$result3 = mysql_query("SELECT * FROM studentTable WHERE grade = 'B'");
while($row = mysql_fetch_array($result3))
{
...
}
?>
</div>
Also, you have echo '</table>'; at the end of each tab div. May want to remove those if you don't actually have a table.
In your script you are trying to use Jquery's tab method.
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
This is looking in the HTML for
<div id='tabs'>
You're tabs in here
</div>
Assuming that your SQL statments is not returing "NULL" then I would say you're issue is that you named you're div's tab-1, tab-2, tab-3. With ID's. This means that Jquery can't find anything to turn into tab's.
Change your jquery call to something like this
<script>
$(function() {
$( ".tabsclass" ).tabs();
});
</script>
and instead of using id's use classes.
<div class='tabsclass' id='tab-1'>
You're tabs in here
</div>
<div class='tabsclass' id='tab-2'>
You're tabs in here
</div>
<div class='tabsclass' id='tab-3'>
You're tabs in here
</div>
I'm using JWPlayer6 (non-commercial version) and I'm facing a serious problem, using a while loop to loop over all videos from a MySQL database using PHP. Unfortunately, the web page just shows one video from MySQL. When I checked the code in Chrome, I saw that inside the <div id='my-video'></div>, there's nothing to show. How should I fix the problem?
<?php
$result = mysql_query("SELECT * FROM schoolvideo GROUP BY folderName ORDER BY id desc");
while($data = mysql_fetch_array($result)) {
$id = $data['id'];
$video = $data['video'];
$folderName = $data['folderName'];
?>
<div class="square">
<div id='my-video'></div>
<script type="text/javascript">
jwplayer('my-video').setup({
file: 'http://abc.com/video/<?php echo $folderName; ?>/<?php echo $video; ?>',
width: '370',
height: '270',
primary: 'flash',
image: 'http://abc.com/img/poster.png',
autostart: false
});
</script>
</div>
<?php
}
?>
Your loop will generate multiple divs with the same id "my-video". You should make them unique.
<div id='my-video-<?php echo $id ?>'></div>
...
jwplayer('my-video-<?php echo $id ?>').setup({...
I have a PHP page that lists a bunch of words that it grabs from a MySQL database table. It displays the words in different sizes based on a count in the table:
<?php
$selectStr = "select * from test";
if ($results = MySQL($dbName, $selectStr))
{
$rowCount = MySQL_NUMROWS($results);
}
$i = 0;
while ($i < $rowCount)
{
echo '<div style="float: left; font-size:' . (MySQL_RESULT($results,$i,'count') * 5) . 'px;">' . MySQL_RESULT($results,$i,'word') . '</div>';
$i++;
}
?>
The trick is that I want the content to display dynamically. So if a user is sitting on the page, and one of the word counts goes up, I want the word to change size without the user refreshing the page.
I am a novice with jQuery. I have used it a bit before, but only using examples. Can someone steer me in a good direction to have my page dynamically change the content without refreshing?
You can auto refresh your page body like this ... give body id='body'
<html>
<head>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#body').load('wordscount.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
</head>
<body>
<div id='content'></div>
</body>
Dont forget to include jquery inside your head tag
It calls the file rowfunctie.php every 30000ms and fills the topbar diff with with the result of the getRows function.
<div id="center-rows">
<div id="links">Nu </div>
<div id="rows">
<div id="topbar"></div>
</div>
<div id="rechts"> aantal rijen</div>
</div>
<script type="text/javascript">
function doRequest() {
jQuery("#topbar").fadeOut('slow', function() {
jQuery.ajax({
type: "GET",
url: "rowfunctie.php",
cache: false,
success: function(html){
jQuery("#topbar").html(html);
jQuery("#topbar").fadeIn('slow',function() {
setTimeout('doRequest()',30000);
});
}
});
});
}
doRequest();
</script>
rowfunctie.php should look like this beneath:
<?php
$selectStr = "select * from test";
if ($results = MySQL($dbName, $selectStr))
{
$rowCount = MySQL_NUMROWS($results);
}
$i = 0;
while ($i < $rowCount)
{
echo '<div style="float: left; font-size:' . (MySQL_RESULT($results,$i,'count') * 5) . 'px;">' . MySQL_RESULT($results,$i,'word') . '</div>';
$i++;
}
?>