I want to click on a element and get the id from another div which is not related to it.
I tried this:
$(".map_flag").on("click",function(){
var objective = ($(this).attr("data_modal"));
$("#" + objective).fadeIn(300, function(){
$("#" + objective).find(".modal_content").fadeIn(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="map_flag" data_modal="map_1">
<img src="img/image_1.png" alt="image one" >
</button>
<div id="map_1">
<p class="modal_content">place holder</p>
</div>
First of all, custom attributes need to start off with data- not with data_ (note the dash/underscore).
Then
$("#" + objective).fadeIn(300, function(){
$("#" + objective).find(".modal_content").fadeIn(300);
});
first fades in $('#map_1') and then, after that's been done, fades in $('#map_1 .modal'). Not sure if that's intended, but if the #map_1 elements has no further children, you might want to fade in only once.
For the rest, your code should work fine.
I think what you need would be something like this:
<button class="map_flag" data-modal="map_1">
<img src="img/image_1.png" alt="image one" >
</button>
<div id="map_1">
<p class="modal_content">place holder</p>
</div>
And then in JavaScript
$(".map_flag").on("click",function(){
// You should use data-* attributs as jQuery has a special function
// .data("name") that obtains the value of property data-name for example
var objective = $(this).data("modal");
$("#" + objective).fadeIn(300, function(){
$("#" + objective).find(".modal_content").fadeIn(300);
});
});
I am not very confident about my jquery skills, but dont you need to "fade out" before fade In ?
[https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein]
Related
I want to display an already existing div when hovering above an element.
The element has an id that matches the div.
The cloning and displaying part works on hover but I stuck removing the already cloned element. I saw closet mentioned in another answer but I probably use it wrong.
$('.referer').hover(function() {
var id = $(this).attr('id')
$('#reply_' + id).clone().appendTo(this);
}, function() {
var id = $(this).attr('id')
$('#reply_' + id).closest(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reply_1">
First Post
</div>
<div id="reply_2">
Second Post
</div>
<div id="reply_3">
Third Post
</div>
<!--The id is the id of the quoted post-->
<p>
<span class="referer" id="1">Quoted Link (First Post)</span>
You don't need the closest() function in this case but find() instead, like :
$(this).find('#reply_' + id).remove();
So simply you looks for '#reply_' + id inside the current element this and remove it.
Hope this helps.
$('.referer').hover(function() {
var id = $(this).attr('id')
$('#reply_' + id).clone().appendTo(this);
}, function() {
var id = $(this).attr('id')
$(this).find('#reply_' + id).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reply_1">First Post</div>
<div id="reply_2">Second Post</div>
<div id="reply_3">Third Post</div>
<!--The id is the id of the quoted post-->
<p>
<span class="referer" id="1">Quoted Link (First Post)</span>
<br>
<span class="referer" id="2">Quoted Link (Second Post)</span>
<br>
<span class="referer" id="3">Quoted Link (Third Post)</span>
I'm trying to detect which div box was clicked with JQuery and I'm not sure what I am doing wrong. I'm aware that I can approach this in a different method by directly calling functions if a div box is clicked, but I wish to do it this way by first determining what was clicked.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id; //looks for the id of what was clicked
if (id != "myDivBox"){
callAFunction();
} else {
callSomeOtherFunction();
}
});
});
Thank you for any suggestions!
You could use the closest function to get the first ancestor element with tag div, see following example:
$(document).ready(function() {
$(document).click(function(event){
var parentDiv = $(event.target).closest("div");
console.log(parentDiv.prop("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<span id="span1">Test1</span>
</div>
<div id="div2">
<span id="span2">Test2</span>
</div>
I hope it helps you. Bye.
No matter what you click, you will always know the element that was clicked:
$("#myDiv").click(function(e){
alert("I was pressed by " + e.target.id);
});
Knowing that you don't want to add this to every div, and you have your click on your document, you'll need to figure out what divs can be reported as "clicked".
In order to do this you'll either need a strict hierarchy of elements in your DOM (which is anoyingly bad) or you can decorate "clickable" div's with a specific class.
Fiddle - similar to below. https://jsfiddle.net/us6968Ld/
I would use closest in Jquery to get the result you want.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id;
var clickDiv = $(event.target).closest('div[class="clickable"]');
alert(clickDiv[0].id);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" id="clickable1">
<span id="foo"> click me - Foo - clickable 1</span>
</div>
<div id="notClickable1">
<div class="clickable" id="clickable2">
<span id="span1">
Click Me Inside Span 1 - clickable 2
</span>
</div>
<div class="clickable" id="clickable3">
<div id="notClickable2">
<div id="notClickable3">
<span id="click me">Click Me - clickable 3</span>
</div>
</div>
</div>
</div>
try this:
$('div').click(function() {
alert($(this).attr('id'));
});
https://jsfiddle.net/1ct0kv55/1/
My main goal is to have the user click on any "nav" class item and display a certain paragraph ID based on which nav class was clicked. I can add the .css to this post if needed but the main thing is each paragraph ID has "display" none".
Here's the "nav" items.
<div id="home" class="nav">Home</div>
<div id="store" class="nav">Store</div>
Here's my paragraph items which uses an ID of the nav ID's plus the number 1 which I figured was easiest when using jQuery as you'll see below in my jQuery code.
<p id="home1">Home text</p>
<p id="store1">Store text</p>
This is my jQuery code which when using "alert(changeCSS)" shows the correct ID ("ID" plus the number 1).
<script type="text/javascript">
$(".nav").click(function() {
var changeCSS = $(this).attr('id') + "1";
$(changeCSS).css('display', 'block');
});
</script>
I'm new to jQuery and programming in general so it maybe something simple I hope. Let me know if you have any suggestions. Thanks!
You are not adding # for the id selector:
$('#' + changeCSS)
Also consider the built-in jQuery effects .hide() and .show().
In your case it would be something like this:
$(".nav").click(function(){
var changeCSS = $(this).attr('id') + "1";
$(changeCSS).show();
});
This way you can easily control the speed at which your div appears or disappears:
$(changeCSS).hide(1000); //takes a second
$('.nav').click(function(event){
var tag = $(event.target);
var id= '#' + tag.attr('id') + '1';
$(id).css('display','block')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="nav">Home</div>
<div id="store" class="nav">Store</div>
<p id="home1" style="display:none">this is the home paragraph</p>
<p id="store1" style="display:none">this is the store paragraph</p>
So far I have something like the following, where each button on a page is given a unique ID (one, two, three, etc):
$(document).ready(function(){
$("#one").click(doThing);
$("#two").click(doThing);
$("#three").click(doThing);
$("#four").click(doThing);
});
function doThing(){
$("#textbox").prepend("<p>Clicked " + this.id + "</p>");
}
Is there a way to condense down the growing list of click listeners, so I don't have to repeat myself for each button, while still returning the appropriate ID?
You could add a class to all the elements that will have the click applied to.
$(document).ready(function(){
$(".do-thing-el").click(function(){
$("#textbox").prepend("<p>Clicked " + this.id + "</p>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="do-thing-el" id="one">Something</p>
<p class="do-thing-el" id="two">Else</p>
<p class="do-thing-el" id="three">Goes</p>
<p class="do-thing-el" id="four">Here</p>
<hr />
<div id="textbox"> <div>
I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});
Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});
Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/
Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example