I have a web page where I show a series of images brought from a database, these images when passing over shows you a "quick view" message (), clicking on this link shows you on the page a div with the largest image, I need when someone click on this link, in the div show me different images according to what I have clicked, this is my code
PHP/HTML CODE
if ($array->num_rows > 0) {
while($row = $array->fetch_assoc()) {
<div>
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />'; ?>
<a href="#" class="js-show-modal1">
Quick View
</a>
</div>
}
}
JS CODE
$('.js-show-modal1').on('click',function(e){
e.preventDefault();
$('.js-modal1').addClass('show-modal1');
});
CSS
.show-modal1 {
visibility: visible;
opacity: 1;
}
HTML
<div class="js-modal1">
<img src="images/someimage.jpg">
</div>
this is what i need , when i click here : Quick View
Here shows this :
<div class="js-modal1">
<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />
</div>
Make a counter outside the loop that we will use for indexing and targeting the correct modal.
I stored the target modal in a data-property of the <a></a> tags in which I used data-target.
if ($array->num_rows > 0) {
// initialize counter
$index = 0;
while($row = $array->fetch_assoc()) {
// use the counter in the loop, modal-".$index."
echo "
<div>
<a href='#' class='js-show-modal' data-target='modal-".$index."'>
Quick View
</a>
<div id='modal-".$index."'>
<img src='data:image/jpeg;base64,".base64_encode($row['picture'])."' />
</div>
</div>";
// increment
$index++;
}
}
Then use this script below. We added an onclick event handler to .js-show-modal which will be all the <a></a> tags. We will then get data-target property as the selector. I used toggle for switching between hide() and show().
$(document).on('click','.js-show-modal',function(e){
e.preventDefault();
var target = '#'+$(this).data('target');
$(target).toggle();
});
Related
I am trying to get the mesg_id when the user clicks on a button it shows a popup and inside it , it will show the mesg_id
but the issue that i am having not that i cant retrieve the mesg_id is that it takes the one on top not the one the user clicks on example :
<div class="msg-action">
<p id="mesg_id"><?php echo $msg_id; ?></p>
<a class="msg-icon popup-button" href="" data-target="#reply-popup"><img src="images/reply.png"></img></a>
<a class="msg-icon" href="<?php echo "index?message=" . $row['id'] . ""; ?>" ><img src="images/linedfav.png" id='img'></img></a>
</div>
This is the script that shows the pop up when the reply is clicked and it takes the mesg_id
/* modle-popup*/
jQuery(document).ready(function(){
jQuery(".popup-button").click(function(){
event.preventDefault();
jQuery("body").addClass("sitemodal-open");
jQuery(".sitemodal").addClass("in");
var textareaValue = $('#mesg_id').html();
document.getElementById("showMesgID").innerHTML = textareaValue;
});
jQuery('.sitemodal .sitemodal-dialog').click(function($){
$.stopPropagation();
});
jQuery(".close-popup ,.sitemodal").click(function(){
jQuery("body").removeClass("sitemodal-open");
jQuery(".sitemodal").removeClass("in");
document.getElementById("showMesgID").innerHTML = "";
});
});
how can i get the mesg_id the one the user clicks on not the one on top
You can only use an ID in an element once per page.
<div id="myid">testing</div>
<div id="myid">testing 2</div>
The first element takes precedent because it was the first element with that ID. You need to assign each element their own unique ID.
You cannot use ID for multiple elements. ID is meant to be unique for every element. You need to use CLASS instead. and then use closest() and find() to get the value from the element in the same modal.
Html:
<div class="msg-action">
<p class="mesg_id"><?php echo $msg_id; ?></p>
<a class="msg-icon popup-button" href="" data-target="#reply-popup"><img src="images/reply.png"></img></a>
<a class="msg-icon" href="<?php echo "index?message=" . $row['id'] . ""; ?>" ><img src="images/linedfav.png" id='img'></img></a>
</div>
Javascript:
jQuery(".popup-button").click(function(){
event.preventDefault();
jQuery("body").addClass("sitemodal-open");
jQuery(".sitemodal").addClass("in");
var textareaValue = $(this).closest('.msg-action').find('.mesg_id').html();
document.getElementById("showMesgID").innerHTML = textareaValue;
});
Scenario:
I have a bit tricky case here:
Upon cicking the button inside the first div block (I have named it as DIV Block A for readability), I want to display the channels which is inside the second DIV Block
(I have named it as DIV Block B for readability).
The id of button from DIV Block A is:
id="sub_category_dc_button_<?=$category['category_id'];?>"
Upon clicking this button, the content inside the DIV Block B should be displayed.
Attempt 1:
For this, I have followed this approach:
$(".sub_dc_channels").on("click", function(){
$($(this).attr("data-target")).show();
});
Here is my DIV Block A:
<div class="sub_cat_buttons channel" id="dc_subcategory_button_tab">
<div class="sub_dc_channels" id="sub_dc_button">
<?php foreach ($output as $category) {
<button type="button" data-toggle="collapse"
id="sub_category_dc_button_<?=$category['category_id'];?>"
class="btn btn-primary sub_digitalchannel_button"
data-target="#Category_<?= $category['category_id'];?>">
<?= $category['category_title']?>
</button>
</div>
</div>
Here is my DIV Block B:
<?php foreach ($output as $category) {?>
<div class="channel" id="Category_<?= $category['category_id'];?>">
<div id="subchannel_list_tab">
<?php foreach ($output as $category) {?>
<?php foreach ($category['channels'] as $channels) { ?>
<img src="<?= $channels['channel_logo']; ?>"
alt="<?= $channels['channel_name']; ?>"
title="<?= $channels['channel_name']; ?>"
style="width: 100px; height: 60px;" />
<?php } ?>
<?php } ?>
</div>
</div>
<?php } ?>
Attempt 2:
I have also used this approach with the same DIV Blocks but it fails too.
$('div[id^="Category_"]').click(function() {
$(".channel").hide();
$("#subchannel_list_tab").show();
});
Issue Faced:
When I clicked the button from DIV Block A then it targets the contents inside the DIV Block B but the contents inside the DIV Block B are not shown.
What am I missing here? Or am I following the wrong approach?
Suggestions are highly appreciated.
your click is going to be triggered in the div and not in the button, it is likely that this is the problem.
Here's a dummy example of what I think you're up to.
$('.showDiv').click( function () {
let div = $(this).attr('data-target');
$(`#${div}`).show();
});
#divB {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA">
<button class="showDiv" data-target="divB">show div</button>
</div>
<div id="divB">
info divB
</div>
You want to show dynamic data as per id of button click.You missed a target button class in selector.your issue is solved.
$(document).on("click",".sub_dc_channels .sub_digitalchannel_button",function(){
alert();
$($(this).attr("data-target")).show();
});
for reference you can click here.
I want to open a tab when the user clicks on an image link on the following website:
http://m.theseolounge.co.uk/index.php/jadever-jad-jce-counting-scale.html
The code of the tabs is the following:
<ul class="tabs clearer">
<li id="tab-additional"><a href="#" class="current">Product
Specifications</a></li>
<li id="tab-description">Product Features</li>
<li id="tab-downloads">Downloads</li>
<li id="tab-feefo_reviews">Feefo Reviews</li>
</ul>
The ID of the tab is "tab-feefo_reviews". The user clicks on the Feefo logo under the product name.
and this is my code:
<a onclick="javascript:window.location.href='#tab-feefo_reviews'";><img
src="<?php echo $this->getLogoSrc(); ?>" /></a>
On clicking, it jumps to the tab section, but does not open the tab. Is there a way of achieving this with inline javascript?
Add jQuery('#tab-feefo_reviews a').click() to your onclick event (the page already uses jquery, this is the quickest inline code).
Also, the anchor should include a href="javascript:void(0);" or even better, the hash of the anchor. And the onclick event doesn't need the "javascript:" prefix.
So change the anchor to this:
<a href="#tab-feefo_reviews" onclick="jQuery('#tab-feefo_reviews a').click()" >
Haven't tried yet but I guess this should work using jquery.
<img src="<?php echo $this->getLogoSrc(); ?>" />
Script:
$(function(){
$('#openSesame').click(function (e) {
e.preventDefault();
$('.clearer').find('#tab-feefo_reviews a').addClass('current').siblings().removeClass('current');
});
});
to navigate within page (use href="#id") and activate accordion panel
<a href="#tab-feefo_reviews" onclick="javascript:jQuery('#tab-feefo_reviews>a').click();">
<img src="<?php echo $this->getLogoSrc(); ?>" />
</a>
I'm answering this without knowledge of future changes to the site.
EDIT: http://youmightnotneedjquery.com/
First, set all the tabs to an empty class name, and .
var tabs = document.querySelectorAll("ul.tabs a");
for (var i = 0; i < tabs.length; i++) {
tabs[i].className = "";
}
var panels = document.querySelectorAll("div.tabs-panels > div.panel");
for (var i = 0; i < panels.length; i++) {
panels[i].style.display = "none";
}
Then, set the current tab to #tab-feefo_reviews and display the right panel.
var tab = document.getElementById("tab-feefo_reviews");
tab.className = "current";
var panel = document.getElementById("acctab-feefo_reviews");
panel.style.display = "block";
I have the following problem:
I have two divs, only one of these is shown and when I click the next or the previous button the other one is shown and the one which was visible is set to hidden. The div which is shown has the "active" class. Now, I need to get the id of the div which has this class. The problem is that I always get the id of the previous one because when I click the button I get first the id and then the class is changed..and I don't know why, also if the code which change the class is written before the code which get the id.
How can I fix this?
<div class="item <?php if($i == 1) echo 'active';?>" id="<?php echo $dati['id'];?>">
<div class="container">
<div class="carousel-content">
<h1><?php echo $dati['titolo'];?></h1>
<p class="lead">
<?php echo $desc_feed;?>
</p>
</div>
</div>
</div>
<a class="prev" href="#main-slider" id="next-carousel" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="next" href="#main-slider" id="prev-carousel" data-slide="next"><i class="icon-angle-right"></i></a>
function show_feed_data(id)
{
get_feed_data(id);
}
$( "#prev-carousel" ).click(function() {
var id_feed_to_show = $(".active").attr("id");
get_feed_data(id_feed_to_show);
});
$( "#next-carousel" ).click(function() {
var id_feed_to_show = $(".active").attr("id");
get_feed_data(id_feed_to_show);
});
</script>
Its because you are getting the ID of the current active element before it fires the carousel to change the class.
Let's each of the carousel divs are siblings (next to each other) . You can do it like this :
$( "#prev-carousel" ).click(function() {
var id_feed_to_show = $(".active").prev().attr('id');
get_feed_data(id_feed_to_show);
});
$( "#next-carousel" ).click(function() {
var id_feed_to_show = $(".active").next().attr("id");
get_feed_data(id_feed_to_show);
});
I am trying to replace a div's contents with another PHP page when clicking on a link.
Link
echo 'Control Panel';
If statement checking if link clicked
<?php
/** Control panel link. */
if(isset($_GET['control'])){
$link=$_GET['control'];
if ($link == '1'){
include('controlpanel.php');
}
}
Divs
<div id="divContainer">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
I am looking for divContainer to hold the controlpanel.php contents when the control link is clicked and div1 div2 and div3 to be 'removed/hidden'.
I can get both functionalities to work individually but not simultaneously.
The code currently displays the content within the page but not within a div/hiding contents of said div.
Any ideas?
Continuing with your current style, you could simply amend your conditional to the following:
<?php
if ($link == '1') {
include('controlpanel.php');
} else { ?>
<div id="divContainer">...</div>
<?php } ?>
Alternatively, as suggested, you could use some JavaScript to hotload in the control panel, and in the same breath, hide the divs you need hidden. Something like this (jQuery):
function loadPanel() {
$.ajax({
url: 'controlpanel.php',
method: GET,
success: function(res) {
$('#divContainer').html(res);
}
});
}
And then bind this to your link.