How can I make selected item in listbox scroll to the top?
[http://jsfiddle.net/729nX/1/
Some thing familiar to this but with a few changes :
1) using only angular, without jq.
2) my code is different.
<span class="custom-list-wrapper" ng-show="openDropDown">
<span class="custom-list">
<span class="list-object ng-binding ng-scope selected" ng-repeat="(key, value) in countries " data-value="AUT" ng-click="changeCountry({data: value.name})" ng-class="{selected : selected.name == value.name}">
Austria
</span>
This is how it looks on my side:
<span class="custom-list-wrapper" ng-show="openDropDown">
<span class="custom-list" >
<span class="list-object" ng-repeat="(key, value) in countries " data-value="{{key}}" ng-class="{selected : selected.name == value.name}">
{{value.name}}
</span>
</span>
</span>
This is a really long list and i want to scroll to the specific item in the dropdown, some thing like in the fiddle
/* var scrollToSelected = function(){
// angular.element('.custom-list').animate({scrollTop : angular.element(xxx)},1000);
angular.element('.custom-list').animate({
scrollTop: angular.element('span[value="AUT"]').offset().top
}, 1000);
}
i tried this but got a jqlite error.
Would happy to hear any solution :)
As you aren't using JQuery, you should look into how jQLite work. The way jQLite works is, it can only query to predefined tagName & element of HTML. For custom-class & selector based query you have to use native-browser API to get a DOM.
var customList = document.getElementsByClassName('custom-list'),
spanAut = document.querySelector('span[value="AUT"]');
angular.element(customList).animate({
scrollTop: angular.element(spanAut).prop('offsetTop')
}, 1000);
Related
When I add a new button with some value it gets dynamically added into DOM. Non-Angular HTML element for this button is:
<li class="ui-state-default droppable ui-sortable-handle" id="element_98" data-value="2519">
25.19 EUR
<button type="button" class="btn btn-default removeParent">
<span class="glyphicon glyphicon-remove" aria-hidden="true">
</span>
</button>
</li>
Once I remove this button I want to check it is not present anymore. Element that I'm searching for is data-value="2519"and this could be anything I set, like for example 2000, 1000, 500, 1050,...
In page object file I have tried to use the following:
this.newValueButtonIsNotPresent = function(item) {
newValueButton = browser.element(by.id("containerQUICK_ADD_POINTS")).all(by.css('[data-value="' + item + '"]'));
return newValueButton.not.isPresent();
};
And in spec file I call this function as follows:
var twentyEurosButtonAttributeValue = '2000';
describe("....
it ("...
expect(predefined.newValueButtonIsNotPresent(twentyEurosButtonAttributeValue)).toBeTruthy();
I know this is not correct, but how I can achieve something like that or is there another way?
Stupid me, I found a simple solution. Instead dynamically locating an element I located the first on the list, which is always the one, which was newly added and then checked if it's text does not match:
Page object file:
this.newValueButtonIsNotPresent = function() {
newValueButton = browser.element(by.id("containerQUICK_ADD_POINTS")).all(by.tagName('li')).first();
return newValueButton.getText();
};
Spec file:
// verify element 20.00 EUR is not present
predefined.newValueButtonIsNotPresent().then(function(value) {
expect(value).not.toEqual(twentyEurosText);
});
What I've done is loaded some HTML from a file and I am attempting to modify some elements within that HTML.
The initialization looks like this:
var id = player_info["ID"];
$("#main_container").append(
$("<div />").attr({class: "player_container", id: "player_" + id}).css("display", "none")
);
// Add all information to the player container
var player_container = $("#player_" + id);
player_container.load("player_layout.html");
With player_layout.html looking like this:
<div class="player_name">
</div>
<div class="player_chips">
Chips:
<br/>
<span class='bidding'></span>/<span class='chips'></span>
</div>
<div class="player_stats">
Wins / Losses
<br/>
<span class="wins"></span>/<span class="losses"></span>(<span class="total_games"></span>)
<br/><br/>
Chips Won / Chips Lost
<br/>
<span class="chips_won"></span>/<span class="chips_lost"></span>
</div>
<button class="player_won">Player Has Won</button>
I then want to modify some of the elements, specifically classes. An example of the way I was initially doing this is:
player_container.find(".player_name").text(player_info['username']);
This wasn't working so I then tried to switch find with children and text with html but that didn't seem to work. I then tried this:
$('> .player_name', player_container).html(player_info['username']);
but that also didn't work. I understand that I can use DOM to grab the childNodes and compare the class names but there are a lot of classes that need modifying and I'd also like to know if this is possible in JQuery. Thanks in advance for any help.
You need to use complete callback method of .load()
var player_container = $("#player_" + id);
player_container.load("player_layout.html", function(){
player_container.find(".player_name").text(player_info['username']);
});
So, I'm in quite a bit of a dilemma with this Google Apps Script. Being used to traditional Javascript this is quite the challenge. I'm currently trying to pull values from Zillow and I've been successful on the first couple of items (Rent Value, Zestimate, School Ratings) but now I need to get the School Names. This is becoming so much of a hassle that I'm honestly stuck I can't seem to do a .match() on what I need to get. I'll post some code and see if anyone else can get a grasp on this.
The Zillow code I'm parsing:
<ul class="nearby-schools-list">
<li class="nearby-schools-header">
<h4 class="nearby-schools-rating"> </h4>
<h4 class="nearby-schools-name"> </h4>
<h4 class="nearby-schools-grades">Grades</h4>
<h4 class="nearby-schools-distance">Distance</h4>
</li>
<li class="nearby-school assigned-school">
<span class="gs-rating-badge">
<div class="gs-rating gs-rating-8">
<span class="gs-rating-number">8</span>
<span class="gs-rating-subtext">out of 10</span>
</div>
</span>
<span class="nearby-schools-name"> Salmon Bay School
<span class="assigned-label de-emph">(assigned)</span>
</span>
<span class="nearby-schools-grades">K-8</span>
<span class="nearby-schools-distance">0.3 mi</span>
</li>
<li class="nearby-school assigned-school">
<span class="gs-rating-badge">
<div class="gs-rating gs-rating-8">
<span class="gs-rating-number">8</span>
<span class="gs-rating-subtext">out of 10</span>
</div>
</span>
<span class="nearby-schools-name"> Whitman Middle
<span class="assigned-label de-emph">(assigned)</span>
</span>
<span class="nearby-schools-grades">6-8</span>
<span class="nearby-schools-distance">1.4 mi</span>
</li>
<li class="nearby-school assigned-school">
<span class="gs-rating-badge">
<div class="gs-rating gs-rating-9">
<span class="gs-rating-number">9</span>
<span class="gs-rating-subtext">out of 10</span>
</div>
</span>
<span class="nearby-schools-name"> Ballard High
<span class="assigned-label de-emph">(assigned)</span>
</span>
<span class="nearby-schools-grades">9-12</span>
<span class="nearby-schools-distance">0.2 mi</span>
</li>
That is a large chunk but essentially I'm trying to grab the text out of school-name which is a class listed under ul > li > span.nearby-schools-name > a.school-name.
Here is my attempt and I'm getting returned blanked with anything I do.
// get School Names
var match = contentText.match(/<a href="([^<]*)" class="ga-tracked-link track-ga-event school-name notranslate" /g);
Browser.msgBox(match);
var schoolNameArray = new Array();
while (match.length > 0) {
var thisSchoolName = new String(schoolName.pop());
Browser.msgBox(thisSchoolName);
//schoolNameArray.push(thisSchoolName);
}
var schoolNames = schoolNameArray.toString().replace(/,/g, " _ ");
A quick FAQ, I have tried the function that is on the web that replicated the getElementsByClassName and I had no luck. I also tried grabbing the href
Here is one way to do it. First get all the Elements By Class Name:
var elSchoolNames = document.getElementsByClassName("nearby-schools-name");
What gets returned is an object. If you display the variable elSchoolNames to the console, console.log('elSchoolNames: ' + elSchoolNames ); It will look like this:
[object HTMLCollection]
Inside the object [object HTMLCollection] is a bunch of more objects; an array of objects.
[object HTMLHeadingElement]
[object HTMLSpanElement]
[object HTMLSpanElement]
[object HTMLSpanElement]
It's important to understand that the objects have key:value pairs, but there is also an array of objects, with no key (property). To get sub objects out of the main object, refer to them by number, as they have no property name, because it's an array at that level.
You need all the Span Elements.
var theSpanEl = elSchoolNames[1];
var theSpanE2 = elSchoolNames[2];
var theSpanE3 = elSchoolNames[3];
console.log('textContent: ' + theSpanEl.textContent);
The name of the school is in the textContent property of the object.
How do I know what all the objects are inside the first object, and what the contents of the first Span element is? I looped through all the properties of the objects.
var elSchoolNames = document.getElementsByClassName("nearby-schools-name");
console.log('namesOfSchools: ' + elSchoolNames);
for (theProperty in elSchoolNames) {
console.log('theProperties: ' + theProperty);
console.log('each value: ' + elSchoolNames[theProperty]);
};
var theSpanEl = elSchoolNames[1];
for (spanProperty in theSpanEl) {
console.log('theProperties: ' + spanProperty);
console.log('each value: ' + theSpanEl[spanProperty]);
};
console.log('textContent: ' + theSpanEl.textContent);
To get the sub element you need out every element after the first one. Because it's zero indexed, the second element is number 1.
var theSpanEl = elSchoolNames[1];
Now, to see what you have, print it to the console:
console.log('textContent: ' + theSpanEl.textContent);
That gives you:
textContent: Salmon Bay School
(assigned)
Of course, you'll want to strip off the (assigned) on the end with a string method. You don't need to use .match() or regEx for any of this.
I just realized, that if you are getting the HTML content out of a website that isn't yours, and the HTML content is a string, then none of this will work. Unless you injected the HTML into your site with innerHTML, then used the above code.
I have built a simple shopping cart sample :
Those 3 lines are created via ng-repeat.
My goal :
I want the yellow part to become red when the relevant quantity ( red arrow) is more than 3.
So here is what I did : (http://jsbin.com/eXOgOpA/4/edit)
<div ng-repeat='item in items'>
<span ng-class='{isMoreThan3: IsMoreThan3()}'>{{item.title }}</span>
<input ng-model='item.quantity'>
...
</div>
Where IsMoreThan3 is a function which :
$scope.IsMoreThan3=function (){return $scope.item.quantity>3;};
Where
.isMoreThan3
{
color:red;
}
but it doesn't work.( calculations are ok , but the color is never red).
Question :
How can I fix my controller code to yield the right value for the model ?
In other words :
How can the controller , know the current item.quantity ?
nb
I know that I can put the logic into the markup But I don't want that. I want the controller to return a true/false value.
Try:
<span ng-class='{isMoreThan3: IsMoreThan3(item)}'>{{item.title }}</span>
JS:
$scope.IsMoreThan3=function (item){
return item.quantity>3;
};
The reason is ng-repeat will create its own scope, accessing $scope.item will not access the current item in the loop
I am constructing Jquery elements dynamically and i have used .clone() and .html() and .append() alot in my code. this works fine with chrome and firefox even IE9. But IE8 Its creating element with attribute sizeset and sizechar. My Jquery version is 1.7. I know there alot around 4 to 5 Issue raised in Stackoverflow on same topic, but i havent found even one answer useful . Please help me with this as it's blocking my complete work. i cant user removeAttr as , its sizcache08213372050765756 some random junk value. and if i use regEx
var re = /\s*(sizset|sizcache)\d*="[^"]*"/gi;
source = source.replace(re,'');
mentioned in one of the thread
How to get rid of sizset and sizcache attributes from jQuery?
then return value is "no", i dono how.
IE8 Contruction
<DIV class=findings sizcache08213372050765756="38" sizset="54">
<DIV id=fnd-cv1 class="finding finding-readonly fnds-O closed" sizcache08213372050765756="38" sizset="54">
<DIV class="cap-fnd-summary finding-summary summary clearfix" sizcache08213372050765756="36" sizset="0">
<SPAN class=line-item>MS-2.3</SPAN>
<A class=finding-title href="" jQuery17034048751834028246="188" toggleview="closed" sizcache08213372050765756="36" sizset="1"><SPAN class=icon-text-toggle></SPAN>Fnd 10</A><SPAN class="status finding-status">Open</SPAN> <SPAN class="status finding-status-item PA" href="">PA</SPAN> <SPAN class="status finding-status-item CA" href="">CA</SPAN> <SPAN class="status finding-status-item ROOT" href="">ROOT</SPAN>
</DIV>
<DIV class="finding-items clearfix" sizcache08213372050765756="38" sizset="54"><SPAN class=recidivism sizcache08213372050765756="36" sizset="9"></DIV>
</DIV>
</SPAN>
</DIV>
Don't use regex to parse HTML, iterate over elements and attributes, and remove them if they match a condition.
I whipped together a jQuery plugin that should work
$.fn.sizRemove = function() {
return this.each(function() {
for (var i=this.attributes.length; i--;) {
var n = this.attributes[i].nodeName;
if (n.indexOf('sizset') === 0 || n.indexOf('sizcache') === 0)
this.removeAttribute(n);
}
});
};
to be called like
$('#fnd-cv1').sizRemove();
// or for all elements
$('*').sizRemove();
FIDDLE