How to do a progress bar striped? - html

I'm working with progress bar, i add the lib ng-simple-progress-bar to work with it https://www.npmjs.com/package/ng-simple-progress-bar .
this is my code html:
<ng-simple-progress-bar
[percent]="30"
[color]="'#6e587a'"
(percentChange)="onPercentChange($event)"
[height]="'20px'" [backgroundColor]="'#f7f7f7'"
[progressBarType]="'square'"
class="stripes">
</ng-simple-progress-bar>
I obtain this result:
But U want to obtain this result:
Any help, How to do it?


Have you tried this?
<ng-simple-progress-bar [percent]="30" [color]="'#6e587a'"
(percentChange)="onPercentChange($event)"
[height]="'20px'" [backgroundColor]="'#f7f7f7'"
[progressBarType]="'square'"
[striped]="true">
</ng-simple-progress-bar>

Related

How to extract something I want in html using 'xpath'

The html code is looking like this:
<img alt="Papa's Cupcakeria To Go!" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-old-hires="" class="a-dynamic-image a-stretch-vertical" id="landingImage" data-a-dynamic-image="{"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L.png":[512,512],"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L._SX425_.png":[425,425],"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L._SX466_.png":[466,466],"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L._SY450_.png":[450,450],"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L._SY355_.png":[355,355]}" style="max-width:512px;max-height:512px;">
I want to get "https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L.png" and now I'm using
extract_item(hxs.xpath("//img[#id='landingImage']/#data-a-dynamic-image"))
, what I got is all the content inside that tag.
How can I get the first url only?

If you just want the first URL:
full_content = extract_item(hxs.xpath("//img[#id='landingImage']/#data-a-dynamic-image"))
list_contents = full_content.split(";")
first_image = list_contents[1].replace("&quot","")
print first_image
Also, you can refer this for extracting URL using regex.

Angular Material md-current-view doens't work

all
I'm trying to use md-current-view with md-datepicker. But it doesn't work.
Ultimately, I want to select months on a year-view without a choice of days.
My code:
<md-datepicker
md-current-view = "year"
datepicker-iso-date-format
ng-model="viewedDate"
md-placeholder="Enter date"
name="firstDatapicker"
class="only-icon md-primary select-time-range"
ng-change="selectMonthDatapicker(viewedDate)"
ng-click="selectDate($event)">
</md-datepicker>
Thanks in advance guys.

KML polygon only showing up in preview

I have a KML file and made a fusion table out of this.
In this fusion table there are a lot of polygons split one per row.
One of these rows contains following polygon:
<Polygon><outerBoundaryIs><LinearRing><coordinates>4.479382,50.95028 4.479507,50.950126
4.479653,50.949947 4.479828,50.949733 4.479941,50.949767 4.480345,50.94989
4.481543,50.948703 4.481571,50.948675 4.481519,50.94866 4.480786,50.948436
4.480783,50.948441 4.480592,50.948373 4.480443,50.948309 4.480426,50.948301
4.48037,50.948277 4.480279,50.948216 4.4801,50.948037 4.479825,50.948314
4.479676,50.94827 4.479665,50.948267 4.479372,50.948181 4.479354,50.948172
4.479263,50.948147 4.478968,50.948063 4.478968,50.948063 4.479273,50.947683
4.479597,50.947277 4.479316,50.947176 4.479985,50.946633 4.48004,50.946588
4.480702,50.946051 4.481081,50.945742 4.480946,50.945554 4.48053,50.945347
4.480373,50.945268 4.48022,50.94523 4.4797,50.945143 4.479497,50.945419
4.479086,50.945992 4.478416,50.945788 4.478309,50.94586 4.477876,50.946167
4.477888,50.946216 4.478038,50.946882 4.478071,50.946879 4.478114,50.947004
4.477663,50.947448 4.47719,50.947878 4.477133,50.94789 4.476584,50.948023
4.47635,50.948079 4.476282,50.948029 4.476294,50.948017 4.47655,50.947759
4.476747,50.947527 4.476918,50.947186 4.476921,50.94718 4.476921,50.94718
4.476904,50.947161 4.476581,50.947041 4.476363,50.946908 4.476222,50.946787
4.476051,50.946585 4.475605,50.945866 4.47549,50.945572 4.475423,50.945457
4.475364,50.94539 4.474899,50.944991 4.474282,50.944517 4.474209,50.944402
4.474138,50.944215 4.474213,50.944401 4.474226,50.944417 4.474245,50.944438
4.474257,50.944452 4.474373,50.944541 4.474784,50.944855 4.474974,50.94501
4.475605,50.944623 4.475823,50.94449 4.476053,50.944349 4.475823,50.94449
4.475605,50.944623 4.474974,50.94501 4.474994,50.945026 4.475337,50.945314
4.475401,50.945383 4.475425,50.945421 4.475484,50.945511 4.475508,50.945559
4.475722,50.945376 4.475722,50.945376 4.476277,50.944903 4.476722,50.944523
4.476722,50.944523 4.478126,50.944855 4.478927,50.945014 4.479182,50.944685
4.479257,50.944588 4.479497,50.944332 4.479054,50.943961 4.478219,50.943253
4.478219,50.943253 4.477985,50.942901 4.477974,50.942881 4.476116,50.943658
4.475724,50.943821 4.475724,50.943821 4.476116,50.943657 4.477974,50.942881
4.477965,50.942865 4.477951,50.942845 4.477827,50.94266 4.477601,50.942643
4.477213,50.942614 4.476788,50.942583 4.476351,50.94255 4.47554,50.942489
4.475353,50.942474 4.475177,50.942461 4.474992,50.942447 4.47476,50.942429
4.474371,50.942399 4.473767,50.942352 4.473618,50.94234 4.473541,50.942009
4.473515,50.941979 4.473484,50.941955 4.473466,50.941944 4.473466,50.941944
4.473266,50.941818 4.47304,50.941629 4.473026,50.94161 4.472923,50.941475
4.472819,50.941292 4.472751,50.941181 4.472589,50.940971 4.472509,50.940868
4.472509,50.940868 4.472432,50.940768 4.472339,50.940675 4.472162,50.940527
4.472162,50.940527 4.471742,50.940174 4.472401,50.93963 4.472366,50.939611
4.473093,50.93902 4.473464,50.938718 4.472916,50.938515 4.472513,50.938378
4.471592,50.938098 4.471244,50.937995 4.470833,50.937884 4.470064,50.938326
4.4695,50.938656 4.468968,50.938251 4.468085,50.937605 4.46806,50.937586
4.467965,50.937601 4.469422,50.939346 4.469097,50.939508 4.468961,50.939621
4.468698,50.939849 4.468132,50.940302 4.468183,50.940313 4.467443,50.940799
4.467906,50.941071 4.4668,50.941797 4.465734,50.942506 4.465885,50.942631
4.466098,50.942808 4.466295,50.942996 4.466558,50.943223 4.466796,50.943527
4.466924,50.943699 4.468189,50.943182 4.467658,50.942774 4.468189,50.943182
4.468567,50.943476 4.468929,50.943357 4.469033,50.943423 4.469124,50.94348
4.46917,50.943509 4.46958,50.943768 4.46959,50.943779 4.469809,50.943791
4.469926,50.943794 4.470095,50.943798 4.470091,50.943989 4.470367,50.944
4.470357,50.944179 4.470688,50.944282 4.470686,50.944356 4.471413,50.944393
4.471411,50.944426 4.471406,50.94448 4.471395,50.944563 4.471372,50.94472
4.471368,50.94479 4.471362,50.944879 4.470595,50.944846 4.470573,50.945072
4.471246,50.945107 4.471243,50.945132 4.471236,50.945187 4.471232,50.945217
4.471213,50.945361 4.471204,50.945436 4.471201,50.9455 4.470753,50.945483
4.470745,50.945539 4.470412,50.945523 4.470402,50.945614 4.470683,50.945626
4.470564,50.945961 4.471569,50.946406 4.473756,50.947496 4.474915,50.948073
4.475741,50.948419 4.47603,50.948576 4.476021,50.948603 4.475952,50.948722
4.475933,50.948755 4.475864,50.948863 4.475823,50.948991 4.475832,50.949016
4.475875,50.949131 4.475942,50.949248 4.475977,50.949288 4.476035,50.949352
4.476104,50.94943 4.476261,50.94961 4.476317,50.949747 4.476319,50.949765
4.478017,50.950223 4.478046,50.950188 4.478062,50.950177 4.478046,50.950188
4.478017,50.950223 4.477909,50.950351 4.477927,50.950353 4.47804,50.950367
4.478507,50.950432 4.478629,50.950483 4.478683,50.950515 4.479041,50.950728
4.479133,50.950609 4.479267,50.950437 4.479389,50.950282
4.479382,50.95028</coordinates></LinearRing></outerBoundaryIs><innerBoundaryIs>
<LinearRing><coordinates>4.476928,50.949872 4.477174,50.949495 4.47841,50.949804
4.478728,50.94943 4.47841,50.949804 4.477174,50.949495 4.476928,50.949872</coordinates>
</LinearRing></innerBoundaryIs><innerBoundaryIs><LinearRing>
<coordinates>4.476873,50.948207 4.477043,50.948046 4.477209,50.947887
4.477043,50.948046 4.476873,50.948207</coordinates></LinearRing></innerBoundaryIs>
<innerBoundaryIs><LinearRing><coordinates>4.470775,50.939605 4.470675,50.939524
4.470738,50.93956 4.470975,50.939657 4.47112,50.939715 4.47118,50.939738
4.471275,50.939784 4.471383,50.939849 4.471471,50.93992 4.471337,50.939852
4.470992,50.939709 4.470775,50.939605</coordinates></LinearRing></innerBoundaryIs>
<innerBoundaryIs><LinearRing><coordinates>4.469713,50.938817 4.469691,50.938801
4.469771,50.938851 4.469915,50.938942 4.46997,50.938977 4.470004,50.939003
4.469713,50.938817</coordinates></LinearRing></innerBoundaryIs></Polygon>
The problem with this polygon is that is it not showing up on the map?
But when I preview only this polygon it is :/
Does anyone experienced something similar or know a solution for this?
Thanks in advance!

You have some inner polygons that look like lines to me. Removing those might help as well as simplifying the outer boundary. KML with winding direction calculations
Remove the <innerBoundaryIs> tags and it displays for me

Add ID or CLASS to select.option in JHTML select lists

I have this code and I'm trying to add an id="" or class="" to each of these 2 select.option .... can somebody give me a hand please, I tried different ways and positions but it just doesn't work...
$status []=JHTML::_('select.option','1',JText::_('Yes'),'id','title');
$status []=JHTML::_('select.option','0',JText::_('No'),'id','title');
On site this code looks like
<label for="show_map1">Yes</label>
<label for="show_map0">No</label>
What I'm trying to achieve is:
<label for="show_map1" id="map_yes">Yes</label>
<label for="show_map0" id="map_no">No</label>
Can somebody give me a hand please?
Thank you

Try this,
$manufacturers = array ('Nike','Adi');
$lists['manufacturers'] = JHTML::_('select.genericlist', $manufacturers, 'virtuemart_manufacturer_id', 'class="inputbox"', 'value', 'text', $product->virtuemart_manufacturer_id );
//$manufacturers is the options array
//virtuemart_manufacturer_id is the id and name of the filed
//'class="inputbox"' you can add additional class here
//$product->virtuemart_manufacturer_id is used for set default selection like Nike or Adi here.
echo $lists['manufacturers'];
Hope its help ..

flip cascade of html

Noobie question but interesting one aswell.
Is there anyway to reverse the flow of HTML documents so that things automatically hang to the bottom right and go up from there?

You can do:
<HTML dir="RTL">
To make things attach to the right.
For top to bottom you'd have to do that yourself, or in a script.
Just for fun I'll see if I can write something using jQuery. I'll post it here.
Try this:
function rev(el) {
$('>*', el).each(function () {
rev(this);
$(this).prependTo(el);
})
}
rev($('body'));
That was kinda fun :)
Do this as well, for more fun:
$('body *')
.contents()
.each(function() {
if(this.nodeType == 3) {
this.textContent = this.textContent.
replace(/a/g, 'ɐ').
replace(/b/g, 'q').
replace(/c/g, 'ɔ').
replace(/d/g, 'p').
replace(/e/g, 'ǝ').
replace(/f/g, 'ɟ').
replace(/g/g, 'ƃ').
replace(/h/g, 'ɥ').
replace(/i/g, 'ı').
replace(/j/g, 'ɾ').
replace(/k/g, 'ʞ').
replace(/l/g, 'ʃ').
replace(/m/g, 'ɯ').
replace(/n/g, 'u').
replace(/o/g, 'o').
replace(/p/g, 'd').
replace(/q/g, 'b').
replace(/r/g, 'ɹ').
replace(/s/g, 's').
replace(/t/g, 'ʇ').
replace(/u/g, 'n').
replace(/v/g, 'ʌ').
replace(/w/g, 'ʍ').
replace(/x/g, 'x').
replace(/y/g, 'ʎ').
replace(/z/g, 'z').
replace(/A/g, '∀').
replace(/B/g, '𐐒').
replace(/C/g, 'Ↄ').
replace(/D/g, '◖').
replace(/E/g, 'Ǝ').
replace(/F/g, 'Ⅎ').
replace(/G/g, '⅁').
replace(/H/g, 'H').
replace(/I/g, 'I').
replace(/J/g, 'ſ').
replace(/K/g, '⋊').
replace(/L/g, '⅂').
replace(/M/g, 'W').
replace(/N/g, 'ᴎ').
replace(/O/g, 'O').
replace(/P/g, 'Ԁ').
replace(/Q/g, 'Ό').
replace(/R/g, 'ᴚ').
replace(/S/g, 'S').
replace(/T/g, '⊥').
replace(/U/g, '∩').
replace(/V/g, 'ᴧ').
replace(/W/g, 'M').
replace(/X/g, 'X').
replace(/Y/g, '⅄').
replace(/Z/g, 'Z').
replace(/!/g, '¡').
replace(/"/g, '„').
replace(/&/g, '⅋').
replace(/'/g, ',').
replace(/,/g, '\'').
replace(/\(/g, ')').
replace(/\)/g, '(').
replace(/\./g, '˙').
replace(/1/g, 'Ɩ').
replace(/2/g, 'ᄅ').
replace(/3/g, 'Ɛ').
replace(/4/g, 'ᔭ').
replace(/5/g, 'ϛ').
replace(/6/g, '9').
replace(/7/g, 'Ɫ').
replace(/8/g, '8').
replace(/9/g, '6').
replace(/0/g, '0').
replace(/;/g, '؛').
replace(/</g, '>').
replace(/>/g, '<').
replace(/{/g, '}').
replace(/}/g, '{')
}
});

Oh, that's rather easy if you are using a laptop or a tablet. If you have a desktop, however, it can be harder to get the display to stay upright. Sometimes duct tape and some creative woodwork can help.
If your monitor is attached, however, then no. HTML always renders from the top down.