I've been stuck at this for a while, this is my generated html:
<div style="margin: 0 5px; border: 2px solid #FFFFFF; height:24px;">
<div id="activity-bar" class="padding0 margin0 ng-isolate-scope" style="width: 100%; background: rgb(179, 179, 179); position: relative; overflow: visible; height: 20px;" ng-style="thisStyle" display-sections="student.history_list" height="20" loading="loading" type="2" user-id="student.fic_student_id">
<div ng-click="console.info('working');" class="activity-section absolute-pos inline-block act-29464 task-background-3 ng-scope" style="left:0%; width:10%;height:20px;" tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="PrimaryGames: Free Games and Videos
primarygames.com (click on the bar to view)
start time: 09:40am"></div>
<div ng-click="console.info('working');" class="activity-section absolute-pos inline-block act-54094 task-background-4 ng-scope" style="left:10%; width:10%;height:20px;" tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="writing0.sumdog.com
writing0.sumdog.com (click on the bar to view)
start time: 09:45am"></div>
<div ng-click="console.info('working');" class="activity-section absolute-pos inline-block act-54094 task-background-4 ng-scope" style="left:20%; width:10.01%;height:20px;" tooltip-placement="top" tooltip-append-to-body="true" uib-tooltip="writing0.sumdog.com
writing0.sumdog.com (click on the bar to view)
start time: 09:50am"></div>
<!-- Some more divs -->
</div>
</div>
The tooltips are working but the ng-clicks are not, am i missing something?
In angular, recommended way is to call function
<div ng-click="consoleinfo('working')"
In Controller:
$scope.consoleinfo = function(message){
console.log(message);
}
DEMO
Related
I have a slider from Ant Design (3.23.6) which generates html:
<div className="ant-slider-rail"></div>
<div className="ant-slider-track ant-slider-track-1" style="left: 45%; right: auto; width: 55%;"></div>
<div className="ant-slider-step">
<span className="ant-slider-dot" style="left: 0%;"></span>
<span className="ant-slider-dot ant-slider-dot-active" style="left: 50%;"></span>
<span className="ant-slider-dot ant-slider-dot-active" style="left: 100%;"></span>
</div>
<div tabIndex="0" className="ant-slider-handle ant-slider-handle-1" role="slider" aria-valuemin="0"
aria-valuemax="200000" aria-valuenow="90000" aria-disabled="false"
style="left: 45%; right: auto; transform: translateX(-50%);"></div>
<div tabIndex="0" className="ant-slider-handle ant-slider-handle-2" role="slider" aria-valuemin="0"
aria-valuemax="200000" aria-valuenow="200000" aria-disabled="false"
style="left: 100%; right: auto; transform: translateX(-50%);"></div>
<div className="ant-slider-mark">
<span className="ant-slider-mark-text" style="transform: translateX(-50%); left: 0%;">0</span>
<span className="ant-slider-mark-text ant-slider-mark-text-active" style="transform: translateX(-50%); left: 50%;">
100k
</span>
<span
className="ant-slider-mark-text ant-slider-mark-text-active"
style="transform: translateX(-50%); left: 100%;"
>
200k
</span>
</div>
</div>
I am trying to move left handle to the right using Cypress 4.5.0:
cy.get('[data-cy=salarySlider]').find('.ant-slider-handle-1')
.trigger('mousedown', { which: 1 })
.trigger('mousemove', 40, 0)
.trigger('mouseup')
handle seems to be selected but there is no movement. No errors too.
Any idea?
Late answer, and for Ant Design v4 slider with marks (.ant-slider-dots) but it could help. So here is how we do it (TypeScript version) :
// helper to grab slider handles by index
const slider = (sliderDot: number): string => ` .ant-slider-dot:eq(${sliderDot})`;
it('tests Ant Design v4 slider', () => {
cy.get(slider(2)).click();
cy.get(slider(3)).click();
// now slider is set on 2-3 range
});
This could be more tricky without marks.
https://ant.design/components/slider/
I am trying to write a function which returns the complete grid content in an array. Our ng-grid has infinite scrolling through the rows and also have scrolling through the columns.
I have found an answer for scrolling here Protractor: Scrolling a table and testing for infinite scroll
But I am looking to scroll through the grid fully and get the data, So that I can validate the data when I apply filters to the grid.
Any help on this is highly appreciated, thanks
Sample HTML Code for the rows
<div class="ag-body" style="padding-top: 25px; padding-bottom: 30px;">
<div class="ag-pinned-left-cols-viewport" style="display: inline; height: 245px;">
<div class="ag-pinned-left-cols-container" style="width: 480px; height: 1830px; top: 0px;">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-111 ag-row-index-10" style=" top: 300px; height: 30px;" row-id="111" row="10" v_element_id="19490">
<div class="ag-cell ag-cell-no-focus ag-cell-value" style=" left: 0px; width: 35px;" colid="id" v_element_id="19491">
<div class="ag-cell ag-cell-no-focus ag-cell-value" style=" left: 35px; width: 245px;" colid="title" v_element_id="19492">June12-AA-3</div>
<div class="ag-cell ag-cell-no-focus ag-cell-value" style=" left: 280px; width: 200px;" colid="operation_status_enum" v_element_id="19493">INVALID</div>
</div>
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-110 ag-row-index-9" style=" top: 270px; height: 30px;" row-id="110" row="9" v_element_id="20136">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-109 ag-row-index-8" style=" top: 240px; height: 30px;" row-id="109" row="8" v_element_id="20153">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-107 ag-row-index-6" style=" top: 180px; height: 30px;" row-id="107" row="6" v_element_id="20170">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-108 ag-row-index-7" style=" top: 210px; height: 30px;" row-id="108" row="7" v_element_id="20187">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-105 ag-row-index-4" style=" top: 120px; height: 30px;" row-id="105" row="4" v_element_id="20204">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-106 ag-row-index-5" style=" top: 150px; height: 30px;" row-id="106" row="5" v_element_id="20221">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-104 ag-row-index-3" style=" top: 90px; height: 30px;" row-id="104" row="3" v_element_id="20238">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-102 ag-row-index-1" style=" top: 30px; height: 30px;" row-id="102" row="1" v_element_id="20255">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-103 ag-row-index-2" style=" top: 60px; height: 30px;" row-id="102" row="1" v_element_id="20258">
You need to find the last row from the dom and use scrollintoview javascript function. please find the example below.
var last_row=element.all(by.css(".ag-row")).last() //this will give you the last row from the grid
browser.executeScript("arguments[0].scrollIntoView();",last_row.getWebElement());
This will scroll the entire grid.Now you can get all the text from row by
element.all(by.css(".ag-row")).getText().then(function(RowValueArray) {
//do whatever you want to do with the values.
})
Hope it helps you!
I am able to scroll through the grid and get the data from all rows in the following way. I got the scrollDown code from Protractor: Scrolling a table and testing for infinite scroll (thanks #alecxe)
There is little hard coding in the for loop. I should find out a way to know how many times I should scrollDown the table. Also the final result have some duplicates will need to clean it up.
scrollDown() {
return browser.executeScript("return arguments[0].offsetTop;", this.lastRow.getWebElement()).then((offset) => {
browser.executeScript("arguments[0].scrollTop = arguments[1];", element(by.className("ag-body-viewport")).getWebElement(), offset);
});
}
getRows() {
return this.pinnedRows.getText();
}
getTotalRows() {
const defer = Promise.defer();
let allRows = [];
for (let i = 0; i < 3; i++) {
this.getRows().then((rows) => {
allRows = allRows.concat(rows);
this.scrollDown();
this.waitToLoad();
if (i === 2) {
defer.resolve(allRows);
}
});
}
return defer.promise;
}
waitToLoad() {
waitFor.elementToBeVisible(this.pinnedRows.get(15));
browser.waitForAngular();
}
In the spec:
getTotalRows().then((data) => {
log.info(`TOTAL ROWS: ${data}`);
log.info(`TOTAL NUMBER OF ROWS : ${data.length}`);
expect(data.length).toBeGreaterThan(50);
});
In my angular.js learning project I want to hide one div and show another when I click a button.
In this code, I'd like the first div to be hidden at the click (or even destroyed?) and the second div to be shown.
Basically I want the user experience of going from page 1 to page 2 in my app.
How do I make this happen?
Index.html
<ion-content ng-controller="StartpageCtrl">
<div class="list card" id="startCard" ng-show="showstartCard">
<div class="item item-image item item-text-wrap">
Card 1
</div>
</div>
<div class="list card" id="secondCard" ng-show="showsecondCard">
<div class="item item-image item item-text-wrap">
Card 2
</div>
</div>
<button ng-click="hideCard()" class="button button-full button-calm button icon-right ion-chevron-right">
Start now
</button>
</ion-content>
controllers.js
.controller("StartpageCtrl", funcion($scope){
$scope.showstartCard = true;
$scope.showsecondCard = false;
$scope.hideCard = function() {
$scope.showstartCard = false;
$scope.showsecondCard = true;
};
});
When I run the page I see "Card 2" and nothing happens when I click the button.
What I wanted to see was "Card 1" and for it to switch to "Card 2" as I click the button...
Solved
I had forgotten to add references to controllers.js in the app.js angular.module as well as the script tag in index.html. It works fine now.
Using angular:
HTML file:
<td>Source Doc..
<div id="mydiv" ng-show="showDetails">
<div id="mydiv-container">
<div id="mydiv-content">
Close
<br>
hello
</div>
</div>
</div>
</td>
css file:
body {
height: 100%;
background-color: #F0F0F0;
font-family: Arial, sans-serif;
}
#mydiv {
width: 100%;
height: 100%;
overflow: hidden;
left: 100px;
top: 150px;
position: absolute;
opacity: 0.95;
}
#mydiv-container {
margin-left: auto;
margin-right: auto;
}
#mydiv-content {
width: 70%;
padding: 20px;
background-color: white;
border: 1px solid #6089F7;
}
a {
color: #5874BF;
text-decoration: none;
}
a:hover {
color: #112763;
}
If you are looking for toggle, then this code might help as there is no need to have any extra CSS or JS functions needed.
<button ng-click="isDetailOpen = !isDetailOpen"
ng-class="!isDetailOpen ? 'ion-ios-arrow-down' : 'ion-ios-arrow-up'"
class="button button-clear button-positive icon-right">
<span ng-show="!isDetailOpen">More Detail</span>
<span ng-show="isDetailOpen">Less Detail</span>
</button>
<div ng-show="isDetailOpen">
<p>Per ad ferri dicta, omnis laudem dicunt duo an. Ex pri solum definitiones.</p>
</div>
I figured it out while working on Angular-Ionic project.
I want to know if someone knows how to make a popup advertisemente banner in a mobile site, just like the one you can see in m.imdb.com
It's an ad banner with a close button.
Thanks in advance
Pablo
Solved
This is the script
<script>
$(document).ready(function(){
$("#freebie").click(function(){
$(this).hide();
});
});
</script>
And this is the html code
<div style="position:fixed; bottom: 0px; width: 100%; z-index: 999999;" id="freebie">
<img src="YOUR_IMAGE.jpg" border="0" style="background-color:black; opacity:0.85; height:50px; width:100%; position:absolute; bottom: 0px; z-index:-1;">
<img style="margin-right: 0px;margin-top: -60px;position: absolute;right: 0;top: 0;" src="SOME_CLOSE_BUTTON.png" border="0">
</div>
Cheers!
i created an shopping cart using using angularJS drag and drop. when i drag the item from catalog to cart and drop it, it goes successfully in the cart,
the problem is when i drag and drop same item in the cart, it again accept the product and add it in the cart.
how to remove this cloning?
to access the complete code please download it from here click to download the .rar file
or here is the code of main index file
the bold code below is attachment of CSS and script you can download the same version from the .rar file above or by googling the script name.
`
<meta charset="utf-8" />
<title>Drag & Drop</title>
**<script src="js/jquery.min.js"></script>**
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js">
**<script src="angular_drag_drop/angular-dragdrop.js"></script>
<link href="assets/css/jquery-ui.css" rel="stylesheet">**
<style>
.thumbnail { height: 280px !important; }
.btn-droppable { width: 180px; height: 30px; padding-left: 4px; }
.btn-draggable { width: 160px; }
.emage { height: 215px; }
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; margin-top: 1em; }
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
$(function() {
$("#catalog").accordion();
});
var App = angular.module('drag-and-drop', ['ngDragDrop']);
App.controller('oneCtrl', function($scope, $timeout) {
$scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];
$scope.list4 = [];
$scope.hideMe = function() {
$scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];
return $scope.list4.length > 0;
}
});
</script>
<body ng-controller="oneCtrl">
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h2>T-Shirts</h2>
<div data-drop="true" ng-model='list1' jqyoui-droppable="{multiple:true}">
<ul>
<li ng-repeat='item in list1' ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}">{{item.title}} {{list1.length}}
</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol data-drop="true" ng-model='list4' jqyoui-droppable="{multiple:true}">
<li ng-repeat="item in list4" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
{{item.title}}
</li>
<li class="placeholder" ng-hide="hideMe()">
Add your items here
</li>
</ol>
</div>
</div>
</body>
</html>`
If your shopping cart is the only use-case for drag and drop, then you could tackle this by disabling dragging once the object is in the cart. You can do this by binding the draggable class to an expression which checks whether the object is in the cart.
<div ng-class="{draggable: cart.indexOf(object) != -1}"></div>
Here is a basic fiddle to show you what I mean - note, this doesn't include any dragging or dropping, but is just to highlight the class binding, and get you started.
Fiddle