I want to show to previous and next word,
and when the current one is 'fuga' one please let the next one will be first one('hoge'), same thing when the current one is first one the prev should be last one from list - 'fuga'
could you help me? please
[http://jsfiddle.net/zeck/L8Snx/][1]
This is probably what you're looking for. Working fiddle: http://jsfiddle.net/L8Snx/37/
HTML
<div>
<strong>Previous:</strong> {{getPrev().name}}
<strong>Current:</strong> {{current.name}}
<strong>Next:</strong> {{getNext().name}}
</div>
JavaScript
$scope.getNext = function() {
var i = $scope.getIndex($scope.current.index, 1);
return $scope.dataSet[i];
};
$scope.getPrev = function() {
var i = $scope.getIndex($scope.current.index, -1);
return $scope.dataSet[i];
};
Related
I have a requirement for a select html element that can be duplicated multiple times on a page. The options for these select elements all come from a master list. All of the select elements can only show all of the items in the master list that have not been selected in any of the other select elements unless they just were duplicated.
When you select a new item from a duplicated select element, it seems to select the option after the one you selected even though the model still has the correct one set. This always seems to happen in IE11 and it happens sometimes in Chrome.
I realize this sounds convoluted, so I created a jFiddle example.
Try these steps:
Select Bender
Click the duplicate link
Select Fry (on the duplicated select)
Notice that the one that is selected is Leela but the model still has Fry (id:2) as the one selected
Can anyone tell me how I might get around this or what I might be doing wrong?
Here is the relevant Angular code:
myapp.controller('Ctrl', function ($scope) {
$scope.selectedIds = [{}];
$scope.allIds = [{ name: 'Bender', value: 1},
{name: 'Fry', value: 2},
{name: 'Leela', value: 3 }];
$scope.dupDropDown = function(currentDD) {
var newDD = angular.copy(currentDD);
$scope.selectedIds.push(newDD);
}
});
angular.module('appFilters',[]).filter('ddlFilter', function () {
return function (allIds, currentItem, selectedIds) {
//console.log(currentItem);
var listToReturn = allIds.filter(function (anIdFromMasterList) {
if (currentItem.id == anIdFromMasterList.value)
return true;
var areThereAny = selectedIds.some(function (aSelectedId) {
return aSelectedId.id == anIdFromMasterList.value;
});
return !areThereAny;
});
return listToReturn;
}
});
And here is the relevant HTML
<div ng-repeat="aSelection in selectedIds ">
Duplicate
<select ng-model="aSelection.id" ng-options="a.value as a.name for a in allIds | ddlFilter:aSelection:selectedIds">
<option value="">--Select--</option>
</select>
</div>
Hi I have just made a small change in your dupDropDown function as follows
$scope.dupDropDown = function(currentDD) {
$scope.selectedIds.push({});
}
Please check if this works for you.
I'm making this evaluation tool that uses radio buttons to select the grade and show the total result, that is the sum of different factors using jquery. I can make the summary, but I dont know how to subtract the previous value selected when I change the grade.
here is a jsfiddle that shows a simplified version of what I have..
current JQuery
$('input[type=radio]').click(function(){
var x= parseInt($(this).val());
if ($('#weeh:not(:empty)').text()){
var y= parseInt($('#weeh').text());
var z= x+y;
$('#weeh').text(z);
}else{
$('#weeh').text(0);
}
});
The expected behavior is:
For example, If I clicked terrible, it added 4 but if I want to change it to good, it must subtract 4 and add 1 to the result
your help is very appreciated.
Try this code,
$('input[type=radio]').change(function () {
var total = 0;
$("input[type=radio]:checked").each(function () {
var x = parseInt($(this).val());
total += x;
});
$('#weeh').text(total);
});
http://jsfiddle.net/xUrJv/11/
I'm creating an online quiz which will consist of three different answering alternatives in three divs called #useralt. All the divs will have the same id but different content. The div with the content that is the same as the #answer-div will trigger a "Correct!" div, while the others will trigger a "Sorry"-div.
I can only get the first #useralt-div to work, the following to get numb... Can anyone help me making all three of them work?
This is the site: http://www.juliawallin.se/moviecharades/play.html
$(document).ready(function(){
$("#useralt").click(function(){
var correctAnswer = $('#answer').text().toLowerCase();
var givenAnswer = $('#useralt').text().toLowerCase();
var match = correctAnswer.match(new RegExp("^#moviecharades (.+)$"));
correctAnswer = match[1];
if (givenAnswer == correctAnswer)
{
$("#correct").show("fast").delay("1000").hide("500"); //Slide Down Effect
$('#output').html(function(i, val) { return val*1+1 });
var el = document.createElement('div');
el.innerHTML = $("#output")[0].innerHTML;
document.getElementById('highscore').appendChild(el);
var interval = 1000 * 60 * 1;
APP.refresh(1, interval);
}
else
{
$("#correct").hide("fast"); //Slide Up Effect
$("#incorrect").show("500").delay("1000").hide("500");
}
});
});
ID must be unique, you need to use class. Change your id "useralt" to class then use:
$(".useralt").click(function(){
var correctAnswer = $('#answer').text().toLowerCase();
var givenAnswer = $(this).text().toLowerCase();
....
...
IDs must be unique. So that's not going to work. Try something like:
<div class="useralt" id="useralt1">
<div class="useralt" id="useralt2">
<div class="useralt" id="useralt3">
From w3 schools, http://www.w3schools.com/tags/att_global_id.asp
Specifies a unique id for the element. Naming rules: Must contain at least one character Must not contain any space characters In HTML, all
values are case-insensitive
I have a list of species here:
http://megasun.bch.umontreal.ca/ogmp/projects/other/compare.html
And a list of species here:
http://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=3524
I would like to find all species that are mentioned on BOTH pages. How can I do this quickly? (I dont mind if words not referring to species are to be found. I want to do comparision of words in general:)
Thanks for suggestions.
On each page in a console, do:
var html = document.body.innerHTML;
results = [];
html.match(/>([^<]+?)</g) // grab all values like ">...<"
.map(function(match) { // look for a long words..words..words
return match.match(/\w.*\w/);
})
.filter(function(match) { // ignore empty matches
return match!==null
})
.forEach(function(match) {
var text = match[0];
if (!text.match(/[0-9]/) && // ignore matches with numbers
results.indexOf(text)==-1) // add to results if not duplicate
results.push(text);
});
JSON.stringify(results);
Then do:
var page1 = JSON.parse(' /*COPY-PASTE THE RESULT OF PAGE 1*/ ');
var page2 = JSON.parse(' /*COPY-PASTE THE RESULT OF PAGE 2*/ ');
page1.map(function(s){return page2.indexOf(s)!=-1});
This is necessary to circumvent browser restrictions.
Demo:
> JSON.stringify( page1.filter(function(s){return page2.indexOf(s)!=-1}) )
'["Beta vulgaris","Spinacia oleracea"]'
I have the following function that is supposed to get HTMLs for the user selected area on the web page. This function does not seems to work properly.
Sometime, it gets htmls which is not selected also.
Can anyone please look into this function? -- Thanks a lot.
//----------------------------Get Selected HTML------------------------
function getSelectionHTML(){
if (window.getSelection)
{
var focusedWindow = document.commandDispatcher.focusedWindow;
var sel = focusedWindow.getSelection();
var html = "";
var r = sel.getRangeAt(0);
var parent_element = r.commonAncestorContainer;
var prev_html = parent_element.innerHTML;
if(prev_html != undefined)
{
return prev_html;
}
return sel;
}
return null;
}
It looks to me like you're getting the contents of the parent element rather than the selection itself. If the parent element contains anything other than what you have selected, then you'll get that too.
var sel = focusedWindow.getSelection();
This line returns a selection object. It contains the exact text selected by the user. You then get the range from the selection and get the commonAncestorContainer. So if you have code like this:
<div id="ancestor">
<p>First sentence.</p>
<p>Another sentence.</p>
</div>
And your user selects from the 's' of the first sentence to the 's' of the second sentence then the commonAncestorContainer is the div element so you'll also get the rest of the text.
A good reason for this would be if you wanted to guarantee yourself a valid HTML fragment (this seems to be the case, implied by your function name), but if you just want the selected text then call the toString method on the range directly:
var focusedWindow = document.commandDispatcher.focusedWindow;
var sel = focusedWindow.getSelection();
var r = sel.getRangeAt(0);
return r.toString();