I'm experiencing issues with a skip button on this page: https://blacklotusaudio.com/free-downloads/ that hides an offer and presents users with a simple checkout form via popup.
To see the part with issues, add a product to your cart and click the "get my free downloads now" button.
A popup will be shown, with the issue being that the "skip for now, I just want to download the free packs" button just doesn't work.
Well, it does work on Chrome (but not in incognito mode?) but does not work on firefox or safari.
I've tried several different fixes, and I believe I've narrowed the issue down to the .skip-btn not properly hiding and then un-hiding the checkout form.
However, nothing I've tried has resolved the issue so I'm reaching out to the talented folks here. Maybe one of you can figure out what I'm doing wrong.
Here's the code I'm currently using:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('body').on('click', '.skip-btn', function () {
$('.checkout-form-iframe').show();
$('.hide-me').hide();
})
});
});
</script>
<style>
.checkout-form-iframe {
display: none;
}
</style>
If you have any questions, etc. just let me know, I'm happy to answer and discuss.
Cheers!
Related
I'm creating a Chrome extension that does an auto-click function to a button on a ticket sales website using JavaScript.
I want to achieve this:
But when I use the auto-click, this is always what's happening:
Seems the button is just loading nothing to happen. My code is working as it should but I don't know what's happening. This is the auto-click function code:
document.getElementById("clickaddtocartbutton").onclick = function() {
document.getElementsByClassName("form-submit")[0].click();
}
<button id="clickaddtocartbutton">Click Add To Cart Button</button>
Hope you can tell me what's going on and what the other workaround is to achieve the first screenshot.
Here is the website I'm working on: https://tickets.rugbyworldcup.com/en/resale_tonga_romania
Thank you!
Dear community and readers:
programming a small website I have encountered for first time a strange behavior. What I basically do is that I hide the body until page load and then fade it in. Via onClick on a link in the navigation I use redirectPage and the procedure repeats with the target link page. So this works all wonderful but when visiting the site in the browser and using the back button it seems that the pages visited before are not rendering. Latest Google Chrome versions are doing it, Firefox, Safari fail. Strangely own Safari, clicking the back button three times forces the homepage to load again. This happens most of the times but not all time.
Has anyone an idea how I could achieve in my function to force a render anytime the back button is pressed. Might be a silly question but I really never came across this issue. I tried some snippets I found and worked around them my own way. They did not work and I would rather understand the problem than choose pure cosmetics.
Thank you for your input!
// Document on load.
$(function(){
gotToNextSection();
loaderPage();
ScrollNext();
moreProjectSlider();
// Animate
contentWayPoint();
})();
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("body").stop().animate({
opacity: 1
});
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
I'm building a site based on jQuery mobile, with the following script versions.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
I've got an issue with a popup, displayed by the following code.
$(document).on("pagecontainershow", function(){
if(onPgLd==true){
onPgLd=false;
$("#globPageLoad").popup("open");
};
});
The popup opens as I'd expect, but then immediately closes again.
The only other event-triggered code I have is inside a pagecreate block, which I understood completes prior to pagecontainershow.
Is there an event that happens post-pagecontainershow, or is something else happening?
(I even added ' data-dismissible="false" ' to the off-chance it would make a difference. It didn't...)
I've only been able to test the site on Chrome (laptop and mobile).
Any ideas?
after looking at comments below, none the wiser. The fiddle works exactly as I'd want, but I can't see programmatically where it's different to my code - the .enhancewithin() is called during pagecreate, and the pop up looks exactly as I'd hope.
I tried amending the function to this;
$(document).on("pagecontainershow", function(event){
console.log("pagecontainershow");
//event.stopPropagation();
if(onPgLd==true){
onPgLd=false;
$( "#globPageLoad" ).bind({
popupafteropen: function(event) {
event.stopPropagation();
console.log("popupafteropen");
}
});
$("#globPageLoad").popup("open");
console.log("popup open");
};
});
Everything logs in the order I'd expect it to, but the popup still disappears.
Another clue (I think?) is that the url remains suffixed by "#&ui-state=dialog", which makes me think this is a glitch as the popup is not being closed intentionally by jQuery?
I have a bootstrap modal in my web app that keeps being displayed even when I launch myModal.modal('close');. I am pretty stuck with that strange problem.
Approx. one in ten times, I have that display: block; staying after close. The modal is correctly hidden because I can't see it anymore but it is overlaying my entire page and I cannot click on anything.
I tried to handle the close with :
$('#myModal').on('hidden.bs.modal', function () {
$(this).css('display', 'none !important');
})
And this does not work, the modal div is still having style="display: block;"
Try these and let me know if they work.
$('selector').css('z-index', '-999');
$('selector').css('margin-left', '-50000');
$('selector').css('margin-top', '-50000');
My first question is: do you have a custom style sheet where you might be overriding the style for #myModal? If so, work to resolve that.
My second question is: what version of Bootstrap are you using? I have seen a bug logged similar to this back in 2012. If possible, upgrade to the latest version of Bootstrap (3.3.4).
My third question is: what are you clicking to do the close? Is it the close button ( type="button" class="close" ) or is it a button with a data-dismiss="modal" attribute?
If the close button, you could try this as long as you don't have other modals on the page:
$(".close").on( "click", function() {
$("#myModal").hide();
});
This might be worth a shot, too (though, not the recommended approach):
$("#myModal").on("hide",function(){
$("#myModal").css("display", "none");
});
Ultimately, I agree with needing a demo as Amit and Yerko suggest as this seems odd. I have never run across something like this, and I have used bootstrap for a long while.
This questions was already answered here - How to specify javascript to run when ModalPopupExtender is shown - but the accepted solution is not working for me.
The modalpopupextender is declared as below:
<ajaxtoolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btn"
PopupControlID="pnlModal" PopupDragHandleControlID="pnlModalDragHandle" BackgroundCssClass="modalBackground"
CancelControlID="btnModal" DropShadow="true"/>
The showing / hiding works fine. What does not work is linking a client script to the showing event of the modal popup extender. Based on the original question, I tried:
<script type="text/javascript">
function pageLoad() {
var popup = $find('mpe');
popup.add_shown(SetShowing);
}
function SetShowing() {
alert('showing');
}
</script>
Nothing happened. No alert, no errors. Reading further in the original post, I even added this line in the script:
Sys.Application.add_load(pageLoad);
The additional line had no effect. Any ideas why the original answer is not working? Thanks, I have been trying for hours.
I am not familiar with "modalpopupextender",
but why not just use some jquery?
$(document).ready(function(){
if ($('#mpe').is(':visible')){
//code for when MPE is visible here
}
});
jquery documentation
http://jsfiddle.net/N62g5/8/
I ended up having to attack this problem another way. None of the suggestions were able to successfully detect when the modalpopupextender was displayed. I instead changed my approach to handle user actions on the shown elements - like focusing on a textbox, etc. I could be confident the modalpopupextender was displayed if the user was interacting with it.
If you came here, I would direct you to the original post here - How to specify javascript to run when ModalPopupExtender is shown - and hope you were more successful than I was.
Thank you to everyone who commented, I sincerely appreciate your time.