I have an Orbit Carousel on my foundation website and when I open the website with Adblock Plus enabled all the Orbit images are 0x0px.
Other adblock plugins don't cause this and adblock plus doesn't say it's blocking any ads.
How do I fix this?
This is what it looks like:
This is what it looks like with adblock plus enabled.
I was having the same problem with both ad blockers (Adblock and Adblock Plus) while using Foundation interchange on images.
<img data-interchange="[img/ad-small-375x560.jpg, (small)], [img/ad-medium-1000x250.jpg, (medium)], [img/ad-large-1280x200.jpg, (large)]">
Make sure you are not using the word "ad" on any of the filename called on your carousel.
Report incorrectly blocked content on easylist forum https://forums.lanik.us/viewforum.php?f=64
Related
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.
The documentation for the Foundation for Apps (and Angular Base Apps, which is the now-maintained fork of F4A) Interchange gives this example as a way to load only the small size of an image on mobile devices in order to save bandwidth:
<ba-interchange>
<img media="small" src="assets/img/small.jpg">
<img media="medium" src="assets/img/medium.jpg">
<img media="large" src="assets/img/large.jpg">
</ba-interchange>
However, while only the small image is displayed, the browser still sees three img tags and requests all three images, before angular is even loaded. This defeats the purpose of using the interchange at all, at least, if your purpose is to save bandwidth.
The Foundation 6 for Sites Interchange avoids this by putting all of the images into a data-interchange attribute string on the element instead. Does F4A have something similar that I'm missing? Or is there something about the above example code that I'm missing?
I would suggest using the ba-if directive provided by Angular Base Apps. This directive internally uses the ng-if directive, causing the img element to not be added to the DOM except when the specified media query is matched.
Your code can be re-written as follows using the ba-if directive:
<img ba-if="small only" src="assets/img/small.jpg">
<img ba-if="medium only" src="assets/img/medium.jpg">
<img ba-if="large only" src="assets/img/large.jpg">
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
Zurb Foundation's data-interchange works beautifully for me. In development.
But then I build and I end up with this sort of html:
<img alt='Why Believe' data-interchange='[/assets/images/logo.svg, (default)], [/assets/images/logo-square.svg, (medium)]'>
<noscript>
<img alt='Why Believe' src='/assets/images/logo-e8f041ee.svg'>
</noscript>
Can you spot the problem?
Middleman's build process smartly fingerprints all of the assets, and links to the fingerprinted ones. No "un-fingerprinted" assets get built. I want all of that.
But the asset paths in the data-interchange attribute get no fingerprints. Therefore they work in development, but not once built and deployed.
How can I make it so the data-interchange asset paths also get the fingerprint? (And if middleman calls the -e8f041ee something other than "fingerprint", please let me know!)
If you are going to use asset hashs then you should consider moving your images used by interchange to a new directory so they aren't automatically hashed. If you are not hosting on a CDN based setup, you should consider turning the cash busting hashes off.
For example I place images in source/blog/featured-images rather than /images/blog/... to avoid them being hashed for a similar reason (because I am defining the name via yml frontmatter.
Ive got the following code in my RSS consumer (Vandelay Industries RemoteRSS) in my Orchard CMS implementation:
#using System.Xml.Linq
#{
var feed = Model.Feed as XElement;
}
<ul>
#foreach(var item in feed
.Element("channel")
.Elements("item")
.Take((int)Model.ItemsToDisplay))
{
<li>#T(item.Element("description").Value)</li>
}
</ul>
The rss feed Im using is from Pinterest, and this bundles the image, link, and a short description all inside the 'description' elements of the feed.
<description><a href="/pin/215609900882251703/"><img src="http://media-cache-ec2.pinterest.com/upload/88664686384961121_UIyVRN8A_b.jpg"></a>How to install Orchard CMS on IIS Server</description>
My issue is that I don't want the text bits, and I also need to prefix the 'href=' links with 'http://www.pinterest.com'.
I've managed to edit the original code with my newbie skills to the above,, which essentially displays the images as links which are only relative and thus pointing locally to my server. These images are also then followed by the short description.
So to summarise, I need a way to prefix all links with 'http://pinterest.com' and then to remove the fee text after the image/links.
Any pointers will be greatly appreciated, Thanks.
You should probably parse the description, with something like http://htmlagilitypack.codeplex.com/, and then tweak it to add the prefix. Or you can learn regular expression and do without a library. Could be a little trickier and error-prone however.