I believe this plunker works how you want it to. Basically, the CSS
pseudo-element has to be applied directly to the custom element (in this
case the my-custom-element). I switched id="host" to it (instead of its
parent div) and the code worked.
<div>
<my-custom-element id="host"></my-custom-element>
</div>
Note: The overriding nature of @host may change. Some (myself included)
think it should be more for providing default, fallback styles. In this
case rules in the host document will override @host rules instead of the
other way around.
You are missing the content: '' attribute on your psudo-elements. This
attribute is required for it do display.
.horDim:before {
content: ''
position:absolute;left:10px;top:10px;
width:25px;
height:25px;
background-color:red;
}
The reason is found in the W3C spec for the content attribute:
Initial: normal (none)
none: The pseudo-element is not generated.
More info in this answer
You can use nth-child to get at individual li elements. The each function
helpfully provides the index.
$(...).each(function(index, element) {
... "li:nth-child(" + index + "):before" ...
})
The initial value of content is none. When you don't define content, that
value is used, and when that value is used, the pseudo-element is simply
not generated at all. An empty string "" is not the same as none; the empty
string means "insert an empty object", whereas none means "don't insert
anything at all".
Indeed, saying "objects inserted" is basically the same as "pseudo-elements
created" or "boxes rendered", etc.
http://jsfiddle.net/3MHHs/1/
I have made some changes and it works for me in Chrome and IE10. I
completely removed the positioning, because that is very ...advanced thing
in pseudos. Browsers fail on simpler cases too. I have removed the 5px
padding too.
.sprite {
background-image:
url('https://dl.dropboxusercontent.com/u/6374897/sprite.png')
}
.buttonSML {
background-position: -35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2rem;
height: 55px;
padding: 0;
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: "";
width: 20px;
height: 55px;
font-size: 2rem;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-color: white;
This could be related to the general problem of IE8 struggling with pseudo
elements (:before, :after). I have experienced this with font icons. I
found this thread helpful: IE8 CSS @font-face fonts only working for
:before content on over and sometimes on refresh/hard refresh
This was the solution that I implemented (with YUI):
_redrawIcons: function (node) {
var style;
if (Y.UA.ie === 8) {
style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none
!important;}';
node.appendChild(style);
setTimeout(function () {
node.removeChild(style);
}, 0);
}
},
You can use :
one pseudo to draw the 2 rounds, first round is drawn with borders,
the second is its shadow.
another pseudo to bring in the image.
http://codepen.io/gcyrillus/pen/dHaus
I knew that Internet Explorer 10 supports such a pseudo-element with
::-ms-clear.
So I searched in the source code of Chromium for "webkit-clear" and
discovered the presence of ::-webkit-clear-button.
This JSFiddle shows that the ::-webkit-clear-button pseudo-element has the
desired effect.
input[type="time"]::-webkit-clear-button {
display: none;
}
•Is this the best way to get two different values from a container?
This would generate different values, but you could possibly get an index
that is out of range because you increment and decrement. I would suggest
just re-generating one of the mission locations while it equals the other
instead of incrementing, as that will also remove some bias that
incrementing causes. Also, I don't know why you have the
if(!mission_start_location) block, what are you trying to achieve with
this?
EDIT I saw that you were worried about infinite loops. You shouldn't be.
This is the most standard C++ way to generate non-equal random numbers, and
your chances of entering an infinite loop are extremely unlikely, even if
your vector has size 2 (in which case, it will take on average 2 iterations
to g
The running time is clearly O(n),since a single traversal is done.
But i find some Disparities in your code.
while (x.key != k and x != NIL)
In above statement ,the NIL check should precede the condition "x.key!=k".
Yes, there is a way to force an elements state using chrome devtools; if
you look on the right side you should see an icon that looks like the
cursor with a broken box behind it on the 'styles' tab.
When you click on it, it will have a dropdown menu that will allow you to
toggle the selected code's hover, active, focus and visited pseudo-classes.
No, it is not currently possible to run IE11, and thus the F12 developer
tools bundled with it, on Windows 8.
IE has only been announced for Windows 8.1 and Windows 7. The preview is
currently only available bundled with Windows 8.1 (Edit: and now for
Windows 7). As windows 8.1 will be a free upgrade, it may be than IE11 will
never come out for Windows 8, but that is just speculation.
just use both
first-child pseudo class and first letter pseudo class
see fiddlel - http://jsfiddle.net/QX45P/
p:first-child:first-letter {
font-size: 4em;
float: left;
line-height: 0.8em;
margin-right: 0.3em;
padding-right: 0.2em;
padding-bottom: 0.2em;
border: solid black;
border-right-width: 0.02em;
border-bottom-width: 0.02em;
}
if you need to support only modern browser you may use :not(:empty), like
so
#frame:not(:empty) {
overflow: hidden;
}
A simple usage demo: http://jsbin.com/egatij/1/edit
The removeChild() method removes a specified child node of the specified
element and returns the removed node as a Node object, or null if the node
does not exist.
That null means that the element is now removed from your mark-up.
You should use it to not let the browser take that into consideration, as
the browser will not find that element in the mark-up.
You can do it in this way as well:
$(document).remove(object_to_remove);
FInd more about it: http://api.jquery.com/remove/
As you probably know from the jScrollPane site, this behavior is by design
(and touted in a demo). Have you used Chrome to Inspect Element on one of
the bars? That would let you identify the HTML elements in play, and how
they're being manipulated.
Use display:inline-block instead of float and set white-space:nowrap to the
container:
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
}
.div {
width: 200px;
height: 200px;
background: blue;
display: inline-block;
border: 1px solid red;
}
Demo fiddle
Now you'll most likely face some white-space issues, read this answer for
multiple ways to handle that
I think you're asking if it's possible to limit the amount of characters
that can be entered into the input field. If not, then I apologize. This is
how you would do that:
<input data-bind="" maxlength="10">
This sets the maximum number of characters that can be input into that
field to 10, or whatever integer you want to put in there.
EDIT:
Or if the problem is that the input field is visually too long, you can do
the following:
<div class="container">
<div class="row-fluid">
<div class="span7"></div>
<div class="span2">per Invoice</div>
<div class="span2 offset1">per LB</div>
</div>
<div class="row-fluid">
<div class="span7">
<select>
<option&g
You need to add an xml for FF.
This is the CSS code:
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -moz-binding:
url('path_to_xml/ellipsis.xml#ellipsis');
XML:
<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="ellipsis">
<content>
<xul:window>
<xul:description crop="end"
xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>
I've tested on FF, Chrome,
Overflow: hidden applies to the container element, instructing the browser
how to manage content that extends beyond the defined limits of the
container's borders. By adding overflow: hidden directly to the input
you're not really adding anything since the input doesn't have any child
elements to affect the positioning or proportions.
Setting overflow doesn't clear the float at the element, it self-clears.
This means that the element with overflow applied (auto or hidden), will
extend as large as it needs to encompass child elements inside that are
floated (instead of collapsing), assuming that the height isn't declared.
You could use some javascript trickery.
I am using jQuery, but you can use anything you want.
$('a[href="#test"]').on('click', function(){
var test_element = $('#test');
var scroll_top = test_element.scrollTop();
var max_height = test_element.parent().height();
if (scroll_top < max_height) { return false; }
else { return true; } //only scroll if the item is in view
});
Looks like there is a workaround to this problem on apple dev forums
So many thanks to Mr Baicoianu.
Basically you need to listen to touch events on the parent scroll div. So
in my case add:
document.getElementById("scrollbox").addEventListener('touchstart',
function(event){});
to the onBodyLoad function.
I guess this is some event propagation issue, solved by listening at a
higher level.
Interesting question. If you're able to show us a working example we could
probably be of more help.
However, in theory there's nothing wrong with what you're attempting to do
(although not all browsers will like it: particularly IE8 and below).
The important thing to understand here is that :hover is a pseudo-class,
whereas :before is a pseudo-element.
Here's a quick excerpt from the standard (with thanks to this answer
previously on Stack Overflow):
Pseudo-classes are allowed anywhere in selectors while pseudo-elements
may only be appended after the last simple selector of the selector.
The mistake you're making is in your syntax: the order that you're
appending them.
Try this instead:
#sidebar .widget li a:hover:before,
#sidebar .widget li a.active:before {
backgrou
The flicker bug is related with GPU memory of the smartphone. The memory is
limited (VRAM), and if the elements are too complex or bigger than memory,
it will be exhausted. In android with CyanogenMod rom you can view the gpu
processing with colors in the screen. From green (low use) to red (higher
use of gpu). Demo image. But I don't know if exists a similar tool for IOS.
This is visible in all transitions of the app or when it use GPU.
Anyway you could try remove/reduce the complexity of your elements, or this
from here:
Option 1
<meta name="viewport" content="width=device-width, user-scalable=no"
/>
Option 2 this:
.ui-page {
-webkit-backface-visibility: hidden;
}
Option 3 this:
.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="d
I'm guessing that the lines wrap before any overflow rule kicks into
action. You will need to do this to prevent line breaks:
.nav__item {
white-space: nowrap;
}
I'm not sure which element you want to hide the overflow on, so I created
this fiddle: http://jsfiddle.net/bACQD/. Feel free to modify it to clear up
any confusions.
As you correctly say, overflow is for signed operations if the result
doesn't fit. Note that a signed byte can hold values between -128 and +127,
and as such -1 fits nicely in that range. That it has crossed zero is not
relevant for signed overflow because 0 is in the middle of the
representable range. It's only interesting for unsigned carry. For overflow
the boundary is at 0x80 (-128) which in turn is irrelevant for unsigned
operations.
See: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar
issue
If you are using visible for either overflow-x or overflow-y and
something other than visible for the other. The visible value is
interpreted as auto.
This is expected behaviour, see the w3 Spec.
What it boils down to is that in instances where it is not possible to have
visible and hidden together, the visible is set to auto instead.
The problem is that the input field automatically gains focus when it's
shown (at least in Chrome; in browsers that don't do this, you won't have
this issue), causing the div to scroll down to the element that would be
hidden by the overflow: hidden, had the div been scrolled to the top.
Manually adding theContainer.scrollTop(0); to your click function avoids
the issue:
theLink.click(function () {
theForm.show().animate({'top':0}, 1000);
theContainer.scrollTop(0);
});
jsFiddle Demo
