I have the following list which is brought through AJAX, each 'li' haves a default 'display: none' value (the list haves 800 'li' so here I cut it to show only 3):
Basically I need that when somebody types a value in a search field to go through that whole list comparing that value with the 'h3 > a' text inside each list, so lets say somebody type "Florida" if it's inside an 'h3 > a' show it, the rest keep it hidden.
Also when somebody change the search value for example to "California" it should go again through all the list, hiding the actual ones (in this case "Florida") and showing the ones that haves "California" text in their h3 > a.
Thank you!
<form method="post" action="/employers/">
<fieldset>
<legend>Employer search</legend>
<div class="field">
<label for="searchtext" class="hidden">Search employers</label>
<div class="clear-input js-clear-input">
<input id="searchtext" type="text" name="RecruiterName" value="Florida" placeholder="Start typing…" class="clear-input__input js-recruiter-lookup js-clear-input-input" autocomplete="off">
<i data-icon="x" class="clear-input__trigger icon-before js-clear-input-trigger" style="display: inline;"></i>
</div>
</div>
<div class="field">
<select name="RecruiterTypeId" class="js-recruiter-type">
<option value="">All</option>
<option value="-10">Employer</option>
<option value="-20">Search Firm</option>
<option value="513012">Advertising Agency</option>
</select>
</div>
<input type="hidden" name="RecruiterId" value="" class="js-recruiter-id">
<input type="submit" value="Search" id="search" class="button button--brand">
</fieldset>
</form>
Actual code which is not working (it shows me the whole list):
// Detect a click in the "Search" button or enter from keyboard
$('#search').on('click keyup', function(event) {
// Prevent the original click for not reloading the whole page
event.preventDefault();
// Get value from search input #search
var searchInputValue = $('#search').val();
// Search the list and if it matches display it, else hide it
$('.lister__item').each(function() {
var isMatch = $('.lister__item > h3 > a:contains(' + searchInputValue + ')');
$(this).parent().parent().toggle(isMatch);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="search" id="search" />
</div>
<div class="employers-list">
<ul>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American International College<small>
19 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/823f0d7b-4f21-4303-b8a3-dac30651e57c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">American International College is a private, coeducational institution of higher education located on a 70+ acre campus in Springfield, Massachusetts</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American National University<small>
1 job</small>
</h3>
<p class="no-margin"> In 1886, a group of visionary educators and business leaders saw the need for an higher education institution focused on career-based training to meet workforce needs in the southeastern United States. Together they founded what is now known as Am...</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American University in Dubai<small>
12 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/f729bc47-b147-4656-9ff0-7faf9e660a4c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">The American University in Dubai is a private, non-sectarian institution of higher learning founded in 1995</p>
</li>
</ul>
Actual working code:
// Disable form since we need first the list loaded for being used
$('form').css('display', 'none');
// Get the total amount of pages
var totalPagesCount = $('.paginator__item:last-child a').attr('href').split('/')[2];
// Create a div container for adding future employers list and not being deleted later when the onclick occurs
$('<div />').addClass('employers-list').appendTo('#listing');
// Get every employer from the all the pages
for(var i=0; i<totalPagesCount; i++) {
$.ajax({
url: 'https://careers.insidehighered.com/employers/' + (i+1),
type: 'get',
cache: false,
dataType: "html",
success: function(results) {
// Get all the elements and hide them
var page = $(results).find('.lister__item').hide().detach();
// Add them to the empty 'ul'
$('.employers-list').append(page);
},
complete: function() {
// Everything is loaded so show form again
$('form').css('display', 'inline-block');
}
});
}
$.expr[":"].contains_ci = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// Detect a click in the "Search" button or enter from keyboard
$('#search').on('click keyup', function(event) {
// Prevent the original click for not reloading the whole page
event.preventDefault();
// Empty initial list
$('#listing').children('li').remove();
// Remove the paginator
$('.paginator').remove();
// Get value from search input
var searchInputValue = $('#searchtext').val();
$('.lister__item').hide().find('h3 > a:contains_ci(' + searchInputValue + ')').parents('.lister__item').show();
});
Hide all elements first then show the matched elements
Also I've added contains_ci expression which allows search case-insensitive
$.expr[":"].contains_ci = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// Detect a click in the "Search" button or enter from keyboard
$('#search').on('click keyup', function(event) {
// Prevent the original click for not reloading the whole page
event.preventDefault();
// Get value from search input
var searchInputValue = $('#search').val();
// Search the list and if it matches display it, else hide it
$('.lister__item').hide().find('h3 > a:contains_ci(' + searchInputValue + ')').parents('.lister__item').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="search" id="search" />
</div>
<div class="employers-list">
<ul>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American International College<small>
19 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/823f0d7b-4f21-4303-b8a3-dac30651e57c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">American International College is a private, coeducational institution of higher education located on a 70+ acre campus in Springfield, Massachusetts</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American National University<small>
1 job</small>
</h3>
<p class="no-margin"> In 1886, a group of visionary educators and business leaders saw the need for an higher education institution focused on career-based training to meet workforce needs in the southeastern United States. Together they founded what is now known as Am...</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American University in Dubai<small>
12 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/f729bc47-b147-4656-9ff0-7faf9e660a4c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">The American University in Dubai is a private, non-sectarian institution of higher learning founded in 1995</p>
</li>
</ul>
I took what you had and used a JavaScript RegExp to construct a case-insensitive expression to match in your content. I'm also using $(this) to target the element in the loop.
// Detect a click in the "Search" button or enter from keyboard
$('#search').on('click keyup', function(event) {
// Prevent the original click for not reloading the whole page
event.preventDefault();
// Get value from search input
var searchInputString = $('#searchtext').val();
var regExp = new RegExp(searchInputString, 'i');
// Search the list and if it matches display it, else hide it
$('.lister__item').each(function() {
var isMatch = $(this).find('h3 > a').text().match(regExp);
$(this).toggle((isMatch) ? true : false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchtext" type="text">
<button id="search">Search</button>
<div class="employers-list">
<ul>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American International College<small>
19 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/823f0d7b-4f21-4303-b8a3-dac30651e57c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">American International College is a private, coeducational institution of higher education located on a 70+ acre campus in Springfield, Massachusetts</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American National University<small>
1 job</small>
</h3>
<p class="no-margin"> In 1886, a group of visionary educators and business leaders saw the need for an higher education institution focused on career-based training to meet workforce needs in the southeastern United States. Together they founded what is now known as Am...</p>
</li>
<li class="lister__item cf block js-clickable">
<h3 class="lister__header">
American University in Dubai<small>
12 jobs</small>
</h3>
<img src="//careers.insidehighered.com/getasset/f729bc47-b147-4656-9ff0-7faf9e660a4c/" alt="" class="lister__logo rec-logo float-right one-quarter portable-two-fifths palm-two-fifths">
<p class="no-margin">The American University in Dubai is a private, non-sectarian institution of higher learning founded in 1995</p>
</li>
</ul>
</div>
Related
I have a table below that displays different odds:
What happens is that the user will select an odds button to add their selection to a bet slip. However, what I need to do is select the correct button. What I mean by that is that it needs to select the first avilable odds button, not to select an odds button that is disabled or already selected.
So the my logic is this:
Look in the odds table you see in the image and in the table row, check within to see if the button is not disabled and not selected.
If the above is true, then take the name of the selection and store it as an alias and then click on that odds button.
Currently this is my code but I don't think it's 100% correct, it is selecting an odds button but not sure if it will do the check if the button is disabled or selected in the row. At the moment it is selecting the first odds button but that's because none of the buttons are currently selected or disabled (and it's a live site so no way to manipulate the site to fit the scenario).
Here is the HTML that matches the image above:
<div class="featuredOutright__content featuredOutright__content--primary">
<ul class="featuredOutright__markets">
<li id="betBundle__4192262052__wrapper" class="featuredOutright__selection">
<div class="marketsList__image" id="betBundle__4192262052__sportIcon">
<i class="icon-football"></i>
</div>
<div class="marketsList__detail">
<i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
<div class="marketsList__market__title" id="betBundle__4192262052__marketTitle">
Club Brugge KV to score over 0.5 goals in each half
<a class="marketsList__market__matchName textLink" href="#/soccer/event/20213522" id="betBundle__4192262052__eventLink">
Club Brugge KV - KV Oostende
</a>
</div>
</div>
<div class="marketsList__was">
<p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4192262052__previousPrice">
5/6
</p>
</div>
<div class="marketsList__amount selectionBlock">
<a id="event-selection-4192262052" eventid="event-selection-20213522" title="Club Brugge KV to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link" "="">
<i class="icon-tick"></i>
<em class="button__bet__odds">10/11</em>
<div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
</a>
</div>
</li>
<li id="betBundle__4192270554__wrapper" class="featuredOutright__selection">
<div class="marketsList__image" id="betBundle__4192270554__sportIcon">
<i class="icon-football"></i>
</div>
<div class="marketsList__detail">
<i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
<div class="marketsList__market__title" id="betBundle__4192270554__marketTitle">
US Lecce to score over 0.5 goals in each half
<a class="marketsList__market__matchName textLink" href="#/soccer/event/20213510" id="betBundle__4192270554__eventLink">
Benevento - Lecce
</a>
</div>
</div>
<div class="marketsList__was">
<p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4192270554__previousPrice">
3/1
</p>
</div>
<div class="marketsList__amount selectionBlock">
<a id="event-selection-4192270554" eventid="event-selection-20213510" title="US Lecce to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link" "="">
<i class="icon-tick"></i>
<em class="button__bet__odds">10/3</em>
<div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
</a>
</div>
</li>
<li id="betBundle__4196565633__wrapper" class="featuredOutright__selection">
<div class="marketsList__image" id="betBundle__4196565633__sportIcon">
<i class="icon-tennis"></i>
</div>
<div class="marketsList__detail">
<i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
<div class="marketsList__market__title" id="betBundle__4196565633__marketTitle">
A Zverev and F Auger Aliassime to win the first set of the match
<a class="marketsList__market__matchName textLink" href="#/tennis/outrights/20405610" id="betBundle__4196565633__eventLink">
Odds Boost - Tennis
</a>
</div>
</div>
<div class="marketsList__was">
<p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4196565633__previousPrice">
7/1
</p>
</div>
<div class="marketsList__amount selectionBlock">
<a id="event-selection-4196565633" eventid="event-selection-20405610" title="A Zverev and F Auger Aliassime to win the first set of the match" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link" "="">
<i class="icon-tick"></i>
<em class="button__bet__odds">9/1</em>
<div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
</a>
</div>
</li>
</ul>
</div>
Here is my step definition and elements class:
import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";
import OddsSelectionElements from '../elements/oddsSelectionElements';
const oddsSelectionElements = new OddsSelectionElements();
When ("User selects an available bet bundle selection", () => {
oddsSelectionElements.featuredSelectionRow()
.within(() => {
oddsSelectionElements.oddsButton().first().not(".disabled");
oddsSelectionElements.oddsButton().first().not(".selected");
oddsSelectionElements.marketListTitle().first().invoke("text").as("betBundleTitle");
oddsSelectionElements.oddsButton().first().click();
})
})
OddsSelectionElements:
class OddsSelectionElements {
oddsButton() {
return cy.get('.button__bet__odds')
}
featuredSelectionRow() {
return cy.get('.featuredOutright__selection')
}
marketListTitle() {
return cy.get('.marketsList__market__title')
}
}
export default OddsSelectionElements
Example of button selected: it adds selected in class for the <a> tag
<a id="event-selection-4192270554" eventid="event-selection-20213510" title="US Lecce to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link selected" "="">
disabled is same concept as above but instead of selected will add disabled
Assuming not(".disabled") and .not(".selected") works above, you can write something like this:
cy.get(".button__bet__odds").each(($ele, index) => {
if ($ele.not(":disabled") && $ele.not(":selected")) {
cy.get("marketsList__market__title").eq(index).invoke("text").as("someText")
cy.wrap($ele).click()
return false
}
})
//Access someText
cy.get("#someText").then((someText) => {
cy.log(someText) //Access someText here
})
I'm working on making a word search for whatever word is entered into the input box. I'm trying to create a div element that would show a string consisting of all words found at least once in each paragraph, for successive searches, below the input box. I also want to create a span element that maintains a count of the words that are found in all paragraphs for all searches. I'm just pretty lost with all of it and unsure where to even start.
/*window.onload = function()
{
document.getElementById("searchbutton").onclick = searchClick;
};
I needed to bring this one line lower to work on commenting out */
but1 = document.querySelector("#searchbutton");
but1.addEventListener('click', searchClick);
// Called when the Search button is clicked.
// Looks for paragraphs matching a search string and highlights them.
function searchClick() {
var searchPhrase = document.getElementById("searchtext").value;
/*var main = document.querySelector("#main");*/
var mainParas = document.getElementsByTagName("p");
for (var i = 0; i < mainParas.length; i++) {
if (mainParas[i].textContent.indexOf(searchPhrase) >= 0) { mainParas[i].className = "highlighted"; } // highlight
else {
mainParas[i].className = null; // un-highlight
}
}
}
<body>
<div id="main">
<p>The Phoenix Suns are a professional basketball team based in
Phoenix, Arizona. They are members of the ...</p>
<p>The Suns have been generally successful since they began play as an
expansion team in 1968. In forty years of play they have posted ...</p>
<p>On January 22, 1968, the NBA awarded expansion franchises to an
ownership group from Phoenix and one from Milwaukee. ...</p>
<ul>
<li>Richard L. Bloch, investment broker/real estate developer...</li>
<li>Karl Eller, outdoor advertising company owner and former...</li>
<li>Donald Pitt, Tucson-based attorney;</li>
<li>Don Diamond, Tucson-based real estate investor.</li>
</ul>
</div>
<p>Page by Marty Stepp. <br />
Some (all) information taken from Wikipedia.</p>
<hr />
<div>
Search for text:
<input id="searchtext" type="text" />
<button id="searchbutton">Search</button>
</div>
</body>
Your problem seems to be that document.querySelector("#searchbutton") returns null so that but1.addEventListener('click', searchClick); fails. Instead of searching for the reason I skipped adding a listener and directly attached the onclick function with
<button id="searchbutton" onclick="searchClick()">Search</button>
in the html. This worked, but I had to define a css rule for highlighting that wasn't posted in your code.
Edit 01.05.2021 - I didn't cover counting the matches, so here it is completely:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
p.highlighted { background-color: Yellow; }
</style>
</head>
<body>
<body>
<script type="text/javascript">
function searchClick() {
var count = 0;
var searchPhrase = document.getElementById("searchtext").value;
var mainParas = document.getElementsByTagName("p");
for (var i = 0; i < mainParas.length; i++) {
if (mainParas[i].textContent.indexOf(searchPhrase) >= 0) {
mainParas[i].className = "highlighted"; // highlight
count += mainParas[i].textContent.split(searchPhrase).length - 1;
} else {
mainParas[i].className = null; // un-highlight
}
}
document.getElementById("found").textContent = count + " matches found";
}
</script>
<div id="main">
<p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>
<p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>
<p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>
<ul>
<li>Richard L. Bloch, investment broker/real estate developer...</li>
<li>Karl Eller, outdoor advertising company owner and former...</li>
<li>Donald Pitt, Tucson-based attorney;</li>
<li>Don Diamond, Tucson-based real estate investor.</li>
</ul>
</div>
<p>Page by Marty Stepp. <br />
Some (all) information taken from Wikipedia.</p>
<hr />
<div>Search for text:
<input id="searchtext" type="text" />
<button id="searchbutton" onclick="searchClick()">Search</button>
<span id="found"></span>
</div>
</body>
</html>
The counting happens with the loop checking the paragraphs. Before, a variable count is defined, inside it gets increased if matches occur, and after the loop the span id="found" is updated with the value of that variable.
For counting matches of the phrase and not numbers of paragraphs with matches, the text content is split up using the search phrase as delimiter. Then the number of pieces minus one is the number of occurences. Counted are phrases, not words. The phrase "the" is found in both " the " and " they ", but not in "The". Case sensitivity wasn't asked and isn't hard to implement. Just uppercase both the search phrase and the text being searched.
For simplicity, I put together HTML, Javascript and CSS into one file.
I am trying to insert a snippet of HTML code after each feed item using JQuery, however whatever I try it still doesn't work. I have displayed the HTML code below of the page I am trying to edit. I am trying to get some HTML to be inserted after every feed time (every time it finishes with class="wp_rss_retriever_container">)
<div class="wp_rss_retriever">
<ul class="wp_rss_retriever_list">
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/uncategorized/man-united-ready-to-smash-transfer-record-to-sign-star-striker/" title="Man United ready to smash transfer record to sign star striker">
Man United ready to smash transfer record to sign star striker
</a>
<div class="wp_rss_retriever_container">
<div class="wp_rss_retriever_metadata">
<span class="wp_rss_retriever_date">
Published: March 25, 2016 - 12:29 pm
</span>
</div>
</div>
</div>
</li>
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/fenerbahce-plan-bid-for-manchester-united-ace-mata/" title="Fenerbahce plan bid for Manchester United ace Mata">
Fenerbahce plan bid for Manchester United ace Mata
</a>
<div class="wp_rss_retriever_container">
<div class="wp_rss_retriever_metadata">
<span class="wp_rss_retriever_date">
Published: March 25, 2016 - 12:15 pm
</span>
</div>
</div>
</div>
</li>
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/united-arsenal-target-morata-premier-league-would-suit-me/" title="Manchester United, Arsenal target Morata: Premier League would suit me">
Manchester United, Arsenal target Morata: Premier League would suit me
</a>
<div class="wp_rss_retriever_container">
<div class="wp_rss_retriever_metadata">
<span class="wp_rss_retriever_date">
Published: March 25, 2016 - 11:55 am
</span>
</div>
</div>
</div>
</li>
<li class="wp_rss_retriever_item">
<div class="wp_rss_retriever_item_wrapper">
<a class="wp_rss_retriever_title" target="_blank" href="http://footballnewsdaily.net/manchester-united/manchester-united-rival-arsenal-liverpool-for-juventus-striker-morata/"
The code i tried to use to get it to work is
$( "<p>Test</p>" ).insertAfter( ".wp_rss_retriever_container" );
You could use each to iterate over all the .wp_rss_retriever_container class:
$('.wp_rss_retriever_container').each(function(i, obj) {
$(this).append("<p>Test</p>"); //or .html()
});
If you want it to be 'limited amount of times' you could condition and break if 'i' is equal to some value:
if(i == 5){ break; } // only 4 'test' will be added
Hope it helps to you!
I am using the following plugin by ListJS for a fuzzy search:
http://www.listjs.com/examples/fuzzy-search
I tried extending the plugin by adding my own method to filter by first letter, selecting from an A-Z list on click event.
The problem is as soon as you sort by letter, it breaks the search and wont filter anymore. I am storing the original list and adding it back in when you sort by letter because the ListJS plugin is removing list items and not hiding them by css. I am not sure if it's causing a problem or not? Any ideas?
JS Fiddle:
http://jsfiddle.net/xzzLuv3b/1/
HTML:
<div id="conditions-search-results">
<div class="col-md-12 conditions-search">
<h2 class="conditions-search-title">Find a Condition</h2>
<div class="conditions-search-form text-center">
<form class="form-inline form-flat-grey">
<div class="form-group">
<input type="text" class="form-control fuzzy-search" size="60" placeholder="Search by keyword or topic">
</div>
</form>
<div class="divider-wrapper">
<span class="divider-horizontal">OR</span>
</div>
<p>Choose by letter to browse conditions</p>
<ul class="list-unstyled conditions list-inline conditions-search-sort">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
<div class="col-md-12 conditions-wrapper">
<ul class="list-unstyled conditions-index list"><li class="condition">
<div class="condition-title">Arthritis</div>
<div class="condition-description"><p>Arthritis is another autoimmune disease that is long-term and causes inflammation of joints and the surrounding tissue. Severe cases have been known to affect other organs, as well.</p></div>
</li><li class="condition">
<div class="condition-title">Back Pain</div>
<div class="condition-description"><p>Back pain can rear its ugly head in several forms. Whether you suffer from this condition due to genetics, age or from a work-related injury, we have the ability to help you with your discomfort.</p></div>
</li><li class="condition">
<div class="condition-title">Carpal Tunnel</div>
<div class="condition-description"><p>Excessive pressure placed on the median nerve of the wrist. It may cause loss of feeling, immobility, numbness or tingling.</p></div>
</li><li class="condition">
<div class="condition-title">Chronic Fatigue Syndrome</div>
<div class="condition-description"><p>Chronic Fatigue is continuous and often severe tiredness that isn’t remedied by rest and is not caused by any other known medical conditions.</p></div>
</li><li class="condition">
<div class="condition-title">Degenerative Disc Disease</div>
<div class="condition-description"><p>Degenerative Disc Disease isn’t actually a disease. Rather, it’s a sanctioned medical term used to describe the normal changes that occurs in spinal discs as the body ages.*</p></div>
</li><li class="condition">
<div class="condition-title">Degenerative Joint Disease</div>
<div class="condition-description"><p>Degenerative Joint Disease is more commonly known as Osteoarthritis. It is due to the wear and tear of joints throughout the body as it ages.</p></div>
</li><li class="condition">
<div class="condition-title">Failed Surgery</div>
<div class="condition-description"><p>Failed Surgery, also known as Failed Back Surgery Syndrome (FBSS) is chronic pain in the back or legs after a spinal surgery.</p></div>
</li><li class="condition">
<div class="condition-title">Fibromyalgia</div>
<div class="condition-description"><p>Fibromyalgia is a very real disorder causing constant pain and general unease. Those suffering from this condition are frequently in a constant state of pain.</p></div>
</li><li class="condition">
<div class="condition-title">Gastroesophageal Reflux</div>
<div class="condition-description"><p>Gastroesophageal Reflux disease (GERD) occurs when the contents of the stomach leak backwards from the stomach into the esophagus.”</p></div>
</li><li class="condition">
<div class="condition-title">Headaches</div>
<div class="condition-description"><p>Painful, chronic headaches can make even the simplest of daily tasks unbearable. Here at Pittsburgh Chiropractic and West Hills Medical Center we provide several services to ascertain the origin of your headaches and help alleviate the pain.</p></div>
</ul>
</div>
</div>
</div>
Javascript:
/**
* Target conditions search list for fuzzy search
* #type {List} List JS object
*/
var conditionsList = new List('conditions-search-results', {
valueNames: ['condition-title'],
plugins: [ ListFuzzySearch() ]
});
/**
* Toggle list items when searching
*/
$('.fuzzy-search').on('keypress', function(e){
// Show conditions matched to the letter
$('li.condition').show();
});
/**
* Filter by Letter
* #param {letter} Selected letter from search box
*/
function filterByLetter(letter){
$('.condition').filter(function() {
return $(this).find('.condition-title').text().charAt(0).toUpperCase() === letter;
}).show();
};
/**
* Filter click event
* Sort by the letter that was clicked.
*/
$('.conditions-search-sort a').on('click',function(e){
e.preventDefault();
// Restore the original list
$('.conditions-index').replaceWith(conditionsIndex);
// Hide all list items
$('li.condition').hide();
// Selected Letter
var letter = $(this).text();
// Filter and show list items
filterByLetter(letter);
});
// Original conditions list index
var conditionsIndex = $(conditionsList.list).clone();
Using the List API filter the results of the fuzzy list instead of writing a custom filtering. This way ListFuzzySearch knows that the results have been filtered and thus the search will only work on the filtered results.
conditionsList.filter(); // resets the filter everytime
conditionsList.filter(function (item) {
return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});
The filter method finally looks like this
$('.conditions-search-sort a').on('click', function (e) {
e.preventDefault();
var letter = $(this).text();
conditionsList.filter();
conditionsList.filter(function (item) {
return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});
});
Here is a demo http://jsfiddle.net/dhirajbodicherla/xzzLuv3b/3/
Update
If the filters should reset on typing then the following should do it
$('.fuzzy-search').on('keypress', function (e) {
// Show conditions matched to the letter
conditionsList.filter();
$('li.condition').show();
});
$('.conditions-search-sort a').on('click', function (e) {
e.preventDefault();
var letter = $(this).text();
conditionsList.fuzzySearch.search(''); // this will make fuzzy ignore the text in the input.
conditionsList.filter(function (item) {
return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});
});
Here is an updated demo http://jsfiddle.net/dhirajbodicherla/xzzLuv3b/6/
However, you would need a way to remove the filter. Probably by adding a reset after A-Z links?
I had created a slider with this simple code
jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().addClass("activeTab");
jQuery(".accomdation_tab:first").addClass("active_tab_content");
jQuery(".article_single_item .article_singlepage_title a").click(function(event) {
event.preventDefault();
$(this).parent().parent().addClass("activeTab");
$(this).parent().parent().siblings().removeClass("activeTab");
var tab = $(this).attr("href");
$(".accomdation_tab").not(tab).css("display", "none");
$(tab).fadeIn();
});
With This Code I can display following content for each item on click.Now I need to create a Prev and Next button functionality too, When clicking to next it must scroll or move the next item and etc. i am trying with this code
jQuery('#single_article_next').click(function(){
jQuery(".article_single_item .article_singlepage_title a").parent().parent().siblings().removeClass("activeTab");
jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().next().addClass("activeTab");
jQuery(".accomdation_tab").siblings().removeClass("active_tab_content");
jQuery('.accomdation_tab:first').next().addClass("active_tab_content");
});
jQuery('#single_article_prev').click(function(){
jQuery(".article_single_item .article_singlepage_title a").parent().parent().siblings().removeClass("activeTab");
jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().prev().addClass("activeTab");
jQuery(".accomdation_tab").siblings().removeClass("active_tab_content");
jQuery('.accomdation_tab:first').prev().addClass("active_tab_content");
});
But it is not what i need and didnt work properly.Help me to figure out.
To achieve next/prev functionality you have to take activeTab and to make active the next/previous one, like below.
Please notice that i replaced .article_single_item with .activeTab to take the active a.
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
The code below is for next/prev functionality. I extracted a part of common functionality in function tabChange().
jQuery('#single_article_next').click(function(){
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
$activeTab.parent().parent().next().siblings().removeClass("activeTab");
$activeTab.parent().parent().next().addClass("activeTab");
$activeTab = jQuery(".activeTab .article_singlepage_title a");
tabChange($activeTab)
});
jQuery('#single_article_prev').click(function(){
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
$activeTab.parent().parent().prev().siblings().removeClass("activeTab");
$activeTab.parent().parent().prev().addClass("activeTab");
$activeTab = jQuery(".activeTab .article_singlepage_title a");
tabChange($activeTab)
});
function tabChange($activeTab) {
var tab = $activeTab.attr("href");
$(".accomdation_tab").not(tab).css("display", "none");
$(tab).fadeIn();
}
See the snippet for the working example.
jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().addClass("activeTab");
jQuery(".accomdation_tab:first").addClass("active_tab_content");
jQuery(".article_single_item .article_singlepage_title a").click(function(event) {
event.preventDefault();
$(this).parent().parent().addClass("activeTab");
$(this).parent().parent().siblings().removeClass("activeTab");
tabChange($(this))
});
jQuery('#single_article_next').click(function() {
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
$activeTab.parent().parent().next().siblings().removeClass("activeTab");
$activeTab.parent().parent().next().addClass("activeTab");
$activeTab = jQuery(".activeTab .article_singlepage_title a");
tabChange($activeTab)
});
jQuery('#single_article_prev').click(function() {
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
$activeTab.parent().parent().prev().siblings().removeClass("activeTab");
$activeTab.parent().parent().prev().addClass("activeTab");
$activeTab = jQuery(".activeTab .article_singlepage_title a");
tabChange($activeTab)
});
function tabChange($activeTab) {
var tab = $activeTab.attr("href");
$(".accomdation_tab").not(tab).css("display", "none");
$(tab).fadeIn();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 column" style="float:none;margin:auto;">
<div class="solutions_single_title">
Solutions</div>
<div class="single_sol_content">
<p>We feel the best way to show you our solutions is to tell the stories of how our client successfully structured investment products using Exchange Traded Instruments (ETIs)</p>
</div>
<div class="col-md-4 single_solution_ipad_leftcol">
<div class="article_scroll_list">
<div class="other_art_title">Other Solutions</div>
<div class="article_scroll_content">
<div class="article_single_item activeTab">
<div class="article_singlepage_title">Private Equity
</div>
</div>
<div class="article_single_item">
<div class="article_singlepage_title">The New Manager
</div>
</div>
<div class="article_single_item">
<div class="article_singlepage_title">SME Financing
</div>
</div>
<div class="article_single_item">
<div class="article_singlepage_title">The UCITS Fund
</div>
</div>
</div>
<div class="article_list_border"></div>
<span id="single_article_prev">
<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_down.png" alt="article" class="arrow_down">
<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_down_hover.png" alt="article" class="arrow_down_hover">
</span>
<span id="single_article_next">
<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_up.png" alt="article" class="arrow_up">
<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_up_hover.png" alt="article" class="arrow_up_hover">
</span>
</div>
</div>
<div class="col-md-8 single_solution_ipad_rightcol">
<div id="solution_1" class="accomdation_tab active_tab_content" style="">
<div class="sigle_socenario_maintitle">
Private Equity
</div>
<div class="article_maincontent">
<p>A private equity manager based in a non EU jurisdiction consulted Argentarius to securitise a portfolio of investments in European SMEs with a listing on the Deutsche Börse and targeting professional investors in the EU.</p>
</div>
<div class="sigle_socenario_maintitle">
Own Issuer Vehicle</div>
<div class="article_maincontent">
<p>Argentarius created a branded Own Issuer Securitisation Cell Company for the manager to use as an EU base for investment opportunities.</p>
</div>
</div>
<div id="solution_2" class="accomdation_tab" style="display: none;">
<div class="sigle_socenario_maintitle">
The new manager
</div>
<div class="article_maincontent">
A new start up long/short equity manager consulted Argentarius to securitise a trading account at a multi-asset prime broker and with an ETI listed on the Deutsche Börse for the initial funding to be received from professional investors. Costs were a
prime concern here as the starting AUM was below 5 million euros. </div>
<div class="sigle_socenario_maintitle">
Fast and cost effective</div>
<div class="article_maincontent">
Our transparent cost structure meant that the new start up manager had control of their structuring costs from the start. Furthermore the ongoing management costs were clearly defined and the new manager could allocate the costs within the total management
fee for the strategy.</div>
</div>
<div id="solution_3" class="accomdation_tab" style="display: none;">
<div class="sigle_socenario_maintitle">
SME Financing
</div>
<div class="article_maincontent">
An asset manager securitised a portfolio of unlisted bonds arranged with European SMEs looking for new funding and listed it on the European Wholesale Securities Market as a target for professional investors and UCITS funds. The UCITS fund manager is
therefore able to gain exposure to high yielding SME bonds that are managed by the fund manager through a power of attorney granted by the Special Investment Vehicle that forms part of the securitisation structure.</div>
<div class="sigle_socenario_maintitle">
SME Financing ETI</div>
<div class="article_maincontent">
A key requirement with this ETI was the cost of running the portfolio needed to be kept to a minimum and this was achieved by structuring the management of the SME Bonds through a Special Investment Vehicle (SIV) created as a 100% subsidiary of the Securitisation
Cell Company. The selection of the bonds and the management of the repayments was directly handled by the UCITS fund manager under a power of attorney granted by the SIV.</div>
</div>
<div id="solution_4" class="accomdation_tab" style="display: none;">
<div class="sigle_socenario_maintitle">
The UCITS Fund seeking exposure to alternative investments
</div>
<div class="article_maincontent">
A large UCITS fund manager securitised both an FX trading account and a Commodity Futures trading account with two separate brokers to achieve diversification for the fund. The ETI was listed on the European Wholesale Securities Market. The UCITS fund
manager needed to be satisfied that the ETI met all the requirements of eligibility of assets, in addition to ensuring that no more than 10% of the AUM of the fund was invested within the ETI. The issuing Securitisation Cell Company had issued
several hundred million Euros in securities and thus the UCITS fund manager was able to confirm that not more than 10% of the issuance of the Securitisation Cell Company had been purchased.</div>
<div class="sigle_socenario_maintitle">
The UCITS ETI</div>
<div class="article_maincontent">
The European Wholesale Securities Market is a joint venture between the Irish and Malta Stock Exchanges and offers an excellent venue for the listing of eligible UCITS assets that are backed by alternative investment portfolios.</div>
</div>
</div>
</div>
Wrap your articles like this
<div class="article_scroll_content">
<ul id="article_title_list">
<li class="article_title">
<div class="article_single_item activeTab">
<div class="article_singlepage_title"> Private Equity
</div>
</div>
</li>
<li class="article_title">
<div class="article_single_item">
<div class="article_singlepage_title"> The New Manager
</div>
</div>
</li>
<li class="article_title">
<div class="article_single_item">
<div class="article_singlepage_title"> SME Financing
</div>
</div>
</li>
<li class="article_title">
<div class="article_single_item">
<div class="article_singlepage_title"> The UCITS Fund
</div>
</div>
</li>
</ul>
</div>
Then you can use some nicer code, like this
$(function () {
var $allTtitles = $('li.article_title');
var titleCount = $('li.article_title').length;
$('#title_count').html(titleCount);
var newActiveTitleIdx = 0;
var titleActiveIdx = 0;
function titleListUp() {
titleActiveIdx = $('li.article_title .active_title').index();
$allTitles.removeClass('active_title');
if (titleActiveIdx === 0) {
newActiveTitleIdx = titleCount - 1;
} else {
newActiveTitleIdx--;
}
$('#art_idx').html(newActiveTitleIdx);
$allTtitles.eq(newActiveTitleIdx).addClass('active_title');
}
function titleListDown() {
titleActiveIdx = $('li.article_title .active_title').index();
$allTitles.removeClass('active_title');
if (titleActiveIdx == (titleCount - 1) ) {
newActiveTitleIdx = 0;
} else {
newActiveTitleIdx++;
}
$('#art_idx').html(newActiveTitleIdx);
$allTtitles.eq(newActiveTitleIdx).addClass('active_title');
}
$('#single_article_prev').on('click', function () {
titleListUp();
});
$('#single_article_next').on('click', function () {
titleListDown();
});
});