Develop Reference

Froala Add Inline Style Custom Button

I'm a UX Designer, with some experience in frontend dev, working in a online editor proof of concept to be tested in a usability study. One of our first finding has been that the users would like to have a button that adds directly the corporate font family and size for body text that is Arial 11px. I know that this can be achieved easily with the inlineStyle.js plugin with a dropdown but I'd like to have the same behaviour like the Bold or Italic button. I've tried to look into the plugin's code but I can't make it work for my case I've also tried the code in this example Froala add custom pre code button but it's too old to work with the latest version of froala.
Thanks.

I guess the way forward could be to actually employ the inlineStyle plugin, then reach into the Froala editor instance and hide the plugin button on the toolbar, whilst adding your own custom button to 'click' the hidden style option in the plugins dropdown.
I don't have the inlineStyles plugin enabled right now but I do have the paragraphStyles plugin which I believe follows the same approach. This picture is a grab from Chromes inspector showing the elements that build the Froala paragraphStyle options dropdown (similar to inlinStyles). The yellow highlight is within the class of an element that 'is' the activating button for my style. The highlighted text is my class name - the class I want applied when that option is clicked. That gives me the chance to target a click trigger via, say, jQuery, so
$('.dzTtlRed').trigger('click'....)
So you would add a custom button to the Froala editor toolbar and set it to trigger the click on your style options in the dropdown.
Regarding hiding the plugin button, this is what I have successfully used to hide the paragraphStyle plugin dropdown button on the Froala toolbar. I expect you could do the same for inlineStyles. Note you need to fire this after the Froala editor finishes building - I have noticed some async behaviour in this which means things don't happen immediately or in any externally predictable sequence, so you may want to use the Froala intialized callback event.
var inputBox = $('#' + eleId); // eleId is the Froala nominate textarea html id attr.
inputBox.closest("div").find("button[data-cmd='paragraphStyle']").hide();

Make a clickable object appear when I click on a different DIV

See the image I've included. When you click on a row in the table (it won't be a table most likely, as each row will probably be a Dojo Widget), the 'pulldown shade' appears and is clickable. When the user clicks it, a new layer of content appears and the pulldown shade switches from 'Open' to 'Close'.
Can that all be done with CSS, meaning do a Hover:After type event, or am I going to have to use JS to make this happen? JS isn't an issue, just trying to confirm I'll have to use JS to make it happen.

Javascript is required for the click event,
1 - you can show the additional content with hover
2 - then bind this to click ( *no point using hover as old IE does not work unless it is an anchor tag <a> * )
3 - you then can switch the text with js.
:)
remember
css is for visual
js is for behaviour :)

In CSS there is an option to use :target pseudo class (more on this here https://developer.mozilla.org/en-US/docs/CSS/:target ), but I am not sure this will work well for in your case - you’d have to create separate element for each row, and it doesn’t seem wise.

Form fields become invisible when Calendar icon selected - Google Chrome

I've been struggling with this form for a while now: http://www.thebeardmore.com/booking-mask/
I'm using Google Chrome for debugging.
When I click the 'Calendar' icon, the dates box appears, covering the input fields (nights/adults/children) underneath.
However, this also makes these fields completely invisible (visibility:hidden) from then on.
Can someone explain why this is happening and how I can stop it?
Thank you.

Basically the script hides any element (by setting visibility: hidden) which the calendar cover. This was, I believe, because of rendering problems in IE6. However, it causes problems in Chrome and IE8, so it's worth probably disabling this behavior.
A couple of ways to do it:
1) Set visibility: visible inline:
<select id="nights" name="Length" style="visibility: visible">
2) (Preferable) Override the Calendar's hideShowCovered method:
// At the top of your script
Calendar.prototype.hideShowCovered = function() {};

'next' in the dropdown on iPhone Safari does not trigger on change event

I am trying to do a straight forward cascading dropdown for mobile safari. I have this working 100% in safari itself, which shows normal style drop downs. But mobile safari dropdowns have a 'next' button.
Hitting this next button takes you to the next drop down in the cascade with triggering onchange() - thus the next dropdown is empty.
The user is forced to press 'done' to trigger on change, then click on the next dropdown.
Does anyone know a way around this. Or what DOM event is triggered by mobile safari's''next'?

Disabling the second drop down from the beginning is the only work around I have found so far! it will disable the "next" button on iphones
Add the disabled attr (disabled="disabled") to you select and use javascript or jQuery to enable or disable.
here is the jQuery code
$(".DD1").focus(function() {
$('.DD2').attr('disabled', 'disabled');
}).blur(function() {
$('.DD2').removeAttr('disabled');
});
here is a live example that is doing this
using jQuery:
http://www.imotors.com/mobile

That's an iOS native overlay, so what you'll get is a blur event when that overlay comes up. Try using the blur event and see how that works.

I have tried many direct solutions to solve this problem with no success. The second pulldown is populated after Safari Mobile's "form assistant" overlay comes up with the spinner (called a "picker" in documentation - http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html), comes up. So the picker is populated with old values.
In another case, if the second cascading pulldown is inactive, the Next button of the form assistant skips right over it. In that scenario, though, once the following form element is landed on, the second pulldown does update itself correctly, so tapping "previous" at that point gives the correct list in the picker.
My "answer" is that Apple is suggesting that JavaScript based cascading pulldowns should not be used but that another UX is to be implemented though I have found nothing that describes this aside from the standard jQuery Mobile type paging menus.

How can I make this jQuery work in IE explorer?

Working with the following code to dynamically change the submit buttons to image based buttons.
marker2 = jQuery('<span class="marker"> </span>').insertBefore('input#ResetDatesButton');
jQuery('input#ResetDatesButton').detach().attr('type', 'image').attr('src',theme_folder+'/style/images/ResetDatesButton.png').insertAfter(marker2);
marker2.remove();
This works beautifully in FF, Chrome and Safari but fails totally in IE6, 7 and 8. Then button is removed, but not replaced. How can I achieve the same result in IE?

IE doesn't allow you to dynamically change the type attribute of form inputs.
The only option you have is to delete the element and replace it with a new one of the correct type,

Internet Explorer doens't allow input[type] changes on the fly. Here is another thread discussing it: change type of input field with jQuery
Then, jQuery can do nothing to it works.
You will to:
Use CSS on your input[type=button] to show the image you want and hide the text.
Or hide the input, put an a tag with the image you want and set the click() to call the input.click().
EDIT:
Here is a little sample showing how to replace the input[type=button] with another control (you can use CSS to show it how you want) and then trigger the button click as well.