Counting element's div's by using mocha testing framework - javascript

I have picked up an WebElement JSON objects by using xpath, this item is a div which has div's inside it.
it('Count terminals in view', function() {
elems = browser.elements('/html/body/div[2]/ui-view/div/div[1]/div[4]/div[2]');
console.log(elems.value);
});
The html code looks like this
<div class="col-lg-8 col-md-pull-0 col-lg-pull-4">
<div class="col-lg-12">
<div style="margin: 10px 0px 10px 0px;">
<div class="row">
<div class="col-lg-4">
<div>Hardware Id</div>
<div ng-bind="terminal.hardwareId" style=" cursor: pointer; width: 100%" ng-click="downloadVM.openModal(terminal.hardwareId);" class="ng-binding">S8EVMOC00019</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div style="margin: 10px 0px 10px 0px;">
<div class="row">
<div class="col-lg-4">
<div>Hardware Id</div>
<div ng-bind="terminal.hardwareId" style=" cursor: pointer; width: 100%" ng-click="downloadVM.openModal(terminal.hardwareId);" class="ng-binding">S8NOMOT00049</div>
</div>
</div>
</div>
</div>
</div>
I need to be able to count the hardwareId's they are changeable, how can I loop properly through them?


Found a way to do the counting of the div's, just added an wild card "*" to the top div, and then looped through the count variable.
count = browser.elements('/html/body/div[2]/ui-view/div/div[1]/div[4]/div[2]/*');
console.log(count);
for (el in count.value) {
console.log(el);
}

Related

Next and Previous button in swiper slider are not wokring

I have posted the same question two days earlier but didn't get any
answer so I'm posting again this question. May be I get lucky this time.
My slider buttons are working fine with static data, but they don't
work with the dynamic data. And unable to show the next or previous
slide.
My HTML Code
<section class="browse-cat u-line section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="swiper-wrapper">
<div class="swiper-slide myreward-slider-item col-md-4" *ngFor="let reward of readableRewards; let i = index">
<a href="javascript:void(0);">
<div class="myreward-slider-img">
<img
src="{{reward?.Image}}"
class=""
alt="rewards">
</div>
</a>
<div class="row">
<div class="col-md-6 text-left padding-20">
<span class="text-light-black cat-name"><b>{{reward?.Title}}</b></span>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</section>
My CCS Code
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px;
font-weight: 900;
color: #ff0018;
background: #ff0018;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-disabled {
display: none;
}

Align div to bottom of Bootstrap4 card-body

I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

HTML news feed with SQL info

I am trying to do a feed in HTML like facebook or twitter that contains the content of database.
I am using an generic div and using javascript to clone that generic div but I cant edit the content of each element after cloning it.
Is that the best way to do a feed in HTML?
JavaScript
for(i=0 ; i < 5 ; i++){0
var item = $("#template2 div.item").clone();
item.getElementById("title").text("aaaa"); //4 testing
$("#main1").append(item);
}
HTML
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12"><hr></div>
</div>
</div>
</div>

clone() returns object that you can manipulate using jQuery.
$('#addFeed').click(function() {
addFeed();
})
function addFeed() {
var item = $("#template2 div.item").clone();
$(item).find("h3").html("New Feed");
$("#main1").append(item);
}
.feed {
border: 1px solid black;
width: 150px;
}
.item {
background-color: lightgreen;
}
.item:nth-child(odd) {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12">
<hr>
</div>
</div>
</div>
</div>
<div id="main1" class="feed">
</div>
<button id="addFeed">Add Feed</button>

Bootstrap : Slideup/ Slidedown or Accordion in Panel

I have a panel heading and a panel body having a description by default when the page reloads. when I click on the + symbol then there are some contents to be displayed and that description to be removed.
everything is working fine. but when I slideup then the description is appeared but it appears suddenly with a kind of stroke.
I can do it using time unit but it adds fade-in effect to it. which i don't want.
$('.add_discount_plus_minus').on('click', function () {
if($(this).text() === "+" ) {
$(this).text("-");
$('.club_registration_plus_minus').text("+");
$('.settings_plus_minus').text("+");
$('.add_discount_one_line_description').hide();
$('.show_hide_add_discount_panel').slideDown();
} else {
$(this).text("+");
/*$(this).css('font-size' , '20px');*/
$('.show_hide_add_discount_panel').slideUp();
$('.add_discount_one_line_description').show();
}
})
.add_discount_plus_minus {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-100%);
font-size: 20px;
}
.show_hide_add_discount_panel {
display: none;
}
.set_padding_0 {
padding: 0 !important;
}
.set_margin_0 {
margin: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-default set_padding_0">
<div class="panel-heading text-left">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10">
<span>Add Discount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span>
</div>
</div>
</div>
<div class="panel-body ">
<div class="row set_margin_0">
<span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span>
</div>
<div class="show_hide_add_discount_panel ">
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
</div>
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
<div></div>
</div>
</div>
</div>
</div>
Here is JSFiddle
When you slide up the panel body then the description gets displayed suddenly.
How can i solve it?
Any help would b great.
Thank You.

You don't need to use timeout, it will be hard to match exactly the time it takes to slide. The slideUp() method has a callback function to call once the animation is complete, show your default content there
$('.show_hide_add_discount_panel').slideUp(function(){
$('.add_discount_one_line_description').show();
});
https://jsfiddle.net/hbxqsxjp/2/

Then you should try to add some timeout before you see the default content.
Fiddle : https://jsfiddle.net/qaeed/hbxqsxjp/1/
$('.add_discount_plus_minus').on('click', function () {
if($(this).text() === "+" ) {
$(this).text("-");
$('.club_registration_plus_minus').text("+");
$('.settings_plus_minus').text("+");
$('.add_discount_one_line_description').hide();
$('.show_hide_add_discount_panel').slideDown();
} else {
$(this).text("+");
/*$(this).css('font-size' , '20px');*/
$('.show_hide_add_discount_panel').slideUp();
setTimeout(function(){
$('.add_discount_one_line_description').show();
}, 1000);
}
})
.add_discount_plus_minus {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-100%);
font-size: 20px;
}
.show_hide_add_discount_panel {
display: none;
}
.set_padding_0 {
padding: 0 !important;
}
.set_margin_0 {
margin: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-default set_padding_0">
<div class="panel-heading text-left">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10">
<span>Add Discount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span>
</div>
</div>
</div>
<div class="panel-body ">
<div class="row set_margin_0">
<span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span>
</div>
<div class="show_hide_add_discount_panel ">
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
</div>
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
<div></div>
</div>
</div>
</div>
</div>

hide/show laterally col-4 (aproximately) div/element in bootstrap

what is the best way to make in bootstrap a hide/show element like in the picture??
I started with something like this:
<div class="container-fluid no-padding-left">
<div class="row">
<div class="col-md-4 no-padding-left">
<div class="row">
<div class="col-md-12 background-azul-claro">
<div class="col-md-2 text-left">
<img src="assets/images/ic_close_white_36dp_1x.png" alt="">
</div>
<div class="col-md-8 text-center" style="">
<h3>Nueva incidencia</h3> </div>
<div class="col-md-2 text-right">
<img src="assets/images/ic_done_white_36dp_1x.png" alt="">
</div>
</div>
</div>
<div class="col-md-12 no-padding-left"> <img src="assets/images/default-image.jpg" alt="" class="img-responsive"> </div>
<div class="col-md-12 no-padding-left background-azul-oscuro"> <img src="" alt=""> </div>
<!-- form div with form field -->
<!-- checkbox Mostrar otras incidencias -->
</div>
</div>
</div>
styles.css
.background-azul-oscuro {
background-color: #009688;
}
.background-azul-claro {
background-color: #00BFA5;
}
.no-padding-left {
padding-left: 0px;
}
h3 {
color: white;
}
It´s nested columns the best way to do it ???
Im using angular in the front end, should i use normal bootstrap or angular ui bootstrap???
I would like totally responsible element with the hide and show functionality..

Since you would have to use custom width, margin and padding for the default bootstrap col's, there isn't much sense in using them.
You could have something like this in my opinion:
<div class="container">
<div class="background-azul-claro">
// position:relative;
width: calc(100% - 40px);
margin-right: 40px;
float: left;
</div
<div class=" background-azul-oscuro">
// position: relative;
width: 40px;
float: right;
</div>
</div>
*In case you would want one div to hover above the other, you should use position: absolute;

Categories

Resources