I would like to implement a search function which uses input to find text on my page without pressing enter and hiding everything else not matching the current input.
Tricky stuff: the text on my page is hidden by default and only visible by hovering its container tiles. Also the entire page is built by scripts. This is the structure:
<div id="data" class="grid-container">
<div class="grid-item">
<div class="inside" id="item0">
<h2 id="contents0" class="content-title" href="some link">some headline</h2>
<div class="collapsing">
<br>
<table>
<tbody>
<tr id="tr0">
<td class="tabledata">
<a class="content" href="some link">some headline</a>
</td>
</tr>
<tr>
<td class="tabledata">
<a class="content" href="some link">some headline</a>
</td>
</tr>
<tr>
<td class="tabledata">
<a class="content" href="some link">some headline</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
so there are various grid-item's like this one with different amounts of tabledata's.
this is the input:
<input class="search" type="search" placeholder="Search" id="input">
Any ideas on how to do this for my special case?
I want to hide the entire grid-item if nothing inside matches the current input and I want to hide only the tabledatas not matching the current input if there are matches with one ore more other tabledatas in the same grid-item.
this is my attempt at editing the suggestion down there:
<script>
function findDom(val) {
if (val === '') {
document.querySelectorAll('.hideElem').forEach(function(item) {
item.classList.remove('hideElem')
})
return;
}
document.querySelectorAll('.content').forEach(function(item) {
if (item.textContent.trim().includes(val)) {
item.classList.remove('hideElem')
}
else {
item.classList.add('hideElem')
}
})
}
document.getElementById('input').addEventListener('keyup', (e) => {
setTimeout(function() {
findDom(e.target.value.trim())
}, 2000)
})
</script>
CSS:
.hideElem {
display: none;
}
However it does not work at all...
Please check the inline comments for description
// this function will first check if the search value is empty , then
// it will get all the a tag that are visible and will hide them
function findDom(val) {
if (val === '') {
document.querySelectorAll('.showElem').forEach(function(item) {
item.classList.remove('showElem')
})
return;
}
// otherwise it is going to get the content from each a tag and will check
// if the conent includes the search keyword, in that case it will show
// the a
document.querySelectorAll('.content').forEach(function(item) {
// hiding previously displayed a tags
item.classList.remove('showElem')
// check if current a tag contains this text
if (item.textContent.trim().includes(val)) {
item.classList.add('showElem')
}
})
}
// this will get the value entered in the text field
document.getElementById('ip').addEventListener('keyup', (e) => {
// wait for 2 secs for and search for the value, without timeout it will
// search for every text entered
setTimeout(function() {
findDom(e.target.value.trim())
}, 2000)
})
.content {
display: none;
}
.showElem {
display: block;
}
<div id="data" class="grid-container">
<div class="grid-item">
<div class="inside" id="item0">
<h2 id="contents0" class="content-title" href="some link">some headline</h2>
<div class="collapsing">
<br>
<table id='table'>
<tbody>
<tr id="tr0">
<td class="tabledata">
<a class="content" href="some link">some 1</a>
</td>
<td class="tabledata">
<a class="content" href="some link">some 2</a>
</td>
<td class="tabledata">
<a class="content" href="some link">some 3</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<input class="search" id='ip' type="text" placeholder="Search" id="input">
Related
Here is a code http://jsfiddle.net/uyDbL/ . Ultimately I want to load in different page one of this links as visible from start(different links must be visible in different pages). Now page doesn't load anything, just blank space. Thanks so much for help. I'm a beginner in javascript and programming too. Please for finished code.
<table border="0">
<tr>
<td>
<hr>
fea1<br><hr>
fea2<br><hr>
fea3<br><hr>
fea4<br><hr>
fea5<br><hr>
fea6<br><hr>
fea7<br><hr>
fea8<br><hr>
fea9
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>
If you give the link the class of active, this code will look for that class and set the preview content as that on load.
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
el = $("a.active");
if(el.length > 0){
$('.target').html($(el.attr("href")).html());
}
});
a{
text-decoration:none;
color:black;
}
.target{
width:50%;
height:200px;
border:solid black 1px;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td>
<hr>
<a class="active" href="#m1">fea1</a><br><hr>
fea2<br><hr>
fea3<br><hr>
fea4<br><hr>
fea5<br><hr>
fea6<br><hr>
fea7<br><hr>
fea8<br><hr>
fea9
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>
I am quite new to jquery, so please excuse me if I'm doing something stupid:
I have a table where each td belongs to the same class "original" and each one has a unique id.
<table id="main">
<tr>
<td style="cursor: pointer" class="original" id="1">
one
</td>
<td style="cursor: pointer" class="original" id="2">
two
</td>
</tr>
...
...
</table>
I also have a div where all elements are part of a separate class "onclick" and each element has another unique id that is connected to each td from the table.
<div id="second">
<div class="onclick" id="1click">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick" id="2click">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
...
...
</div>
When I click on each individual td, I want to display its corresponding div, so if I click on "1" then "1click" shows up. I currently have this jquery code that successfully does this, but only for the first pair of elements, so it doesn't work for anything beyond id="1" and id="1click".
$(function () {
$(".original").click(function() {
var divname = this.id;
if ($(".onclick").attr("id") == divname + 'click'){
var clickname= "#" + divname + "click";
if ($(".hide").css("display") == 'none'){
$(clickname).toggle();
}
}
}
}
How can I make it so that it searches each element of the table to find a match with each element of the div?
Thanks, and sorry if this is a stupid mistake.
I'm finding it difficult understanding what you're trying to do and would love to help but I need to try and understand it better.
1) You can search using .each() which will scan all the elements and you can use a conditional statement to find the one which is needed: I.e.
$(document).ready(function(){
$("td").each(function() {
if ($(this).attr("id") == "2") {
var element = $("#"+$(this).attr("id")+"click");
// do stuff with element
}
})
});
I created a small example which I think helps your scenario on JSFiddle: https://jsfiddle.net/keuhfu36/
$(document).ready(function(){
$("#i2click").click(function() {
alert("hello");
});
$("td").each(function() {
if ($(this).attr("id") == "i2") {
$("#"+$(this).attr("id")+"click").click();
}
});
});
2) I recommend you change the div values from id='1' and id='2' like i did in the example to a value which starts with a letter i.e id="i1" and id="i2" which makes it a lot less of a pain to work with.
Your script should be like ,
$(".original").click(function() {
var divId = this.id,
targetDiv = $("#"+divId+"click");
$(".onclick:visible").hide();
targetDiv.show();
});
Try the following code:
$(function(){
$('.onclick').hide();
$(".original").click(function() {
var divname = this.id;
$('#'+divname+'click').toggle();
});
});
$(function () {
$(".original").click(function() {
// Targeted Div Name
var divname = "#"+ $(this).attr('id') + "click";
// Toggle the div, as Id would be unique in the page
$(divname).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main">
<tr>
<td style="cursor: pointer" class="original" id="1">
one
</td>
<td style="cursor: pointer" class="original" id="2">
two
</td>
</tr>
</table>
<div id="second">
<div class="onclick" id="1click">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick" id="2click">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
</div>
IMHO, you should ditch the IDs altogether and just use the classes along with their indexes to achieve the desired effect much simpler, like this:
$('#main').on('click', '.original', function() {
var index = $('.original').index($(this)); // find the index of the clicked td
$('.onclick').hide().eq(index).show(); // hide all the divs then show the one at the same index as the clicked td
})
.on('click', '.close', function() {
$('.onclick').hide(); // hide all the divs when "close" is clicked
});
.onclick {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main">
<tr>
<td style="cursor: pointer" class="original">
one
</td>
<td style="cursor: pointer" class="original">
two
</td>
</tr>
... ...
</table>
<div id="second">
<div class="onclick">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
... ...
</div>
I'm brand new to Javascript, and need some help. I have a table with 4 rows (3 displayed, and 1 display="none"). What I'm trying to do is display the 4th row via clicking on a link. Here's what my HTML looks like:
<table class="lessons">
<tr>
<td class="chapter">01</td>
<td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3>
<h3 class="desc">Program description....blah blah blah...</h3>
</tr>
<tr>
<td class="chapter">02</td>
<td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3>
<h3 class="desc">Description for chapter 2....blah blah...blah...</h3>
</tr>
<tr>
<td class="chapter">03</td>
<td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3>
<h3 class="desc">Description for chapter 3...blah blah blah....</h3>
</tr>
<tr class="hiddenRow" style="display:none;">
<td class="chapter">04</td>
<td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3>
<h3 class="desc">Chapter four description....blah blah...</h3>
</tr>
</table>
show hidden
And here's my javascript:
function showRows(){
var thisRow = document.getElementsByClassName('hiddenRow');
thisRow.style.display="";
}
Link to JSFiddle:
https://jsfiddle.net/99600cha/
I've tried doing the javascript function a few different ways with no success. Could someone show me what I'm doing wrong?
What I'm really trying to do is have the first and last rows displayed with the middle rows hidden and expandable, like this:
Chapter 1
(click to see all chapters)
Chapter 10
so if anyone can point me to something similar, please do!
Edit: Here is a link that shows the exact effect I'm trying to accomplish: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting
if your are using jquery:
function showRows(){
$('.hiddenRow').hide();
}
In var thisRow = document.getElementsByClassName('hiddenRow'); thisRow returns an array of elements that have such class, you have to use thisRow[0] to select a first element.
However, a more elegant and cleaner solution would be making this layout:
<div class="lessons" id="lessons">
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson-hidden">
<div class="chapter">A hidden lesson.</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
</div>
By using this simple CSS rule you will be able to hide all elements by changing a single class:
.lessons .lesson-hidden { display: none; }
.lessons.full .lesson-hidden { display: block; }
To show hidden lessons, use this line:
document.getElementById("lessons").classList.add("full")
To revert, use this line: document.getElementById("lessons").classList.remove("full")
Can someone help me with this. I need to show course description hidden inside a div when user clicks on the course link and toggle after any link is clicked
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.CourseID)
</td>
<td>
<a title="Click to See Course Description" class="info" id="#Html.DisplayFor(modelItem => item.Title)" href="#">#Html.DisplayFor(modelItem => item.Title)</a>
</td>
}
<div class="myshow" id="Calculus_show" style="display:none">
<p>
Information about a Course
</p>
</div>
and I have my js code
$(document).ready(function () {
$('.info').on('click',function (e) {
e.preventDefault();
id = '#' + $(this).attr('id');
id = id + '_show';
$('div.myshow').attr('id', id);
$(id).toggle();
})
});
Here div.myshow does not show on toggle.
You can try something like this:
First find all div that are visible, hide them. Then using this, navigate to necessary div and show it.
$(".action").on("click", function(){
var self = this;
$(".info:visible").fadeOut(function(){
$(self).parent().find(".info").fadeIn();
});
});
.tile, .info{
font-weight:bold;
padding:5px;
margin:5px;
border:gray;
}
.info{
color:#333;
background:#ddd;
display:none;
}
.visible{
display:block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="tile">
<a class="action" onclick="show(1)">Show 1</a>
<div class="info visible">Information of 1</div>
</div>
<div class="tile">
<a class="action" onclick="show(2)">Show 2</a>
<div class="info">Information of 2</div>
</div>
<div class="tile">
<a class="action" onclick="show(3)">Show 3</a>
<div class="info">Information of 3</div>
</div>
<div class="tile">
<a class="action" onclick="show(4)">Show 4</a>
<div class="info">Information of 4</div>
</div>
$(document).ready(function () {
$('.info').on('click',function (e) {
e.preventDefault();
id = '#' + $(this).attr('id');
id = id + '_show';
$('div.myshow').attr('id', id);
$(id).toggle();
})
});
Just replace above code with below code, problem is that you are adding # in the id attribute itself instead of selector.
$(document).ready(function () {
$('.info').on('click',function (e) {
e.preventDefault();
id = $(this).attr('id');
id = id + '_show';
$('div.myshow').attr('id', id);
$('#' + id).toggle();
})
});
Hope this helps.
It looks like on the "$('div.myshow')" line you are changing the ID of the div to have a # in it for no reason, which is causing the script to break. I simply commented it out and it gave me the results you are wanting. A hide to the myshow div was also added so when a course is selected, then another course is selected, it hides the previous courses div and opens the new one's. I assumed that everything being generated in the HTML is coming out correctly when I made this.
Modified the code to show how it would work with multiple links.
$(document).ready(function () {
$('.info').on('click',function (e) {
e.preventDefault();
id = '#' + $(this).attr('id');
id = id + '_show';
//$('div.myshow').attr('id', id);
$('.myshow').hide();
$(id).toggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
1234
</td>
<td>
<a title="Click to See Course Description" class="info" id="Calculus" href="#">Calculus</a>
</td>
</tr>
<tr>
<td>
1234
</td>
<td>
<a title="Click to See Course Description" class="info" id="Programming" href="#">Programming</a>
</td>
</tr>
</table>
<div class="myshow" id="Calculus_show" style="display:none">
<p>
Information about Calculus
</p>
</div>
<div class="myshow" id="Programming_show" style="display:none">
<p>
Information about Programming
</p>
</div>
i writing simple script to popup quick info using jquery. When user click view, some info will show using toggle() and hide when user click again. And this script will loop 10 times.
But the problem is i want this popup only show one time and the rest will hide, now when user click view 1 and view 2 all popup will show at same time.
You can check my jsFiddle click here
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
*im not sure how to combine this script in one function
Here is your working demo
$("a").click(function() {
$('.contact_box').hide();
$(this).next('div').show();
});
use hide() to hide your corresponding box..
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_2").hide(); <-----here
$(".box_1").toggle();
});
$("#view_2").click(function(e) {
e.stopPropagation();
$(".box_1").hide();<-----here
$(".box_2").toggle();
});
fiddle here
should be :
before $(".box_1").toggle(); this hide $(".box_2").hide(); and before $(".box_2").toggle(); this hide $(".box_1").hide();
This will works.
Hi Use the code below,
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
var $el = $(".box_2");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
Hope this solves your problem
Toggle also has callback function you can use it.
$(".box_1").toggle('slow', function() {
// show hide code or fadeIn fadeOut or other animation
$(".box_2").fadeOut('fast');
});
Try this:
<div style="position:relative">
<a style="cursor: pointer" id="view_1" class="my_view">View 1</a>
<div class="contact_box box_1 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV A</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson Button</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-66558741</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: jb#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
<br>
<br>
<div style="position:relative">
<a style="cursor: pointer" id="view_2" class="my_view">View 2</a>
<div class="contact_box box_2 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV B</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-88542215</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: ac#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
$(document).ready(function() {
$('.my_view').click(function(e) {
$('.my_view').siblings('div').each(function(){$(this).hide()});
$(this).siblings('div').toggle();
e.stopPropagation();
});
$(document).click(function() {
$('.my_view').siblings('div').fadeOut(200);
});
});