I have the following form:
Whenever the user clicks on 'Don't have a Paypal account?', I want to display another form within the modal.
However, after displaying the hidden DIV and scrolling the modal, the background fade will scroll as well.
My jQuery code:
var cardForm = $('#card-form');
cardForm.hide();
$("#display-card-form").click(function (e) {
cardForm.show();
e.preventDefault();
});
If possible, upgrade from v3.3.2 to v3.3.4. This issue will be resolved.
I attempted an example first in 3.3.4, as that is what I am on. Once you specified you were on 3.3.2, I downgraded and saw your issue. This was a bug they fixed in the latest release (#15881).
Hope this helps.
Related
I dont know a lot about js and jQuery. I bought a WP theme and I want to do a few changes on it.
In this page: https://websitesdevs.com/search-services/
You can see a div with a text saying "Apply Filters" and when you click on it, it opens a popup with all the filters. The thing is that I want a search box, and then a button to open this popup with the filters.. I've been trying it but I can't do it.. I would like to open that popup with any other CSS class. Do you know how can I do it?
I think that the popup opens with this JS & jQuery script
//filter dropdown
jQuery('.mmobile-floating-apply,.wt-mobile-close').on('click', function() {
var _this = jQuery(this);
_this.parents('aside.wt-sidebar').toggleClass('show-mobile-filter');
});
This code is located at workreap_callbacks.js
Thanks for your time, I really need this
As far as I understand your question, you can run this:
$('.mmobile-floating-apply,.wt-mobile-close')
.parents('aside.wt-sidebar')
.toggleClass('show-mobile-filter');
from any place in your code.
on my website I have a mobile menu. When I click a link a link in the menu the menu doesn't disappear.
From reading other posts I have a quite good idea what I have to do. But I don't get the code working, because I am completely new to javascript and probably just do something wrong.
The div I want to hide when clicking a link (in this same div) is defined with a class mobilemenuitems
As I already mentioned the links are within this div.
unfortunately I cannot add a class or an id to the links because I only have frontend access.
The website is here.
https://test.vereinonline.org/HTC_Uhlenhorst/?module=*Tennis Please note that the menu button only appears on mobile devices (width < 1000px)
In this jsfiddle the Problem is scaled down to the root.
http://jsfiddle.net/TheBB23/d6s3Ln50/3/
I am pretty sure that the problem is with the javascript:
document.getElementById(mobilemenuitems a).addEventListener('click', function(e) {
document.getElementById('mobilemenuitems').remove();
});
I believe you are trying to hide the div with class mobilemenuspace when any of the links inside it are clicked. To do so, you can use the following -
$('a').click(function(e){
e.preventDefault();
if ($(this).parents('.mobilemenuspace').length) {
$('.mobilemenuspace').hide();
}
});
Working sample - https://jsfiddle.net/zv18xuhL/
A pure JS solution forked from your Fiddle -
http://jsfiddle.net/e69snqjk/
I apologize if this question is answered somewhere, but I couldn't find it.
I am working on editable javascript grid for MS Dynamics CRM and I am trying to display loading screen when user clicks "Save" button on the grid (the loading spinner should only be covering my grid - which is actually a HTML web resource displayed inside the CRM window). It takes about 2-5 seconds until CRM system saves the data and reloads my grid. So I want to display the loading screen during that time.
I found spin.js http://spin.js.org/ and it seems that it can be easily implemented but I am failing to realize on what event should I display the loading screen?
Basically, I have a table and when user clicks "Save" or "Delete" button, I wish to show that there is something going on under the hood.
Thank you very much for you time and help!
It sounds like you know what you want to call from spin.js, you're just trying to figure out where to call it from. You can try adding this to your javascript, where "#saveButton" and "#deleteButton" are the css identifiers for the buttons you want to fire the script off of.
$("#saveButton").click(function(){
displayLoadingPage();
});
$("#deleteButton").click(function(){
displayLoadingPage();
});
function displayLoadingPage() {
//call your spin.js code here.
}
Let me know if this answers what you were getting at.
I know you have got your answer but I think you can do it using vanilla JS code rather than using a library like spin.js
All you need is :
1) A div which is hidden on page load covering your table with spinner aligned center in it
2) On Save/Delete button click you can just make the div visible.
3) Hide the div again once you receive response from the rest api that saves or delete the data.
Below is the HTML:
<div class="container">
<div id="loading" class="loading" onClick="hideSpinner()">
Loading…
</div>
<input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>
JS Code:
var loadingDiv = document.getElementById('loading');
function showSpinner() {
loadingDiv.style.visibility = 'visible';
}
function hideSpinner() {
loadingDiv.style.visibility = 'hidden';
}
Here is a demo : http://codepen.io/AshutoshD/pen/dMEGqM
Click anywhere on the overlay to close it.
I have used the overlay that #MattIn4D has created here
I have a navigation bar with many links. The problem is that I am not done with all the pages. Is there anyway that I can block my users from clicking on certain links and instead display a little message that notifies them that the content will be coming soon?
Edit: It did not allow me to include bootstrap within the tags--but if a solution includes bootstrap, I am comfortable with it.
Edit 2: I have some jQuery effects on the navigation bar, is there anyway to also disable these effects when the link is clicked?
Put a class to your links which are not ready. For i.e. inactive class. And then in jQuery you can simply do it like below:
$( ".inactive" ).click(function(event) {
alert("This page is coming soon!");
event.preventDefault();
});
You can also use alert for displaying message :
HTML
Link
Link Wroking
JS
$('a.inactive').click(function( event ) {
event.preventDefault();
var yesno = alert("Coming Soon");
});
Add class inactive for showing message. For the link which are working, don't add class inactive.
Here is a fiddle.
Simply, you can use href="#" and alert message onclick:
MenuName
I have created a popup using the lightweight jQuery plugin: bPopup.
I want the popup to appear on page load, and as such have the following code:
<script>
;(function($) {
$(window).load(function(){ //see edit below
$('#popup').bPopup({
opacity: 0.6,
modalClose: true
});
});
})(jQuery);
</script>
the customisation modalClose: true controls weather or not the popup is closed/dismissed on clicking on the popup, or surrounding overlay (see API)
However my popup successfully appears but does not dismiss, either when clicking on overlay OR when clicking on the element with the class that controls dismissal (by default, any element with class 'b-close' will also close the popup.
Any thoughts on where I am going wrong, or how I can find out what aspect is not working? Thanks
EDIT:
As per a suggestion in comments I have altered $(window).load(function(){ to $(document).ready(function(){however my problem persists
Discovered I was using 0.7.1 version of the popup, updated to 0.9.1 and that seems to have resolved the issue. Thanks to those who took a look.