nyroModal - how to configure the width and height of the modal box - javascript

I am trying to controll the width and height of the modal window, but I have no idea how to override the default settings.
I've been looking at the nmObject (http://nyromodal.nyrodev.com/), but my javascript knowledge is not that great and I have no idea what the correct way to implement this is.
Here is my attempt, but with a syntax error:
$.nmObj( sizes: { initW: 300, initH: 300 });
What am I doing wrong? :\
EDIT:
$(function() {
$('.nyroModal').nyroModal();
$.nmObj({sizes: { initW: 300, initH: 300 }});
});
No syntax errors atleast, but I don't think im using the function correctly

try:
$.nmObj({sizes: { initW: 300, initH: 300 }});
Hope it helps.

Looks like you're using nyroModal v2. For an iframe, you need to set the initial size in the CSS:
.nyroModalCont iframe {
width: 300px;
height: 300px;
}
There's a github issue for this, which is closed, so I think that's how it will work in this version.
Ivailo's answer applies to nyroModal v1, I believe.

Another way of doing it.
<script type="text/javascript">
$(document).ready(function() {
$.nyroModalSettings({
type: 'iframe',
height: 500,
width: 700,
resizable: true,
autoSizable: true,
titleFromIframe: true,
// modal: true,
// selIndicator: '#loading',
contentLoading: "" // use our own
});
$('a.nyroModalPhotos').nyroModal();
});
</script>

For this filter
.* Iframe filter
.* Before: filters.formFile
Locate in min.js the file is part of a string
load: function (nm) { nm.store.iframe = $('<iframe />').attr({ src: 'javascript:\'\';', id: 'nyromodal-iframe-' + (new Date().getTime()), frameborder: '0' })
and add
.css({ height: nm.sizes.h })
the result should be
load: function (nm) { nm.store.iframe = $('<iframe />').attr({ src: 'javascript:\'\';', id: 'nyromodal-iframe-' + (new Date().getTime()), frameborder: '0' }).css({ height: nm.sizes.h })

Related

Fancybox aling isn´t work on Firefox

I'm using Fancybox to show a iframe when a page load, but, the vertical aligment in Firefox and Chrome doesn't show fine, and IE work perfect. The code is this:
<script type="text/javascript">
$.fancybox.open([
{
type : 'iframe',
href : 'http://www.example.org/online/index.html',
title : 'Inscribete',
width: 800,
height: 580
}
], {
padding : 0
});
</script>
If you want to display the iframe with those dimensions, then you may need to use fitToView set to false.
Also, check your syntax. I would rather do something like
$.fancybox.open({
type: 'iframe',
href: 'http://www.example.org/online/index.html',
title: 'Inscribete',
width: 800,
height: 580,
fitToView: false,
padding: 0
});
That should work fine in most of modern browsers.
See JSFIDDLE

PDF hides Jquery Modal in Safari

This is something related to my this question. In IE, I resolved issue using iframe in dialog. So it works fine. But in safari I am still facing problem though I have taken iframe into dialog. Safari browser version is 5.1.7(7534.57.2).
Here is the code I have tried:
<div>
<iframe allowtransparency="true" style="width :100%;height:68em" id="FaxPdf" src='#Url.Action("GetPDF", "Base", new { pdfPath = #Model.PDFPath })'></iframe>
</div>
<img id="addPatient" title="Add/Select Patient" src="~/Content/Images/AddNewSmall2.png" style="height:20px;width:20px;cursor:pointer;float:right" />
<div id="dialog" style="width: 100%; height: 100%; background-color: lightgray; display: none; ">
<iframe id="patientFrame" frameborder="0" marginwidth="0" marginheight="0" style="width:100%;height:60em"></iframe>
</div>
$('#addPatient').click(function () {
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
title: 'Add/Select Patient',
height: 'auto',
width: '90%',
position: ['top', 50],
draggable: false,
show: 'blind',
hide: 'blind',
modal: true,
open: function (event, ui) {
$.ajax({
url: '#Url.Action("ManagePatient","Order")',
type: 'GET',
cache:false,
success: function(data){
setTimeout(function () {
var frameSet = document.getElementById("patientFrame");
var iframedoc = frameSet.document;
if (frameSet.contentDocument)
iframedoc = frameSet.contentDocument;
else if (frameSet.contentWindow)
iframedoc = frameSet.contentWindow.document;
if (iframedoc){
iframedoc.open();
iframedoc.writeln(data);
iframedoc.close();
}
},400);
},
error: function () {
window.location.href = '#Url.Action("Index","Error")';
}
});
},
close: function (event, ui) {
$("#patientFrame").attr("src", '');
}
});
You can see problem image here. Right half side of Dialog is blocked by PDF.
Particularly,i think z-index may be the issue to deal with so you can do it with applying a z-index
on the other hand
Bgiframe
is the plugin you should find in
One another note,
after reading some articles over a internet i found that pdf is loaded by the Acrobat Reader plugin.
Its a separte one has nothing to do with html
so when you call any pdf or show any file then it will call a plug in and your pdf will be shown
on the other hand you have no control over a display if you have third party plugin particularly like a acrobad reader.
So my idea which i got from here
You should use two iframe an example could be found here
But after all if you set z-index: -1; with position:absolute and element you want to show (overwrite) set position:absolute and z-index:1 could be a solution for you.
i have provide more ideas which i found from diff resources.thanks

Working with JQuery animate and "this" selector

I'm working on what I thought would be a simple chunk of code, trying to dynamically (using 'this') animate div blocks to scale (zoom) to the size of the parent container (section tag) on click.
My HTML:
<section>
<div id="project"></div><div id="project"></div><div id="project"></div>
<div id="project"></div><div id="project"></div><div id="project"></div>
</section>
My JavaScript:
$("#project").click(function() {
$(this).animate({
opacity: 0.75,
width: 100%,
height: 100%
}, 5000, function() {
});
});
Both Jquery and Jquery UI are linked correctly from Google Libraries (so says my console), my console also tells me that there is a syntax error with an unexpected ",", however I am taking this syntax straight from JqueryUI.com. Any help is appreciated!
Additionally, I want to be able to dynamically select all other divs except the currently clicked div and remove them from the DOM (using display:none), just so it looks cleaner, but I don't know how to go about 'selecting' them in my code...
Thanks all! :)
you are missing quotes around 100% so your code will be correct like this
$("#project").click(function() {
$(this).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {
});
and please use unique IDs
Edit:
for using classes you can use something like that
$(".project").click(function() {
$(".project").css({'display':'none'});
$(this).css({'display':'block'});
$(this).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {
});
I want to be able to dynamically select all other divs except the currently clicked div and remove them from the DOM (using display:none), just so it looks cleaner, but I don't know how to go about 'selecting' them in my code...
var $project = $(".project");
$project.click(function() {
var thisDiv = this;
$project.each(function(index, elem) {
if (elem!==thisDiv) $(elem).css('display', 'none');
});
$(thisDiv).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {});
});

jQuery not displaying correctly fixed on refresh

I have a thumbnail slider on my web page which i am developing. Now when i go into the website it shows only a little block of the picture but once i refresh the page all is good, any ideas why this happens
http://www.ap2x.gbes.co.za/1/1.html
that is the page in question
i have tested on firefox, chrome and IE. Error does not seem to be browser specific
Slider works perfectly fine off line with no such problem.
I have no idea what could be causing this
$(function() {
// wrap all thumbs in a <div> for the 3x3 grid
$div = null;
$('#thumbs').children().each(function(i) {
if ( i % 9 == 0) {
$div = $( '<div />' );
$div.appendTo( '#thumbs' );
}
$(this).appendTo( $div );
$(this).addClass( 'itm'+i );
$(this).click(function() {
$('#images').trigger( 'slideTo', [i, 0, true] );
});
});
$('#thumbs img.itm0').addClass( 'selected' );
// the big-image carousel
$('#images').carouFredSel({
direction: 'up',
circular: false,
infinite: false,
width: 500,
height: 281,
items: 1,
auto: false,
scroll: {
fx: 'directscroll',
onBefore: function() {
var pos = $(this).triggerHandler( 'currentPosition' );
$('#thumbs img').removeClass( 'selected' );
$('#thumbs img.itm'+pos).addClass( 'selected' );
var page = Math.floor( pos / 9 );
$('#thumbs').trigger( 'slideToPage', page );
}
}
});
// the thumbnail-carousel
$('#thumbs').carouFredSel({
direction: 'up',
circular: false,
infinite: false,
width: 550,
height: 150,
items: 1,
align: false,
auto: false,
});
});
It sounds like it doesn't work until the images have been loaded so you either need to tell the slider how big the images will be once they are loaded or wait till they are loaded before running your script.
Does adding the following CSS solve the problem?
#images img {
height: 281px;
width: 500px;
}
I can't get the bug again to test it myself.
I bet you're viewing this website with Chrome.
There is a nasty bug with this browser when he cannot determine the height of an element.
A workaround would be setting width and height to each slider image manually through css.

How can I pass variables to a JQuery definition / method?

I use jQuery to create a Popup Window (UI). If I use the code below, I just have a hadcoded height of 600px. Is there a way, how I can pass a variable to the height parameter?
myFrame.dialog({
title: "Foto-Upload",
width: 570,
height: 600,
modal: true,
buttons: {
"Schließen": function() {
$(this).dialog("close");
}
},
closeOnEscape: true,
resizable: false
});
Get or set the width option, after init.
// get the width
var width = myFrame.dialog( "option", "width" );
// set the width
myFrame.dialog( "option", "width", 460 );
RTM: http://jqueryui.com/demos/dialog/#option-width
you can use
width: document.getElementById('image-width')
wherein image-width is
<input type="text" name="image-width" id="image-width">
It basically already is a "parameter" taken by the dialog "function-object".
But if it was within another function you could pass it a variable too, like the following fiddle:
var _myHeight = 300;
setIt(_myHeight);
function setIt(_h) {
$("#dialog").dialog({height: _h });
}
http://jsfiddle.net/tommyAwesome/NmfrP/
It would however be better to use the parameter of the dialog function. (since your going to have to use it anyways.)

Categories