How do I access span values
/// with this I can access but I want to access all span values can anyone
help p = summaryContainer.parentElement.firstElementChild;
<div class="col-50">
<div id ="orderSummary">
<h2>Order summary</h2>
<div class ="summary-container">
<div class ="summary">
<div class="product">
<span>Natural Straight</span>
<div class="price">$95,00</div>
<div class="quantity">
<span>1</span>
</div>
<div class="total">$95,00 </div>
</div>
</div>
</div>
It should works fine
let summaryContainer = document.getElementsByClassName('summary-container')[0];
let spans = summaryContainer.getElementsByTagName("span");
let content = Array.prototype.slice.call(spans).map(span => span.innerText)
console.log(content)
<div class="col-50">
<div id ="orderSummary">
<h2>Order summary</h2>
<div class ="summary-container">
<div class ="summary">
<div class="product">
<span>Natural Straight</span>
<div class="price">$95,00</div>
<div class="quantity">
<span>1</span>
</div>
<div class="total">$95,00 </div>
</div>
</div>
</div>
Related
I have this html structure :
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet"/>
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg" />
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
</div>
</div>
But then once loaded in electron, the last div (.metadataContainer2) is moved inside the .previewContainer2 div :\
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet">
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg">
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
<p>ncndnlkcd</p>
</div>
</div>
</div>
Did I do something wrong ?
If you follow the HTML5 rules a div tag can not be self closed. Check more on this site
So modify your original code line#6 to mentioned below.
<div id="whiteSheet"></div>
How can I make my container to go down automatically of the page if it exceed the width of the page? The page background is in black if you look at the jsfiddle and it's size is 780px. All two credit cards are displaying over the page. Thanks.
My CSS as below:
<div style="width:780px;background:#000">
<div class="container">
<div class="sleeve">
<div class="credit-card">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4141 7204 9012 0029</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
<div class="sleeve">
<div class="credit-card selected" style="background: #555">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4234 1302 3798 0265</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
<div class="sleeve">
<div class="credit-card" style="background: #3B3">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4812 0322 0517 2840</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
<div class="sleeve">
<div class="credit-card" style="background: #3B3">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4812 0322 0517 2840</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
</div>
</div>
Here's my fiddle: http://jsfiddle.net/5gronvk1/1/
Update the following selectors in your CSS with the following:
.container {
height: 100%;
}
and
.sleeve {
display: inline-block;
margin: auto;
}
I want to make this div containing .action-bar as required so that I can validate my form.
<form name="forms.subsections[0].formName">
<div class="item item-divider">
Photo
</div>
<div class="item item-stacked-label">
<span class="input-label">Store Photo</span>
<div class="container">
<img ng-src="">
</div>
<div class="action-bar" ng-click="takePhoto()" >
<i class='icon ion-ios-camera-outline'></i>
Take Picture
</div>
</div>
</form>
I need to make image positioned like on below picture:
I have code:
<footer>
<div class="stopka1">
<div class="container">
....................
</p>
</div>
</div>
</footer>
<div class="container">
<div class="row" style="padding-right:0; padding-left:0;padding-top:30px;padding-bottom:20px;">
<div class="col-md-6">
<div class="row">
<div class="col-xs-6"><img src="phone.png" style="vertical-align:middle !important;"> <span style="font-weight:lighter;color:rgb(10, 55, 110);font-size: 28px; vertical-align:middle !important;">22 213 18 31</span></div>
<div class="col-xs-6"><button class="col-cs-12 przycisk-pytanie" style="font-weight: bold;margin-top:0;">Zadaj pytanie</button></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-2"><img src="women.png" style=""></div>
<div class="col-xs-5">.. price ..</div>
<div class="col-xs-5"><button class="przycisk-rezerwuj-big" style="font-weight: bold;height:35px;">Rezerwuj teraz</button></div>
</div>
</div>
</div>
</div>
Have someone any idea how to get this effect? I have no idea how to force it to cover higher div.
You can do one of two options:
OPTION 1
img {margin-top:-20px;}
OPTION 2
img {position:relative; top:-20px;}
I want to switch to div with class="col-md-x" depending upon the number of student object i am receiving.
E.x: Sample
if i am getting only one JSON object then i want to a div with class should be like(class="col-md-12").
if am getting two JSON object then i want to switch to a div with class="col-md-6".
<div class="container">
<div class="row">
<div class="col-md-12">
<div clss="row">
<div ng-repeat="c in vm.students" class="col-md-12">
<div calss="thimbnail">
<div class="Option div 1">
</div>
</div>
</div>
<div ng-repeat="c in vm.students" class="col-md-6">
<div calss="thimbnail col-md-">
<div class="Option div 2">
</div>
</div>
</div>
<div ng-repeat="c in vm.students" class="col-md-4">
<div calss="thimbnail col-md-">
<div class="Option div 3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use ng-class like below,
ng-class="{class}[condition]"
In your case ,
ng-class="{1:'col-md-12', 2:'col-sm-6'}[vm.students.length]"
For your reference, Detailed explanation
You have calss instead of class in the example code. I hope that is a typo.
To address to your problem you can make use of ng-class where you can assign classes based on conditions
More document on ng-class
Code Snippet:
<div class="container">
<div class="row">
<div class="col-md-12">
<div clss="row">
<div ng-repeat="c in vm.students" ng-class="{col-md-12:vm.students.length === 1,col-md-6:vm.students.length === 2">
<div calss="thimbnail">
<div class="Option div 1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>