I'm looking for a method in native JavaScript or jQuery to display a div by clicking on the icon that corresponds to it.
The icons are in a carousel that works with Owl Carousel 2
Icons and div are created dynamically on WordPress with an ACF Repeater Fields
Icons and div each have an ID :
For icons: img_1, img_2 ...
For blocs: div_1, div_2 ...
The icons carousel loop :
<?php $GLOBALS['img'] = 0;
if (have_rows('carrousel_icons')): ?>
<div id="owl-carousel-skills" class="owl-carousel-skills owl-theme col-12 col-sm-10">
<?php while (have_rows('carrousel_icons')): the_row();
$icon = get_sub_field('icon');
$GLOBALS['img']++;
?>
<div id="img_<?= $GLOBALS['img'] ?>" class="owl-carousel-skills-menu-item">
<img src="<?= $icon['url'] ?>" alt="<?= $icon['alt'] ?>">
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
ACF Repeater Fields Blocs :
<?php
$GLOBALS['div'] = 0;
$counter = 0;
if (have_rows('carrousel_icons')): ?>
<div class="col-12 col-sm-8 bloc_carousel_icons__txt">
<?php while (have_rows('carrousel_icons')): the_row();
$title = get_sub_field('title');
$txt = get_sub_field('txt');
$GLOBALS['div']++;
if ($counter) {
?>
<div id="div_<?= $GLOBALS['div'] ?>" class="inactive" style="display: none;">
<h3><?= $title ?></h3>
<?= $txt ?>
</div>
<?php continue; } ?>
<!-- first DIV -->
<div id="div_<?= $GLOBALS['div'] ?>" class="active" style="display: block;">
<h3><?= $title ?></h3>
<?= $txt ?>
</div>
<?php $counter++;
endwhile; ?>
</div>
<?php endif; ?>
Link to see a screenshot
I tested something but it only shows / hides all the div at once by clicking on any icon :
$(function(){
var $allBlocks = $(".bloc_carousel_icones__textes > div");
var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
$(document.body).on("click", "div.owl-carousel-competences-menu-item", function (evt) {
var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
$allBlocks.not($('.hidden').fadeToggle()).hide();
});
});
I have no idea how to do this, anyone have an idea?
Thanks in advance !
You can do it like this: Add a click() event handler for all images that have an id that starts with img_, get the number of this id with substr and toggle the corresponding div.
$(document).ready(function() {
$("img[id^='img_']").on("click", function() {
let id = $(this).attr("id").substr(4);
$("#div_" + id).fadeToggle();
});
})
Update: As asked in the comment, there's a solution needed to deactivate the previously active <div> when a new <div> gets activated. This can be done as follows:
$(document).ready(function() {
$("img[id^='img_']").on("click", function() {
let id = $(this).attr("id").substr(4);
if ($("div[id^='div_']").not($("#div_" + id)).is(":visible")) {
$("div[id^='div_']").not($("#div_" + id)).fadeToggle();
}
$("#div_" + id).fadeToggle();
});
})
div[id^='div_'] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img_1" src="https://dummyimage.com/50x50/000000/ffffff&text=1" />
<img id="img_2" src="https://dummyimage.com/50x50/cecece/000000&text=2" />
<div id="div_1">
div 1
</div>
<div id="div_2">
div 2
</div>
I use Wordpress as a CMS for my website. I'm Using the Sugarland Theme by Thomas Rodus (Which uses WP-Bakery as a page builder), unfortunately my support has run out and I JUST realized that right click-save as/downloading images from my website is disabled/inaccessible. This isn't great as it means any potential clients, agencies, etc, can't quickly save my images and store them for later viewing.
My knowledge is limited but I've managed to do some customizing myself throughout the years of using WP and hosting my website and whatnot. I can usually figure out what's wrong and fix it, but I can't find which element is causing the issue, if it's the PHP files (content-portfolio-ajax , content-portfolio-nav) for the AJAX overlay, or the Jquery files (jquery.fancybox.pack) as I can't see anything obvious suggesting something is disabled.
------ Content-portfolio-ajax:---------
<?php
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
?>
<div id="project-title" class="centered">
<div class="parent">
<div class="child">
<?php
the_title('<h3>', '</h3>');
the_excerpt();
?>
<?php esc_html_e('Details', 'sugarland'); ?>
</div>
</div>
</div>
<div id="project-slider">
<figure class="images">
<?php the_post_thumbnail('full'); ?>
</figure>
<?php if(!empty($next_post)) : ?>
<a class="ajax-prev" href="<?php echo esc_url(get_permalink($next_post->ID)); ?>"></a>
<?php endif; ?>
<?php if(!empty($prev_post)) : ?>
<a class="ajax-next" href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>"></a>
<?php endif; ?>
</div>
-------- or content-portfolio-nav: ---------
<?php
global $post;
$url[] = '';
$url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
$displays = get_option('ebor_cpt_display_options');
$slug = ( $displays['portfolio_slug'] ) ? $displays['portfolio_slug'] : $slug = 'portfolio';
?>
<div class="padding-0 clearfix" data-ref="mixitup-container">
<?php if(!empty($prev_post)) : ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio lifestyle" data-ref="mixitup-target">
<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>">
<figure class="images">
<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id( $prev_post->ID ), 'full'); ?>
<img src="<?php echo esc_url($src[0]); ?>" alt="<span><?php echo ebor_the_terms('portfolio_category', ', ', 'name'); ?></span><?php echo get_the_title($prev_post->ID); ?>" class="slip" />
</figure>
</a>
</div>
<?php endif; ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio blank" data-ref="mixitup-target">
<a href="<?php echo esc_url( home_url('/') . $slug ); ?>">
<figure class="images">
<img src="<?php echo EBOR_THEME_DIRECTORY; ?>assets/images/blank.jpg" alt="Blank Image" />
</figure>
<div class="info-box-content">
<div class="parent">
<div class="child">
<h5><i class="fa fa-th"></i> <?php esc_html_e('Overview', 'sugarland'); ?></h5>
</div>
</div>
</div>
</a>
</div>
<?php if(!empty($next_post)) : ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio travel" data-ref="mixitup-target">
<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>">
<figure class="images">
<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id( $next_post->ID ), 'full'); ?>
<img src="<?php echo esc_url($src[0]); ?>" alt="<span><?php echo ebor_the_terms('portfolio_category', ', ', 'name'); ?></span><?php echo get_the_title($next_post->ID); ?>" class="slip" />
</figure>
</a>
</div>
<?php endif; ?>
</div>
----Or this JS (jquery.fancybox.pack) (I didn't paste the entire thing because it's large and I'm not sure which bit would be relevant to the problem. ------
(function(C,z,f,r){var q=f(C),n=f(z),b=f.fancybox=function(){b.open.apply(this,arguments)},H=navigator.userAgent.match(/msie/i),w=null,s=z.createTouch!==r,t=function(a){return a&&a.hasOwnProperty&&a instanceof f},p=function(a){return a&&"string"===f.type(a)},F=function(a){return p(a)&&0<a.indexOf("%")},l=function(a,d){var e=parseInt(a,10)||0;d&&F(a)&&(e*=b.getViewport()[d]/100);return Math.ceil(e)},x=function(a,b){return l(a,b)+"px"};f.extend(b,{version:"2.1.4",defaults:{padding:0,margin:10,width:800,
height:600,minWidth:100,minHeight:100,maxWidth:9999,maxHeight:9999,autoSize:!0,autoHeight:!1,autoWidth:!1,autoResize:!0,autoCenter:!s,fitToView:!0,aspectRatio:!1,topRatio:0.5,leftRatio:0.5,scrolling:"auto",wrapCSS:"",arrows:!0,closeBtn:!0,closeClick:!1,nextClick:!1,mouseWheel:!0,autoPlay:!1,playSpeed:3E3,preload:3,modal:!1,loop:!0,ajax:{dataType:"html",headers:{"X-fancyBox":!0}},iframe:{scrolling:"auto",preload:!0},swf:{wmode:"transparent",allowfullscreen:"true",allowscriptaccess:"always"},keys:{next:{13:"left",
34:"up",39:"left",40:"up"},prev:{8:"right",33:"down",37:"right",38:"down"},close:[27],play:[32],toggle:[70]},direction:{next:"left",prev:"right"},scrollOutside:!0,index:0,type:null,href:null,content:null,title:null,tpl:{wrap:'<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',image:'<img class="fancybox-image" src="{href}" alt="" />',iframe:'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen'+
Sorry, I know this is probably a long shot. And I'm sorry about my obvious cluelessness around this, but I've spent the last few weeks trying to figure out what the problem is. Thank you so much to anyone who looks over this.
There are a number of ways to disable right click, but a common way is
document.addEventListener('contextmenu', event => event.preventDefault());
If you're going to disable the disabling, you'll need to find the reference to contextmenu or onContextMenu or something similar.
The snippets you included didn't have this in it, so it's probably somewhere else in the theme or plugin folder.
Without more code, I can't help much, but good luck trying to find it yourself! Let us know if there's more info you can give.
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);
}
I'm creating a website for a client, but I'm primarily a front-end developer. I had to create a while loop (which works just fine) to build a gallery. The client wants a before/after display on the gallery. I elected to use the TwentyTwo jQuery plugin. However, I am having an issue. It is only displaying the first container, which displays just fine.
The necessary jQuery, inline , and css files are displayed on that page linked above. I am using bootstrap as a framework. Here is my code:
$(window).load(function() {
$("#container1").twentytwenty();
});
<div class="row">
<div class="col-lg-12">
<h2><span class="color">Our Gallery</span> </h2>
<?php
//Selects all images
$sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery ORDER BY postDate DESC") or die($GLOBALS['gmysqli']->error);
while ($row = $sql->fetch_assoc()) {
$image = $row["image"];
?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container1" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php } ?>
</div>
</div>
The problem here is the duplicate ID you generating in the php loop. This results in invalid html and can cause problems when using it as a selector.
You can switch to using a class selector:
$(document).ready(function(){
$(".twentytwenty-container").twentytwenty();
});
I updated your ready handler to the recommend structure. Or for the shorthand:
$(function() {
$(".twentytwenty-container").twentytwenty();
});
When using the class selector you can get rid of the ID in the HTML element
If you want to stick to the ID you can add a iteration variable to your loop and use the attribute selector:
$(function() {
$( "div[id^='container-']" ).twentytwenty();
});
<?php
$i = 0;
while($row = $sql->fetch_assoc()) {
$image = $row["image"]; ?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container-<?php echo $i; ?>" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php
$i++;
} ?>
try without order by statement.
Example:
<div class="row">
<div class="col-lg-12">
<h2><span class="color">Our Gallery</span> </h2>
<?php
//Selects all images
$sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery") or die($GLOBALS['gmysqli']->error);
while($row = $sql->fetch_assoc())
{ $image = $row["image"]; ?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container1" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php } ?>
</div>
</div>
If you could share how you database are filled out could more easy to help you.
And the project link.
I hope helped you out anyway.
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
}