w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
text-overflow inheriting fonts from pseudo elements in IE
I've used this solution in the past... Add an empty char with before: .btn:before { content: ''; } http://jsfiddle.net/tagliala/TtbuG/10/

Categories : CSS

Use of Pseudo-Elements in Polymer.js
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.

Categories : Javascript

How to use Pseudo-Elements : before & :after to create end caps
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

Categories : HTML

accessing pseudo elements using $(this) keyword?
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" ... })

Categories : Jquery

css :before and :after pseudo-elements content property
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.

Categories : CSS

pseudo elements IE10 button
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;

Categories : CSS

CSS Pseudo-Elements - using :after to position text under an image
You have to add another <div> to do that. See the Fiddle I have used margin-top: -80px; to put the text on image.

Categories : CSS

How can I prevent CSS pseudo elements from disappearing during an animation?
I rewrite it that it used CSS3 transition: JS (for fast, for better you can change it to vanilla js): $(function(){ $("#clicky").click(function(){ $("#main").addClass('animate'); }); }); CSS: #main{ width: 200px; height: 200px; background-color: #eee; border: 1px solid black; -webkit-transition: height 2s linear; } #main:after{ content: "look"; height: 50px; background-color: white; margin-left: 210px; border: 1px solid black; } #main.animate{ height: 500px; } http://jsfiddle.net/qFhaq/1/

Categories : Javascript

CSS styling of breadcrumb navigation in IE8 using pseudo :before and :after elements
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); } },

Categories : CSS

Achieving this hr element with CSS styling - pseudo elements
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

Categories : CSS

webkit css pseudo elements for time field
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; }

Categories : CSS

Can't set font-weight on the :after pseudo-element used on elements
This was answered here. It seems :after was intended for appending to container tags only. CSS :after pseudo element on INPUT field

Categories : HTML

how to set background image to pseudo elements using percent instead of pixel?
please use this code http://jsfiddle.net/YUj5W/4/ .tab-contents{ background: #2b2a26; padding: 0px 8px; clear: both; } #tabs { border-collapse: separate; border-spacing: 4px 0; float: right; list-style: none outside none; margin: 0 -4px 0 0; padding: 0; } #tabs li { background: none repeat scroll 0 0 #000000; border-radius: 19px 19px 0 0; display: table-cell; height: 47px; margin: 0 4px; text-align: center; vertical-align: middle; width: 145px; } #tab-1 {position:relative;} #tab-1:before{ content: ""; display: block; width: calc100%; height:200px; background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat; top: 10px; left:0;

Categories : HTML

How to get two (pseudo)random but distinct from each other container iterators/elements?
•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

Categories : C++

Singly linked list pseudo-code sum specific elements
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".

Categories : Algorithm

After Click, Multiple Elements Changing Attributes in CSS and HTML using Pseudo Selector
What you need is jQuery, like this. jQuery can handle your animations cross-browser as well. api.jquery.com/animate

Categories : HTML

Is there a way to use the mouse to make pseudo elements visible in Chrome Developer Tools?
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.

Categories : HTML

Using IE11 Debug Tools or IE11 in Windows 8
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.

Categories : Windows

How to use the first-of-type pseudo class along with the first-letter pseudo element in my style rule selector
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; }

Categories : CSS

Overflow hidden with different elements
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

Categories : Jquery

Updating overflow without removing elements from the div?
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/

Categories : Javascript

Showing jscrollpanes on overflow:scroll elements
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.

Categories : Jquery

display div elements in parent with overflow hidden
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

Categories : HTML

How do I set the overflow to hidden to protect the elements go beyond my footer properly?
Instead of overflow, Try this new css. DEMO http://jsfiddle.net/eGs6u/2/ CSS #footer { border-top:solid 1px #fe2b32; background: rgba(254, 43, 50, 0.5); z-index:2; position:fixed; bottom:0; left:0; width:100%; }

Categories : HTML

Input elements overflow bootstrap grid system cells?
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

Categories : CSS

CSS text-overflow depending on space left besides sibling elements
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,

Categories : HTML

Why doesn't the shrink to fit behavior of overflow: hidden work on input elements?
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.

Categories : HTML

prevent scrolling of overflow:hidden elements when link to anchors are clicked
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 });

Categories : Javascript

Inline-block elements within a fixed width container with overflow:hidden get pushed down
Add white-space: nowrap to the container of the inline-block elements, in this case .row. http://jsfiddle.net/thirtydot/bMfbH/3/

Categories : CSS

`-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7
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.

Categories : IOS

How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/
Try this: <div id="wrapper"> <div class="float left">left</div> <div class="float right">right</div> </div> #wrapper {width:500px; height:300px; position:relative;} .float {background-color:black; height:300px; margin:0; padding:0; color:white;} .left {background-color:blue; position:fixed; width:400px;} .right {float:right; width:100px;} jsFiddle: http://jsfiddle.net/khA4m

Categories : CSS

display:table, max-width, text-overflow, overflow not working in ie8
You shouldn't be using = sign within a style attribute. You should use :. This is probably your issue. Change max-width=60px to max-width: 60px

Categories : CSS

define pseudo class and pseudo element in same element
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

Categories : CSS

Overflow is shown mid css3 transition, how can I hide the overflow?
My solution: (But I am looking for a better one.) #services-grid .service .title { position: relative; z-index: 10; top: 130px; font-size: 13pt; text-align: center; height: 54px; /* IE fix */ /* Add radius to bottom of .title */ border-bottom-left-radius: 8px 15px; border-bottom-right-radius: 8px 15px; } JSFiddle: http://jsfiddle.net/KC4TH/4/

Categories : CSS

IOS flicker bug when the css overflow:scroll is changed to overflow:hidden
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

Categories : IOS

Having problems getting text-overflow and overflow: hidden to work
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.

Categories : CSS

Overflow flag cleared after SBC with overflow in 6502 emulation?
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.

Categories : Misc

Setting overflow-y causes overflow-x to change as well
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.

Categories : HTML

Overflow-x and overflow-y properties, how should they work?
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.

Categories : CSS

Element does not obey overflow hidden when a child element is animated in from outside the overflow area with jQuery
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

Categories : Javascript



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.