greetings,
I have a bunch of <li> items inside a div, the div is scrollable
I would like to have a text box to mark the first li containing a certain text from a textbox and search button.
and the li should became visible :(
I have no clue how to do this :(
Live Demo Updated with scrolling
Markup
<div id='test'>
<ul>
<li>Text</li>
<li>Something</li>
<li>Hey</li>
<li>der</li>
<li>herp</li>
<li>derp</li>
<li>Testing</li>
</ul>
</div>
JS
$('#searchBtn').click(function(){
var searchString = $('#searchText').val(),
foundLi = $('li:contains("' + searchString + '")');
foundLi.addClass('found');
$('#test').animate({ scrollTop: foundLi.offset().top});
});
I'd use the scrollTo plugin: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
then do something like this (not tested)
$('#thediv').scrollTo( $('li:contains("'+yourtext+'")') );
The HTML:
<div style="height: 40px; overflow-y: scroll" id="my_div">
<li>the first li</li>
<li>the second li</li>
<li>the third li</li>
<li>the fourth li</li>
...
</div>
<input type="text" id="my_text_box" />
<input type="submit" id="my_search_button" />
The javascript:
$('#my_search_button').click(function(e) {
var my_search = $('#my_text_box').val(); // the text to search for
var $my_div = $('#my_div'); // the div
$my_div.find('li').each(function(idx, elem) {
$elem = $(elem);
if ($elem.text().indexOf(my_search) != -1) { // if it contains your searched text
$elem.show(); // display it ? only if needed, unclear from question
$elem.addClass('highlighted'); // add your class for the highlight
$my_div.scrollTop($elem.position().top); // scroll to it
return false; // stop the loop
}
});
e.preventDefault(); // stop an actual form from being submitted
});
I am looking for something similar:
Visitors to my site should be able to search within a clickable list of locations (for local weather report).
Ideally, there should be a match mechanism:
as the visitor begins entering the name of the location, that name should be suggested automatically in the search field.
Is there any code like that?
Check this out https://github.com/svapreddy/cssListJS.
Search functionality implemented using pure CSS and little bit JS
Related
I've implemented the accepted answer to Change div content based on mouse hover on different divs across a lot of links, so I don't really want to go with another solution if it can be avoided. I'm trying to figure out one more piece of the puzzle though...
I can't seem to get it to where it defaults back to the original text of the content div when not hovering over an item.
<div id="content">
Stuff should be placed here.
</div>
<br/>
<br/>
<br/>
<ul>
<li onmouseover="hover('Apples are delicious')">Apple</li>
<li onmouseover="hover('oranges are healthy')">Orange</li>
<li onmouseover="hover('Candy is the best')">Candy</li>
</ul>
<script>
function hover(description) {
console.log(description);
document.getElementById('content').innerHTML = description;
}
</script>
You need to store the original text and bring it back when the mouse leaves.
var element = getElementById('content'),
storedText;
function hover(description) {
console.log(description);
storedText = element.innerHTML;
element.innerHTML = description;
}
function leave() {
element.innerHTML = storedText;
}
<div id="content">
Stuff should be placed here.
</div>
<br/>
<br/>
<br/>
<ul>
<li onmouseover="hover('Apples are delicious')" onmouseleave="leave()">Apple</li>
<li onmouseover="hover('oranges are healthy')" onmouseleave="leave()">Orange</li>
<li onmouseover="hover('Candy is the best')" onmouseleave="leave()">Candy</li>
</ul>
It is generally recommended to add event listeners in the JS code and not in the HTML, but put that aside for now.
i dont think in your code there was anything to make the content to go back to the default but i have made the least changes in your code to make the content to go back to default and i have used onmouseout event for that.
<div id="content">
Stuff should be placed here.
</div>
<br/>
<br/>
<br/>
<ul>
<li onmouseover="hover('Apples are delicious')" onmouseout="hover('Stuff should be placed here.')">Apple</li>
<li onmouseover="hover('oranges are healthy')" onmouseout="hover('Stuff should be placed here.')">Orange</li>
<li onmouseover="hover('Candy is the best')" onmouseout="hover('Stuff should be placed here.')">Candy</li>
</ul>
<script>
function hover(description) {
console.log(description);
document.getElementById('content').innerHTML = description;
}
</script>
You can achieve the same without any Javascript:
li::before { content: attr(data-text); }
li:hover::before { content: attr(data-text-hover); }
<ul>
<li data-text-hover="Apples are delicious" data-text="Apple"></li>
<li data-text-hover="Oranges are healthy" data-text="Orange"></li>
<li data-text-hover="Candy is the best" data-text="Candy"></li>
</ul>
I have this code http://jsfiddle.net/cwahL1tz/
My HTML
<ul class="myFilters">
<li data-type="A">A</li>
<li data-type="B">B</li>
<li data-type="C">C</li>
</ul>
<div class="filter">
<ul class="title">
<li>Assurance</li>
<li>Couverture</li>
<li>Banque</li>
<li>Alimentation</li>
</ul>
<div id="Assurance" class="category">
<ul>
<li>Groupama</li>
</ul>
</div>
<div id="Couverture" class="category">
<ul>
<li>Try it !</li>
</ul>
</div>
<div id="Alimentation" class="category">
<ul>
<li>AN example</li>
</ul>
</div>
</div>
Here's my JS script
jQuery(function ($) {
$('.myFilters li').click(function(){
$(".category").hide();
var v = $(this).text()[0]
$('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == v;
$(".category:first").show();
}).show()
})
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$(".category").hide();
$(selector).show();
});
});
It works fine but I trying to arrange some stuff but I'm stuck.
When I load the page all the links and divs appears, I just only want the divs of the first letter appear.
And when I click on C for example, I want the first div to show from the first link.
Thanks for your help !
EDITED:
On load:
$('.myFilters li:first').trigger('click');
And inside its click:
.first().find('a[data-toggle]:first').trigger('click');
jsfiddle DEMO
You can simply do that with first selecting the element with the right selector and then you can trigger the click event manually :
Show the Assurance content on load :
$('a[data-toggle="#Assurance"]').click();
Show first content on click :
$('.myFilters li').click(function(){
$(".category").hide();
var v = $(this).text()[0]
$('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == v;
}).show()
$('a[data-toggle]:visible:first').click();
})
Updated jsFiddle
Without going into any more javascript, you can display the content the way you would like using css selectors:
.category {display:none;}
.category:nth-of-type(1) {
display:block;
}
http://jsfiddle.net/5ageasm4/1/
Is this what you want. Check the Fiddle
I am basically just triggering the first item in the li
$(".title > li:first").find("a[data-toggle]").trigger("click");
and i am doing the same with the category.
EDIT
I updated my Fiddle
NEW EDIT
Created a new Fiddle, this one just removes all the duplicate code.
So basically i created these 2 functions
that.selectFirstElem = function(selector){
selector.find("a[data-toggle]").trigger("click");
};
that.loadFirstDataToggle = function(input){
return $('.title li').hide().filter(function(){
return $(this).text().toUpperCase()[0] == input;
}).show();
};
And those 2 functions you can just call in the places where you need it.
I've got the follow code
<ul>
<li>Google</li>
<li>Facebook</li>
</ul>
<!- hidden divs ->
<div id="1" style="display:none;">Email</div>
<div id="2" style="display:none;"">Social Network</div>
I tried the following code but when I click on a link i would like it to show a div based on the id of the link but it is not working
<script type="text/javascript">
$(document).ready(function()
{
$(".chooserClass").click(function() {
var show = $(this).attr('id');
$(show).show();
});
});
</script>
Change
var show = $(this).attr('id');
$(show).show();
to
var show = $(this).attr('id');
$('#'+ show).show();
You have 2 elements on your page that have th same id, and they are numeric which from experience can cause all kinds of undesired behavior.
The way you want to this is like so:
<ul>
<li>Google</li>
<li>Facebook</li>
</ul>
<!- hidden divs ->
<div id="element1" style="display:none;">Email</div>
<div id="element2" style="display:none;">Social Network</div>
We use a data-show element to store the value of the id of the element that we want to display, in the javascript we can now do this:
<script type="text/javascript">
$(document).ready(function()
{
$(".chooserClass").click(function() {
var show = $(this).data('show');
$('#' + show).show();
});
});
</script>
also note that I am added in the # (for id) in front of the variable when calling the show()
Fiddle demo: http://jsfiddle.net/5U8sW/
Well, here's a quick an dirty answer:
The problem is that you can't have duplicate id's on DOM elements. They should be unique. You can use a data- property to do what you are wanting.
http://jsfiddle.net/725XT/
<ul>
<li>Google</li>
<li>Facebook</li>
</ul>
<!- hidden divs ->
<div id="1" style="display:none;">Email</div>
<div id="2" style="display:none;">Social Network</div>
And your Javascript:
$(document).ready(function()
{
$(".chooserClass").click(function() {
var show = $(this).data('div-id');
console.log(show);
$('#' + show).show();
});
});
When using javascript or jQuery to search for elements with the same IDs, only the first element is picked. I suggest you rename the IDs of the elements to be shown. Take the code below for example.
HTML
<ul>
<li>Google</li>
<li>Facebook</li>
</ul>
<!- hidden divs ->
<div id="d_1" style="display:none;">Email</div>
<div id="d_2" style="display:none;"">Social Network</div>
jQuery
<script type="text/javascript">
$(document).ready(function()
{
$(".chooserClass").click(function() {
var id = $(this).attr('id');
$('#d_'+id).show();
});
});
</script>
jsFiddle
First of all, your IDs should be unique. Thus, the <div> and the <a> must not share the similar ID names. Additionally, AFAIK, in HTML4.1 IDs starting with digits are prohibited(?)
Try the sample I coded above. Since you are using anchors, referencing the 'href' attribute would be more semantically correct.
Cheers!
Here I have a list, what I want to do is I need to change the list ( li ) background color to different one after click on a specific list item. the thing is once it click on the link page will be redirected and refresh. please can me suggest a solution for to get this done?
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile">My Profile</li>
<li id="menu-dashboard">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
what i did for this :
Java Script :
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
)
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(
function()
{
$("#main-menu li").click(make_button_active);
}
)
CSS :
#main-menu-list li.active {
background: #0040FF;
}
It's a little difficult to tell exactly what you want to do, but here's some quick and dirty (and untested) code:
/// when we click on an `a` tag inside the `#main-menu-list`...
$('#main-menu-list').on('click', 'a', function(e) {
// stop the link from firing
e.preventDefault();
e.stopPropagation();
// change the list item's background to green
$(this).closest('li').addClass('myClassName').css('background-color', 'green');
// do anything else, e.g. load in pages via ajax...
});
You could use CSS to apply the green background color, instead of jQuery:
.myClassName { background-color: green; }
This will stop the page from navigating, and I don't know if that's your intention. If you want to check the currently-loaded page against the menu to find the current item, you could do this (on page load) instead:
var currentPage = window.location.pathname;
$('#main-menu-list').find('a[href^="' + currentPage + '"]').closest('li').addClass('active');
EDIT:
Your amended Javascript code can be simplified to the following:
$('#main-menu li').on('click', 'a', function (e) {
e.preventDefault();
e.stopPropagation();
// only do the following if the clicked link isn't already active
if(!$(this).closest('li').hasClass('active')) {
$(this).closest('ul').find('.active').removeClass('active');
$(this).closest('li').addClass('active');
// load in your content via ajax, etc.
}
});
JSFiddle example
For each page you can add a class to the current list item that has "where the user is"..
CSS:
.selectedItem{
background-color: orange;//whatever color your want for the selected tab..
}
Then for each of your pages,
say you're in Dashboard.html
your menu code will look like:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile">My Profile</li>
<li id="menu-dashboard" class="selectedItem">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
in profile.html:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home">Home</li>
<li id="menu-profile" class="selectedItem">My Profile</li>
<li id="menu-dashboard">My Dashboard</li>
<li id="menu-search">Search</li>
</ul>
</div>
and so on..
You need to change the background color when the document is loaded (i.e. in document.ready).
Then you need a mechanism to connect the currently loaded page to one of your list items.
$(document).ready(function(){
//get the url from the current location or in some other way that suits your solution
//perhaps use window.location.pathname
var moduleId = "dashboard" // hardcoded to dashboard to make the point :);
$("#menu-"+moduleId).css("background-color", "#ccc");
});
http://jsfiddle.net/9JaVn/1/
So I've got 2 <ul> containers each with id's. Inside of them are a list of <li> elements.
The first <ul> is <ul id="coaches-list">. The second is <ul id="players-list">.
There are tags within each <li> that have an id called close (which is a link that I'm using as my selector), which will delete each <li> node once clicked. I'm trying to target each <ul> container to see where it is coming from.
My HTML is:
<!-- coaches box -->
<div class="box">
<div class="heading">
<h3 id="coaches-heading">Coaches</h3>
<a id="coaches" class="filter-align-right">clear all</a>
</div>
<ul id="coaches-list" class="list">
<li><span>Hue Jackson<a class="close"></a></span></li>
<li class="red"><span>Steve Mariuchi<a class="close"></a> </span></li>
</ul>
</div>
<!-- players box -->
<div class="box">
<div class="heading">
<h3 id="players-heading">Players</h3>
<a id="players" class="filter-align-right">clear all</a>
</div>
<ul id="players-list" class="list">
<li><span>Steve Young<a class="close"></a></span></li>
<li><span>Gary Plummer<a class="close"></a></span></li>
<li><span>Jerry Rice<a class="close"></a></span></li>
</ul>
</div>
My remove tag function in jQuery is:
function removeSingleTag() {
$(".close").click(function() {
var $currentId = $(".close").closest("ul").attr("id");
alert($currentId);
// find the closest li element and remove it
$(this).closest("li").fadeOut("normal", function() {
$(this).remove();
return;
});
});
}
Whenever I click on each specific tag, it's removing the proper one I clicked on, although when I'm alerting $currentId, if I have:
var $currentId = $(".close").closest("ul").attr("id");
It alerts 'coaches-list' when I'm clicking on a close selector in both <ul id="coaches-list" class="list"></ul> and <ul id="players-list" class="list"></ul>
If I change that to:
var $currentId = $(".close").parents("ul").attr("id");
It has the same behavior as above, but alerts 'players-list', instead.
So when using closest(), it's returning the very first <ul> id, but when using parents(), it's returning the very last <ul> id.
Anyone know what is going on with this whacky behavior?
It's expected behavior.
You should use:
var $currentId = $(this).closest("ul").attr("id");
$(this) points at the clicked .close.
$(".close") points at the first one found.
It's because you run that selector from click handler you should use this instead:
var $currentId = $(this).closest("ul").attr("id");
Try using this function to get the parent:
var $currentId = $(this).parents().first();
I've never used the .closest() function but according to jQuery what you have specified should work. Either way, try that out and tell me how it goes.
You also need to make it so that it selects the current element by using $(this)