Any chance to use this in stylus:
-webkit-filter: invert();
whitout
#css{
.something {
-webkit-filter: invert();
}
}
Thnx
The issue seems to be the built-in function invert(color). The only solution I can think of (bar renaming the bif invert) is this:
.foo
-webkit-filter unquote("invert()")
Related
I've been searching the i-net now for 2 days and still can't find a solution for my problem so I want to ask you.
Background: I have a unordered list with list items and each li has an ::after element. I want to add a class to the li on click on the ::after Element.
Here is the important code:
/* jslint browser: true */
/*global window */
window.onload = function() {
//Possible Solution - 1st Try
var lit = document.getElementById("li1");
function showMe(){
this.classList.add("in-view");
console.log(this.className);
}
document.getElementById("li1").addEventListener("click", showMe.bind(this,lit),false);
// Possible Solution - 2nd Try
var liitems = document.getElementsByClassName("liitems");
function pullTextOnClick() {
liitems[i].classList.add("in-view");
}
for (var i=0; i<liitems.length; i++) {
liitems[i].addEventListener("click",pullTextOnClick, false);
}
};
.timeline ul li {
list-style-type:none;
position:relative;
width:6px;
margin:0 auto;
padding-top:50px;
background:#fff;
}
.timeline ul li::after{
content:'';
position:absolute;
left:50%;
bottom:0;
transform: translateX(-50%);
width:50px;
height:50px;
border-radius:50%;
background: inherit;
cursor:pointer;
}
<div class="container">
<section class="timeline" id="timelineexpand">
<ul>
<li class="liitems" id="li1" onclick="showMe()">
<div>
<time>1992</time>
Sth happend
</div>
</li>
<li class="liitems" id="li2">
<div>
<time>1997</time>
Sth else
</div>
</li>
How I understand my problem and what I found out on the Internet:
The addEventListener opens the 2nd argument (eventHandler) with an object reference. Which is, when I log it with the console, often the "window" or "undefined". So I have to somehow tell the function (showMe or pullTextOnClick) what "this" is or which li-element to use.
I would prefer it, if the eventListener would be in the for loop and constantly checking if a li-Node was clicked. If this happens, the index of the li-element should be forwarded to the function, which then adds the class "in-view".
The problem: The function showMe/pullTextOnClick does not fire. If i add a console.log inside these functions, they don't log anything. Why is that?
So I hope that somebody can explain me why my code does not work or how to improve it. Thank you!
Summary of my Questions:
why is "/global window/ doing anything, and what? It is in comments, but if I don't add it, it says "window.onload" is not defined.
How to bind the eventTarget (li-element) to the eventHandler-fct (showMe, pullTextOnClick)?
how does the "bind"-fct work? I read many explanations, but still don't understand why my code does not work.
I tried to add a class with "addClass", but it said that the fct was not defined. It only works with classList.add., but why?
Problem solved:
I tried to click the li-element. BUT when i tried to do this, the parent-container was selected. Reason was, because the li-element had a z-index of -1. I did this to hide it behind an other picture. Lesson learned.
I have
<ons-toolbar-button id="buttonNext" disabled >Next</ons-toolbar-button>
and I want to programmatically enable it or disable it again.
I found that in ons-button, there is methods like setDisabled(true) but not for ons-toolbar-button.
Could someone shed some light on how to programmatically enable/disable ons-toolbar-button?
thanks.
Toolbar buttons are usually removed or hidden rather than disabled, that's why there are no methods for ons-toolbar-button. setDisabled just adds disabled attribute to the element, nothing else. You can implement it for ons-toolbar-button like this:
setDisabled = function(boolean) {
if (boolean) {
document.querySelector('ons-toolbar-button').setAttribute('disabled', '');
} else {
document.querySelector('ons-toolbar-button').removeAttribute('disabled');
}
}
Then of course you need some CSS:
ons-toolbar-button[disabled] {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
Check it out here: http://codepen.io/frankdiox/pen/PZZwMv
This is a question about Paged Media.
I want to mix a string-set with running elements. It works in PrinceXML but not in PDFReactor. My question, is this possible in PDFReactor?
HTML
<p class="head">
<span class="first">Repeatable title</span>
<span class="divider">|</span>
<span class="last"></span>
</p>
CSS
p.head {
position: running(heading);
font-size: 8pt;
margin: 0;
padding: 0;
}
#page {
size: A4;
#top-left {
content: element(heading);
}
}
So far everything is peachy. But when I try to define a string-set from a H1 and try to write this into span.last this isn't working.
h1 {
string-set: doctitle content();
}
p.head span.last {
content: string(doctitle);
}
This is possible with PDFreactor as well. Just the syntax is a bit different. PDFreactor does not support the content() function for the string-set property with Named Strings. Instead it uses the self value which works like content() or content(text) (see http://www.pdfreactor.com/product/doc_html/index.html#NamedStrings )
There is a second issue. You are setting the content property on the span element itself. Usually in CSS, creating generated content with the content property is actually only allowed for page margin boxes and pseudo elements such as ::before and ::after. This is also how browsers support it. Not sure why this works in Prince.
So basically you just have to make 2 minor adjustments to your style sheet to make this work in PDFreactor:
h1 {
string-set: doctitle self;
}
p.head span.last::before {
content: string(doctitle);
}
I am using less.js (1.5.0, 1.6.0, 2.1.1 tested) and don't seem to be able to override a selector with a specific context. I would be grateful for shedding light on me whether my less is less-compatible or not
Version 1:
.icon.icon-text {
&.icon-save { background-image: url('patth/to/file.svg'); }
#specific-grid &.icon-save { background-image: url('patth/to/file.svg') }
}
Version 2:
.icon.icon-text {
&.icon-save {
background-image: url('patth/to/file.svg');
#specific-grid & { background-image: url('patth/to/file.svg') }
}
}
Both versions do not generate the contextualized selector. How should I go about it?
In Sencha Touch 2, I use this code snippet in my controller:
this.control({
'#test_button': {
tap: function () {
var root_c = Ext.getCmp("main_container");
root_c.setActiveItem(
1, {type:'slide', direction: 'left'}
);
}
}
});
It works nicely, but it switches only the "default way", not the "sliding way". Can anyone help, why?
Thanks in advance,
R
As the others said, use animateActiveItem. Alternately you can keep your (single parameter) setActiveItem and also set a showAnimation and hidAnimation on the particular view being shown.
Having said that, this has been problematic in my experience if your shown items are nested with a lot of going back and forth.
update
I just discovered that there's an apparent timing bug in st2.0.1 such that if you use show/hideAnimation, you can't actually destroy the object that has the attribute set. Bit me hard. Related: http://www.sencha.com/forum/showthread.php?192847-Animating-panels-throws-Cannot-call-method-getPageBox-of-null
In Sencha Touch 2, the proper method for your need is animateActiveItem
this.control({
'#test_button': {
tap: function () {
var root_c = Ext.getCmp("main_container");
root_c.animateActiveItem(1, {type:'slide', direction: 'left'});
}
}
});
In sencha touch 2 setActiveItem has only one parameter:
setActiveItem( Object/Number activeItem )
So you have to use:
animateActiveItem( Object/Number activeItem, Object/Ext.fx.layout.Card animation )
More info: http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-animateActiveItem