I am trying to create dynamic values, but have failed so far. The created pixel value seems to lose the ability to be used in calculations.
$numericValue: 30;
$pixelValue: $numericValue+px;
// also tried $pixelValue: #{$numericValue}px;
$calc: $pixelValue * 2;
// also tried $calc: unquote($pixelValue) * 2;
This throws an error
Syntax error: Undefined operation: "30px times 2"
The trick is to use * 1px when you want to add a unit. Using +px or interpolation (#{$numericValue}px) turns it into a string.
$numericValue: 30;
$pixelValue: $numericValue * 1px;
$calc: $pixelValue * 2;
You need to define the unit you will use. If you are working with pixels you can create dynamic values adding px to the $numericValue.
$numericValue: 30px;
$pixelValue: $numericValue;
$calc: $pixelValue * 2;
Related
I want to add the unit after a random($limit: 100) i want in the css : border-radius: <the random number>%
You can multiply the result from random() by 1% (or any other unit you may want) to append the unit. The outer parenthesis is a sass feature, so those type of calculations only work with alike-units or unitless + alike-units.
border-radius: (random($limit: 50) * 1%);
I am currently stuck on a probably very simple question.
How do I validate my DateIntervalType to be != 0 - meaning atleast something has been selected.
And how do I set a minimum/maximum: for example minimum interval of 1 day.
Background: I want to send an email every X years/months/days depending on the user select - an interval of 0 would mean permanent email sending, which I do not want.
Sadly I did not find anything helpful yet. Also tried integer assertations like #Assert\GratherThan etc. but that does not work.
Thanks in advance
Solution: Thanks to #Arleigh Hix for putting me on the right direction.
I solved my problem with following solution:
/**
* #Assert\Expression("this.checkInterval()")
*/
private $interval;
public function checkInterval() {
return $this->getTimestamp()->add($this->getInterval()) > $this->getTimestamp(); //getTimestamp() returns a DateTime
}
So basically just add the interval to any date and compare the new date to the initial date. With this way you can also get the difference in seconds and compare for min max values.
Better practise is probably to create a custom validator which will be my next step.
It looks you should be able to use an Expression constraint Maybe like this (I'm not sure about syntax for constructing the \DateInterval in the annotation)
/**
* #Assert\Expression(
* "value >= minimum",
* values = { "minimum": new \DateInterval('P1D') }
* )
*/
$dateIntervalField;
Alternatively, you should be able to set your minimum interval to an entity property and then compare value to that.
public function __construct()
{
$this->minInterval = new \DateInterval('P1D');
}
/**
* #Assert\GreaterThanOrEqual(
* value = this.minInterval
* )
*/
$dateIntervalField;
I have a problem with the following code:
#viewport-large: 1440px;
#viewport-medium: 1366px;
#viewport-small: 1280px;
#type: medium;
#setting: ~"#{viewport-#{type}}";
#value: (#setting + 1); // here can't add 1
It will show an error message in the LESS compiler saying: "Operation on an invalid type".
Can anyone tell me why this is the case? What should I do?
The output of Less' CSS escape function (e() or ~"") is a string and you can't add a number to it. This is why the compiler reports Operation on invalid type.
So, instead of doing it that way make use of the double resolution (##) like in the below code block:
#viewport-large: 1440px;
#viewport-medium: 1366px;
#viewport-small: 1280px;
#type: medium;
#setting: "viewport-#{type}"; /* this won't resolve into 1336px as yet */
#value: ##setting + 1px; /* resolution to 1336px + addition happens here */
In this method, we just form the variable name and set it to the #setting variable (instead of setting a actual px value) and so the real px value's type remains unpolluted. In the next line when we use the double #, Less compiler would try to fetch the value that is held by the variable whose name is same as the value of #setting variable and immediately sum 1px to it instead of converting it to a String.
Note: If you have the Strict Math option (--strict-math) enabled then the addition operation must be wrapped inside extra braces like below. Else, it would plainly output a concatenated value like 1366px + 1px instead of performing the addition and outputting 1367px.
#value: (##setting + 1px);
The --strict-math setting is disabled by default but some of your projects could have enabled it.
Overall context: I have a db of cross-references among pages in a wiki space, and want an incrementally-growing visualization of links.
I have working code that shows clusters of labels as you mouseover. But when you move away, rather than hiding all the labels, I want to keep certain key labels (e.g. the centers of clusters).
I forked an existing example and got it roughly working.
info is at http://webseitz.fluxent.com/wiki/WikiGraphBrowser
near the bottom of that or any other page in that space, in the block that starts with "BackLinks:", at the end you'll find "Click here for WikiGraphBrowser" which will launch a window with the interface
equivalent static subset example visible at http://www.wikigraph.net/static/d3/cgmartin/WikiGraphBrowser/:
code for that example is at https://github.com/BillSeitz/WikiGraphBrowser/blob/master/js/wiki_graph.js
Code that works at removing all labels:
i = j = 0;
if (!bo) { //bo=False - from mouseout
//labels.select('text.label').remove();
labels.filter(function(o) {
return !(o.name in clicked_names);
})
.text(function(o) { return ""; });
j++;
}
Code attempting to leave behind some labels, which does not work:
labels.forEach(function(o) {
if (!(d.name in clicked_names)) {
d.text.label.remove();
}
I know I'm just not grokking the d3 model at all....
thx
The problem comes down to your use of in to search for a name in an array. The Javascript in keyword searches object keys not object values. For an array, the keys are the index values. So testing (d.name in clicked_names) will always return false.
Try
i = j = 0;
if (!bo) { //bo=False - from mouseout
//labels.select('text.label').remove();
labels.filter(function(o) {
return (clicked_names.indexOf(o.name) < 0);
})
.text(function(o) { return ""; });
j++;
}
The array .indexOf(object) method returns -1 if none of the elements in the array are equal (by triple-equals standards) to the parameter. Alternatively, if you are trying to support IE8 (I'm assuming not, since you're using SVG), you could use a .some(function) test.
By the way, there's a difference between removing a label and just setting it's text content to the empty string. Which one to use will depend on whether you want to show the text again later. Either way, just be sure you don't end up with a proliferation of empty labels clogging up your browser.
I'm adding sqlite support to a my Google Chrome extension, to store historical data.
When creating the database, it is required to set the maximum size (I used 5MB, as suggested in many examples)
I'd like to know how much memory I'm really using (for example after adding 1000 records), to have an idea of when the 5MB limit will be reached, and act accordingly.
The Chrome console doesn't reveal such figures.
Thanks.
You can calculate those figures if you wanted to. Basically, the default limit for localStorage and webStorage is 5MB where the name and values are saved as UTF16 therefore it is really half of that which is 2.5 MB in terms of stored characters. In webStorage, you can increase that by adding "unlimited_storage" within the manifest.
Same thing would apply in WebStorage, but you have to go through all tables and figure out how many characters there is per row.
In localStorage You can test that by doing a population script:
var row = 0;
localStorage.clear();
var populator = function () {
localStorage[row] = '';
var x = '';
for (var i = 0; i < (1024 * 100); i++) {
x += 'A';
}
localStorage[row] = x;
row++;
console.log('Populating row: ' + row);
populator();
}
populator();
The above should crash in row 25 for not enough space making it around 2.5MB. You can do the inverse and count how many characters per row and that determines how much space you have.
Another way to do this, is always adding a "payload" and checking the exception if it exists, if it does, then you know your out of space.
try {
localStorage['foo'] = 'SOME_DATA';
} catch (e) {
console.log('LIMIT REACHED! Do something else');
}
Internet Explorer did something called "remainingSpace", but that doesn't work in Chrome/Safari:
http://msdn.microsoft.com/en-us/library/cc197016(v=VS.85).aspx
I'd like to add a suggestion.
If it is a Chrome extension, why not make use of Web SQL storage or Indexed DB?
http://html5doctor.com/introducing-web-sql-databases/
http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/
Source: http://caniuse.com/