In my application I have used EditLive Editor. When I try to open a popup on the same page where edtor is present it gets hidden behind it. Could anyone please help me how can i get my jquery dialog over the eitor.
Thanks
Try give a heigher z-index to jQuery dialog.
Code examples
//Initialize a dialog with the zIndex option specified.
$( ".selector" ).dialog({ zIndex: 3999 });
//Get or set the zIndex option, after init.
//getter
var zIndex = $( ".selector" ).dialog( "option", "zIndex" );
//setter
$( ".selector" ).dialog( "option", "zIndex", 3999 );
The issue you are dealing with is tied to how browsers and applets coexist. In general the applet ignores z-index and always appears on top - this is not an EditLive issue but an issue with applets in general.
EditLive in specific has an API to address this called setBackgroundMode
EditLive 8: http://docs.ephox.com/display/public/EditLive/setBackgroundMode+Method
EditLive 6/7: http://docs.ephox.com/display/EditLive7/setBackgroundMode+Function
Note that you should wait for the callback to fire before performing other actions (e.g. displaying AJAX lightboxes)
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 am trying to build an application. I want to allow users to create their own menu (with submenus also). I want to make this with JavaScript to be "live" (something like: to click add a button and then drag and drop to order etc).
Do you think is there any jQuery/JavaScript/etc menu builder already for download?
I have tried to search menu builder javascript/jquery but I only found online menu builders (not to download).
Any type of code is accepted (related to js) - jquery, js, mootools etc
Thanks a lot!!! If the question isn't asked in the right place I will delete.
Edit: I don't need custom styles like "select a design for menu". It only needs t generate HTML <ul> and <li>
Try using jQuery UI alongside with jQuery (you must put jQuery UI script after jQuery and you must include a CSS theme e.g UI lightness). Start off with a <ul> and give it an ID (e.g #menu). Put all the base <li>s inside of it with the default values and the drag-and-drop <ul>s in a different element, e.g #items. Then in your script file, put:
$(function() {
$( "#menu" ).menu();
});
This will turn the ul into a menu. Now you want to make the items drag-and-droppable. In the same function, add this underneath $( "menu" ).menu();:
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
This will let you sort the menu items. To let you move them from place to place, add this to your function underneath ...disableSelection();:
$( "li" ).draggable();
$( "#menu li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#items" );
}
});
$( "#items li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#menu" );
}
});
I have a table that you can select rows and edit fields with from a dialog. These table rows typically have an icon for drag and drop capability, as well as an icon for attachments. The issue is that when you edit the text from the dialog, the icons clear regardless of whether I use .html() or .text(). I believe using a form of .content() is viable, but I'm not sure how to go about it. I've tried to avoid clearing the images with .not() with no luck. Any ideas? Thanks in advance. http://jsfiddle.net/BWCBX/11/
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#name").val());
properties.eq(1).html($("#perm").val());
});
With what you have you can just replace the text like this:
$(".saveBtn").click(function () {
properties.get(0).firstChild.nextSibling.nodeValue = $("#name").val();
properties.eq(1).text($("#perm").val());
$(".prop").dialog("close");
});
Fiddle
But it would be better to wrap your text in another element, and set the value for it for better operation.
you can use .content() like this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents()[1].textContent=$("#name").val();
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/19/
Edit
if you need the code to work on IE lower than 9 you can do this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents().eq(1).wrap("<span></span>").parent().html($("#name").val());
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/20/
I have no idea if I'm doing this right but I'm trying to make it so when the delete Button is clicked a Dialog in my jQuery UI comes up
try adding:
$( this ).dialog( "close" );
on the close
I have a jQueryUI dialog box that loads its content the moment someone opens it using the "open" event to initiate the $('#dialogDiv').load() call.
Works great except the dialog box grows extremely tall if there's a lot of content being loaded. What I want is to limit the height. The maxHeight jQueryUI dialog option would seem to work perfect, except it only takes effect the moment you resize. The initial load will grow the dialog really tall and then when you try and resize, it immediately shrinks to the maxHeight.
How can I make a dynamically loading dialog box that won't grow beyond a certain height?
Adding the CSS position:absolute;overflow:hidden for class .ui-dialog will fix the problem.
Use height option while initalization...
for eg-
<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
here you can see "height:140"
this defines that the dilog will be of only that size, no matter how much data is inside..
for more detais about the events,options,methods download(from here), extract and check out the
jquery-ui-1.8.5.custom > development-bundle > docs > dialog.html