Add magnificPopup to dynamic created element - javascript

I worked with below code it will pop up the content I want
function init_magnificPopup()
{
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
}
$(document).ready(function() {
init_magnificPopup();
});
HTML
<a class="btn btn-primary popup-with-zoom-anim" href="#dialog">dialog popup</a>
<div id="dialog" class="zoom-anim-dialog mfp-hide">
popup content
</div>
Now how can I work with below dynamically created tag with class .popup-with-zoom-anim?
var content_string += '<a class="popup-with-zoom-anim" href="#dialog">dynamic dialog popup</a>';
$( "body" ).html(content_string);

You can also use delegate option:
$('body').magnificPopup({
delegate: 'a.popup-with-zoom-anim',
type: 'inline',
...
});

I find the answer which using .on() method and chaining .magnificPopup('open'); to the end
$("body").on('click', '.popup-with-zoom-anim', function(){
$(this).magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
}).magnificPopup('open');
});

Related

After applying custom scrollbar to jqgrid,sorting is not working

I have applied custome scrollbar to div "ui-jqgrid-bdiv",sorting is not working of jqgrid.Without custom scrollbar sorting is working fine.After applying custom scrollbar,after clicking on column it is giving blank grid.
CODE:-
$(window).load(function(){
$(".FilterContainer,.ui-jqgrid-bdiv").mCustomScrollbar({
scrollButtons:{enable:true},
theme:"light-thick"
});
});
jQuery(gridOption).jqGrid({
data: applyBestMachineData,
datatype: "local",
colNames:[displayName,'', 'kA$','%','kA$','%','kA$','%'],
colModel:[
{name:'machineBestMachine',index:'machineBestMachine',width:350, sortable: false,classes: "machineBestMachinecol"},
{name:'machineValue',index:'machineValue', width:60,sortable: false, classes: "machineValue"},
{name:'applyBestMachineValue',index:'applyBestMachineValue', width:75,sortable: true, classes: "col2",sorttype:"text"},
{name:'applyBestMachinePer',index:'applyBestMachinePer', width:75, align:"center", sortable: true,classes: "col1",sorttype:"text"},
{name:'applyBestMachineOperation',index:'applyBestMachineOperation', width:65, align:"center",sortable: true, classes: "col2",sorttype:"text"},
{name:'applyBestMachineOperationPer',index:'applyBestMachineOperationPer', width:65,align:"right", sortable: false,classes: "col1"},
{name:'applyBothValue',applyBothValue:'applyBothValue', width:65,sortable: false, classes: "col2"},
{name:'applyBothPer',index:'applyBothPer', width:65,sortable: false, classes: "col1"}
],
rowNum:2000,
rowTotal: 2000,
scroll:1,
loadonce:true,
mtype: "GET",
rownumWidth: 40,
gridview: true,
autowidth: true,
height:gridHeight,
//sortable: false,
viewrecords: true,
onSelectRow: function(id) {
var rowData = jQuery(this).getRowData(id);
var machineBestMachineVar = rowData['machineBestMachine'];
var machineBestMachineValue = machineBestMachineVar.split('<');
openEvaluationItemDetailPopUp(machineBestMachineValue[0]);
},
loadComplete: function() {
//alert(this);
$(gridOption+" tr:even").addClass('myAltRowClassEven');
$(gridOption+" tr:odd").addClass('myAltRowClassOdd');
// $("#applyMachineGrid tr:even").addClass('myAltRowClassEven');
// $("#applyMachineGrid tr:odd").addClass('myAltRowClassOdd');
}
});
I got answer:-
Just remove scroll=1 property

How do I attach a JQuery UI dialog to a specific DIV tag?

Is there an easy way to stick jQuery UI dialog to particular div?
Actually, one should be able to drag or resize dialog but dialog should not leave the div.
<script>
var dialogOptions = {
title: "Recent",
closeOnEscape: false,
width:200,
position: {
my: "left top", at:"left+10 top+10", of:".frame"
},
"modal" : false,
"resizable" : true,
"draggable" : true,
appendTo: ".frame"
};
$( "div.dialog" ).dialog(dialogOptions);
</script>
<div class="frame">
<div class="dialog">
</div>
</div>
Pls check http://jsfiddle.net/TLt4b/1/
Try this:-
var dialogOptions = {
title: "Recent",
closeOnEscape: false,
width:200,
position: {
my: "left top", at:"left+10 top+10", of:".frame"
},
"modal" : false,
"resizable" : true,
"draggable" : true,
appendTo: ".frame" };
$( "div.dialog" ).dialog(dialogOptions).parent().resizable({
containment: ".frame"
}).draggable({
containment: ".frame"
})
Demo:http://jsfiddle.net/TLt4b/2/
Try this out:- http://jsfiddle.net/adiioo7/TLt4b/4/
JS:-
var dialogOptions = {
title: "Recent",
closeOnEscape: false,
draggable: false,
width:200,
position: {
my: "left top", at:"left+10 top+10", of:".frame"
},
modal : false,
resizable : true
};
$( "div.dialog" ).dialog(dialogOptions).parent().draggable({ containment: ".frame" });

jqGrid open dialog in front of edit/add dialog

I can achieve the opening of a new dialog, but is opens behind the edit-/add-dailog. How can I make it opening in front of the edit-/add-dialog? If I do the same with an alert-box it works instantially.
<style>
.dialogue{ z-index: 1000; }
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#A').dialog({
autoOpen: false,
buttons: {
"Open Dialog B": function(){
$('#B').dialog('open');
}
}
});
$('#B').dialog({
autoOpen: false
});
jQuery("#list").jqGrid({
sortable: true,
url:'{{=URL('get',args=table)}}',
datatype: 'json',
mtype: 'GET',
colNames:{{=h}},
colModel :{{=b}},
ondblClickRow: function (rowid) {
myClickHandle.call(this, rowid);
},
jsonReader: {
repeatitems: false
},
width: 1024,
height: '100%',
pager: '#gridpager',
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
gridview:true,
caption: '{{=table}}',
editurl:'{{=URL('adu',args=table)}}'
});
jQuery("#list").jqGrid('navGrid','#gridpager',
{edit:true},
{ beforeShowForm: function(form) {
$('.basic').live('click',function() {
$('#A').dialog("open");
});
},
width:500,height:'100%',
reloadAfterSubmit:false,
closeAfterEdit:true}, // edit options
{width:500,height:'100%',
closeAfterAdd:true}, // add options
{reloadAfterSubmit:false,
closeAfterSubmit:true}, // del options
{} // search options
);
jQuery("#list").jqGrid('navButtonAdd','#gridpager',{
caption: "",
title: "Reorder Columns",
onClickButton : function (){
jQuery("#list").jqGrid('columnChooser',{
done: function(perm) {
if (perm) {
var gridWidth = this.jqGrid('getGridParam', 'width');
this.jqGrid('setGridWidth', gridWidth);
this.jqGrid('remapColumns', perm, true);
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: "{{=URL('ps',args=(table,id))}}",
data: $('#list').jqGridExport({
exptype: 'jsonstring',
root: 'Settings'
})
});
}
}
});
}
});
});
</script>
<table id="list"></table>
<div id="gridpager">
</div>
<div title="Dialog A" id="A" class="dialogue">Dialog A</div>
<div title="Dialog B" id="B" class="dialogue">Dialog B</div>
Greets Kluther
Try using the modal option in the dialogues (jsFiddle http://jsfiddle.net/r4meJ/):
$('#A').dialog({
autoOpen: false,
modal: true,
buttons: {
"Open Dialog B": function(){
$('#B').dialog('open');
}
}
});
$('#B').dialog({
autoOpen: false,
modal: true
});
This should provide what you require

Fancybox 2.0.6 close method

i have a problem with close method of fancybox v2.0.6
I have in my page this code.
Aggiungi immagine
<script type="text/javascript">
$(document).ready(function() {
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
afterClose: function() {
$('#imgqueue').load('myurl2')
}
});
});
</script>
When i click on a tag the fancybox popup show mypage, where i have a form; when i submit the form on the popup, i show another form e after, submit it, i will close by this function:
<script type="text/javascript">
parent.$.fancybox.close();
</script>
Note: myurl and myurl2 not are variables but link to my site that i have hidden
And it's ok; but if i click again on a tag the popup show the form but on submit the popup don't close. Why? The code is equal. i Don't understend....
It's a fancybox bug?
Thanks for the answers and sorry for my poor english
use onclosed method for close popup
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
'onClosed' : function () { self.parent.location.reload(); }
}
});

Fancybox 1.3.x ignores width and height parameters

I am using Fancybox 1.3.4 (currently the latest) and I use the following HTML elements:
<a href="LARGE_URL" title="FANCY_CAPTION" rel="gallery" class="gallery-item">
<img src="SMALL_URL"/>
</a>
<a> ... repeat N times... </a>
Then I use the following jQuery code:
<script>
$(document).ready(function() {
$('a.gallery-item').fancybox({
'autoDimensions': 'false',
'width':900,
'height':'auto',
'cyclic': true,
'centerOnScroll': 'false',
'hideOnOverlayClick': true,
'hideOnContentClick': false,
'overlayShow': true,
'overlayOpacity': 0.7,
'overlayColor': '#666',
'titleShow': true,
'titlePosition': 'inside',
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 400,
'speedOut': 200,
'showCloseButton': true,
'showNavArrows': true,
'enableEscapeButton': true
});
});
</script>
I also tried
'width':'900',
or setting both
'width':900,
'height':600,
but it just does not work.
Any solutions to this?
I need the #fancybox-wrapper element in an exact size.
try to remove quotes around false:
'autoDimensions': false

Categories