I'm working on a presentation using xaringan, and am using a few gifs created by gganimate to illustrate some points about a model. It works great, except that once the gifs start playing they just keep playing, and sometimes they seem to start playing before I get to their slide.
I would like to be able to explicitly start and stop each gif, and the solution seems to be the giffer javascript library, but here is where I fall far short of "ninja" status. How do I install and load the giffer library for use by xaringan. I suspect it's somewhere in the YAML, possibly include, but that's as far as I've gotten
You can include javascript in the YAML by
output:
xaringan::moon_reader:
nature:
beforeInit: ["gifffer.min.js", "load.js"]
as mentioned here.
Here load.js just contains
window.onload = function() {
Gifffer();
}
but you can change the settings, styling of button etc as described in gifffer.
Related
I've tried loading a local html file using webkit_web_view_load_uri() with a file:// URL. However, the webview would display a blank page. To circumvent this, I tried using webkit_web_view_load_html() and it worked correctly.
Now that I'm trying to load some images in the html using the <img> tag, the images aren't loaded (It displays a blank page).
I'm puzzled because I tried before (~ 2 months ago) a similar method and it worked.
Note: I copied the contents of the generated HTML into a file and loaded it with Firefox and it worked as it should (The images are visible), but with another WebKitGtk application I had lying around the images didn't load.
Note: I'm using C++ as the main programming language (I'd prefer having C++ types in the solutions only if possible)
Note: I have set webkit_settings_set_allow_file_access_from_file_urls() and webkit_settings_set_allow_universal_access_from_file_urls() to TRUE
Ok, I've managed to solve this. The solution had NOTHING to do with webkitgtk, which is strange. It seems that the application was trying to download the page instead of loading it. This traces to a faulty MIME type database.
Tl;Dr:
Execute this:
rm ~/.local/share/mime/packages/user-extension-html.xml
update-mime-database ~/.local/share/mime
and use webkit_web_view_load_uri() instead of webkit_web_view_load_html() with a file:// URI
I had the same problem in C. You have to explicitly set file:// as base_uri when you call webkit_web_view_load_html().
See also answer here
I want to introduce into my project some code to be highlighted on certain pages (like index.hbs) I've searched for libraries that can do this and found tools like highlight.js, but I was unable to use it in my ember project. Can anyone explain how to import a custom library like highlight.js or can someone give me a recomandation for a tool. I've tried to use this tool: ember-cli-eg-code-highlight, but it is not specified how to use it. Ok I have installed it, pasted the {{highlight-js code=file lang=language hasLineNumbers=hasLineNumbers}} in my index.hbs, but it does not work. Also the ENV.emberHighlightJs: { style: 'arta' };I have no ideea where to put it. Tried to put it inember-cli-build.js but it is not working.
I have found also markdown-code-highlighting. But I am lost at this step: "In your Brocfile you'll need to import the CSS styling you want for the highlighter. " So where exactly is my brocfile in my ember project?
Did you restart ember server ?
You can find example of using ember-cli-eg-code-highlight here: https://github.com/EmberGrep/ember-cli-eg-code-highlight/blob/master/tests/dummy/app/templates/application.hbs
But it looks like addon is buggy. So it worth to check this PR https://github.com/EmberGrep/ember-cli-eg-code-highlight/pull/9
P.S. about brocfile -- now it names as ember-cli-build.js at the root of project
I am doing my first project in Foundation 6 and am having trouble getting the responsive navigation to work. I started with the basic page template that comes with Foundation (installed F6 using CodeKit) then I pasted in the responsive menu code exactly as it appears here http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-toggle but when viewed at small screen sizes, the word "menu" appears, but clicking it does nothing.
The Drilldown responsive menu also does not work -- pasted in the drilldown menu code (second example down, on the page referenced above) and what appears is a long long list of links, nothing is collapsed and nothing slides in. There must be a script missing but I have triple-checked and app.js, foundation.js and jquery scripts are loaded. What else am I missing?
First of all sorry for my bad English, did you initialize foundation's javascript?
That can be done with the following code in youre custom javascript file:
$(document).foundation();
I do it with jQuery like this:
$(document).ready(function() {
$(document).foundation();
});
for more information see: Foundation-6 documentation - initializing
and please check if you have the proper file structure for the foundation files, please see the following documentation: Foundation-6 documentation - File Structure
tl;dr: Faulty purifycss configuartion in the gulp.babel.js file.
I also had this problem. My setup:
generator-webapp
webapp's jade recipe
I can get the responsive dropdown menu to work by using the tab and enter key. This means that the relevant js files are being loaded correctly. The navigation 'burger' also does not appear.
Upon using the chrome dev tools to inspect the responsive dropdown menu example from the foundation website, I noticed that style of <button class="menu-icon" type="button" data-toggle=""></button> is being effected by the .menu-icon CSS rule from the scss partial, _menu-icon.scss. Mine wasn't. When I looked, the foundation.scss file from the app/ has the exact same style rule. The converted foundation.css was being served from the .tmp/ folder, but did not have the .menu-icon CSS rule. Then I suspected purifycss again (which I had commented out of the gulp file before and forgot to reset the gulp serve, saw no fix and thus falsely excluded the purifycss rule from the list of suspects).
I set my gulp styles task up like this:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
/*Stupidly assumed that purifycss supported jade files as src files*/
.pipe($.purifycss(['app/**/*.js', 'app/*.jade']))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
Which meant that the necessary styles were being deleted (including .menu-icon). I think I will use stylperjade or rearrange the tasks so that I can do this: .pipe($.purifycss(['app/**/*.js', '.tmp/*.jade']))\
Let me know if this was your solution as well
I am trying to get the icon of an app (doesn't matter which one). I noticed Qt doesn't have something like GDesktopAppInfo and therefore I tried getting it through QSettings from /usr/share/applications/appname.desktop. That's already a problem, because the desktop file might not be there. Anyway, going further to extract the Icon key. Now I dunno how to find the url (notice that I need the url, sure I could make a QIcon, but I need to export it to QML, which would mean another QQuickImageProvider class, anyway, I don't wanna go that way). Is it possible, or is the aforementioned QQuickImageProvider my only solution?
Here is a little guide that might help you find your way. Keep one thing in mind: start with the basic case, get code running and extend it to more difficult cases later.
For now, lets assume the following:
.desktop file is in /usr/share/applications
App icon is in SVG or PNG format
App icon path is absolute
App name is lower case and does not contain whitespace
Input: App name "git-cola"
Read /usr/share/applications/git-cola.desktop
Use a QRegularExpression to get the Icon value
You get an absolute iconPath, e.g. /usr/share/git-cola/icons/git.svg
Have an invokable C++ function that exposes a QUrl to QML
In QML, set the source property of an Image to getIconUrl("Target App")
where 4. looks something like
QUrl MyClass::getIconUrl(QString appName)
{
// get iconPath from appName
return QUrl::​fromLocalFile(iconPath);
}
If things are running, you can add support for
Multiple .desktop locations (there might be a handful or so)
Add support for relative paths
Add support for XPM files
You can use QIcon::fromTheme(QString iconName) to find the icon. It works most of the time but it's not as reliable as gtk
I want to change the color of the headers in a grouped list. For the moment I've got the default theme. I think I have to use something like "$list-header-bg-color" but :
WHERE can I use it ? I tried to write something like :
$list-header-bg-color = '#CCC'
directly at the end of the "sencha-touch.css" file but it doesn't work at all ... Somebody can explain me how does it works ? (with a little example please). Thanks in advance
First you need to install ruby
then install ruby gems
then install compass
then open your application *.scss file (should be in resources/sass/)
after the line
#import 'sencha-touch/default/all';
include your line
$list-header-bg-color = '#CCC'
Note that by default the value of this var is
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
Maybe you can change the base-color to have a more "unified" look (depending on what you want to do ...)
then compile your scss file
compass compile
Now your theme should have been compiled to your app.css and your new color is good :)
For more detail check this article I wrote not long ago : sass-for-sencha-touch-2-windows-7
Sencha is using SASS for theming. So that line should go in the sencha-touch.scss file. Then you should compile that file with compass to get a css file. See this videos:
http://vimeo.com/26506883
http://vimeo.com/17879651
slides from presentation http://www.slideshare.net/senchainc/theming-sencha-touch
reference docs http://dev.sencha.com/deploy/touch/docs/theme/
Check this also http://www.sencha.com/blog/sencha-touch-theme-contest-winners-announced/