I have a problem that html page not displayed in full page consistently. Need to click toggle size button to expand the html page. Any problem with the code as attached below ?
Any method to ensure each html is displayed in full page ?
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-button").fancybox({
'padding' : '1',
'margin' : '2',
'autoScale' : false,
'width' : '100%',
'height' : '100%',
'type' : 'iframe',
'autoPlay' : false,
'playSpeed' : 10500,
closeBtn : false,
iframe : {
scrolling : 'no'
},
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
</script>
Profitable Plan
Just set autoSize: false. See example - http://jsfiddle.net/j8MQW/
$(".fancybox").fancybox({
autoSize : false,
'padding' : '1',
'margin' : '2',
'autoScale' : false,
'width' : '100%',
'height' : '100%',
'type' : 'iframe',
'autoPlay' : false,
'playSpeed' : 10500,
closeBtn : false,
iframe : {
scrolling : 'no'
},
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
Related
I want fancybox add scrollbar for iframe if content s higher then my definition, The code belllow does not work:
$(".class").fancybox({
iframe : {
css : {
width : "1000px",
height : "600px"
}
},
scrolling : "yes",
closeClickOutside : false,
type : "iframe",
afterClose : function(){location.reload(); return;}
});
$(".class").fancybox({
iframe : {
css : {
width : "1000px",
height : "600px"
}
scrolling : 'yes',
},
closeClickOutside : false,
type : "iframe",
afterClose : function(){location.reload(); return;}
});
You should place the scrolling : 'auto', inside the iframe option param.
I have a panel where in I have a button in the header which helps me to add two textfields in that panel. Now when I click on this button it takes me to a popup form where the user enters the value of the two textfields it wants and then clicks on save button in the header of this popup panel.
The two textfields are added but the value is not set to the value which is entered in the popup form. I think the problem is with the scope. Kindly look at the following code and tell me how to resolve this issue.
xtype: "panel",
id: 'idFieldpanel',
...
header:{
titlePosition: 0,
items:[{
xtype:'button',
text: 'Add',
handler: function(){
var addidFieldPanel= new Ext.form.Panel({
id: 'newidFieldPanel',
width: 250,
height: 100,
floating: true,
closable : true,
layout : {
type : 'vbox',
align : 'stretch'
},
bodyPadding: 10,
items : [
{
xtype : 'textfield',
id : 'newidFieldname',
fieldLabel : 'Name',
name : 'newidFieldname',
flex : 1,
scope : this
},
{
xtype : 'textfield',
id : 'newidFielddataType',
fieldLabel : 'DataType',
name : 'newidFielddataType',
flex : 1,
scope : this
}
],
header : {
titlePosition : 1,
items : [{
xtype: 'button',
text: 'Save',
handler: function() {
ctr++; //this is used so that the id of the added fields do not match and hence they do not overlap
Ext.getCmp('idFieldpanel').add({
xtype:"container",
layout : {
type : 'hbox',
align : 'stretch'
},
defaults: {
bodyPadding: 10,
margin: '10 0 10 10'
},
items: [
{
xtype : 'textfield',
fieldLabel: 'Name',
id: 'idFieldName' + ctr,
name : 'Data',
margin:'0 10 10 0',
flex : 1,
height : 'auto'
},
{
xtype : 'textfield',
fieldLabel: 'Datatype',
name : 'Type',
id: 'idFielddataType' + ctr,
margin: '0 10 10 0',
flex : 1,
height : 'auto'
}
]
});
Ext.getCmp('idFieldName' + ctr).setValue(Ext.getCmp('newidFieldname').getValue());
Ext.getCmp('idFielddataType' + ctr).setValue(Ext.getCmp('newidFielddataType').getValue());
}
}]
}
})
addidFieldPanel.show();
}
}]
}
There are a few things that can help you out here, but first would be to not bother with tracking unique ID's across your components. Let ExtJS handle that for you. Also, removing the nested handlers will make your code a lot easier to read. I put together this fiddle that shows how you can do that.
By not using ID's you can grab reference to parent/child components with the up/down selectors similar to saveBtn.up('panel').
You can also add a form to your popup for easier selecting. Hope this helps to give you an idea of a better way to leverage the framework.
My Fancybox is working so far, except for the close button which doesn't appear.
This is my Javascript:
$(".fancybox").fancybox();
$('.single').fancybox({
openEffect : 'elastic',
closeEffect : 'none',
helpers : {
title : {
type : 'outside' } }
});
});
I've tried working with the modal thingy but I don't know where I should put it, as I am new to Javascript.
How can I add fancybox with the button helper and thumbnail helper?
And is it possible for the buttons(button helper) to be put under the image so that I can watch and select which I want to see?
the buttons
$(document).ready(function() {
$(".fancybox-button").fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
and the thumbnail code
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
overlay : {
opacity : 0.8,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
});
});
I am a bit new with JavaScript I couldn't get it to work.
What I am trying to do is mix them together and put the buttons on the bottom
P.S. Can I also uses fancybox thumbnail helper to work with Youtube videos?
You also have to load the jquery.fancybox-buttons and jquery.fancybox-thumbs js and css files apart from the fancybox regular js and css files. They are under the subdirectory "helpers" of the zip file.
Trying to figure out how to reinitialize Easy FancyBox when new content is loaded in with infinite scroll. I tried $.fancybox.init(), but this doesn't seem to be enough. In the head section the script that calls easy fancybox is:
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox').attr('rel', 'gallery');
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, { 'transitionIn' : 'elastic', 'easingIn' : 'easeOutBack', 'transitionOut' : 'elastic', 'easingOut' : 'easeInBack', 'opacity' : false, 'titleShow' : true, 'titlePosition' : 'over', 'titleFromAlt' : true }) );
/* Auto-click */
$('#fancybox-auto').trigger('click');
});
/* ]]> */
Any Ideas how I can reinitialize something like this, bound specifically to new content loaded into #content div.post? Thank you for any help.
Check this thread, it may help (EasyFancybox uses fancybox v1.3.4)
Update: I just recalled that the thread of reference (above) will work for single new added elements, but not for galleries. If you have a set of galleries (using the rel attribute) then you may prefer to upgrade to jQuery 1.7+ (if not yet) and use jQuery on() instead of delegate(), that will allow you to initialize your existing and dynamically added elements.
I made an example page here that shows how to use jQuery on() to solve the issue of dynamically added elements and fancybox (v1.3.x), if you want to have a look.
Based on the example page, I guess in your specific case, you may try tweaking your code this way:
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
$("#content div.post").on("focusin", function(){
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox').attr({'rel': 'gallery', 'tabindex': '1'});
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, {
'transitionIn' : 'elastic',
'easingIn' : 'easeOutBack',
'transitionOut' : 'elastic',
'easingOut' : 'easeInBack',
'opacity' : false,
'titleShow' : true,
'titlePosition' : 'over',
'titleFromAlt' : true
}) );
/* Auto-click */
$('#fancybox-auto').trigger('click');
}); // on
}); // ready
Of course, jQuery 1.7+ is required.