I was digging around but couldn't find the answer. Does anyone know the classes that Modernizr adds to the html tag? I want to hide a div on mobile devices.
I want to target it via CSS but i can't find the class to target the devices using modernizr
According to the CSS features, HTML5 features, and misc. features that Modernizr detects, there is no mobile feature. I guess that would have to rely on a UserAgent string, which is not a smart idea. The whole point of Modernizr is to detect certain feature sets, which you can use to determine whether or not a feature of yours would work (for example, oh this browser doesn't have inline-svg so don't display this SVG; instead of, oh we think this is IE8 so let's not show this SVG).
I've come across multiple scenarios where my modals (pop ups) don't play nicely on small mobile / touch devices. In that case, I've always done something like this:
Register
<script>
$('a').click(function(e) {
if(!Modernizr.touch) {
e.preventDefault();
// show register modal
}
// fallback to page
});
</script>
Related
Is there an equivalent Greensock (GSAP) implementation or plugin that has similar behaviors to Metafizzy's Isotope.js (Masonry layout). Specifically, I have implemented a series of card and card promotion animations in isolation. I am now at the point of merging these into a single prototype. I am working behind a colleague who put together a separate prototype using Isotope that supports card shuffling even with cards "growing" to different states. I am unifying both internal efforts. Before I engage on GSAPifying Isotope, I would like to know if there is an existing or similar implementation that I can leverage.
Thanks in advance for your time!
Chris
For anyone still googling this, a quick solution to have gsap render the isotope animations is using the jquery-gsap-plugin that can be downloaded at their website. It needs to be added after all the other libraries, for example:
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.gsap.min.js"></script>
What this does is override all the jQuery.animate() methods - which is awesome. There are some exceptions however that are listed on the website as well.
Now the only thing that is left to do is tell isotope to use jQuery as the animation engine, details can be found in the documentation.
$('#grid').isotope({
itemSelector: '.item',
layoutMode: 'fitRows',
//etc
animationEngine: 'jquery'
});
And viola! The only caveat here that jQuery is required, so for anyone using pure vanilla or whatever will have to override the animations manually - how that's done is a whole other topic.
I'm wondering how to replicate the functionality of the draggable column/row dividers such as found at http://jsfiddle.net/.
Is this built on top of some library?
Thanks!
The draggable dividers in the jsfiddle site are implemented using the code in jsfiddle.net/js/LayoutCM.js and jsfiddle.net/codemirror/js/codemirror.js.
Note: The new code change in SO makes it really finiciky to directly link to the jsfiddle implementation in order to explain how they implemented something.
Other relevant StackOverflow questions include
Resize elements by dragging divider handler
Draggable div without jquery ui
What is a lightweight script jquery extension that implements a draggable divide ?
The is functionality is provided various projects including jquery plugins and other javascript scripts
jquery-divider
jquery-splitter
splitplane
jqueryui Resizable (used as component to implement)
jqueryui Draggable(used as component to implement)
mootools splitter
yui resize (used as component to implement)
jquery split plane
Also see other resources including
An example jquery splitplane implementation
The example splitplane in Google's closure library
split plane control in yui example
Most people seem to use an existing jquery plugin or make their own implementation using the Draggable and Resizable components, for example code see the other StackOverflow posts mentioned.
There's a webpage with something annoying on it which I'd like to hide every time I visit it. I thought a good way to do this would be to make an add-on for Firefox.
I've never done this before, and came across the web-based Firefox add-on builder. I'm not too sure where to go from here though. I know it should be quite easy to do this though. I suppose all I need to do is check if a block with a certain id is used on a website, and if it is, then delete/hide it from my view.
Is that the best way to do about this? If not, what do you suggest? If so, can you give me any tips to help me accomplish this?
Right, I got it:
Using just a standalone Firefox Add-On use the following code:
exports.main = function() {
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*.ca",
contentScriptWhen: 'end',
contentScript: 'document.getElementById("DIVID").style.visibility="hidden";'
});
};
Just replace DIVID with whatever you want.
Similarly, in Greasemonkey, just add this to the script:
document.getElementById('DIVID').style.visibility='hidden';
The only reason I didn't want to use Greasemonkey is that it isn't as easy to share. But it's convenience can't be beat!
Install the latest FF
Install the latest AdBlock Plus
Go to the website right click on specific element and then Inspect Element(Q)
Right bottom corner there is Hide with ABP(AdBlock Plus) button, click on it, then Add Element Hiding Rule
You can just use GreaseMonkey which is a very useful plugin for firefox. You can write your own script in JavaScript which operates on the page.
However, chances are that someone might have already written a script for the site in question that you can install from the http://userscripts.org/ repository.
In well-formed HTML, any particular value for the id attribute should occur at most once in a document. If your mission is to seek and destroy a recurring phenomenon, it might be labeled (if at all) with a class. This is the case with Twitter's "promoted tweets", for example.
var promotedTweets = document.getElementsByClassName("promoted-tweet");
for (k=0; k<promotedTweets.length; k++) {
promotedTweets[k].parentNode.removeChild(promotedTweets[k]);
}
Wouldn't Adblock Plus do the trick here? You can feed it an element hiding rule (based on the class or ID attribute) on any given website, if I recall correctly.
I used the up-and-coming jpm tool to write this, and incorporated the suggestions here. It is specifically for filtering certain div tags here on StackOverflow—how fitting. The code and the xpi add-on file is at Github.
An alternative in Firefox is to create a userContent.css file and add css which hides the div.
See https://superuser.com/a/319322/ and note the comment which points out that "Starting with Firefox 69, you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true".
I'm building a single page ad-free portfolio-type website using jquery Isotope. I would like to track how often each project (Isotope element - div with text and a slideshow in it) will be clicked to be able to compare project popularity. Can this be done with Google Analytics? Is that the best tool for that purpose or are there simpler/better/other ones? The provider provides a tool called Webalizer, but that does not allow me to hook up each project element. Google Analytics gives me only information regarding the entire site, not its parts. Thanks for any advice...
EDIT I'm reasonably good with jquery, maybe there's a simple programmatic solution?
This works, placed in the click function assigned to all items (in my case a click function assigned to a div inside the items); now, one can Google track which Isotope .item (e.g. project, image or slideshow, etc.) is more popular than others. Maybe this helps others...
var clicked = $(this).parent().data('item');
//console.log(clicked); to see if an item's data attribute gets read
_gaq.push(['_trackEvent', 'Item', 'Viewed', clicked, null, false]);
//_trackEvent(category (Event Name), action (Event Type), opt_label (Event Label), opt_value, opt_noninteraction) synopsis differs in google's guide and Google Analytics Tracking Code Debugger console output
I am sure this is on here already...
I want to be able to disable autocomplete for some CMS generated form fields with some frontend javascript code, preferably Prototype but neat javascript will do if it has no cross-browser problems.
I have ids for my boxes and I am not using some clever 'prototype autocomplete' (that seems to stuff the Google results on this). Regular browser autocomplete is what I want to turn off and not for the entire form.
Knew I would find it as soon as I asked:
$$('.MacGuffin')[1].setAttribute('autocomplete', 'off');
$$('.MacGuffin')[7].setAttribute('autocomplete', 'off');
That is specifying elements by class rather than id.