So I have the following code:
$sql="SELECT * FROM $tbl_name ORDER BY id DESC";
$result=mysql_query($sql);
while($rows=mysql_fetch_array($result)){
$links = $rows['links'];
$linksArray = explode(',', $links);
if ($links == ""){
unset($linksArray);
}
?>
//LINK TO ACTIVATE POPUP BOX
<a href="#popup1">
<div class="newsBox">
<h2><?php echo $rows['title'] ?></h2>
<h4>Posted # <?php echo $rows['date'] ?></h4>
<?php
if (!empty($linksArray)){
?>
<span><i>Links associated with this post:</i>
<? } ?>
<?php
foreach($linksArray as $link) {
?>Here</span>
<?
}
?>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
<?php echo $rows['news'] ?>
</div>
</div>
</div>
</div>
<br>
</a>
<?php
}
mysql_close();
?>
For each row identified by my query, it links it to a popup box. However all the rows being outputted activate the same popup box. My question is how to create my popup box such that each row being outputted is linked to different popup boxes, if that makes sense. Such as the first row, when linked opens a popup box with that row's info. The next row after, when linked opens a popup box with that row's info, and so on. (I guess maybe like a dynamic popup box?)
Add a counter in your loop and where you have your <a href="#popup1"> and <div id="popup1" class="overlay"> add in the counter variable like <a href="#popup<?php echo $x ?>"> and <div id="popup<?php echo $x ?>" class="overlay">
This would make your popup id unique.
Related
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'm working on modifying an existing wordpress portfolio page. All that is left to do is to make it so when the user clicks anywhere in the article list the link will open. Currently it is just when the title or image is clicked.
I can see that I could make a clickable with the following setup:
<a href="http://example.com">
<div>
anything
</div>
</a>
However Wordpress moves the tags when the page loads like so:
<a href="http://example.com">
</a>
<div>
anything
</div>
So I started to work on using css with the following setup:
HTML
<div class= "box">
</div>
CSS
div.box {
position: relative;
}
div.box:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}
The hover works, it triggers over all of the content and a cursor does appear.
However thats as much as I can do so far. Any attempt to interact with the .box is shot down. Nothing will trigger with javascript using the following :
$(".box").click(function() {
alert("I am an alert box!");
});
I cannot seem to interact with the div.
The page is as follows:
<div class= "box">
<article id="post-<?php the_ID(); ?>" class="portfolio-article clearfix">
<?php if( get_post_meta($post->ID, "portfolio_image", true) ): ?>
<img src="<?php the_field('portfolio_image'); ?>" class="portfolio-image">
<!--get PDF if not empty-->
<?php else: ?>
<img src="http://domain.com/wp-content/uploads/2014/02/placeholder.png" class="portfolio-image">
<?php endif; ?>
<div class="portfolio-content">
<header>
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<h1 class="portfolio-title">
<a target="_blank" href="<?php the_field('portfolio_link'); ?>">
<?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
</a>
</h1>
<!--get PDF if not empty-->
<?php else: ?>
<h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
<?php endif; ?>
</header>
<p class="portfolio-meta">
<?php the_field('portfolio_publication_and_date'); ?>
<?php if( get_post_meta($post->ID, "portfolio_pdf_upload", true) ): ?>
<span class="sosa-icon">H</span> Open Pdf<!--get PDF if not empty-->
<?php endif; ?>
</p><!-- END ortfolio-meta -->
</div><!--portfolio-content-->
</article>
</div>
NewToJS was in the right area when saying it could be a problem with the access to the jQuery library. In this case I had linked jQuery correctly, it was tested and working.
jQuery in Wordpress needs to be enqueued by adding the following into functions.php
wp_enqueue_script("jquery");
My fault was because I didn't change the '$' to 'jQuery' as this is necessary when working with Wordpress.
Here is the incorrect usage :
$(".box").click(function() {
alert("I am an alert box!");
});
Here is the correct usage :
jQuery(".box").click(function() {
alert("I am an alert box!");
});
I have researched this and cannot find an answer. The solutions I have found have not resulted in success.
I am building a WordPress Template and I have a section that contains dynamic tabs. When the user selects a particular tab, the data below it changes accordingly.
However, I cannot get it to scroll down on focus like a normal in-page anchor would do. My relevant code is:
Link:
<span><?php the_sub_field('work_tab_title');?></span>`
Anchor:
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
My current functionality is working in terms of the tabs changing except for the scroll/focus of the anchor. This would be easier if I could give you the URL but I am not sure if that is against etiquette here, let me know please.
Thank you
It has come to the point where a larger section of code is needed for context and better understanding:
<div class="container">
<ul class="tab-strips">
<?php $i=0; $j=1; while(has_sub_field('work_slider')):?>
<?php
$string=get_sub_field('work_tab_title');?>
<li data-bottom-top="top:-30px; opacity:0;" data-center="top:0px; opacity:1;"><a href="#<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content"><span>
<?php the_sub_field('work_tab_title');?>
</span></a></li>
<?php $i++; $j++; endwhile;?>
</ul>
</div>
<?php $i=1; while(has_sub_field('work_slider')): ?>
<?php $string = get_sub_field('work_tab_title'); ?>
<?php $slider_title = get_sub_field('slider_title'); ?>
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
<?php ?>
<script type="text/javascript">
document.getElementById('<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content').scrollIntoView(true);
</script>
<?php if(get_sub_field('inner_slider')):?>
<div class="container">
<div class="row" style="margin-left:9.6%;">
<h3>
<?php echo $slider_title; ?>
</h3>
</div>
</div>
<div class="slider">
<div class="container">
<div class="row">
<ul class="clearfix work-slider-controls" id="work_slider_controls<?php echo $i;?>">
<?php $j=0; while(has_sub_field('inner_slider')):?>
<li><a class="work-slider-tab" href="#" data-work-index="<?php echo $i-1;?>" data-slider-index="<?php echo $j;?>" rel="<?php echo $j;?>">
<?php the_sub_field('work_inner_title');?>
</a></li>
<?php $j++; endwhile;?>
</ul>
</div>
</div>
</div><!-- slider -->
I am working on a mosaic of thumbnails linking to child pages. The code works in such a way that the child pages display in an iframe overlaying the content. However the client wants only 4 of these pages to have content, so the code needs to work in such a way that ONLY if the child page has content, does the rollover get enabled to open as an iframe overlay.
I currently have the following code. Any ideas how i could customise it so that the overlay is enabled ONLY if the child page has content? Many thanks.
<section id="content" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<section id="content_team" class="entry-content js-masonry">
<?php $child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = " . $post->ID . " AND post_type = 'page' ORDER BY menu_order", 'OBJECT'); ?>
<?php if ($child_pages) : foreach ($child_pages as $pageChild) : setup_postdata($pageChild); ?>
<div class="child-thumb">
<div id="click_overlay" onclick="var overlay = document.getElementById('hidden_overlay');
overlay.src = 'about:blank';
overlay.style.display = 'block';
overlay.src = '<?php echo get_permalink($pageChild->ID); ?>';"><span class="featured-title-overlay">
<span class="featured-title">
<span class="title"><?php echo get_the_title($pageChild->ID); ?></span>
<div class="hr"> </div>
<span class="title_link">Read more...</span>
</span>
</span><?php echo get_the_post_thumbnail($pageChild->ID); ?></div>
<br class="clear" />
</div>
<?php endforeach;
endif;
?>
</section>
</article>
<?php endwhile;
endif; ?>
<iframe id="hidden_overlay" src="about:blank"></iframe>
<p class="clear"> </p>
</section>
I want to show content in the popup on the click of the content title text. Somehow i have achieve this thing but, i have put that popup in the while loop. So, popup will be created as much post are there. Is there a way to create a single popup outside the loop and display the content whatever title has been clicked. I have try and search using jquery but did not get any success.
<?php
$i=0;
while( $slides->have_posts() ) : $slides->the_post();
$i++;
?>
<div class="vc_span2 wpb_column column_container col no-extra-padding">
<div> <a class="call_model" rel="<?php echo get_the_ID() ?>" data-toggle="modal" data-target="#myModal<? echo $i ?>" style="display: inline; opacity: 0;">
<?php the_title(); ?>
</a> </div>
</div>
<div class="modal fade" id="myModal<? echo $i ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body"> $post = get_post(get_the_ID());
<?php echo $post->post_content; ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
You can do this on 2 methods
1) Jason / Ajax
create a php file that capable to call the post contend depends on the post id. Create a jason call on the click of the title, pass the currently clicked link id through the json call and rerun the content from the newly created php file. Through the json response method catch the content aand append to the model area and load the model.
2) Normal method.
add new data attribute in the a href tag and add common class too
<a **data-ref="<?=echo$i;?>"** class="mod call_model" rel="<?php echo get_the_ID() ?>" data-toggle="modal" data-target="#myModal<? echo $i ?>" style="display: inline; opacity: 0;">
<?php the_title(); ?>
create new div with hidden mode like
<div class="text<?=echo $i?>" style="display:none"></div>
suppose $i is 1 the data-ref=1 and the text class is text1
then i create a query for click on a.
$('body').on('click', '.mod', function()
{
var id = $(this).data('ref'); //here i got the id of the clicked link
var textbox = '.text'+id;
var text = $(textbox).html();//here i got the content from the content div.
$('#myModal').modal('show'); // here manually load the model
$('.modal-body').html(text);// here manually inject the text taken from the hidden field to the modal text area.
});
Then you can define your modal html anywhere out side the loop. On clicking on the link that will populated with the text from your hidden div.
These are just a concept you need to work on the codes depends on your site.