I am creating a new plugin named small image repository system for CKEditor. and i m quite successful to make it. but i got an issue that dialog height increase automatically when i load set of images automatically.so please suggest me how i make CKEditor non draggable and non resizable?
I already tried the code to make non resize dialog for CKEditor which is given below:
resizable : CKEDITOR.DIALOG_RESIZE_NONE
But still i didn't solve my problem please help me
CKEDITOR.dialog.add('plugin_name', function (editor){
var id = editor.id;
return {
minWidth: 820,
minHeight: 400,
resizable : CKEDITOR.DIALOG_RESIZE_NONE,////resize disble
contents:
[
{
id: 'iframe',
expand: true,
elements:
[
{
type: 'html',
html: '<div style="width:820px;height:400px"><iframe src="' + CKEDITOR.plugins.getPath('foot_notes') + 'dialogs/test.html" frameborder="0" name="iframeinsert' + id + '" id="iframeinsert' + id + '" allowtransparency="1" style="width:820px;height:400px;margin:0;padding:0; resize: none;" scrolling="no"></iframe></div>'
}
]
}
],
};
});
Setting the dialog's resizable property to CKEDITOR.DIALOG_RESIZE_NONE is only going to prevent users from changing the size of the dialog window. Btw, CKEDITOR.DIALOG_RESIZE_NONE is the default so there's no need to set it explicitly in your dialog definition. You can find CKEditor's documentation page on the subject here.
It sounds like what you need to do is set the height property. This will set the height of the dialog to the value you assign to it, in pixels.
Cheers!
Related
I written some code for displaying user image.
I want to show user image after selecting/browsing it on local machine but it not shows after browse. below I placed some code for better understand.
this.userPhoto = new Ext.create('Ext.form.field.File', {
xtype: 'filefield',
padding: '5 5 5',
cls: 'p-photo-upload',
emptyText: 'Photo',
buttonOnly: true,
fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_PHOTO_'),
name: 'photo',
labelWidth: 200,
width: '26%',
msgTarget: 'under',
listeners: {
scope: this,
change: function (t, value) {
var img = '<img src="' + t.getValue() + '" />';
console.log('image', img, value, t.getRawValue());
//var img = '<img src="' + FLEET_SERVER_URL + 'images/users/DefaultUserIcon.jpg' + '" />';
this.userimage.setValue(img);
}
}
});
above code I use for browse user image. change event in listener set the image file path to Display field (Display field Code placed below)
this.userimage = new Ext.form.field.Display({
labelWidth: 200,
cls: 'p-uploaded-icon',
width: '28%',
height: 70,
labelAlign: 'right',
autoShow: true,
autoRender: true,
fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_ICON_'),
value: fleet.Language.get('_FLEET_USER_USERDETAIL_NOICON_')
//value: '<img src="' + FLEET_SERVER_URL + 'appRes/images/user.jpg' + '/>'
});
after selecting image its show path like this img src="C:\fakepath\boy.png" but image not shows
While #Tyr is right regarding the allowance of accessing files from Javascript due to security reasons, for your purpose (I understood it as displaying an image thumbnail before uploading it to the server) there is an option, and it's called plupload.
Since we emulate as much of HTML5 as possible, we are able (among other things) to provide access to raw file data, even in such environments that do not normally support it. One of the biggest benefits of this is that we can display the thumbnails instantly, right as you select the images in the dialog or drag&drop them from the desktop.
I myself have implemented this a while a go in a project. Here is a repository that I've found that you can look into to see how it is done. There are also some ExtJS integrations with plupload that you can get something useful from.
It's not possible to show files directly via javascript before upload due to security reasons.
Update 9/11/13 - Here is a fully working jsFiddle demonstrating the issue... to experience the issue, expand the grid and attempt to drag the nested row over to the TreePanel. The drag element will be obfuscated by the TreePanel, as if it is behind it. Link here: http://jsfiddle.net/ZGxf5/
Here's a bit of a unique roadblock I've run into... I figured it would be best illustrated with an image:
As you can see in the picture, I am attempting to drag a div, generated via the rowBodyTpl property of the RowExpander plugin utilized in the grid shown in the bottom left of the image. I am able to "grab" the element and move it about, however it is seemingly constrained to the RowExpander generated div. I cannot drag the div any further left, nor upwards from where its original position. Attempting to move it into the panel to the right results in the dragging div being obfuscated, as shown in the picture.
I have attempted to completely eliminate all constraints in the startDrag method as you will see in the code below, but to no avail. I am basically just using the code provided in Sencha's 5 Steps to Understanding Drag and Drop with ExtJS Blog Post, but it obviously needs some tweaking for my implementation.
Below is my code for initializing the Drag on the target div..
/**
* NOTE: The following code is executed whenever
* the contents of the grid's store change
*/
var me = this, // ENTIRE left panel, including the TreePanel and lower GridPanel
divs = Ext.select('div[name=storage-item-div]', false, me.getEl().dom),
dragOverrides = {}; // provided separately, see below
Ext.each(divs.elements, function(el){
console.warn("mkaing new dd", el);
var dd = new Ext.dd.DD(el, 'storageItemDDGroup',{
isTarget: false
});
Ext.apply(dd, dragOverrides);
});
The dragOverrides object is defined as follows (note my debugging for Constrain)
dragOverrides = {
b4StartDrag : function() {
// Cache the drag element
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
},
startDrag: function(){
/** DEBUGGING */
_t = this;
this.resetConstraints();
this.setXConstraint(1000,1000);
this.setYConstraint(1000,1000);
},
// Called when element is dropped not anything other than a dropzone with the same ddgroup
onInvalidDrop : function() {
// Set a flag to invoke the animated repair
this.invalidDrop = true;
},
// Called when the drag operation completes
endDrag : function() {
// Invoke the animation if the invalidDrop flag is set to true
if (this.invalidDrop === true) {
// Remove the drop invitation
this.el.removeCls('dropOK');
// Create the animation configuration object
var animCfgObj = {
easing : 'elasticOut',
duration : 1,
scope : this,
callback : function() {
// Remove the position attribute
this.el.dom.style.position = '';
}
};
// Apply the repair animation
this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}
}
Finally, I think the rowBodyTpl portion of the lower grid's configuration may be useful in solving the issue, so here is the source for that!
rowBodyTpl : ['<div id="OrderData-{item_id}" style="margin-left: 50px;">'+
'<tpl for="order_data">'+
'<tpl for=".">' +
'<div name="storage-item-div" class="draggable" style="padding-bottom: 5px;">' +
'<b>{quantity}</b> from Purchase Order <b>{purchase_order_num}</b> # ${purchase_cost}' +
'<input type="button" style="margin-left: 10px;" name="storageViewOrderButton" orderid="{purchase_order_id}" value="View Order"/>' +
'</div>' +
'</tpl>' +
'</tpl>'+
'</div>']
I was able to get this working in a Fiddle, but I had to switch my RowExpander template to instead render an Ext.view.View rather than the div which I was previously using. Using an Ext.view.View allowed me to basically just follow the Sencha demo for using DragZone and DropZone.. kinda wish it wasn't so complicated but hey, that's just how it is sometimes, I guess.
See the very messy jsFiddle source here for a working demo using DragZone and DropZone, feel free to tweak for your own needs: http://jsfiddle.net/knppJ/
Again, the issue here was dragging a nested div from inside a RowExpander generated row inside a gridpanel to a separate adjacent panel. The issue I was encountering is thoroughly described in my question above. I was not able to get a regular div working the way I wanted it to, so I ended up using an Ext.view.View in place of the grid. This required adding a bit of extra logic in the onbodyexpand event fired by the RowExpander plugin, basically just rendering an Ext.view.View to the div generated by the RowExpander.
I'm working on a website where images need a fancybox. The images are however not placed in a chronological order in the HTML because they are part of a booklet I realised using booklet.js. So my question is, can I determine in what order fancybox opens my images?
I have tried to get this to work for some time now and made a fiddle for demonstrative purposes.
http://jsfiddle.net/XF8WW/7/
In my fiddle I determine what image has been clicked and what the next/previous image can be. Next I check if fancybox opens the correct image on a first attempt. If it fails I try to close fancybox and open it myself for the correct image.
The only problem in my solution can be found in the last function I wrote (clickPage).
In clickPage I try to close fancybox and reopen it for the correct image. Unfortunately either fancybox doesn't completely close or it doesn't reopen for that image.
function clickPage($pageNr) {
$.fancybox.close();
//$('.fancybox-overlay.fancybox-overlay-fixed').click();
$pageNrMinOne = $pageNr - 1;
$pageNrMinOne = $pageNrMinOne.toString();
$pageNr = $pageNr.toString();
console.log($pageNr);
console.log($pageNrMinOne);
$(".page" + $pageNr).eq($pageNrMinOne).trigger('click');
//$('.page' + $pageNr).click();
}
I know the code works, because when I enter it in the console it does.
Thank you for your time
Have a nice day
Alright, I managed to fix it.
Rather than using this script for my booklet:
http://www.netzgesta.de/booklet/
which rearanges the HTML I used this script:
http://builtbywill.com/code/booklet/
The latter doesn't rearange the HTML and is in my opinion the best booklet script out there so far.
Thanks everyone for your replies!
Have a nice day
I recommend handling your data needs separately (instead of using img src), passing it into the fb sig as the first argument:
var images = [
{
'href' : 'http://dromenopmaat.be/dromen_op_maat/images/nl/1_big.jpg',
'title' : 'some title' //optional
},
{
'href' : ' http://dromenopmaat.be/dromen_op_maat/images/nl/2_big.jpg ',
'title' : 'some title'
},
//etc
]
$.fancybox.open(
images,
{
index : 0,
nextEffect : 'none',
prevEffect : 'none',
margin : 100,
padding : 10,
type : 'image',
wrapCSS : 'fancy-gallery-wrapper',
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.7
},
title : {
type : 'inside'
}
}
});
(fancybox v2.0)
Ultimately, you are making your project overly complex, needlessly.
Build a json object in the order you wish, and send fb whatever extra params you might need (i just pulled this from a project, so tailor as you see fit).
Hope that helps -
Javascript and jQuery (Fancybox) question
I'm using the Javascript function below for Twitter sharing (as well as other services; the function code is simplified to just Twitter for this question) that grabs the to-be-shared page URL and title and it is invoked in the link with onclick. That results in the Twitter share page loading in a pop up browser window, i.e.<img src="/images/twitter_16.png" onclick="share.tw()" />
In order to be consistent with other design aspects of the site, what I'd like to be able to do is have the Twitter share page open not in a standard browser window but in a Fancybox (jQuery) window.
Fancybox can load an external page in an iFrame when the img or href link contains a class (in this case class="iframe" ) in the link and in the document ready function in the header.
Right now, of course, when I give the iframe class to the link that also has the onclick share.tw(), I get two popups: one browser window popup with the correct Twitter share page loaded, and a Fancybox jQuery popup that shows a site 404.
How can I change the function to use Fancybox to present the Twitter share page? Is that a correct way to approach it? Or is there a better way, such as implementing the share function in jQuery, too?
Thanks...
Javascript share function:
var share = {
tw:function(title,url) {
this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
},
share:function(tpl,title,url) {
if(!url) url = encodeURIComponent(window.location);
if(!title) title = encodeURIComponent(document.title);
tpl = tpl.replace("##URL##",url);
tpl = tpl.replace("##TITLE##",title);
window.open(tpl,"sharewindow"+tpl.substr(6,15),"width=640,height=480");
}
};
It is invoked, i.e.: <img src="/images/twitter_16.png" onclick="share.tw()" />
Fancybox function, invoked by adding class="iframe" in the img or href link
$(".iframe").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
No matter how you change your design, using an iframe with Twitter isn't going to work.
If you replace the URL http://twitter.com with anything else eg http://www.godaddy.com - it will work. I tried something like below:
$('h1').click(function(e) {
$.fancybox({
href : 'http://www.godaddy.com', // http://twitter.com will not work here
title : 'twitter window',
width : 640,
height : 480,
type : 'iframe'
});
});
This is because Twitter uses javascript to "break" iframes on purpose for security reasons.
So your idea of showing a FancyBox iframe in this way cannot work if using Twitter.com. There is confirmation of this and some ideas on getting around it here: (like using API calls from an iframe) - http://groups.google.com/group/twitter-development-talk/browse_thread/thread/b1bca9ef074086c7
For your "other services" that hopefully don't have the same restrictions (I suspect some of them might) then the other answer further down the page from wajiw seems a good compliment.
My approach would be to remove the fancybox initialization and trigger it directly from your share function:
var share = {
tw:function(title,url) {
this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
},
share:function(tpl,title,url) {
if(!url) url = encodeURIComponent(window.location);
if(!title) title = encodeURIComponent(document.title);
tpl = tpl.replace("##URL##",url);
tpl = tpl.replace("##TITLE##",title);
$.fancybox({
'href' : tpl,
'title' : title,
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
return false;
}
};
I'm not sure my syntax is correct, but something like that should work for you.
Another different attempt may be to use a dummy anchor, alter it's attributes, and trigger click on it:
jQuery(document).ready(function() {
$("#dummyLink").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
return false;
}
};
});
var share = {
tw:function(title,url) {
this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
},
share:function(tpl,title,url) {
if(!url) url = encodeURIComponent(window.location);
if(!title) title = encodeURIComponent(document.title);
tpl = tpl.replace("##URL##",url);
tpl = tpl.replace("##TITLE##",title);
$("#dummyLink").attr('href', tpl);
$("#dummyLink").attr('title', title);
$("#dummyLink").trigger('click');
return false;
}
};
HTML:
What I see is that the window.open function, is responsible for opening the new browser window. This one should go. Instead you should be setting the href of a link like This goes to iframe, and then invoke the fancybox function.
It's been a while since I've used fancybox, I prefer using jquery-ui.dialog, so I could be wrong ..
I've run into this same exact issue using the jQuery Colorbox plugin. I was trying to make Share on Twitter and Share on Facebook links that would open up in the modal box. When you would open the links, the modal box would appear, however the iFrame would be blank and only a white box would be displayed.
Unfortunately, this is expected behavior. Both the Twitter sharing page and the Facebook sharing pages have instructions to break out of the frame when the link is followed, thus the blank box you're seeing. Since the content that is being delivered by the respective sites are not under your control, there is no way to stop this.
Its impossible with twitter as others noted.
If you View Source of Twitter homepage, you will see a small script like this just below the body tag.
<script>
if (window.top !== window.self) {
document.write = "";
window.top.location = window.self.location;
setTimeout(function() {
document.body.innerHTML = ""
}, 1);
window.self.onload = function() {
document.body.innerHTML = ""
}
};
</script>
Which means if you are in an iframe(self != top), pull out a blank page.
No workarounds are possible.
Perhaps take a look at http://platform.twitter.com/widgets.js and see how Twitter creates their popup, then figured out if you could stick that incide a widget.
I am trying to get the Flowplayer to be shown inside a Fancybox, but can't quite get it working. This is my code so far;
$("a.video_link").click(function () {
$.fancybox({
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': '/flowplayer/flowplayer.swf?video=myvideo.flv', /* have also tried a couple of other options for the url settings, but without luck)
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
Any suggestions?
Try manually launching fancybox and setting setting its content to a flowplayer.
For instance, given the link:
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
class="videoLink">Demo</a>
create a JQuery click function like this:
$('a.videoLink').click(function(e) {
e.preventDefault();
var container = $('<div/>');
container.flowplayer(
'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
$(this).attr('href')
);
$.fancybox({
content: container,
width: 300, height: 200,
scrolling: 'no',
autoDimensions: false
});
});
Note that flowplayer by default takes up size of it's container, so must be given finite dimensions to view it properly.
Have you tried to create on SWF Object with jQuery thus setting the swf params with that then using the flow players content setting to directly set the html of the model.??
Also try check your debug window too see if there is any errors showing up.
-- E.G
var flashvars = { //Change this with $.extend within click callback if you need to!
file : 'yvideo.flv'
}
var flowBoxParams = {
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'width': 680,
'height': 495,
}
var $conatiner = $('<div></div>').attr('id','MediaPlayerHolder').hide();
swfobject.embedSWF("/flowplayer/flowplayer.swf","MediaPlayerHolder","300","120","9.0.0",flashvars,params,attributes);
$("a.video_link").click(function(){
//Merge basic settings with title
params = $.extend(flowBoxParams,{title:this.title,html:$container});
//Send object to FlowPlay
$.fancybox(params);
//Show the video play
$($container).show();
});
THis is just basically setting to variables with your default settings within them (flashvars ,flowBoxParams), the creating an empty div container with the id (MediaPlayerHolder) and setting it to display:none.
Then we create a basic flash element with swfObject wich is your flowplayer swf and assign it to the hidden div container.
we then wait for the user click to be activated and then we alter the default settings to add title value to the flowplayer options.
We then tell flow player to begin what it needs to do.
with thin change the visibility of the container.
This is untested but if heres any errors they should only be minor, unless flow is strict when it comes to loading the swf will itself.
I do this alot, the only way I could get it to work was by doing simply this,
JavaScript >>
flowplayer(".player", "http://www2.imperial.ac.uk/business-school/etu/courses_1112/common/scripts/flowplayer/flowplayer-3.2.7.swf");
$('.yourbox').fancybox();
Html >>
<a class="yourbox" href="#data" >This shows content of element who has id="data"</a>
<div style="display:none">
<div id="data">
</div>
</div>
If you do it this way, you will need to put an ie hack in aswell, to unload the player, when closing the box.