Develop Reference

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);
}

Making a <div> Clickable in Wordpress

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!");
});

html - How to Overlap Div contain link over parent Div?

I have div contain 2 Divs, one for image-thumbnail and another contain link. However, whenever i click link on "the link-div", it always show modal window that i dont expect it. it should be opened link normally, not modal dialog. FYI, The link opened normally by right click. Below are the codes :
<div class="col-sm-4">
<div id="<?php echo $row['filename']?>" class="thumbnail" style="height:205px;width:337px;background-image:url('<?php echo base_url().'/uploads/thumb/'.$row['thumbnail']; ?>')">
<div onClick="loadModal();" style="position: absolute;bottom:40%;left:40%;">
<img src="<?php echo base_url(); ?>/uploads/thumb/play-button.png" />
</div>
<div style="z-index:1; position:relative;" class="thumb_text">
<h5 > Kiriman : <u><?php echo $row['nama'];?></u></h5>
</div>
</div>
</div>
The Modal Code :
function loadModal()
{
$("div.modal-bg").show();
$("div.modal-bg").fadeTo("slow", .5);
$("div#simpleModal").addClass("show");
}
The CSS of the modal :
div#simpleModal.show
{
opacity: 1;
z-index: 100;
-webkit-transition-duration: 0.25s;
}
I have include style="z-index:1" in the 2nd Div that contain link, but still failed.

Because you are calling loadModal() function from the parent div
So change your function like this
<div class="col-sm-4">
<div class="thumbnail" style="height:205px;width:337px;background-image:url('<?php echo base_url().'/uploads/thumb/'.$row['thumbnail']; ?>')">
<div onClick="loadModal();" id="<?php echo $row['filename']?>" style="position: absolute;bottom:40%;left:40%;">
<img src="<?php echo base_url(); ?>/uploads/thumb/play-button.png" />
</div>
<div style="z-index:1" class="thumb_text">
<h5 > Author : <u><?php echo $row['name'];?></u></h5>
</div>
</div>

please try this code <div style="z-index:1; position:relative;" class="thumb_text">
because z-index not working with static position( default position:static )

Dropdown box close on click

I have a DIV that expands on click, it currently closes when another DIV is clicked but I would also like it to close on click, my code is below:
The Jquery:
$(function(){
$('.opReview').click(function(){
$('.review').addClass('hide');
$(this).children('.review').toggleClass('hide');
});
});
The HTML Markup (Wordpress code can be ignored)
<article class="sixteen columns opReview">
<img class="opLogo" src="<?php bloginfo('stylesheet_directory'); ?>/img/core/operator/90x58_operatorlogo/<?php echo $op_logo?>.png" alt="<?php echo($op_title)?>" >
<div class="list_details">
<div class="reviewTitle"><p>Click To </br> Read a review</p> </div>
</div>
<button class="claimBtn"><i class="fa fa-chevron-circle-right fa-rotate-90"></i></button>
<div class="clear"></div>
<div class="review hide">
<h1><?php echo $op_name; ?></h1>
<p><?php echo $operator_review; ?></p>
</div>
</article>

This code hides all .review elements and then toggles the active one, unhiding it
$('.review').addClass('hide');
$(this).children('.review').toggleClass('hide');
you need to do exclude the current item from the first selector
$(this).siblings('.review').addClass('hide');
$(this).children('.review').toggleClass('hide');

Wordpress : Post Content Need in the bootstrap modals without repeating the model in loop

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.