I have been working on this for days. I have a PHP while loop echoing a div shares class that I have changed the CSS display property to none, my target is! If a user clicks this shares class button, the div class display style will then be changed to block. Below is my HTML code:
<section>
<div class='showVideos'>
<?php
require_once'dbh.php';
$obj = new dbh();
$obj -> showVideos();
?>
</div>
<img src="images/back.jpg" id='go-back-once' alt="" style='width:55px;height:55px;cursor:pointer;margin-left:155px;margin-top:35%;'>
<img src="images/next.jpg" id='loadMoreVideos' alt="" style='width:55px;height:55px;cursor:pointer;margin-right:10px;margin-left:55px;margin-top:35%;'>
</section>
sorry if you did not understand my HTML code, I am using OOP method, so I just called my class method using showVideos() that pulled the data from my database using PHP.
Below is my PHP function pulling the data from my database:
public function showVideos() {
try{
$con = new PDO("mysql:host=$this->serverhost;dbname=starstv;" , $this->serverusername, $this->serverpassword);
$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = $con -> prepare("SELECT * FROM videos ORDER BY date_uploaded DESC LIMIT 34");
$sql -> execute();
if($sql -> execute()) {
$i = 0;
$videoCount = $sql -> rowCount();
echo "<div style='font-style:italic;font-weight:700;font-size:15px;margin-left:25px;color:green;'>videos <span style ='font-style:normal;color:black;'>".$videoCount." videos and more</span></div>";
while($row = $sql -> fetch(PDO::FETCH_ASSOC)) {
$url = $row['url'];
$id = $row['video_id'];
$video_name = $row['video_name'];
$title = $row['video_title'];
$artist = $row['artist'];
$uploadedBy = $row['uploaded_by'];
$video_no = $row['video_no'];
$view = $row['views'];
$likes = $row['likes'];
$dislikes = $row['dislikes'];
$shares = $row['shares'];
$duration = $row['video_duration'];
$vid_thumbnail = $row['vid_thumbnail'];
$post_interval = (time() - ($row['date_uploaded'] ));
$post_duration = floor($post_interval/86400);
echo "<div class ='some-parent' style='margin-left:10px;margin-top:25px;float:left;background:mintcream;height:inherit;width:23.8%;position:relative;'>";
echo "<div><a href='index.php?video_id=$id&video_no=$video_no' style='text-decoration:none;'><img src='".$vid_thumbnail."' alt='thumbnail image' style='width:100%;height:150px;;'><span class='values' name ='ling' >"."<img src='images/images(62).jpg' style='width:20px;height:10px;position:absolute;bottom:108px;left:16px;color:#fff;font-size:15px;font-weight:bold;'> <span style='font-weight:bold;position:absolute;bottom:103px;left:40px;color:#fff;font-size:15px;'>".$view."</span></span><img src='images/images(167).jpg' style='width:15px;height:10px;position:absolute;bottom:106px;right:56px;'><div id='durTimeText' style='position:absolute;bottom:102px;right:16px;color:#fff;font-size:15px;font-weight:bold;'>$duration</div></a></div>";
echo "<div style='margin-top:-15px;font-weight:700;color:#000000;height:55px;margin-left:10px;'>".$title."<div style='margin-top:4px;text-align:center;font-weight:700;font-style:italic;font-size:15px;'>$post_duration </div> </div><br>";
echo '<input type="hidden" name = "hit'.$i.'" value = "'.$id.'" class = "name" />';
echo " <img src='images/like.jpg' class='take' id='okay' style='cursor:pointer;width:18px;height:15px;margin-bottom:-2px;'><span style='color:purple;font-weight:bold;'> ".$likes."</span> <img src='images/dislike.jpg' class='give' id='okay' style='cursor:pointer;width:18px;height:15px;margin-bottom:-2px;'><span style='color:purple;font-weight:bold;'> ".$dislikes."</span>";
echo '<input type="hidden" name = "like" value = "'.$id.'" class = "videolikes" style="cursor:pointer;border:none;background:transparent;height:25px;width:35px;"/>';
echo '<input type="hidden" name = "hit" value = "'.$id.'" class = "videodislikes" style="cursor:pointer;border:none;background:transparent;height:25px;width:55px;"/>';
echo '<input type="hidden" name = "hit" value = "'.$id.'" class = "videoshares" style="cursor:pointer;border:none;background:transparent;height:25px;width:55px;"/>';
echo " <span class='shares' style='width:25px;height:30px;cursor:pointer;'> <img src='images/share.jpg' alt='share image' style='width:35px;height:20px;margin-bottom:-4px;opacity:.6;'> <span style='color:purple;font-weight:bold;'>".$shares."</span></span> <div class='pull'></div><div id='myModal' class='modal' style='position:absolute;bottom:-20px;background:#ccc;'><div class='modal-content' style='position:absolute;bottom:-20px;background:#ccc;width:520px;margin:15px;display:none;'> <img src='images/images(213).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'> <img src='images/images(215).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'> <img src='images/images(216).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'> <img src='images/images(217).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'> <img src='images/images(218).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'> <img src='images/images(219).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'> <img src='images/images(220).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'> <img src='images/images(223).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'> <img src='images/images(225).jpg' alt='' style='width:45px;height:40px;cursor:pointer;'> <div style='background:#ffffff;color;#000000;margin:15px;height:25px;font-size:16px;'>$url</div><button id='close' style='float:right;background:ghostwhite;margin-right:15px;cursor:pointer;'>close</button></div></div>";
echo "</div>";
$i++;
}
}else {
echo "Video not found";
return false;
}
}catch(PDOException $e) {
throw new PDOException($e -> getMessage());
}
}
My target shares class is in the last PHP echo
here is my javascriptc code:
$(".shares").on('click',function() {
var modal = document.getElementById('myModal');
$(this).parent().children(".modal-content").style.display = 'block';
$modal.style.display = 'block';
});
But it gets didn't the id nor class neither did it change the display to block.
