Develop Reference

How do I scan all elements within a class to find a specific id and repeat the process for different ids?

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>

Need to toggle a div for each href using JQuery

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>

Select an item that has an href in it

I'm making a file manager where you can edit files in bulk but I can't get the select function to work.
I'm using this Cute File Browser. I have given my ul element an id and added this script to the page :
$("#test li").click(function() {
alert(this.id); // get id of clicked li
});
But when I click on an item, it opens its url instead of selecting it.

Possible have to use the link element and use e.preventDefault();
$("#test li a").click(function(e) {
e.preventDefault();
alert($(this).parent().id); // get id of clicked li
});
Hope this helps.

You need to prevent the default behaviour of navigating to the clicked url and, if your element is added dynamically, you'll need to use event delegation with jquery's .on()':
Edit added the use of jQuery UI's dialog() to get you started on changing the name for your file. of course you'll have to modify modifyFile() to actually update the files on your server
I copied the html below from the inspector while looking at the page you provided. One thing I noticed id that all of your generated li elements have the same id of "1". You'll need to fix that. Ids must be unique whatever is generating your li elements should give them each a unique id.
$(function() {
var dialog, form,
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Submit Changes": function() {
var newName = $('#newName').val(); // don't forget to do some checks on the value here
modifyFile(newName, dialog);
},
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
var newName = $('#newName').val(); // don't forget to do some checks on the value here
modifyFile(newName, dialog);
});
$(document).on('click', '#test li', function(e) {
e.preventDefault();
$('#newName').val(this.id); // get id of clicked li
dialog.dialog("open");
});
});
function modifyFile(newName, dialog) {
// do stuff with your new name here like update it on your server
alert('File name changed to: ' + newName);
dialog.dialog("close");
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<ul class="data animated" id="test" style="">
<li class="files" id="1">
<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/01-Courtesy.flac" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/01-Courtesy.flac" class="files">
<span class="icon file f-flac">.flac</span><span class="name">01-Courtesy.flac</span>
<span class="details">17 MB</span>
</a>
</li>
<li class="files" id="1">
<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/02-Otis.flac" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/02-Otis.flac" class="files">
<span class="icon file f-flac">.flac</span><span class="name">02-Otis.flac</span>
<span class="details">18 MB</span>
</a>
</li>
<li class="files" id="1">
<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/03-Focus.flac" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/03-Focus.flac" class="files">
<span class="icon file f-flac">.flac</span><span class="name">03-Focus.flac</span>
<span class="details">21 MB</span>
</a>
</li>
<li class="files" id="1">
<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/cover.jpg" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/cover.jpg" class="files">
<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/cover.jpg);"></div>
<span class="name">cover.jpg</span> <span class="details">296 KB</span>
</a>
</li>
<li class="files" id="1">
<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/whatpub.txt" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/whatpub.txt" class="files">
<span class="icon file f-txt">.txt</span><span class="name">whatpub.txt</span>
<span class="details">481 Bytes</span>
</a>
</li>
</ul>
<div id="dialog-form" title="Create new user">
<form>
<fieldset>
<label for="name">New File Name:</label>
<input type="text" name="name" id="newName" value="" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>

hide div A if div B is show

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);
});
});

jquery animation in menu bar

i am trying to create a menu bar using jquery. I am using the following code,
<div class="menu">
<table align="center">
<tr>
<td class="menu_item" style="background:green;" >
<a style="color: white;" href="index.php?view=Index">Home</a>
</td>
<td class="menu_item" style="background:blue;" >
<a style="color: white;" href="index.php?view=Services"> Service </a>
</td>
<td class="menu_item" style="background:red;" >
<a style="color: white;" href="index.php?view=About"> About </a>
</td>
<td class="menu_item" style="background:yellow;" >
<a style="color: white;" href="index.php?view=Download"> Download</a>
</td>
<td class="menu_item" style="background:pink;" >
<a style="color: white;" href="index.php?view=Contact"> Contact</a>
</td>
</tr>
</table>
</div>
<hr>
<script>
$(document).ready(function(){
//When mouse rolls over
$(".menu_item").mouseover(function(){
$(this).slideUp(1000, method, callback});
//When mouse is removed
$(".menu_item").mouseout(function(){
$(this).slideUp(1000, method, callback});
});
</script>
The mouseover and mouse out functions are working, i checked those using alert boxes but no change is happening to the items...? where am i going wrong ?

Well, you have a few syntax errors:
$(document).ready(function(){
//When mouse rolls over
$(".menu_item").mouseover(function(){
$(this).slideUp(1000);
});
//When mouse is removed
$(".menu_item").mouseout(function(){
$(this).slideUp(1000);
});
});
I'm not sure, however, what you're trying to achieve here. I.e., the above works but I'm not sure it really does what you intend.

You are going wrong with using tables for a list.
Use a list containing list-items.
<ul>
<li class="menu_item"></li>
<li class="menu_item"></li>
<li class="menu_item"></li>
...
</ul>
and float the list items left
ul li.menu_item {
display: block;
float: left;
}
Your animation should work now, also you could use the jquery hover function
$(".menu_item").hover(over, out);
to make it a little easier

You can find the complete code in this page:
http://jsfiddle.net/mdfj8/1/
The problem was the method and callback arguments.
Regards.