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
Related
i just started to make a new app by electron and find out after adding a new feature in my app, a very hard to notice white(or maybe transparent) gap added in very right side of the window.
More explanation: I made an application that fetch something from server and after some manipulation, will display them in main window. The application just has 1 window (its quite simple app) and this is configuration for window that i added into main js "Before" gap shows up:
mainWindow = new BrowserWindow({
show : false,
width : 820,
height : 520,
frame : false,
resizable : false,
title : "blah blah blah"
})
After that i decided to expand the app and cache last location of the window before user try to close window so in next time that user will open the app, the window will at the same prev place. So i added some extra function to catch window "x" and "y" and save them into a "json" file in "appData". I changed window config to this one:
mainWindow = new BrowserWindow({
show : false,
width : 820,
height : 520,
frame : false,
resizable : false,
title : "blah blah blah",
x : {get x from storage},//this is pseudo
y : {get y from storage}//this is pseudo
})
Now a small gap appears in right side as shown in pictures below. More explanation in pictures caption.
HTML:
<body>
<div class="hello-rob">
<div class="nav"></div>
</div>
</body>
CSS:
body,
html {
position: relative;
width: 820px;
font-weight: normal;
-webkit-font-smoothing: antialiased;
height: 100%;
overflow: hidden;
-webkit-user-select: none;
}
caption: Css width set to "820px" same as window "width" in main. js, as you can see there is almost "2-3px" white gap (i marked with a circle)
caption: If i comment the css width, then the window will expand to its real width that is "822.4px"
caption: When i comment "x" and "y" in main.js and css "width" presence, every thing seems fine.
P.S: i don't think this issue its just about "x" and "y" that set in main.js and regardless of that the main problem is:
Why and how the window is bigger than what we set for it in main.js and in css?
electron v1.7.11
Windows 10 64bit
Please note:
This is not a "permanent solution", this is just a temporary hotfix before electron team diagnose what is the main cause of this behavior by electron.js.
Thanks to #mplungjan and #Mike to reminding me to read documentation once again
I tried to watch/trace "window size" in every moment so that i can find out inside the electron core "window size" is inaccurate or no, something in renderer.js is involve?!
Based on this results (from main.js), its obvious changes happen in main.js part.
This is main.js console (when extra gap is evident):
[ 823, 522 ]// console.log(mainWindow.getSize());
[ 822, 521 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 101, width: 823, height: 522 }// console.log(mainWindow.getBounds());
From the results you can see electron uses setSize, getSize to demonstrate window size and obviously its not accurate because the window's size should be "820px" * "520px".
How to fix this: (please consider big part of codes below are not new, new tricky-lines has a comment)
function createWindow(){
mainWindow = new BrowserWindow({
show : false,
width : 820,
height : 520,
frame : false,
resizable : false,
title : "blah blah blah",
x : {get x from storage},//this is pseudo
y : {get y from storage}//this is pseudo
minWidth: 820,// new
maxWidth: 820,// new
minHeight: 520,// new
maxHeight: 520// new
})
// in this function i called console.log()
mainWindow.once('ready-to-show', () => {
mainWindow.show();
mainWindow.setSize(820,520);// new (i didn't checked but maybe before `mainWindow.show();` is better to place this line of code)
})
}
app.on('ready', () => {
createWindow()
})
Another test to check the effect of changes:
[ 820, 520 ]// console.log(mainWindow.getSize());
[ 820, 520 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 100, width: 820, height: 520 }// console.log(mainWindow.getBounds());
And the gap no longer exists.
P.S: personally i don't like this kind of solutions, so if any one else was able to represent a better solution i'll accept it as an answer.
On this link the FancyBox shows the video but with black bars to the side. Also when I resize the browser black bars appear on the top. I tried everything I could find on SO and elsewhere but I can't seem to find the solution.
This is my JS setup of the FancyBox:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
},
autoSize: false,
fitToView: true,
maxWidth: 960,
maxHeigth: 540,
height: '70%',
width: '70%',
});
});
</script>
Where do I need to look to fix this?
I found if you update the width of div which class is flideo , that would fix this problem
you coulde see the picture url below
https://dl.dropboxusercontent.com/u/23971112/stackoverflow/fancybox%20black%20bar.JPG
I've tried the following code with little to no avail:
$(document).ready(function(e){
$(".iframe").fancybox(
{
height: 950,
width: 400 }
);
});
I've put everything in quotes and everything without quotes and nothing seems to have any effect of the fancybox. There does seem to be some effect on the width, but it's irregular and temperamental. From what I can tell, all including the width does it set the width to it's default value.
Try:
$(document).ready(function() {
$(".iframe").fancybox({
maxWidth : 950,
maxHeight : 400,
fitToView : false,
width : '100%',
height : '100%',
autoSize : false
});
});
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 })
im created a modal box using prototype.js using the following code, i want to add the scroll to this , how can i add that ?
Modalbox.show($('viewModalbox-'+questionid),{
title: question,
width: 500,
overlayClose: false,
overlayOpacity: 0.25
});
From the ModalBox site:
NEW! “Scrolling mode”. If your content might be long just define the height of the ModalBox and it will be switched into “scrolling mode”
So you just need to add a height value!
Modalbox.show($('viewModalbox-'+questionid),{
title: question,
width: 500,
height: 500,
overlayClose: false,
overlayOpacity: 0.25
});