We Keep Coding

Froala Wysiwyg - adding custom and toolbar buttons in a custom dropdown

I'm trying to create a more custom dropdown for adding all the toolbar buttons under it when toolbarXS is activated (all the missing icons in the XS should be under the more dropdown.
unfortunately the docs aren't that clear and outputting only text options which does nothing besides showing.
i was wondering if anybody could help in how to do it.
i.e
// define annotation button for imagePopup
$.FroalaEditor.DefineIcon('annotationIcon', { NAME: 'pencil'}); // the icon
$.FroalaEditor.RegisterCommand('annotation', { // the button
title: 'Annotation',
icon: 'annotationIcon',
undo: true, // Save the button action into undo stack.
focus: true, // Focus inside the editor before the callback.
showOnMobile: true, // Show the button on mobile or not.
refreshAfterCallback: true, // Refresh the buttons state after the callback.
// Called when the button is hit.
callback: function () {
annotateImage(this);
}
})
// Define `more` dropdown button.
$.FroalaEditor.RegisterCommand('moreDropdown', {
title: 'More',
icon: 'More',
undo: true,
focus: true,
type: 'dropdown',
options: {
"annotation": 'annotation'
},
});
Thanks in advance
EDIT:
the only way i could figure out now is to use
html: function() {
return 'HTML_CODE'
}
and just write all the ul by myself which is disgusting and doesn't seem like the proper way of doing it.
Any help will be appreciated.

After talking with froala guys!
Custom popup
is a solution for implementing a popup with toolbar buttons as a dropdown.
Thanks

Open fancybox Gallery after click event on a text

I found plenty of stuff on StackOverflow and tried different things to achieve what i want, but i'm stuck on this here.
I have a Text in my HTML, if i click this text a fancybox should open with an Image Gallery, the images should come from the images Array.
What happens now is that it's opening a broken fancybox, without any styling, opacity, closebutton whatsoever. Here's a example of what it looks like!
My Javascript is the following
$(function(){
$("#turn_all_pictures").click(function(){
if(images.length == 0){
loadImages();
}
$(this).fancybox();
$.fancybox.open(
images,
{
'autoScale': true,
'autoDimensions': true,
'centerOnScroll': true,
helpers:{
overlay:{
css:{
'background' : 'rgba(58, 42, 45, 0.95)'
}
},
buttons:{}
}
});
});
})
An entry in the Array looks like this, which should be right according to this Stack Overflow Q/A
Object { href="<img class="hidden_img fancybox" rel="turn_gallery" src="../../../images/1085/5263-3-medium.jpg"/>"}
The needed HTML is this:
<p><span class="turn_left" id="turn_all_pictures">Alle Bilder anzeigen</span></p><br>
What am i doing wrong, what do i miss so that the fancybox will open correctly formatted and with the image Gallery instead of the Text from the HTML?
EDIT
I tried out to append the images in my loadImages() function to a div and then ref to this div with my fancybox.
$.fancybox.open(
images,
{
// 'autoScale': true,
// 'autoDimensions': true,
// 'centerOnScroll': true,
// helpers:{
// overlay:{
// css:{
// 'background' : 'rgba(58, 42, 45, 0.95)'
// }
// },
// buttons:{}
href: '#hidden_pictures'
}
)
That will show all pictures, the whole div, in a fancybox, so i'm guessing that it has something to do with the images array

Check the location of your resources such as your CSS and images for fancybox. You can also inspect your DOM using firebug or some DOM inspection tool to see if your resources are ring found.
I used firebug and looked at the NET tab which showed the http request to the resource. You may see a 404 error if it's not found.

Check you have passed images array in a format like this:
[
{
href: 'image1.jpg',
title: 'title 1'
},
{
href: 'image2.jpg',
title: 'title 2'
}
]
make sure you have included the css properly (check the path)
Also see this

Infinite Scroll functions only in the front page

I'm using the infinite scroll plugin in a tumblr blog and everything works as it should, provided the user is in the front page- for example: "{someblog}.tumblr.com".
Starting from "{someblog}.tumblr.com/page/2" and so on, the plugin doesn't seem to load at all (it doesn't hide the navigation elements).
initialize
Here's the code I use to call it:
$('#container').infinitescroll({
loading: {
finished: undefined,
finishedMsg: "Finished",
img: "preloader.gif",
msg: null,
msgText: "Loading...",
selector: null,
speed: 'fast',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
callback: undefined,
debug: false,
behavior: undefined,
binder: $(window), // used to cache the selector
nextSelector: "#next a",
navSelector: ".navigation",
contentSelector: "#container", // rename to pageFragment
itemSelector: "div.post",
animate: false,
pathParse: undefined,
dataType: 'html',
appendCallback: true,
bufferPx: 400
},
...
edit: I enabled debug information and I got the following info:
({0:"Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com."})
({0:"determinePath", 1:"/page/4"})
({0:"Binding", 1:"bind"}
It seems that it does find the address to the next page-"/page/4" (since I was on page 3). But it can't "parse" it for some reason?
Is it possible that the plugin can only function on page one, where the link to next page contains a "2"? If so, how can I override it?
Thanks a lot in advance!

Thanks to #graygilmore I figured it out. This is the line that needs to be added to the code:
pathParse: function() {
return ['http://{Name}.tumblr.com/page/', '']
},
Note that {Name} is a Tumblr variable and needs not be changed- Tumblr replaces it automatically.
Additionally- this line should be added in the state: {...} block:
currPage: {CurrentPage}
(Where as in the example in my question above I simply set it to "1").
{CurrentPage} is a Tumblr variable as well, so it's being replaced automatically with the current page number, for every page being viewed.
Now Infinite-Scroll loads properly on every page of the blog, which is especially useful when wanting to create a "load more posts" button, which gives the user a choice between regular (paged) navigation and infinite-scrolling.

ExtJS4 toolbar with OpenLayers code

We are using Mapfish toolbar with ExtJS3.2 in our application. Now we are trying to upgrade ExtJS3.2 to ExtJS4. But mapfish is not working with ExtJS4. So, we are using ExtJS4 toolbar, but openlayers code which is written for button in toolbar is not executing.
ExtJS4 code is:
var extoolbar = Ext.create('Ext.toolbar.Toolbar',{
border : true,
width : 100,
height : 40,
layout : hbox
});
var btn1 = {
xtype : 'button',
enableToggle : true,
tooltip : "Zoom In",
id : 'zoominbtn',
listeners : {
'click' : fucntion(){
new OpenLayers.Control.ZoomBox({
alwaysZoom : true,
draw : function(){
this.handler = new OpenLayers.Handler.Box(
this, {done: this.zoomBox}, {keyMask: this.keyMask});
}
});
}
}
};
extoolbar.add(btn1);
Here if we click on the zoom in button control is going into OpenLayers.Control.ZoomBox but the draw method is not executing. My questions are:
Is there any thing wrong in the code?
Is there any other way to approach OpenLayers with ExtJS4?

I am using MapFish too, with Ext 3.4.
First of all you have a fucntion() instead of function() :)
Then, may be I haven't understand what you want to do, but I think -IMAO- that this is not a good way to use the ZoomBox control...
You should add the ZoomBox control to the map while you create it and give the control an id, then use a listener for the toggle event like this:
listeners: {
'toggle': function(button, pressed) {
var ctrl = map.getControl('yourid');
if(pressed){
// Activate the control
ctrl.activate();
} else {
// Deactivate the control
ctrl.deactivate();
}
}
}
This way when you press the button you enable the control, and when you press it again you disable it.
Keep in mind that the ZoomBox control, once active, can also be always available by holding shift
Or you could also use GeoExt, which is really easy, like this
GeoExt.Action({
map: map,
text: "Zoom Box",
control: new OpenLayers.Control.ZoomBox()
});
But I don't know if or how GeoExt works with Ext 4
As for the point 2 of your question, I am sorry but I cannot answer that, because I have no experience with Ext 4.

multiple divs open accordion

I have modified the jquery accordion to show more than one opened divs like this:
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
jQuery('#accordion').accordion({
icons: icons,
collapsible: true,
active: false,
autoHeight: false,
navigation: true,
disabled: true });
jQuery('#accordion h3.ui-accordion-header').click(function() {
jQuery(this).next().slideToggle();
});
});
It works fine except one thing that when I click any header, It expands but arrow on header doesn't change.
I followed following link:
http://sammybrent.inelsternwick.com/blog/?p=30
Please suggest solution.

Basically, you're trying to mimic the accordion-behaviour. But on a click, that's not everything the accordion does. It changes the classes of the arrow and the headers too, which changes the picture.
So what you could do to get the arrows right is to change the class from ui-icon-circle-arrow-e to ui-icon-circle-arrow-s and vice versa if the header is clicked. Adding something like:
$(this).find('.ui-icon').toggleClass('ui-icon-circle-arrow-e ui-icon-circle-arrow-s');
would work I guess. I don't think using the accordion like this is a very good solution btw.