Making css numbers to look pretty - javascript

I have the code which is in this fiddle
.numberCircle {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
display: table;
padding: 10px;
margin-top: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<div class="numberCircle">368585760</div>
Thanks to the one who had this fiddle, I updated it with my changes:, now without adding additional html elements, is it possible to design every single number inside the box to look like this
http://prntscr.com/gi26iz
I was trying to use the css3 first child, 2nd child etc etc but I am not sure what to do.

If you can't change the markup, you can try this with jquery - replacing the contents of the div with each digit wrapped into a span.
See a demo to get you started:
var html = $('.numberCircle')
.text()
.split('').map(function(e){
return "<span>" + e + "</span>";
}).join('');
$('.numberCircle').html(html);
.numberCircle span {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
/*display: table;*/
display: inline-block; /* CHANGED */
padding: 10px;
margin: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberCircle">368585760</div>

I think the only way to do is use javascript to add styling to each elements. There is no css like :nth-letter

Related

How to extract text using DoodleNerd's CSS textboxes?

I recently used DoodleNerd's CSS Textbox Generator (http://doodlenerd.com/html-control/css-textbox-generator) to make a really sleek looking textbox for my website. I'm familiar with extracting text from forms; I've done it in two main forms:
document.getElementById('field').value
or
driver.findElement(By.id("field")).getCssValue("value")
For some reason, when I use DoodleNerd's textboxes, the values in the box aren't extracted... it's really odd.. I'll include my css and html for reference:
#field {
position: absolute;
left: 33px;
top: 170px;
overflow: visible;
width: 129px;
white-space: nowrap;
text-align: left;
font-family: Comic Sans MS;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(249,249,249);
}
.field {
padding: 0px;
font-size: 15px;
border-width: 5px;
border-color: #CCCCCC;
background-color: #ba6fc5;
color: #f9f9f9;
border-style: inset;
border-radius: 5px;
box-shadow: 4px 2px 5px rgba(66,66,66,.75);
text-shadow: 49px -11px 5px rgba(177,37,37,.0);
}
.field:focus {
outline:none;
}
<div id="field">
<input type="text" value="e.g. '999'" class="field" />
</div>
Thanks a million!
It appears like the value you want is: e.g '999' correct? If so, this should be your JavaScript:
var fieldValue = document.querySelector('.field').value;
It appears like the value you want has the class of field, not the id of field.
If you must use document.getElementById(), you could also do this:
var field = document.getElementById('field');
var value = field.firstElementChild.value;
But I think the first way is probably better.

Angular Material Custom Class Button Issue

I am trying to write a custom class for angular material button, but there is one issue with that, when I click on the button and move away(minimize or activate another window) from the browser, it fades out or makes it white and when I click on the browser window then it turns to proper shape/color, don't know the reason but how to control this does any one have any idea.
My Css Class:
.DeleteBtn.md-raised {
color: #fff;
background-color: #CC090F;
text-transform: initial;
min-width: 88px;
margin: 6px 0px;
max-width: 8px;
font-size: 12px;
}
.DeleteBtn.md-raised:not([disabled]):hover {
color: #fff;
background-color: #7F0509;
max-width: 10px;
font-size: 12px;
}
<md-button class="md-raised DeleteBtn">Delete</md-button>
You are missing base CSS class for all components .md-button. Here is a working CSS snippet:
.md-button.DeleteBtn.md-raised:not([disabled]).md-focused,.md-button.DeleteBtn.md-raised {
color: #fff;
background-color: #CC090F;
text-transform: initial;
min-width: 88px;
margin: 6px 0px;
max-width: 8px;
font-size: 12px;
}
.md-button.DeleteBtn.md-raised:not([disabled]):hover {
color: #fff;
background-color: #7F0509;
max-width: 10px;
font-size: 12px;
}
I would recommend to read more about <md-button> CSS and follow best practices. Also here is a working example for you:
https://codepen.io/anon/pen/ybdzZJ
Hope that will help you. Good luck :)

css floating elements error

I have a small problem about div and input floating:
This is my problem, with a jQuery script when you wrote in the input box and press enter, a div element will be added, but if we wrote more then 4 element, the input box remain in the first line and the element go down. Can anyone could help me?
div.box {
width: 300px;
height: 200px;
border: 1px solid #ddd;
padding: 5px;
}
div.box>div.element {
background-color: #00B5B5;
display: inline-block;
color: #fff;
font-size: 11px;
text-transform: uppercase;
padding: 2px 8px 2px 8px;
border-radius: 5px;
line-height: normal;
cursor: pointer;
margin-right: 4px;
margin-bottom: 4px;
float: left;
}
div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width: 8px;
}
<div class="box" id="box-ins-group">
<div class="element" id="1">prova</div>
<input type="text" id="group-input">
</div>
I have tried everything but still not working :( sorry for my bad english
-- Jquery code:
var counter = 0;
$('#group-input').keypress(function(e) {
if(e.which == 13) {
if($('#group-input').val().length > 3) {
$( "div#box-ins-group" ).append('<div class="element" id="'+counter+'">'+$("#group-input").val()+'</div>');
$('#group-input').val('');
counter++;
}
}
});
counter is a variable
You need to set float: left on the input, and then change this in your js:
$( "div#box-ins-group" ).append
to:
$( "input#group-input" ).before
The problem is that you're appending those elements to the element that contains both the .element divs and the input, so even if you'd fixed the float issue on the input, the new .element divs would always appear after the input in the DOM. Here's a fiddle.
It's also worth noting that you can remove display: inline-block, as it's ignored when you use floats.
Seems that the pills are floating but the input is not. Try this (if you haven't already):
div.container div.edit-local div.form table tr td>div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width:8px;
float: left;
}

Removing Chrome style for input text (list)

I am trying to build a custom input text list. I have an image I would like to use as arrow, so that I can click and show the list of values.
I am also using AngularJS.
The following code does not work as expected. My issue is: I see a black arrow on the left of the yellow arrow when passing over or clicking (otherwise no arrow)
Here's a link to try it (no yellow arrow is shown, but there is some white space on the right of the undesired black arrow): http://jsfiddle.net/wbo3pt9u/
Here's the code.
<input type="text" list="typeL" ng-model="tipo" class="list" placeholder="Type">
<datalist id="typeL">
<option ng-repeat="objectType in objectTypes"
value="{{objectType.typeWorkOfArt}}" } />
</datalist>
</input>
CSS:
.list {
background: url('../images/arrow.png') no-repeat top right;
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding:0 30px 0 10px !important;
color: #58585A;
overflow: hidden;
margin: 10px;
}
.input {
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding: 0 1em;
color: #58585A;
margin: 10px;
}
I also tried to use a , which worked correctly: no black arrow and single click. Now that I switched to this element, it does not work. How can I fix it?
Solved by introducing this CSS lines:
input::-webkit-calendar-picker-indicator {
display: none;
}

Wrap text in a circle with angular and limit the string length

I'm quite new to angular and I'm trying to get the text from the input field to wrap in the circular div so that the text does not go outside the border. Any help would be greatly appreciated here is my code - thanks!
HTML:
<div ng-app>
Add Information <textarea ng-model ="input" maxlength = "120" class = "textinput" </textarea>
<div class="textcircle">
<span id="text">{{input}}</span>
</div>
</div>
CSS:
.textinput{
height: 15%;
width: 40%;
margin-left: 5px;
}
.textcircle{
width:200px;
height: 200px;
border-radius: 1000px;
border: 1px solid #888080;
box-shadow: 1px 1px 1px 1px;
text-align: center;
font-size: 18px;
font-family: Museo-Sans;
font-weight: 300;
}
#text{
padding: 1em;
text-align: center;
margin-left: 10px;
margin-right: 10px;
display: block;
}
UPDATE - I have changed the HTML/CSS and gotten the text to wrap well around the circle, but if a word is too long it moves outside the circle. Is there a way to limit the length of a word inside the div?
See an example with this fiddle:
http://jsfiddle.net/Gj7tL/16/
This should work!
http://jsfiddle.net/D2TL3/
Basically needed to change <span> to a <div> for text wrapping purposes. Created an inner circle for #text to wrap with.
Good Luck!
this has nothing to do with angular itself, it can be done by css:
.textcircle{
width:200px;
height: 200px;
border-radius: 1000px;
border: 1px solid #888080;
box-shadow: 1px 1px 1px 1px;
text-align: center;
font-size: 18px;
font-family: Museo-Sans;
font-weight: 300;
overflow: hidden;
}
I´ve just added the "overflow: hidden" in your css class.
http://jsfiddle.net/gztR6/
Not really an angular question (as that part seems to be working fine), more about CSS.
try this:
#text {
display: block;
padding: 0 30px
}
Filling text in a circular area with CSS is definitely an inexact science.

Categories