How to make an image inside a modal clickable

How to make an image inside a modal clickable - javascript

I have button that displays a modal which contains many icons, and I want it when I click one of the images it will indicate that I have clicked it. But I don't have any idea how to implement it.
So far this is how my modal looks like.
My objective:To put an indicator that I have clicked it.
CODE
<div class="modal-body">
<div class="row">
<div class="col-lg-6 pull-left">
<?php
$tokenSql = mysql_query(" SELECT * FROM topplayer WHERE user_id = '$user_id' ");
$retToken = mysql_fetch_assoc($tokenSql);
$token = $retToken['token'];
echo ("<b>Tokens : $token </b><br>");
?>
</div>
<div class="col-lg-6 pull-right">
</div>
</div>
<div class="row ml">
<?php
$sendGiftSql = mysql_query("SELECT * FROM gifts WHERE isDelete = 'false' ORDER BY price ");
while($sendGift = mysql_fetch_assoc($sendGiftSql)){
$giftIMG = $sendGift['img_path'];
echo("
<div class='col-xs-4 mb'>
<br>
<img id='edgiftPhoto' class='center-block' alt='No image' src='$giftIMG' style='height:120px; width: 120px'/>
</div>
");
}
?>
</div>

Generic, super super super simple solution. No need for a plugin.
JS:
$('.modal-body').on('click','img',function(){
$(this).toggleClass('clicked');
})
CSS:
.clicked{
border:1px solid black;
//style it however you want
}

Related

Show a number of items on clicking show more button

i am showing travel packages from database in loop on a page, where more than 40-50 packages getting shown.
i want only four packages to be shown at start and when i click on show more button it should show 4 more packages and so on.
<?php foreach($blogrand as $blogsrand){ ?>
<div class="grid-item-wrap large-4 medium-4 small-12 columns group-0">
<div class="shadow grid-item rel bdg1">
<div class="img"><a href="<?=base_url();?>tours/<?php echo $blogsrand['tourslug'];?>"><img alt="<?php echo $blogsrand['tourname'];?>" class="mmtTI hide" src="<?php echo $blogsrand['banner'];?>" /><img alt="<?php echo $blogsrand['tourname'];?>" class="mmtTIM" src="<?php echo $blogsrand['banner'];?>" />
</a></div>
<div class="content eq-7" style="height:110px">
<h3><?php echo $blogsrand['tourname'];?></h3>
<div style="background-color: transparent;width:100%;display: inline-block;padding-top: 1px;padding-bottom: 1px;font-size: 12px; color:#ff9016;" class="bld lsp upc drk" data-popup="range-reveal-1">Trip Type : <?php echo $blogsrand['tourtype'];?><br><span style="text-transform:capitalize; color:black;">Trip Duration : <?php echo $blogsrand['hotels'];?></span><br><span style="text-transform:capitalize; color:#959595;">Places Covered : <?php echo $blogsrand['tourplaces'];?></span></div>
</div>
</div>
</div>
<?php } ?>
<div class="cnt"><a class="bld f19 wht wrBCol3 colLinkPad viewMoreTrigger5">Show More</a></div>
how to achieve this by CSS or Javascript.

Here's a snippet to get you started. Try it out, play around with it, try to adopt it to your use case, and when you encounter specific issues you're unable to debug and figure out yourself, then feel free to ask on stackoverflow. Be sure to include minimum reproducing examples when applicable.
let data = [...Array(50)].map((_, i) => ({i, r: Math.random()}));
document.querySelector('#more-button').addEventListener('click', () => {
let showing = document.querySelector('#container').childElementCount;
for (let i = 0; i < 4; i++) {
let row = document.createElement('div');
let d = data[showing + i];
row.textContent = `${d.i}, ${d.r}`;
document.querySelector('#container').appendChild(row);
}
});
<div id="container"></div>
<button id="more-button">more</button>

Content of innerHTML is "undefined"

I never had this problem before, but now working with PHP when I try to edit the content of a div with the id of a product taken directly from it's id in the database like this (both separaed in two foreach getting their current correct IDs) because I need them separated so when I can change the content, I can modify it so I can make the second DIV display: none by default and after clicking the first one making it display: inline:
<div id="h<?php echo $obra['id'] ?>" onClick="display()"> </div> // Getting ID h + 84 (h84) this time
<div id="<?php echo $obra['id'] ?>"> TEST TEXT</div> // Getting ID 84 this time)
And the function is:
function display() {
var result = document.getElementById("84").innerHTML;
result.innerHTML = "test";
alert(result);
}
Now, when I click the first DIV, it should get the content of the div with ID 84, which is "TEST TEXT", and then change it for "test" and change the content which I see in the browser and after that, alert with the new result value, but the content doesn't change and the alert shows me TEST TEXT.
Here is the full relevant code if needed:
<div class="row m-0">
<div class="accordion pl-0 col-4 text-center">
<?php if ( count($cuadros) == 0) { ?>
<p class="text-center mt-3">No hay cuadros registrados.</p>
<?php } else {
$cont = 0;
foreach ( $cuadros as $obra ) { ?>
<div class="card border-top-0 border-left-0 rounded-0 p-0">
<div class="card-header border-0" id="h<?php echo $obra['id'] /* it gets value "84" */ ?>" onClick="display()">
<h5 class="mb-0">
<?php echo $obra['nombreObras']; ?>
</h5>
</div>
</div>
<?php $cont++; } ?>
</div>
<?php foreach ( $cuadros as $obra ) { ?>
<div class="col-4 hidden" id="<?php echo $obra['id'] /* It gets value "84" */ ?>">
TEST TEXT
</div>
<?php } ?>
<?php } ?>
</div>
And a screenshot of what happens (note that the change should be reflected in the alert, which is not)
Thank you!

You are performing innerHTML agin. So it will return error. Remove innerHTML from result
function display() {
var result = document.getElementById("84");
result.innerHTML = "test";
alert(result);
}

How to make pop up modal shows once a day or hours

I know there is a lot of answers about this but i cant seem to implement it with my code. What i want to do is when the user open the homepage a recommendation pop up will only show once a day or hours. Any help and suggestion is greatly appreciated.
This is the code in launching the pop up modal on page load.
<?php
if(mysqli_num_rows($check_ip) > 0 )
{
?>
<script type="text/javascript">
$(document).ready(function()
{
$("#myModal").modal('show');
});
</script>
<?php
}
?>
This is the code for pop up modal
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Welcome back! Here's our recommended speakers for you.</h4>
</div>
<div class="modal-body">
<?php
$user_ip = $_SERVER['REMOTE_ADDR'];
$check_ip = mysqli_query($conn, "SELECT ip_address FROM reservations WHERE ip_address = '$user_ip'");
$history_data = mysqli_query($conn, "SELECT * FROM reservations WHERE ip_address = '$user_ip'");
$row = mysqli_fetch_array($history_data);
$topic = $row['topic'];
$ip_address = $row['ip_address'];
$select_speakers = mysqli_query($conn, "SELECT * FROM speakers WHERE speaker_specialization1 = '$topic' OR speaker_specialization2 = '$topic' OR speaker_specialization3 = '$topic' ORDER BY speaker_reservedcount DESC LIMIT 3");
while($row = mysqli_fetch_array($select_speakers))
{
echo '
<a href="speakerProfile.php?id='.$row["id"].'">
<div class=" col-sm-4 ">
<div class="thumbnail"><img class="speakers-image" src="img/'.$row["speaker_image"].'" style="height:150px; min-width:100%;"/>
<div class="caption" style="max-height:270px; min-width:100%" >
<center>
<h3 class="speakers-name" style="font-weight:bold; margin: 2px 10px -6px 10px;">'.$row["speaker_fullname"].'</h3>
<hr>
<div class="speaker-topics" style="margin-top:-20px;">
<p style="text-transform: capitalize;">'.$row["speaker_specialization1"].'</p>
</div>
<div class="speaker-topics">
<p style="text-transform: capitalize;">'.$row["speaker_specialization2"].'</p>
</div>
<div class="speaker-topics">
<p style="text-transform: capitalize;">'.$row["speaker_specialization3"].'</p>
</div>
<hr>
<p class="speakers-name" style="margin:-10px 0px 5 px 0px;">Reserved Count: '.$row["speaker_reservedcount"].'</p>
</center>
</div>
</div>
</div>
</a>
';
}
?>
</div>
</div>
</div>
</div>

i know this is not much but it might help somebody who has a problem like this. This how i do it
<?php
if(mysqli_num_rows($check_ip) > 0 && isset($_SESSION["popUp"]) == false)
{
$_SESSION["popUp"] = "true";
?>
<script type="text/javascript">
$(document).ready(function()
{
$("#myModal").modal('show');
});
</script>
<?php
}
?>

Append multiple divs at particular positions in a grid in jQuery

I am loading a grid of news stories and want to append two DFP adverts at a particular place in the grid - which is define by a data attribute data-adposition
Here's the HTML of the divs
<div class="aggregator">
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="<?php echo $dfpPos; ?>">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="<?php echo $dfpHalfPos; ?>">
<h2>Test DFP TWO</h2>
</div>
</div>
I am then looping through and currently using detach() to preserve the data but remove it from the document.
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
Having no luck currently! The detach() works as it stores the data when I console.log but does no append to the position defined in the data-adposition

it works for me. what are you getting back from the php expression for data-adposition?
$(document).ready(function(){
var selector = ".aggregator";
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aggregator">
<div class="news-item">n1 </div>
<div class="news-item">n2 </div>
<div class="news-item">n3 </div>
<div class="news-item">n4 </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="1">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="2">
<h2>Test DFP TWO</h2>
</div>
</div>

mysql retrieve data, for each data append a new row

i'm doing a project for my school whereby i have to retrieve student works from database.
On my home page, i have preset 10 div to hold the data returned from query. I preset it because i only need to retrieve 10 data.
HTML
<div class="viewport-computer col-lg-12 visible-lg no-padding ">
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption">Author<br />Description</h2>
</div>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption">Author<br />Description</h2>
</div>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption">Author<br />Description</h2>
</div>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption">Author<br />Description</h2>
</div>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption">Author<br />Description</h2>
</div>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption">Author<br />Description</h2>
</div>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption">Author<br />Description</h2>
</div>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption">Author<br />Description</h2>
</div>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption">Author<br />Description</h2>
</div>
</div>
Then i use jquery to query to my php to get back 10 data and place onto my 10 div
Jquery
/* Home Page Autoload featured thumbnails based on computer viewport/mobile viewport
================================================== */
$.ajax({
type: "POST",
dataType: "json",
url: "CMS/PHP/displayFeatThumbs.php",
success: function(data) {
// Display image thumbnail, caption & description of works onto each thumbnail div
$('.viewport-computer .img_thumb_holder img').each(function(index, element) {
// Work out the data to set
var imageUrl = "cms/" + data[index].links;
var captionHtml = "<span>" + data[index].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + data[index].title + "</span>"
// Now apply this to the elements
$(element).attr("src", imageUrl); // i must find a way to solve this
$(element).parent().css('background-image', 'url("'+imageUrl+'")');
$(element).next().html(captionHtml);
// push the caption & id into global variable array to be used on other functions easily
captionArray.push(data[index].caption);
idArray.push(data[index].id);
homeLinksArray.push(data[index].links);
homeTitleArray.push(data[index].title);
});
});
It's working fine since i loop through my preset div(10 of them) and then place the data into each div.. Now i need to do a search bar function, and it will return me ALL the results(more than 50), and i have to display all of them, now the problem is that i only preset 10divs, so my workflow is not good for this
so instead of my current
loop through 10 div > retrieve data and place on 10 div
i would like to
retrieve all data, for each data, append a new div and place it
i am not very good with php as i'm still a new learner so i'm stuck at this although i have the idea on how to do it. Can someone enlighten me on how i can loop through each data and append instead of my preset divs?
PHP
<?php
include 'dbAuthen.php';
$searchBar = $_POST['searchBar'];
$sql = "SELECT userdatafiles.UserID,Name,Link,Title FROM userdatafiles JOIN users ON userdatafiles.UserID = users.UserID WHERE Skillsets = '$searchBar' GROUP BY UserID ORDER BY RAND()";
$result = mysqli_query($con,$sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo '<div>hi</div>',
$links[] = array(
"id" => $row["UserID"],
"links" => $row["Link"],
"caption" => $row["Name"],
"title" => $row["Title"],
);
}
//shuffle($links);
echo json_encode($links);
} else {
echo "0 results";
}
?>

Solution is not to preset 50 divs or 10 divs in your UI.
Simply when you retrieve your result loop through all records and at the same time instead of populating your divs you create divs on the fly and insert data to it. When newly created divs are ready append them to your UI with some classes like 'new-data' or something to give a look that these records are somewhat new in your UI.
Assuming data represent your json returned by PHP and data is collection of all records here is one way to do it
for(i=0; i<data.length; i++)
{
$('<div class="col-lg-2 img_thumb_holder no-padding new-class">'
+'<img src="'+data[i].imgSrc+'" class="img_thumb">'
+'<h2 class="caption">'+data[i].author+'<br />'+data[i].description+'</h2>'
+'</div>').appendTo("ul#yourRecordHolderElemenet").slideDown("fast");
}
Exact solution might depend on your json returned by PHP untill you show your exact json response we won't be able to help you properly.
I won't recommend returning data with their html markup being returned from PHP as it would increase amount of data being transferred.

Since you already have the information in database, add them directly in HTML rather than making a ajax request.
<div class="viewport-computer col-lg-12 visible-lg no-padding ">
<?php
//You can get 10 records from database using 'limit 10' added to select query.
//Get data from database. I assume you have the data in a variable $datafromdb
foreach($datafromdb as $data){
?>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption"><?=$data['author']?><br /><?=$data['description']?></h2>
</div>
<?php } ?>
</div>

Without writing complete code for you here is a step by step how you could do this
Create a database connection with mysqli or pdo
Select all records with a select query
Do a foreach on the resultset
Add one div in the foreach
PHP will add a div for each row in the select query
for example:
foreach($result->fetch_array() as $row) {
?>
<div class="col-lg-2 img_thumb_holder no-padding">
<img class="img_thumb">
<h2 class="caption"><?= $row['author'] ?><br /><?= $row['description'] ?></h2>
</div>
<?php
}

PHP Code should be :
<?php
include 'dbAuthen.php';
$searchBar = $_POST['searchBar'];
$sql = "SELECT userdatafiles.UserID,Name,Link,Title FROM userdatafiles JOIN users ON userdatafiles.UserID = users.UserID WHERE Skillsets = '$searchBar' GROUP BY UserID ORDER BY RAND()";
$result = mysqli_query($con,$sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo '<div>hi</div>',
$links = array(
"id" => $row["UserID"],
"links" => $row["Link"],
"caption" => $row["Name"],
"title" => $row["Title"],
);
}
//shuffle($links);
echo json_encode(array('contents' => $links));
} else {
echo "0 results";
}
?>
notice single dimension $link array and an associative array to json_encode.
In jQuery, your success: can/will be :
success: function(data){
$.each(data.contents, function(ind, ele){
// ele.id is the id and etc... or ind.id. :D
});
}

Develop Reference

JavaScript is the programming language of the Web.

How to make an image inside a modal clickable - javascript

Generic, super super super simple solution. No need for a plugin. JS: $('.modal-body').on('click','img',function(){ $(this).toggleClass('clicked'); }) CSS: .clicked{ border:1px solid black; //style it however you want }

Related

Show a number of items on clicking show more button

Content of innerHTML is "undefined"

How to make pop up modal shows once a day or hours

Append multiple divs at particular positions in a grid in jQuery

mysql retrieve data, for each data append a new row

Categories

Resources