I'm trying to add an element after removing another:
$("a.III").click( function(e) {
var element = '<div class="tagul" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus"></div>';
e.preventDefault();
$("div.tagul").fadeOut("slow", function(e) {
$("div.tagul").remove();
$("span.content.left").append(element);
$("div.tagul").fadeIn("slow");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="content left" style="float: left;">
<div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew"></div>
</span>
<span class="content" style="float: right">
</span>
Nothing happens after the older div's fadeOut. I assume I'm doing something wrong while trying to append the new element.
Your code works fine, the problem is most likely that you don't have any content in the divs you're removing/appending, so you can't see that it's working. Here's your exact code but with content in the divs so you can actually see the script working(added an anchor with class of III which I'm assuming you forgot to include in your post):
$("a.III").click( function(e) {
e.preventDefault();
var element = '<div class="tagul2" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus">Tagul 2</div>';
$("div.tagul").fadeOut("slow", function(e) {
$("div.tagul").remove();
$("span.content.left").append(element);
$("div.tagul2").fadeIn("slow");
});
});
a.III {
display:block;
margin-bottom:20px;
}
.tagul2 {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="III">Click me</a>
<span class="content left" style="float: left;">
<div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew">Tagul</div>
</span>
<span class="content" style="float: right">
</span>
Additionally, your fadeIn() function for the appended element won't actually do anything because the div is set to display by default(essentially you're trying to fade in an element which is already visible). In order to have it fade in, you could change the class of the element you're appending, set the CSS to display:none; and then the element will fade in after being appended(I have made this change in my answer).
Related
I'm trying to figure out the simplest way to show and hide a series of divs with Previous and Next buttons by adding and removing some classes.
So far, I can get the Next button to trigger, but it's adding the active class to all of the divs and not just the next one in line.
I've been reading through other examples and so far they seem really bloated or not what I am looking for specifically.
Here's what I have so far:
Codepen Link: https://codepen.io/ultraloveninja/pen/pxrrmy/
HTML:
<div class="group">
<div class="item active">
<h2>Thing One</h2>
</div>
<div class="item">
<h2>Thing Two</h2>
</div>
<div class="item">
<h2>Thing Three</h2>
</div>
</div>
<div class="btns">
Previous
<a class="btn next" href="#">Next</a>
</div>
JS:
$('.next').on("click", function(){
if($('.item').hasClass('active')) {
$('.item').next().addClass('active');
}
})
CSS:
body {
padding: 10px;
}
.active {
display:block !important;
}
.item {
display:none;
}
It seems like this should be fairly simple, but I can't seem to think of how to target the next div by itself without it showing all of the other ones.
Basically you should get your last active element and activate next after it:
$('.next').on("click", function(){
const $active = $('.item.active');
const $next = $active.next();
if ($next.length) {
$active.removeClass('active');
$next.addClass('active');
}
})
The problem in your current code is that you are getting all items and performing hasClass on all of them so it returns true all the time because there is at least one element with this class and then you are getting next element after each item element and add active class to them so all of your elements are activated in result.
I think you want something like this
$('a.next').on("click", function(){
var a = $('.item.active').last();
a.next().addClass('active');
a.removeClass('active')
});
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/
I have a page that can have a variable number of <div> the idea is people can click the + symbol which is an <img> then the div that is linked to the img tag will display.
I currently have:
PHP/HTML
$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">';
$table .= '<div>'.$plus.'</div>';
$hidden .= '<div class"diary">-Content-</div>';
JS
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$( ".clickme" ).click(function() {
$( ".diary" ).slideToggle( "slow", function() {
});
});
});
</script>
This obviously opens all divs and not just the one that is clicked on. I have looked at other similar questions on here and have tried a number of variations such as:
$(document).ready(function(){
$(".clickme").click(function(){
$(this).next(".diary").toggle();
});
});
However, when I try these it just stops working altogether. i.e. none of the divs slide up or down. I see the examples work on JS Fiddle but as soon as i apply it to my page I get nothing.
I am possibly doing something really dumb for it not to work but can't see what.
thanks for any help.
The HTML output should look like
<div>
<div>
<table>
<img class="clickme">
</table>
</div>
<div class="diary">
<table> content </table>
</div>
<div>
(based on tht HTML provided)
Best way would be to add an attribute with matching indexes to both elements
<div>test toggle
<div class="clickme" data-index="1">click me</div>
<div class="toggle" id="obj_1">toggled field</div>
</div>
and then in the JQuery:
$(function () {
$(".clickme").click(function () {
//get number from clicked element's attribute
var index =$(this).attr('data-index');
//select element with id that matches index and toggle
$('#obj_'+index).toggle();
});
})
After looking at your code, i can see that the slideToggle call is maded on .diary class which is probably applied on each of your elements.
I suggest you to put your diary div inside the $plus div then use jquery children or simply give your .diary divs a unique id and use the id attribute for your
toggle.
EDIT:
Here is a simple html output:
<div class="clickme">
<div class="diary">CONTENT HERE</div>
</div>
Add this in the CSS:
.clickme {
background: url('images/plus.png') no-repeat top left;
min-width: 20px;
min-height: 20px;
cursor: pointer;
}
Script tag:
<script>
$(function() {
$(".clickme").click(function() {
$(this).children().slideToggle("slow");
});
});
</script>
Note that i'd let the diary class for your usage and styling purpose but it's not used anywhere.
I have two menu icons, both classed .menuentry, with the IDs #topicicon and #searchicon, in a menubar. Beneath them are two larger divs, #topiclist and #searchform, both initially set to display:none;.
What I would like to do is click each menu icon and display the corresponding larger div underneath, as well as getting rid of the other larger div if it has been display previously.
So, for example, when I click #topicicon, it displays #topiclist and hides #searchform.
The code is being used on this website, in the menubar at the top: http://bonfiredog.co.uk/bonfog
And this is the code that I am using.
HTML:
<div id="topicicon"><img src="topic_icon.png" /></div>
<div id="searchform"><img src="search_icon.png" /></div>
<div id="topiclist"></div>
<div id="searchform"></div>
CSS:
#topiclist {
display:none;
}
#searchform {
display:none;
}
jQuery:
$("#topicicon").click(function(){
$("#topiclist").css("display", "visible");
$("#searchform").css("display", "none");
}, function(){
$("#formlist").css("display", "hidden");
});
Not working as of now...
You have to make two click handlers for #topicicon and #searchform and use .hide() and .show() as shown :-
$("#topicicon").click(function(){
$("#topiclist").show();
$("#searchform1").hide();
});
$("#searchform").click(function(){
$("#topiclist").hide();
$("#searchform1").show();
});
and you are using two div's with same id's i.e searchform so change the id of second searchform div to say searchform1 and try above code.
You could avoid having to write multiple click handlers, and reuse across different components with the following:
$(function () {
$('.showRelated').click(function () {
var relatedId = $(this).data('rel');
$('.related').hide(); // hide all related elements
$(relatedId).show(); // show relevant
});
});
.related {
display: none;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="topicicon" class="showRelated" data-rel="#topiclist"><i class="fa fa-newspaper-o"></i></div>
<div id="searchicon" class="showRelated" data-rel="#searchform"><i class="fa fa-search"></i></div>
<div id="topiclist" class="related">Topic List</div>
<div id="searchform" class="related">Search Form</div>
"visible" is not correct value for display propriety. You should add "display: block", or "display: inline-block", or "display: inline" or any other value that is admitted by display propriety.
This problem has been solved. Below is the original question and the finalized code. Thanks for the help Amit Joki!
I am trying to make A tags with the class "i" on-click show/hide divs based off their ids being used as anchors. If one link is clicked the other should be switched to back to hidden.
Javascript:
$(".i").on('click', function(e) {
$("div").each(function() {
$('div.show').hide().toggleClass("show hidden");
});
$($(this).attr("href")).fadeIn(1000, 'swing').toggleClass("hidden show");
});
.hidden {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Div 1
Div 2
<div id="1" class="hidden">
<div>Div 1</div>
</div>
<div id="2" class="hidden">
<div>Div 2</div>
</div>
http://jsfiddle.net/krY56/180/
The syntax is to separate the classes by a space in the same string. Not a separate argument.
Also, attr is a jQuery method, so you need $(this) rather than just this. Also, you need to wrap the href so it results in a jQuery object.
$( ".i" ).on('click', function(e) {
$($(this).attr("href")).toggleClass("hidden show");
});
DEMO Note, that you had set the option "wrap in head". You've to set that to "onload" or use DOM ready handler.
BTW, you can just make the following, along with transitions
$( ".i" ).on('click', function(e) {
$($(this).attr("href")).toggle('fade');
});
Had a similar problem myself some months back with toggle-DIVS. Looking for something like this?:
http://jsfiddle.net/tu0xjdpc/1/
<style> .targetDiv {display: none;
z-index: 5;
position: absolute;
top: 40px;
}
</style>
<table>
<tr>
<td class="abc">
<button class="showSingle" target="00">x</button></td>
<td class="abc">
<button class="showSingle" target="01">xx</button></td>
<td class="abc">
<button class="showSingle" target="02">xxx</button></td>
</tr>
</table>
<div id="testdiv">
<div id="div00" class="targetDiv"><img src="http://www.top13.net/wp-content/uploads/2014/11/43-small-flowers.jpg"></div>
<div id="div01" class="targetDiv"><img src="http://ps.errazib.com/img/04closeup/41live/flower.small.jpg"></div>
<div id="div02" class="targetDiv"><img src="http://www.top13.net/wp-content/uploads/2014/11/22-small-flowers.jpg"></div>
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').slideUp();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).slideToggle();
});
});