Following the Visualizing Your Grids https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids instructions, I've been attempting to get the toggling functionality to work.
First off, can someone explain what the following is actually suppose to do?
compass install singularitygs/grid-toggle
I am assuming create a folder and some files, but when I run the command, nothing happens. If I do the following..
compass install singularitygs/box-sizing
It creates directories and files as expected.
My project works fine with Singularity (this is just 1 SASS file, 1 html file)
#include background-grid works within the SCSS file, but that's the first way of doing it and I'm interested in the toggle version.
I have tried to manually include the grid.js AND grid.min.js file provided and referenced them in the head of my index.html file. I added the data-development-grid="show" to the body tag as suggested. I can't even get the grid to show by default, let alone getting it to work with the toggle.
Here is part of my gem file
gem 'toolkit', '~>1.0.0'
gem 'singularitygs', '~>1.0.7'
gem 'breakpoint', '~>2.0.2'
group :development do
gem 'guard'
gem 'guard-compass'
gem 'guard-livereload'
end
And my simple HTML file
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css" />
<script type="text/javascript" src="javascripts/grid.min.js"></script>
<script type="text/javascript" src="javascripts/grid.js"></script>
</head>
<body data-development-grid="show">
<h1>test</h1>
<div id="mydiv" class="no-mqs container">
<p>This is my div</p>
</div>
</body>
</html>
And my 1 SCSS file
#import 'compass';
#import 'compass/reset';
#import 'toolkit';
#import 'singularitygs';
#import 'breakpoint';
There are some grid variables, a container class, some other basic styles below all of the above imports.
Any help appreciated.
Thanks
The quick answer is to refer you to my question and answer on the same topic, about two questions ago. However, basically, there are three ways. The first you have found and you can place '#include background-grid' in the element that you wish to have a grid shown. I think you will find that you can't install grid-toggle, as directed, but I don't think you need to. The second method is the toggle. You have to place '#include grid-toggle' in your style.scss in either a * { ... } selector or an html{ ... } selector. You reference the script grid.js in the head of your web page. However, that script assumes you want the grid on your body div. You add data-development-grid="show" (or "hide") inside the body opening div.
You can put the grid on another element such as a wrap div (don't we all use wrap?), by adding data-development-grid="show" to the wrap div, but then you need to modify the grid.js file. Here is my javascript version as a guide (seems to work, but I'm no programmer!):
(function() {
window.onload = function() {
var body = document.body;
body.onkeypress = function(e) {
if (e.keyCode === 103 || e.charCode === 103) {
var wrap = document.getElementById('wrap');
var dev = wrap.getAttribute('data-development-grid');
if (dev === null || dev === 'hide') {
wrap.setAttribute('data-development-grid', 'show');
}
else {
wrap.setAttribute('data-development-grid', 'hide');
}
}
};
};
})();
BTW, your body or wrap (whichever you choose) must not have a background colour or image because the grid will be underneath and therefore invisible.
The third method is the overlay, which I particularly like because it sits over the background colour. for this, add #include grid-overlay('#wrap'); to the *{ ...} or html{ ... } element in your style.scss file. You will get a 4-line symbol in the bottom left and when you mouseover it, it causes the grid to appear - mouseoff = disappear.
I've assumed that you want the grid in a wrap div, but you can put it where you like.
I hope this helps.
For me it worked using the command: bundle exec compass install singularitygs/grid-toggle
Related
I have a webpage that contains a <main/> div that I am using as a dropzone. That div is covering most of the screen, and I do not want fine-uploader to modify the CSS of this specific div.
When a file is dragged onto the page, I would like to interactively display an help page. That help page is an hidden div floating above the page. I'd like to instruct the DragAndDrop module of fine-uploader to use <main/> as a dropzone, and to control (either by adding a CSS class, or better some of my Javascript code) the other hidden div.
For now the code looks like:
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: document.getElementsByTagName('main'),
classes: {
dropActive: "cssClassToAddToDropZoneOnEnter"
},
callbacks: {
processingDroppedFilesComplete: function(files, dropTarget) {
fineUploaderBasicInstance.addFiles(files);
}
}
});
where fineUploaderBasicInstance is an instance of qq.s3.FineUploaderBasic.
I tried adding a second item into dropZoneElements (the hidden div); but the approach has two issues: first the CSS code gets very messy in my case, and display:block is added to <main/> (https://github.com/FineUploader/fine-uploader/blob/master/client/js/dnd.js#L251 ?) on Chrome, which breaks my layout – again here <main/> should only be the dropzone, not an element that is being modified.
Is there a way to change the behaviour of the DragAndDrop module to control a separate div (for example by having a callback on dragover)?
There's no need for JS control over the help block. CSS can easily do the job as it follows using the tilde / squiggle (~) selector (if it's not exactly next to main. In case it is, use the adjacent (+) selector) :
HTML Code:
<div id="main">... your code ...</div>
<div id="help">... help notes ...</div>
CSS Code (if help div is next to main, as stated above, use +, if not, use ~):
main.cssClassToAddToDropZoneOnEnter + #help {
display: block;
/* and other css properties when shown, maybe a transition effect or something */
}
I'm using animate.css to add some transistions to my meteor app. However, there is this problem that animate.css creates an almost transparant overlay over my buttons/images etc.
I have a main div where the animate.css class is added depending on changing page views etc. Very simplified this is my HTML.
<body>
<header class="header></header>
<div class="animate-holder {{animated class}}>
<div class="class1></div>
<div class="class2></div>
</div>
</body>
From what I've tested this will happen all the time and it doesn't matter how I use transistions. Is there a simple way to NOT have this overlay?
EDIT:
I can hack it like this, but this is very very ugly. But maybe it creates more insight into the problem:
Template.DetailsSubmit.rendered = function() {
Meteor.setTimeout(function() {
var classes = $('div.animated').attr('class');
$('div.animated').removeClass(classes);
}, 1000)
}
You can make this specific div clickable through using the very useful (and not famous enough) pointer-events css property:
div.animated {
pointer-events: none;
}
I want to use the cytoscape-panzoom plugin distributed with Cytoscape.js. In my html page, I have included the according files from the cytoscape-web/plugins directory, as well as jquery and jquery-ui:
<link rel="stylesheet" href="javascript/jquery.cytoscapeweb-panzoom.css" />
<script type="text/javascript" src="javascript/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.cytoscapeweb-panzoom.js"></script>
In the css file jquery.cytoscapeweb-panzoom.css I have modified the locations of the png files containing the ui-icons as advised in the comment (the png files are accessible, I can see them when I paste the link in the browser):
.ui-cytoscapeweb-panzoom-zoom-button .ui-icon {
/*background-image: url("../images/ui-icons_ffffff_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_ffffff_256x240.png");
}
.ui-cytoscapeweb-panzoom-pan-button .ui-icon {
/*background-image: url("../images/ui-icons_000000_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_000000_256x240.png");
}
.ui-cytoscapeweb-panzoom-static .ui-cytoscapeweb-panzoom-zoom-button .ui-icon {
/*background-image: url("../images/ui-icons_000000_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_000000_256x240.png");
}
However, after the page loads, the panzoom controls (the circle, slider, etc.) are missing their icons, as can be seen in this screenshot (resource does not exist anymore). Does anyone have a clue what I'm doing wrong?
If you're building from the master branch, you may have to redownload the stylesheet. I think the selectors you have are out-of-date since the name change. The class names wouldn't have cytoscapeweb in the name anymore.
I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.
I'm working on my first GM script, to replace the Flash previews on http://www.freesound.org with HTML 5 audio tags, and to add a download link to search results. I have the latter working fine, but I can't get the audio tag to display in Firefox 3.5.9. Here's my script:
// ==UserScript==
// #name FreeSound HTML 5 Preview
// #namespace http://thewordnerd.info
// #description Replace Flash-based sound previews on freesound.org with audio tags and add quick download links
// #include http://freesound.org/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// ==/UserScript==
$(document).ready(function() {
$("embed").remove();
$(".samplelist").each(function(index) {
sampleNo = $(this).find("a:first").attr("href").split("?")[1].split("=")[1];
userName = $(this).find("a:eq(1)").html();
title = $(this).find("a:first").html().replace(/ /g, "_");
url = "/download/"+sampleNo+"/"+sampleNo+"_"+userName+"_"+title;
$(this).find("script").replaceWith("<audio src='"+url+"' controls='controls' type='audio/wave'/>");
//$(this).find("audio").removeAttr("tabindex");
$(this).append("<a href='"+url+"'>Download</a>");
});
});
I can see the element in Firebug and it seems just fine.
Thoughts on what I might be doing wrong here? Since the download link does download the requested file, since it's a wave and since I think I've set the correct type, I'm at a loss as to why this isn't displaying.
It may not be your script so much as the freesound.org site/server.
When I run a modified version of your script, the audio controls all appear for a split second before reverting to the error display, like so:
Firefox reports MEDIA_ERR_SRC_NOT_SUPPORTED for the files I checked.
Save this code to your machine and then run it with Firefox:
<html>
<head>
<title>Audio File test</title>
</head>
<body>
<audio id="aud1" controls="true" type="audio/ogg"
src="http://www.freesound.org/download/7521/7521_abinadimeza_Rainfall.ogg">xxx</audio>
<audio id="aud2" controls="true" type="audio/ogg"
src="http://developer.mozilla.org/#api/deki/files/2926/=AudioTest_(1).ogg">xxx</audio>
</body>
<script type="text/javascript">
window.addEventListener ("load", ErrorReport, false);
function ErrorReport (evt)
{
console.log (document.getElementById ("aud1").error);
console.log (document.getElementById ("aud2").error);
}
</script>
</html>
.
You'll see that the known good file, from Mozilla, works correctly but the one from freesound.org does not. This may be a bug/limitation in Firefox -- both files play fine on my local player.
Here is a link to the Firefox bug system, to search for or report bugs.