I'm using ajaxify for some add to cart funcionality of my shopify collection page.
All works fine however I need to hide a div once the item has been added to cart and display another.
The Html looks something like this
<div class=“col-add-to-cart”>
<div class="col-add-btn-container">
<button type="submit" name="add" class="add-to-cart-main" data-add-to-cart="">
<span data-add-to-cart-text="">Add to cart</span>
</button>
<p class="ajaxified-cart-feedback success" style=""><i class="fa fa-check"></i> Added to cart! <a href="/cart">View
cart</a> or continue shopping.</p>
</div>
<div class="col-container">
<div class="col-add">
<div class="expand-icon expanded">
</div>
<div class="checkmark">
</div>
</div>
</div>
</div>
And the relevant JS
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
_showFeedback('success', '<i class="fa fa-check"></i> Added to cart! View cart or continue shopping.', $addToCartForm);
window.setTimeout(function () {
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
$('.col-add-to-cart').find('.expand-icon.expanded').css("display", "none");
$('.col-add-to-cart').find('.checkmark').css("display", "block");
_setText($addToCartBtn, _config.addToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
So as you can see I'm setting the checkmark to display: block and hide the expand-icon.expanded.
This works for the expand-icon as only one on the page has the .expanded class, however it shows all the .checkmark divs for each product. I only need it to display for the checkmark within the same container div as the .ajaxified-cart-feedback .success div. I've tried to do that with the col-add-to-cart container but doesn't seem to work.
You need to limit your query to a certain scope. From the info you provided I can't tell for sure what is happening, but you could try replacing $('.col-add-to-cart') with $addToCartBtn.closest('.col-add-to-cart')
The first one will select every element on the page with that class, causing the effect you observed. The second will start from $addToCartBtn (which I am assuming is a single element, in the context you need), find its closest parent with 'col-add-to-cart', then allowing you to "find" within the right context.
You could also try starting the query from $addToCartForm. It is not clear which element it refers to, but if it works for _showFeedback, it might work for your case too. That would look like this: $addToCartForm.find('.checkmark').css("display", "block");
Related
I am trying to have the div and its children show in modal/popup while still remaining in their original DOM positions. I am unable to move the div, or its contents, around in the DOM because of some javascript that requires extensive tree traversal when a checkbox is clicked inside of the parent div. We are using bootstrap modals in the project, so a solution that allows me to use a modal would be ideal.
*I know I can achieve this with custom CSS, but I would like to know if there is a cleaner way (Example: $('div').modal('show')), rather than me faking a modal/popup
<!--datagrid-fields is what I am trying it make into a modal/popup-->
<!--getSelect() just returns an HTML checkbox list-->
<li id="gridCheckboxesEntryInfo" class="threeColumns">
<input type="checkbox" onClick="selectAllFields(this)"> Select All<br>
<a class="btn btn-primary reorderFields" data-toggle="modal" data-target="#reorderModal">Reorder Fields</a>
<a class="btn btn-success selectFields">Select Fields</a>
<div style="display:inline-block;margin-left: 5%;"><h3 style="display:inline-block;font-size: 18px">Scroll Down to View Fields</h3><div class="arrow bounce"><a class="arrow bounce"><i class="fa fa-arrow-down fa-2x"></i></a></div></div>
<div id="datagrid-fields">
<?=getSelect($fieldsbysetwithwidget, $fieldsindb, 'checkboxes');?>
</div>
</li>
You can clone a div before making a popup of it.
$('#datagrid-fields').clone().modal('show')
Note, you need to clean up some attributes like id if it is used somewhere else. In addition you have to remove modal div on close:
$cloned.on('hidden.bs.modal', function () { $cloned.remove() });
You probably need to wrap cloned contents with modal wrapping div like
$cloned.wrap('<div class="modal ..."></div>');
So the final version is
var $cloned = $('#datagrid-fields').clone();
$cloned.wrap('<div class="modal ..."></div>');
var $modal = $cloned.parent();
$modal.on('hidden.bs.modal', function () { $modal.remove() });
$modal.modal('show');
I have 2 button like links, which toggle the class "active" for their respective 'arrowbox' divs. here is the html for that:
<span class="ct"><a class="fa fa-shopping-cart"><sup id="itm_count">31</sup></a></span>
<div class="cart">
hello world
</div>
<span class="ai"><a class="fa fa-plus"></a></span>
<div class="arrow_box">
<a style="margin-top: 5px;" onclick="new_dis()">Add distributor</a>
</div>
both the arrow-box and cart divs have display property set to none, but when I click the buttons 'ct' or 'ai' they appear on screen with following jquery:
$(".ai").click(function () {
$(".arrow_box").toggleClass("active");
$(".cart").RemoveClass("active");
});
$(".ct").click(function () {
$(".cart").toggleClass("active");
$(".arrow_box").RemoveClass("active");
});
the problem here is when one div is active ('cart' or 'arrow_box') and I click on the other button, the previous active div should not display on the screen, but it is.. how do I solve it?
also here is the fiddle to better understand the problem
thanks
your code is correct but there is a little problem you wrote RemoveClass but the actual function is removeClass. here is the example :-
$(".cart").removeClass("active");
$(".arrow_box").removeClass("active");
I'm trying to create a demonstration type of thing in my page.
basically the first element is showing on the page load and the rest are hidden.
once the close button inside the element has been clicked, I need this showing element to hide and the next element with the same class name to show and the same process until there is no more element in the next() to show.
my html looks like this:
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
And my jquery looks like this:
$('.cls').click(function() {
$('.bubs').hide();
$(".bubs").next().show();
});
My simple code will hide .bubs that is showing but it doesn't show the next .bubs
Could someone please advise on this issue?
Thanks in advance.
.bubs are not siblings. Go to ancestor a and then find .bubs in next a like following.
$('.cls').click(function () {
$(this).closest('.bubs').hide();
$(this).closest('a').next('a').find('.bubs').show();
});
The JQuery method "next" should contain the class of the next element you want to show.It should work if you use next(".bubs") like this :
$('.cls').click(function() {
$('.bubs:first').hide();
$(".bubs:first").next(".bubs").show();
});
Note : I assume that the element you want to hide is the first one who has "bubs" class.
i have bootstrap Modal . and i have 3 images on it . what i want that when i click on any of this images change HTML of div.text , but its change all the div that take .text class i need change the html of the current div that i opened the modal . any help !!
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test111</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test2222</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test3333</div>
</div>
</div>
Jquery :
$("#img1").click(function(){
$(".text").html("Its woking")
});
I just made a Bootply with following code:
$("a[data-toggle='modal']").click(function(){
$("a[data-toggle='modal']").removeClass("active");
$(this).addClass("active");
});
$("#myModal img").click(function(){
$("a.active").next(".text").html("Its working");
});
When a Modal link is clicked, it sets the class active to the link that opened the modal. When an image in the modal is clicked, the text that should be changed can be identified as it's the text next to the active link.
The only adjustment of your markup was to add some example content inside the anchor tag - <a data-toggle="modal" data-target="#myModal">Modal</a> instead of <a data-toggle="modal" data-target="#myModal"></a>, otherwise it wouldn't be possible (at least for this example) to open the modal.
Just in case - the bootply already wraps the code in a $(document).ready(), so the above code has to be wrapped in
$(document).ready(function() {
// above code here
});
in order to work.
Update: As mentioned as comment, above approach doesn't work for the original markup because there the div with the class text is not next to the link, but there are other divs between them.
I've adjusted this in another Bootply with following code change:
$("#myModal img").click(function(){
$("a.active").closest(".Widget").find(".text").html("Its working");
});
When the image is clicked, closest() selects the closest parent of the active link and find() selects the child element with the class text.
Depending on the actual markup it's also possible to select closest(".press") instead of closest(".Widget") (both will work for this example), it's only necessary to select a parent container of the link and the text.
Because Bootply was sometimes down when I made these changes, I've added this also in a Fiddle without bootstrap, just as example for the functionality.
For reference: http://api.jquery.com/closest/
can not see where $('#img1') in the code your provided. But I guess what you need is $(this), something like:
$('.imgs').click(function(){
$(this).html()....
});
Via firebug or chrome I could look into the code of the Fb-Like button. I would like to send a click from another place which is a nicer button.
Nothing to do with a scam or anything like that. I would like my good looking icon to be presented and if so it will send that click to the Fb-Like box
This is the jQuery I tried (via square area on the image of my background as trigger):
$('.fbCustomMadeImageMap').click(function () {
// alert("mapFB");
$(".fb-like").find(".pluginButton button").click();
});
Now I have tested the square area to work on a click event and then I put the faceBook - jQuery find function though could not get hold of the correct element which I am supposed to send that click to..
This is the HTML of Fb-like box
What is the right refference for that element . in order to send it a click ?
RE-Edited
I have 2 sections of Like box... and this is the correct one i was reffering to
<div class="pluginConnectButton"><div class="pluginButton pluginButtonSmall pluginButtonInline pluginConnectButtonDisconnected hidden_elem" title="">
<div>
<button type="submit">
<i class="pluginButtonIcon img sp_like sx_like_fav"> </i>אהבתי
</button>
</div>
</div>
<div class="pluginButton pluginButtonSmall pluginButtonPressed pluginButtonInline pluginButtonX pluginConnectButtonConnected" title="">
<div>
<button type="submit">
<i class="pluginButtonIcon pluginButtonXOff img sp_like sx_like_ch"></i>
<i class="pluginButtonIcon pluginButtonXOn img sp_like sx_like_x" title=""></i>
</button>
</div>
</div>
</div>