I am building an app for the first time using Meteor. Due to an accessibility issue, we would like to offer two different Bootswatch themes to the users. I found a very useful explanation of how to switch Bootswatch themes here:
How to dynamically change themes after clicking a drop down menu of themes
(which references a handy fiddle in the accepted answer: http://jsfiddle.net/82AsF/)
I have tried placing the provided javascript inside myapp.html in the <head> tag. I also tried placing it inside the myapp.js file. (Then I tried placing in many assorted places just to see what would happen ;-) )
Nothing I have tried is working and it seems that it is the Meteor framework that is, understandably, "getting in the way". Is there an approach that will work for switching Bootswatch themes in a Meteor app?
Dynamically switching bootswatch themes is easily done as demonstrated in the originally referenced question: How to dynamically change themes after clicking a drop down menu of themes
Meteor (plus iron-router in my case) complicates this a little through the event maps and the simple fact that the dynamic change is occurring in the <head>.
Another answered question explains how to handle an event in jQuery directly (bypassing Meteor event maps): How to handle custom jQuery events in Meteor?
The code snippet below shows how I put the two ideas together. It's all working as expected.
var themes = {
"default": "bootstrap311/css/bootstrap.default.min.css",
"readable" : "bootstrap311/css/bootstrap.readable.min.css",
"slate" : "bootstrap311/css/bootstrap.slate.min.css"
}
$(function(){
var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
themesheet.appendTo('head');
$('body').on('click', '.theme-link', function (e) {
var themeurl = themes[$(this).attr('data-theme')];
themesheet.attr('href',themeurl);
});
});
Related
I'm themeing a drupal site using display suite - all current versions. As you may realise, in drupal there are many ways to achieve an equivalent result. I have created a number of custom layouts in display suite. Now I want to add jquery to some of those layouts so that the jquery only loads when those layouts are displayed (as opposed to making the same jquery file load on every page in the theme).
Sure I can use something like drupal_add_js() or $form#attached etc. But what's wrong with adding a tag in my template file? What is the 'Display Suite method' for doing this - I have to believe they (Display Suite team) have already thought of this...
Thanks.
One way to accomplish this is through hook_ds_pre_render_alter(), e.g:
/**
* Implements hook_ds_pre_render_alter();
* Add custom JavaScript.
*/
function MYMODULE_ds_pre_render_alter(&$layout_render_array, $context, &$vars) {
if($vars['type'] === 'MY_NODE_TYPE' && $vars['view_mode'] === 'full') {
drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/js/my_js_file.js');
}
}
Adding the JavaScript through #attached would be preferable as it seems cleaner and is more in line with the approach taken in Drupal 8, however I couldn't find a way to do this. Display Suite seems to override hook_node_view() and adding #attached in to an implementation of ds_pre_render_alter() didn't get me anywhere. Declaring a .js file in a custom DS .inc layout file is also unfortunately not supported.
Implementing drupal_add_js() directly in a .tpl.php template file might not work as expected and seems to not be 'best practice' (see https://drupal.stackexchange.com/questions/20520/drupal-add-js-in-html-template-file).
Interestingly though in Drupal 8 drupal_add_js() is being removed entirely in favour of #attached and it will be possible to add JavaScript directly in templates, see https://www.drupal.org/theme-guide/8/assets).
My site works fine when the data is in a template, but once I try to route to it using iron:router, a background image and most remaining content no longer appear. (Some of the content still appears with working css, JS components so I know that those files are being read. Also, when inspecting the element, all the text, images are still visible in the code, but not the website.
This works fine (index.html):
<body>
{{>home}}
</body>
This adds another {{>home}} section, but the new section is having issues rendering as explained above (router.js):
Router.map(function() {
this.route('home', {path: '/'});
});
Are you on the latest iron:router? I had a similar problem, and inquired about it in this pull request:
https://github.com/iron-meteor/iron-router/issues/1051
Latest response indicates this should be fixed now!
You've followed the wrong tutorial :( There are plenty of tutorials and articles out there explaining to define routes like you did.
However, the Iron Router project page explains how to define routes differently.
For more information on routes, have a look at this article about Iron Router as well.
Fixed: problem was not with iron:router but rather that not all elements were loaded into the page yet. Document.ready() works fine when I directly called template.
Issue is that when iron:router loads the template, the new page elements are being loaded after the JS files were already called (JS that animates the images/text in).
Solution: use rendered instead of document ready:
Template.MyTemplate.rendered = function(){
}
I need to use the extra powers of the swfobject api. This object is a new way of embedding Youtube videos into web sites.
Pasting code that I found from Google's tutorial directly into the WordPress editor was in-effective. WordPress would not treat this as active code.
So, I created a new template file and inserted my code into that file. This worked relatively well. The code went live and I got the extra feature that I was looking for, which was that I am able to have the visuals of the video autoplay, and to have the sound muted by default.
However, this has messed up the layout and flow of my menus which where just above the video.
Can anyone tell me where to proper place to put this code is, or is this question too specific. If it will help you can see the messed up page at:
http://bestoftimesusa.com/home-mute-test/
and how it is supposed to look at:
http://bestoftimesusa.com
The fully functional code that got embedded is this:
<script type="text/javascript" src="/wp-includes/js/swfobject/swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var ytplayer = false;
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/IBjstQceGBk?enablejsapi=1&playerapiid=ytplayer&version=3&autoplay=1",
"ytapiplayer", "370", "238", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.mute();
}
</script>
</div>
Unless you want the same youtube video to appear on all pages (of a certain type), I don't think putting that entire block in your template files makes sense. The only part that really makes sense for a template file is the first line. The lines after that are video-specific.
By default, WordPress filters out javascript from posts. You can disable that filtering with a plugin which would allow you to include javascript in your posts.
Using that plugin, you can set javascript filters on a global or per-post basis. It seems like a per-post basis would work for you so I'd go with that, just enabling it on the page I wanted.
Two last things:
You could put the first line in one of your template files to eliminate having to put that in every post
You have one opening <div> tag but two closing </div> tags, that could be expected, but I'd double check.
After installing superfish on my Drupal 7 site, I don't know what to do next. I searched the web and read some brief tutorials, i was told to load the css and js files to my theme. I got Superfish library from https://github.com/mehrpadin/Superfish-for-Drupal, it contains a sample which is used as an example. Could you give me a hint? Thanks in advance!
I don't use any modules when I wanna do that, you can do that by adding just 2 javascript to your theme's .info file. Make sure to place superfish.js before main.js.
scripts[] = js/superfish.js
scripts[] = js/main.js
Add the following code to main.js file:
jQuery(function()
{
jQuery('div#menu_wrapper ul.menu').superfish(
{
delay : 500, // one second delay on mouseout
animation : {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed : 'fast', // faster animation speed
autoArrows : false, // disable generation of arrow mark-up
dropShadows : true // drop shadows
});
});
I dunno a place to download to download the superfish library, but I have it minified in my website. http://abklimo.website-chef.com/sites/all/themes/abklimonew/js/superfish.js
Hope this helps,
Muhammad
The Nice Menus module allows you to create such menus using Superfish. I recommend that you check it out. I am unsure if it uses the same wrapper that you have chosen, but it works reasonably well and comes with documentation.
Good luck!
I am writing a Firefox extension and I am using their Add-on SDK; but I can't figure out how to inject a local CSS file from the data folder into the webpage. It would be great if there were a way to do it via page_mod package.
As of Add-on SDK 1.14 there's experimental (API may change) support for this in the page-mod module:
var pageMod = require("sdk/page-mod").PageMod({
include: "*",
contentStyleFile: require("sdk/self").data.url("my-style.css")
});
See Modifying Web Pages Based on URL for an elaborate guide to using page-mod.
There's a page on the Addon SDK's wiki discussing issues with the current implementation, although it seems a bit outdated.
Under the hood it uses nsIDOMWindowUtils.loadSheet() to add the stylesheet without touching the page's DOM. (This API was added in Firefox 18, see bug 737003. Before that you had to use nsIStyleSheetService which was similar, but not tab-specific.)
Before that you could use the page-mod's content script to insert the link or style element (example). [edit] thanks to lwburk's comment, here's a more elaborate elaborate description in Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox By Mark Pilgrim: "Alter a Page's Style" section.
To insert CSS from main.js one can now use "page-mod":
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*.org",
contentStyleFile: data.url("my-page-mod.css")
});