I hope you are having a nice day.
I am working with the following menu:
The site with which I am working is a Single Page, I need that when clicking any of the buttons that work as anchors to different sections (referenced by ID) they also close this popup. Any idea how to do it? I can work perfectly with JS and jQuery, I know these technologies a lot.
Thanks for reading and giving me your time. I await your responses. Greetings.
I have this working for me:
give the buttons on your popup an additional class of 'close-popup'
add an HMTL widget to your popup with the following
<script>
jQuery( document ).ready( function( $ ) {
$( document ).on( 'click', '.close-popup', function( event ) {
elementorProFrontend.modules.popup.closePopup( {}, event );
} );
} );
</script>
I'd like to be able to claim the credit for this, but it goes to shilo-ey
Related
Current site I am fixing: --> http://newmind.se/lagerbolag-2/
I want to make forms fieldsets generated by the Visual Form Builder separated in to a wizard or paged.
Where you can click your way through without leaving the page (there is a paged feature it seems but I want to learn jQuery: https://www.youtube.com/watch?v=o5wjRDnEg8s) but I want to trigger this on click of a button like a next button would make a certain div style.display:'block' and I figured the easiest way is was adding this functionality was through jQuery but jQuery seems turned off. Call to undefined variable from this piece of code I just added there to test if jQuery worked in the proper section in the Divi theme:
//changing color on the headline on the page
$( ".bengt" ).on( "click", function() {
$( this ).css( "color", "red" );
});
//just putting a message in the console
A $( document ).ready() block.
$jQuery( document ).ready(function() {
console.log( "ready!" );
});
Neither of these triggered within the divitheme even though jQuery library is included in the theme. Instead I got an error message Uncaught ReferenceError. Seems like the Divi-theme doesn't want me as a user to tamper with the jQuery..
Remove $ sign from $jQuery and try this code, your Jquery library is loaded you are not calling it properly
//just putting a message in the console
jQuery( document ).ready(function() {
console.log( "ready!" );
});
I'm trying to copy text to clipboard by using ZeroClipboard. It works good, but only in the second click on the button and not in the first click. I saw few solutions in Google but none of them fixed my problem.
I tried to put the ZeroClipboard events outside of the click button event, and also to put it inside the $(document).ready(function() and all of this didn't help.
Can you please help me solve this problem?
Thanks!
$("body").on('click','.copyToClipboard', function (event) {
var clientTarget = new ZeroClipboard( $("#copy_to_clipboard"), {
moviePath: "js/ZeroClipboard.swf",
debug: false
} );
$('#copy_to_clipboard').attr('data-clipboard-text', texttocopy);
alert(texttocopy);
clientTarget.on( "load", function(clientTarget)
{
$('#flash-loaded').fadeIn();
clientTarget.on( "complete", function(clientTarget, args) {
clientTarget.setText( args.text );
$('#data-to-copy-text').fadeIn();
} );
alert(args);
} );
});
I think you need to set up the zero clipboard before you click on it. In your code, you're not setting it up to handle clicks until you actually click on it. You should find all the objects on the page that need to handle clicks and set them up on document ready. something like this:
$(function () {
$('.copyToClipboard').zclip({ /* zclip settings */ });
});
i'm working on a single-page-application. I need the pagecontainerbeforechange event from jQuery-Mobile because i want to check if my site-wrapper has the class "show-nav". When the site-wrapper has this class, the site-menu is opened up and the content moves 350px to the left. So if the user now clicks on register, and before he has the site-menu opened up, my register page is moved away and there is no possiblity to get it back because there is no site-menu on the registerpage.
First i tried to use the pagecontainerload event till i saw that it is deprecated. Then i changed it to the pagecontainerloadbeforechange event but i cant get it work.
The page i want to check for the class ".show-nav" has the id #registration
So, the user is on the main site, he clicks on "register" and before the page changes the class ".show-nav" should be removed. The function for removing the class is already set up, but i don't know how to call it the right way.
function toggleNav() {
if ($('.site-wrapper').hasClass('show-nav')) {
// Do things on Nav Close
$('.site-wrapper').removeClass('show-nav');
}
More detailed Description ->
While i wrote this detailed Description i got the solution and it is so simple that it is embarrassing for me: Removed the site-wrapper from the site #registration...thats all.
Thanks for your help and thanks for you edit omar!
You can add toggleClass to .site-wrapper. If it has the class .show-nav it will remove it, otherwise it will add the class :)
$('.site-wrapper').toggleClass('show-nav');
pagecontainerbeforechange is part of Pagecontainer Widget.
At this moment (jqm 1.4.x) this widget is designed as a singlton, binded to body element. So if you want to detect page change you should use the code above:
$( "body" ).on( "pagecontainerbeforechange", function( event, ui ) {
console.log(event);
console.log(ui);
} );
This situation have been post a lot in there but I didn't find the best way to solve my problem. Please help me this.
enter code here
Link
I want to make the button to open/hide the table content. I used slideToggle() in JQuery and next() to cacth the table content.In jsfiddle you can see. My code is worked.
But it just on the Click to SHOW/HIDE (worked) the Click to SHOW/HIDE (not work) is the MAIN button which I want to make (BECAUSE THE DESIGN). But when I put the button in there, it didn't work anymore. How can I solve this. Please help !
check this demo, if you are expecting the same thing
DEMO
$( "#clickme" ).click(function() {
$( "#toggleMe" ).toggle( "slow", function() {
// Animation complete.
});
});
I'm working on a web app that uses jQueryUI and creates a ton of dialogs. The dialogs are all different, and the button to close the dialog can end up embedded several div's into the dialog.
I'd like a function that always closes the containing dialog.
Take for example the following html:
<div id="demoDialog">
<div>
<div id='demoDialogSubmit'>
<input type='submit' onClick='selfCloseDialog();' value='Ok' style='margin-top:10px' />
</div>
<div>
<div>
Somewhere in my js code I initialized this as a dialog:
$( "#demoDialog" ).dialog( params );
Now for the on-click I have a few not so great choices. I could insist on the close button knowing the id of the dialog. E.g. do something like:
onclick="$( '#demoDialog' ).dialog( 'close' );"
But I'd rather have generic code instead of always having to carry around the id of the dialog so I can send it to a widget that may close it.
Or I can remember how many layers down I am:
function selfCloseDialog() { $(this).parent().dialog( 'close' ); }
But really I want selfCloseDialog() to just hunt up the layers of elements looking for the dialog object to close. How do I do this?
#Update:
So i got it working. Thanks everyone for their suggestions the problem actually had two issues.
First one problem was here:
<input type='submit' onClick='selfCloseDialog();' value='Ok'/>
It should be:
<input type='submit' onClick='selfCloseDialog(this);' value='Ok'/>
The button element is not passed in as the "this" argument to the function. Which seems obvious now.
And the following direct method JAAulde below works and seems the cleanest:
function selfCloseDialog( caller ) {
$(caller).closest( ".ui-dialog-content" ).dialog('close');
}
There were several answers involving closest and a selector- but I don't see any reason to use anything except the plain class selector he suggests.
When making your dialog, include a close button:
var params = {
//whatever you already had in there
buttons: {
// In the buttons object, the "key" will be the button text, the function
// will be executed on click of the button in scope of the dialoged element
Close: function () {
$(this).dialog('close');
}
}
};
$( "#demoDialog" ).dialog( params );
And from code running in scope of ANY descendant element of the dialoged element, run:
$(this).closest('.ui-dialog-content').dialog('close');
Not sure if I'm exactly understanding what you're asking, but it seems the easiest way would be to add a standard class to all your dialogs, and then have code like:
$(this).closest('.dialog-class').dialog('close');
closest() is defined here:
http://api.jquery.com/closest/
*updated to reflect the ajax part of the dialog. *updated to reflect comments
<div id="soemthing.random.ui.dialog.makes">
.... your content....
<a class='custom-close' href="#Close">Custom Close</a>
....
</div>
$(function(){
$("your selector").dialog();
var selector = ":ui-dialog";
//developers choice. ".ui-dialog-content" is faster, ":ui-dialog" is guaranteed
$(selector ).on({
"click":function(event){
event.preventDefault();
$(this).closest(selector).dialog("close");
}
},"a.custom-close",null);
})
I'd suggest using a class instead of writing inline function calls, but that's up to you.
Here's my hackish solution with event delegation where clicking an element with the selfclose class will close the ancestor dialog:
$(document).on('click', '.selfclose', function() {
$(this).parents().each(function() {
try {
$(this).dialog('close');
} catch(e) {}
});
});
Fiddle
But as DefyGravity mentioned, using the :ui-dialog selector is a much cleaner solution:
$(document).on('click', '.selfclose', function() {
$(this).closest(":ui-dialog").dialog("close");
});
Fiddle
check this:
http://jsfiddle.net/Wqh4Y/3/
function closeParentDialog(closeButton)
{
closeButton.parents('.ui-dialog').eq(0).find('a.ui-dialog-titlebar-close').eq(0).click();
}
$(function() {
$( "#dialog" ).dialog();
});
you can use it like this:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
<span> <a class="close-dialog" onclick="closeParentDialog($(this))">selfclose</a> </span>
</p>
</div>