Although I am quickly learning JS I have a problem i can't figure out. I have a modal which is in a <div> and a <div> that contains an image and product name, when I hover over this <div> I get a hover icon which is an <a>. When I click on the <div> with the image in it a modal pops up - this works brilliantly. But When I click the <a> the modal pops up and then you are taken to the link. I don't want the modal to appear when you click the overlaying <a>.
Here's my HTML for the Modal:
<div class="modal myModal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<?php echo $this->stripTags($_product->getName(), null, true) ?>
<div class="popup-image-container">
<img id="popup-image" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?>" srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?> 1x, <?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize * 2); ?> 2x"
width="75%" height="75%"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
/></div>
<div class="popup-buttons ">
<button type="button" title="<?php echo $this->__('View Detail') ?>" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check" onclick="setLocation('<?php echo $_product->getProductUrl() ?>')"><span><span><?php echo $this->__('More Detail') ?></span></span></button>
<button type="button" title="<?php echo $this->__('Visit Store') ?>" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check"onclick="window.open('<?php echo $_helper->productAttribute($_product, $_product->getAdvertiserBuyLink(), 'advertiser_buy_link') ?>', '_blank');"<span><span><?php echo $this->__('Goto Store') ?></span></span></button></p>
</div>
</div>
</div>
and for the Product
<div class="prolabel-wrapper">
<?php echo Mage::helper('prolabels')->getLabel($_product, 'category'); ?>
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?>"
srcset="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize); ?> 1x, <?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame($_imageKeepFrame)->resize($_gridImageSize * 2); ?> 2x"
width="<?php echo $_gridImageSize ?>" height="<?php echo $_gridImageSize ?>"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
/>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li class="li-wishlist"><a rel="nofollow" id="wishlist" href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist" title="<?php echo $this->__('Add to Wishlist') ?>" onclick="return false;"><i class="fa fa-heart" aria-hidden="true"></i></a></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li class="li-compare"><a rel="nofollow" href="<?php echo $_compareUrl ?>" class="link-compare" title="<?php echo $this->__('Add to Compare') ?>"><i class="fa fa-plus" aria-hidden="true"></i></a></li>
<?php endif; ?>
</ul>
</div>
Here is the JS that I created:
var modals = document.getElementsByClassName("modal");
// Get the button that opens the modal
var btns = document.getElementsByClassName("prolabel-wrapper");
var spans=document.getElementsByClassName("close");
var wishlist=document.getElementsByClassName("link-wishlist");
var showPopup = true;
// Get the modal
window.onload = function(){
for(let i=0;i<wishlist.length;i++) {
wishlist[i].onclick = function() {
var showPopup = false;
alert("Here - showPopup is " + showPopup);
modals[i].style.display = "none";
return false;
}
}
alert("Here2 - showPopup is " + showPopup);
if (showPopup){
alert ("Still getting called" + showPopup);
for(let i=0;i<btns.length && showPopup;i++) {
btns[i].onclick = function() {
modals[i].style.display = "block";
}
}
for(let i=0;i<spans.length && showPopup;i++){
spans[i].onclick = function() {
modals[i].style.display = "none";
}
}
}}
I can get the alert("Here - showPopup is " + showPopup); to popup and then the return false cancels out the link, but the modal still show, please can anyone point me in the right direction?
Thanks
Chris
Inside the first for loop you are trying to set the global variable showPopup to false but, instead, you are declaring a new one.
Try replacing:
var showPopup = false;
by:
showPopup = false;
Related
I want to move document.getElementById("b") checked in a loop.Is it possible? How can I make it happen?
<img class="img-responsive pic" id="picture" src="images/step1.png">
<?php
//get rows query
$query = $db->query("SELECT * FROM `template_design` WHERE `panel` = 'front'");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$im_id = $row['id'];
$images = "images/" .$row['image']. "";
?>
<div class="col-md-4 col-sm-4 wel-grid wow fadeInDown">
<div class="wel11">
<input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="front" onClick="changeSrc(<?php echo $im_id; ?>)">
<label for="<?php echo 'radio_'.$im_id; ?>" style="font-size:12px; cursor: pointer;">
<img id="<?php echo 'picture_'.$im_id; ?>" style="border: 1px solid #ccc;" class="img-responsive" src="<?php echo $images; ?>"></label>
</div>
</div>
<?php } } ?>
<script type="text/javascript">
function changeSrc(id) {
if (document.getElementById("radio_"+id).checked) {
document.getElementById("picture_"+id).src = "images/Ppicture3.png";
}
}
</script>
I want to repeat it in a loop ,as fradio0 i.e $front will increment, JavaScript also repeat in a loop to match each.
You can pass parameters with your id for example:
<input type="radio" id="<?php echo 'radio_'.$im_id; ?>" name="<?php echo $fname; ?>" onClick="changeSrc(<?php echo $im_id; ?>)">
and use it on script like
<script type="text/javascript">
function changeSrc(id) {
if (document.getElementById("radio_"+id).checked) {
}
}
</script>
Please try this. Pass radio id as attr id & save each images by respective id's, followed by respective id.png. Also remove onclick function from your html code.
<script type="text/javascript">
$("input:radio[name=front]").click(function() {
var id= $(this).attr('id');
document.getElementById("picture").src = "panel/front/" + id + ".png";
});
</script>
I used lightgallery for my photo albums. The problem is when clicking the photo the popup opens but it is trying to get the tagged text in the photo album. How can i block it ?
<div class="lightgallery">
<a href="<?php echo HTTP_RESIM.'products/'.$product['image']; ?>">
<img src="<?php echo HTTP_RESIM.'products/'.$product['image']; ?>" ></a>
<h5><?php echo $product['name']; ?></h5>
<?php
$query = "SELECT * FROM product_image WHERE product_id = '".$product['id']."' AND status = '1' ORDER BY sort_order";
$productImages = mysql_query($query);
while($productImage = mysql_fetch_array($productImages)){
?>
<a href="<?php echo HTTP_RESIM.'product_image/'.$productImage['image']; ?>">
<img src="<?php echo HTTP_RESIM.'product_image/'.$productImage['image']; ?>" >
</a>
<?php
}
?>
</div>
<?php } ?>
<script type="text/javascript">
$(document).ready(function() {
$(".lightgallery").lightGallery();
});
</script>
I'm trying to just add an .active class to a sidebar div when it is on that page.
You can see the example here: http://nsiprojects.voodoodev3.co.uk/?page_id=193 which is literally only highlighting the first div as opposed to the active div.
<div class="mezzanine-sub">
<?php
$childpages = query_posts('orderby=menu_order&order=asc&post_type=page&post_parent=35');
if($childpages) { /* display the children content */
foreach ($childpages as $post) :
setup_postdata($post) ?>
<script type="text/javascript">
$(function() {
var current = location.pathname;
$('.mezzanine-sub a').each(function() {
var $this = $(this);
// if the current path is like this link, make it active
if ($this.attr('href').indexOf(current) !== -1) {
$this.addClass('active');
}
})
})
</script>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="mezzanine-sub-title">
<span><?php the_title(); ?></span>
<a>
<!-- post thumbnail -->
<?php
global $post; ?>
<?php
$src = wp_get_attachment_image_src(get_post_thumbnail_id($post -> ID), array(5600, 1000), false, '');
?>
<div class="mezzanine-sub-image" style="background: url(<?php echo $src[0]; ?> );border:<?php the_field('border'); ?>;"></div>
<!-- /post thumbnail -->
<!-- post title -->
<?php
endforeach;
} ?>
</div>
No need to use any jQuery/JavaScript code.
You can apply active class by comparing the page_id that exists as query string.
<div class="mezzanine-sub">
<?php
$childpages = query_posts('orderby=menu_order&order=asc&post_type=page&post_parent=35');
if ($childpages)
{
// Display the children content
foreach ($childpages as $post)
{
setup_postdata($post)
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="mezzanine-sub-title <?php echo!empty($_GET['page_id']) && $_GET['page_id'] == $post->ID ? "active" : NULL ?>">
<span><?php the_title(); ?></span>
<a>
<?php
global $post;
$src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(5600, 1000), false, '');
?>
<div class="mezzanine-sub-image" style="background: url(<?php echo $src[0]; ?> );border:<?php the_field('border'); ?>;">
</div>
</a>
</a>
<?php
}
}
?>
</div>
i want to remove item from minicart but using custom jquery ui popup. here is the default code
template/checkout/cart/minicart/default.phtml
<?php if (!$this->isOnCheckoutPage()): ?>
<a href="<?php echo $this->getAjaxDeleteUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>"
data-confirm="<?php echo $this->__('Are you sure you would like to remove this item from the shopping cart?') ?>"
class="remove">
<?php echo $this->__('Remove Item') ?>
</a>
<?php else: ?>
<span><?php echo $this->__('Remove Item') ?></span>
<?php endif; ?>
<?php endif ?>
This works fine.but i want custom popup instead of default alert. so i used jquery popup.
<div id="dialog123" title="Confirmation Required">
Are you sure you would like to remove this item from the shopping cart?
</div>
<a href="<?php echo $this->getAjaxDeleteUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>" class="remove-this-item">
<?php echo $this->__('Remove Item') ?>
</a>
<script type="text/javascript">
var $x=jQuery.noConflict();
$x(document).ready(function() {
$x("#dialog123").dialog({
autoOpen: false,
modal: true
});
});
$x(".remove-this-item").click(function(e) {
e.preventDefault();
var targetUrl = $x(this).attr("href");
$x("#dialog123").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$x(this).dialog("close");
}
}
});
$x("#dialog123").dialog("open");
});
</script>
using this popup only, i have to perform ajax delete operation. above code redirects to next page when confirmed YES.
Hi guys really need some help on this issue. I've searched all over but cant find any solution.
Using http://www.starplugins.com/cloudzoom/quickstart to add hover zoom feature on single product page. Rollover on first product thumbnail shows the same image. However on second or subsequent rollover of other images the rollover image is always the 1st image.
Media.phtml
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$_nativeZoom = false;
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<?php /* <h2><?php echo $this->__('More Views') ?></h2> */ ?>
<?php
$galleryImages = $this->getGalleryImages();
$numGalleryImages = count($galleryImages);
$i = 0;
foreach ($galleryImages as $_image): $i++; ?>
<div class="<?php
if($i == 1) {
echo 'first';
}
if($i == $numGalleryImages) {
echo 'last';
}
?>">
<a href="#" data-large-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"
title="<?php echo $_product->getName();?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(124); ?>"
alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div id="main-image">
<?php
$_img = '<img class="cloudzoom" id="main-product-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(450).'" data-cloudzoom="zoomImage: \''.$this->helper('catalog/image')->init($_product, 'image').'\'" alt="'.$this->escapeHtml($_product->getImageLabel()).'" title="'.$this->escapeHtml($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</div>
<script type="text/javascript">
jQuery('.more-views a').click(function(){
jQuery('#main-product-image').attr('src', jQuery(this).attr('data-large-image'));
return false;
});
</script>
jquery initialize script
jQuery(document).ready(function($) {
if (jQuery('.catalog-product-view').length) {
if (window.location.hash == '#_reviews') {
//add scroll to down to product reviews list when pagination is used
jQuery.scrollTo(jQuery('#reviews'), {duration: 1000, interrupt: true});
}
//cloudzoom configuration http://www.starplugins.com/cloudzoom/quickstart
$('#main-product-image').CloudZoom({
tintColor: '#6e4d56',
tintOpacity: 0.43,
zoomSizeMode: 'image',
autoInside: 1000
});
}
});