Develop Reference

how to toggle a button in jquery?

the code is working but it has a bug that if you first add a item and go to the modal it will show first the disabled button before the enable if you go back to the item
<script>
$(document).ready(function(){
$("div.container1").click(function(){
$('#show_cart').load('temp_user_cart.php');
if ($("table#dataTable tbody").length) {
$("#deleteButton").attr("disabled", false);
console.log(true);
}
})
});
</script>

Thank for your suggestion and insight, I already solve the problem by using php
<div class="" style="text-align: center; ">
<div class="pl-2 pr-2 pt-3 pb-0" style="display:inline-block;border: 2px solid black; border-radius:5px; ">
<?php
$sqlbd = "SELECT SUM(item_total) AS SUB_TOTAL FROM temp_cart WHERE temp_id = '".$_SESSION['temp_id']."' ";
$resultbd = $conn->query($sqlbd);
while($rowbd = $resultbd->fetch_assoc()){
if ($rowbd['SUB_TOTAL'] == 0) {
?><p style="color: green; ">EMPTY CART</p>
<?php
}else{
?><p style="color: green; "> ₱ <?php echo $rowbd['SUB_TOTAL']; ?>.00</p>
<?php
}
?>
</div>
</div>
<?php
if($rowbd['SUB_TOTAL'] == 0){
?>
<div style="text-align:right;">
<div style="display: inline-block;">
<a href="check-out.php">
<button type="button" id="deleteButton" class="btn btn-primary" disabled="disabled">Go to cart</button>
</a>
</div>
</div>
<?php
}else{
?>
<div style="text-align:right;">
<div style="display: inline-block;">
<a href="check-out.php">
<button type="button" id="deleteButton" class="btn btn-primary">Go to cart</button>
</a>
</div>
</div><?php
}
}
?>

Class "active" does not work

In my project I'm using accordion, but the "active" state only works in the click event. I need it to work when active. When active, it shows the minus sign and plus sign when not active. I am using ACF in Wordpress.
My PHP code:
<div class="accordian-boxed"><br>
<?php if(get_field('bio_bl2_accordion')):
$dig_count=0; ?>
<ul class="accordion-box">
<?php while(has_sub_field('bio_bl2_accordion')):
if ($dig_count == 0) { ?>
<li class="accordion block">
<div class="acc-btn">
<div class="icon-outer">
<span class="icon icon-plus fa fa-plus"></span>
<span class="icon icon-minus fa fa-minus"></span>
</div>
<?php the_sub_field('ac_titulo');?>
</div>
<div class="acc-content current">
<div class="content">
<div class="text">
<p><?php the_sub_field('ac_descricao');?></p>
</div>
</div>
</div>
</li>
<?php } else {?>
<li class="accordion block">
<div class="acc-btn">
<div class="icon-outer">
<span class="icon icon-plus fa fa-plus"></span>
<span class="icon icon-minus fa fa-minus"></span>
</div>
<?php the_sub_field('ac_titulo');?>
</div>
<div class="acc-content">
<div class="content">
<div class="text">
<p><?php the_sub_field('ac_descricao');?></p>
</div>
</div>
</div>
</li>
<?php }
$dig_count++; ?>
<?php endwhile; ?>
</ul>
<?php else : endif; ?>
My JS code:
if($('.accordion-box').length){
$('.accordion-box').on('click', '.acc-btn', function() {
var target = $(this).parents('.accordion');
if($(this).hasClass('active')!==true){
$('.accordion .acc-btn').removeClass('active');
}
if ($(this).next('.acc-content').is(':visible')){
//$(this).removeClass('active');
return false;
//$(this).next('.accord-content').slideUp(300);
}else{
$(this).addClass('active');
$('.accordion').removeClass('active-block');
$('.accordion .acc-content').slideUp(300);
target.addClass('active-block');
$(this).next('.acc-content').slideDown(300);
}
});
}
See the image:
The icons state image
Can someone help me?
Thanks

Bootstrap Modal close button issue after print action

I am working on bootstrap modal. I had a set of gallery images. A modal popup is opened on clicking the image. The popup has two buttons one for print the modal content and second to close the modal.
The problem is when the user click print button every thing is ok and modal content will be printed, but when the user click in close button to close the modal after print the content nothing happen the modal doesn't closed. Please help me to fix this.
Here is my code
<div class="single-img">
<div class="container">
<h2 class="title"><span>title</span></h2>
<div class= "container popup">
<ul class="row list-inline">
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="0">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt3.png" alt="" />
</div>
</a>
</div>
</li>
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="1">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt4.png" alt="" />
</div>
</a>
</div>
</li>
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="2">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt5.png" alt="" />
</div>
</a>
</div>
</li>
</ul>
<!--begin modal window-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" title="Close" >X</button>
</div>
<div class="modal-body">
<!--CAROUSEL CODE GOES HERE-->
<!--begin carousel-->
<div id="myGallery" class="carousel slide clearafter" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="C.jpg" alt="item0">
</div>
<div class="item">
<img src="D.jpg" alt="item1">
</div>
<div class="item">
<img src="E.jpg" alt="item2">
</div>
</div>
</div>
<div class="slider-bottom clearafter">
<div class="modal-footer" style=" padding-left: 155px;">
<button class="btn-sm" type="button" data-dismiss="modal" style="float:left;" onclick="printDiv('myGallery')">Print</button>
</div>
<div class="slider-control">
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
<a class="right carousel-control" href="#myGallery" role="button" data-slide="next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv(div) {
var printContents = document.getElementById(div).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>

//add this button to your main html
<button type="button" class="btn btn-default" onclick="javascript:test()" id="myBtn" data-dismis`enter code here`s="modal">Close</button>
//add this script to your main html
function test() {
$('#myModal').modal('toggle');
}
//add this style to your main html
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}

In my case Using bootstrap 4, using setTimeout helped me out.
By using setTimeout function, we hide modal after clicking print button.
function printDiv(div) {
var printContents = document.getElementById(div).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
setTimeout(function(){ $('#myModal').modal('hide'); }, 1000);
}

try this
function printDiv(divName) {
var elem = document.getElementById(divName)
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.style = "width: 100%;";
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}

how to show and scroll automatically a hidden div at bottom of the page?

On a click on the image I have to show a hidden div with effects such as scroll down automatically to the bottom
my code looks like:
$(document).ready(function() {
$('#test').click(function() {
$('.contact-form').toggle("100");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="contact" status="closed">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="contact-nav"></div>
<div class="contact-form-trigger open" id="test">
<img src="<?php echo base_url('assets/images/dugh1.png')?>" class="doug img-resfponsive hidden-xs" alt="Doug the man!">
</div>
</div>
</div>
</div>
<div class="color-div"></div>
<div class="contact-form " style="display: none;">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="address">
<div class="address-div">
<h3>Address</h3>
<h5><?php echo $company[1]->content; ?>
</h5>
<h5>Phone: <?php echo $company[2]->content; ?></h5>
<a href="#">
<?php echo $company[3]->content; ?></a>
</div>
<div class="social-icons">
<h4>follow us</h4>
<ul class="list-inline">
<li><a class="social-icon" href="<?php echo $company[7]->content; ?>"><i class="fa fa-facebook"></i></a>
</li>
<li><a class="social-icon" href="<?php echo $company[8]->content; ?>"><i class="fa fa-twitter"></i></a>
</li>
<li><a class="social-icon" href="<?php echo $company[9]->content; ?>"><i class="fa fa-linkedin"></i></a>
</li>
<li><a class="social-icon" href="<?php echo $company[10]->content; ?>"><i class="fa fa-dribbble"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
By using this script i can show the hidden div but it not scrolling down automatically.Now my need is to make it possible scroll down automatically when clicked on the image dugh1.png to show hidden div. what should I have to done for making that possible. I am very new to java script. Thanking in advance.

you could try doing something like this mate
$(document).ready(function() {
$('#test').click(function() {
$('.contact-form').toggle("100");
$('html, body').animate({
scrollTop: $('footer').offset().top
}, 'slow');
});
});
or check this just customize it to your needs.

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
you can use this snippet

Select an element inside div with multiple elements a same class onmouseover

I have installed Joomla 3 and Im trying select an element from multiple elements with the same class, but when I apply onmouseover event on the element, the function affect all elements with same class, I want the function affect to select element (onmouseover element)
function ocultarDatos() {
var itemk2 = document.querySelectorAll(".encabezado");
for (var i = 0; i < itemk2.length; i++) {
itemk2[i].style.display = "none";
}
}
<span class="catItemImage" onmouseover="ocultarDatos();">
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="height:auto;" />
</a>
<a rel="author" href="<?php echo $this->item->author->link; ?>"><img class="globo" src="<?php echo $this->item->author->avatar; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($this->item->author->name); ?>" >
</a>
</span>
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
<div class="itemContainer itemContainerLast" style="width:12.5%;">
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>

Try using var itemk2 = $(this).find(".encabezado");
instead of var itemk2 = document.querySelectorAll(".encabezado");
This should achieve the effect you are looking for

You need to pass event object in callback. and then you can use that event object to find current object and its child such as element with encabezadoclass in your case.
Try below code.
HTML
<span class="catItemImage" onmouseover="ocultarDatos(event);">
... ...
</span>
JS
function ocultarDatos(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "none";
};
Working Demo:
function ocultarDatos(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "none";
};
function ocultarDatosOther(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "";
};
<div onmouseover="ocultarDatos(event);" onmouseout="ocultarDatosOther(event);">
MouseOver on me.
<span class="encabezado">
and i will hide
</span>
</div>

<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
<div class="itemContainer itemContainerLast" style="width:12.5%;">
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>

I Have fixed it with CSS:
.encabezado { background: white; padding: 0px 15px; display:none; } .itemContainer:hover .encabezado { padding: 0px 15px; display:block; top: 150px; z-index: 100; }
With the effect i was searching for. Thanks for you attention.