If I create a responsive website using ZURB's Foundation, will I need to include a library like Fastclick (by FTLabs) in order to avoid the 300 ms click delay on touch devices?
Seems the library should include this since getting things to act nice on mobile is its main purpose.
I guess, when I think about it, it seems that fastclick should be included on every single website that needs to be displayed on a touch device - or not...?
All of Foundation's Javascript libraries are listed here.
jquery.js
jquery.foundation.alerts.js - Adds the ability to close alerts
jquery.foundation.buttons.js - Adds dropdown functionality for dropdown buttons and split
jquery.foundation.accordion.js - Add open/close functionality to accordions
jquery.foundation.navigation.js - Adds functionality to navigation elements
jquery.foundation.topbar.js - Adds functionality for the top bar
jquery.foundation.forms.js - Adds ability to create custom form elements
jquery.foundation.mediaQueryToggle.js - Adds helpful media query viewer tool
jquery.foundation.tabs.js - Adds toggle capability to tabs
jquery.foundation.tooltips.js - Adds tooltips functionality
jquery.placeholder.js - Adds placeholder functions to forms
jquery.foundation.orbit.js - Our custom image/content slider plugin
jquery.foundation.reveal.js - Our simple modal plugin
jquery.foundation.clearing.js - Our new image gallery plugin
jquery.foundation.magellan.js - Our sweet new sticky nav plugin.
jquery.foundation.joyride.js - An awesome feature tour plugin.
None of them covers Fastclick's functionality, so the anwer is if you wish to avoid the 300ms click delay, then add Fastclick manually. About if it "should be included in every single website that is displayed on a touch device", I believe it is a matter of personal preference.
Seems like the old accepted answer is not valid anymore. Fastclick is used by Foundation now.
Found this on Foundation Github repo when searching for "Fastclick" there:
(From https://github.com/zurb/foundation/search?utf8=%E2%9C%93&q=fastclick)
Also, I found this on Foundation Github repo:
// Enable FastClick if present
$(function () {
if (typeof FastClick !== 'undefined') {
// Don't attach to body if undefined
if (typeof document.body !== 'undefined') {
FastClick.attach(document.body);
}
}
});
(Source from: https://github.com/zurb/foundation/blob/d2c9a9a7e84e53e5eff41ac2f61a8425f0760086/js/foundation/foundation.js)
So, this basically means that you can use Fastclick if you want and Foundation will initialize it for you but you can also decide to exclude if from your libs and Fastclick will not be used.
http://foundation.zurb.com/docs/javascript.html
The Doc says use it, I am not sure what would be the problem without it tho
Related
enter image description here
I want to know how to provide the numbering for each tab, so that author can provide the number as per their requirement.
This is the strangest requirement I ever heard of. You can sure do that, but it didn't make much sense of doing it system wide as one author can feel the dialog one way, other in completely different. The only reasonable solution is to use javascript to reorder the tabs in the way an author want and than save the settings for this specific component in his user profile. You can start implementing it by creating a clientlib with the category cq.authoring.dialog. In your JS you have to listen to specific dialog loading event as shown below. I think this should be enough and it's a good starting point.
// necessary as no granite or coral ui event is triggered, when the dialog is opened
// in a fullscreen mode the dialog is opened under specific url for serving devices with low screen resolution
if (location.href.match(/mnt\/override/)) {
$(window).on('load', function(e) {
setTimeout(doSomething, 100);
});
} else {
$(document).on('dialog-ready', function(e) {
Coral.commons.ready(function(){
setTimeout(doSomething, 100);
});
});
}
You can use granite:rel to define specific identifiers in the dialog definition and use save them later in the user settings. You can define drag & drop events using the tab selector [role="tab"].
This is not trivially possible. Decide upfront about the order when building the component, provide meaningful labels and go with that. Touch UI does not provide the feature you need.
I am using the steps given in the URL to make a color-picker rte plugin
http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html
and at the same time I am making another custom rte plugin to do some text modulation.
But only one of them is working using rte.coralui2 as categories.
and both icons are coming at the same location.
If I disable one js then another is working.
I have registered the plugin with different name and I have also used different variables.
I am not able to make the rte plugin button at different location.
Please suggest the possible solution.
it's possible you are overlaying rather than extending the rte.coralui2 category. I suspect your custom clientLibs are competing with each other and only one is available.
It seems like you are using the same steps provided in the blogpost for creating both the plugins and while doing that, you are using the below code twice with different icons :
if(items.indexOf(ExperienceAEM.TCP_UI_SETTING) == -1){
items.splice(3, 0, ExperienceAEM.TCP_UI_SETTING);
}
So, maybe, the icons are being added at the same place and only one of them is shown.
You should create ExperienceAEM.CuiToolbarBuilder Class only once and add both icons inside that class
Our product is used by many corporate and government bodies.
Many of them are only allowed use IE and have security policies applied to their IE which they are not allowed adjust.
One such setting is the disabling of downloading web fonts.
We have work around in place to check if the font can be downloaded.
If not, we replace all <i> on the page with <img>.
var haveFont = detectFontIcons();
//Iterate over each icon on the page and replace if necessary
if (!haveFont)
$('[class^="mce-i-"]').each( function(e) {
console.log("Found element = ", this);
// Replace all <i></i> with <img>
....
}
}
This works fine for all our custom Html.
The Problem:
For some reason it will not work for tinyMCE <i> tags.
I have adjusted the class prefeix to allow for the TinyMCE 'mce-i-'.
It finds no elements in the DOM with 'mce-i' even though I can see them using firebug.
I have even set a timeout on the call to do this check, incase it was an issue with the DOM not been fully rendered yet. No luck.
Questions:
1: Any ideas on why no TinyMCE elements are not been found?
2: How can I update tinyMCE to use images directly instead of web fonts?
Thanks
I can't take credit for this, but I found a font-free, custom skin that replaces the fonts with images. I added the skin, updated my init method and it appears to work as I'd hoped.
It can be found here:
- https://pollyshaw.wordpress.com/2014/02/03/a-font-free-skin-for-tinymce-version-4/
- https://bitbucket.org/pollyshaw1/tinymce-4-lightgray-no-fonts-skin
In short, I'm using the new WordPress 3.6 [audio] shortcode (which is mediaelement.js) inside an HTML table that is enhanced with a javascript library called datatables.
This is my page: http://thetracksmiths.com/beats/fight-club/
If you view the above page on any PC or mac (in any browser), all is well with the world. View it on an iPhone or iPad, and the players inside the table will not work. After an exhausting search for answers, here's what the author of datatables had to say after some testing (notice what's in bold at the bottom):
So I've just had a bit more of a look into this, and I can fairly
easily replicate the issue without DataTables. All that needs to be
done is to remove the element from the document and then add it back
in again. The media player simply fails to play after that on iOS (and
this removal and addition is fundamental to how DataTables works).
For example, if you disable DataTables on your page and add this code:
jQuery(document).ready( function ($) {
var a = $('#tablepress-2 tbody tr:eq(2)')[0];
a.parentNode.removeChild( a );
$('#tablepress-2 tbody').append( a );
} );
All of the players in the table will work, expect the very last row
(the one that has been removed and re-added).
So its not something that DataTables is doing wrong, but it is a
problem in the media player that is triggered by the actions
DataTables take. As I say, this is fundamental to DataTables and isn't
likely to change, so we need to know either if the author of the media
player library can fix it for when items are removed and then added
back into the DOM. Or if there is some sort of re-initialisation that
can be called when the element is added back into the DOM.
If I'm understanding all this correctly (I'm no coder!), what the author is saying is that something in the audio code is playing nasty with iOS when it's taken off the page and then re-added. Is this a genuine bug? How can this be fixed?
For some reason the following html doesnt work inside safari on iphone 4.
Test Link</div>
it works on safari inside a regular browser. I am using senchatouch2 framework.
Thanks
The only way you can add events to dom elements in Sencha touch 2.0 that I know of, is to use their element events api. this is an example of it. Alot of events are available like tap, double tap and so on.
var el = Ext.get("test");
el.addListener( 'tap', function(e){
alert('it works!');
});
This goes after the panel is rendered.
I propose that you do not use such inline event handlers.
Not only is it better to separate markup and behavior, but you should let sencha touch handle the messy business of unifying events across browsers.
At the very least give your tag an id and do Ext.get('id').on('tap', function(){...})
But still better look into MVC features to avoid such low-level code altogether.