When I click on a particular div, that div should fade out, simple, but when I click on one of the divs it deletes the div on top of the stack, i.e. when I click #sel6 it removes sel5
HTML code
<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">
<div id="sel5" class="sel">something</div>
<div id="sel6" class="sel">something</div>
<div id="sel7" class="sel">something</div>
</div>
jQuery code
sel_id, sel_1 are variables
$('.selc_d').bind('click',function(){
var sel_id = $('.sel').attr('id');
alert(sel_id);
$('#'+sel_id).fadeOut('slow');
$('#'+sel_id).remove();
$('.search_box').append(sel_1);
});
$('.sel').bind('click',function(){
var sel_id = this.id; // replace this line using this.id or $(this).attr('id');
alert(sel_id);
$('#'+sel_id).fadeOut('slow');
$('#'+sel_id).remove();
$('.search_box').append(sel_1);
});
Note the use of this... this will contain the element that is clicked.
What you were doing was
var sel_id = $('.sel').attr('id');
Which will always select the first div with class sel in this case the div with id sel5
##WHAT YOU WANT##
<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">
<div id="sel5" class="sel">something</div>
<div id="sel6" class="sel">something</div>
<div id="sel7" class="sel">something</div>
</div>
$('.sel').bind('click',function(){
var sel_id = $(this).attr('id');
alert(sel_id);
$('#'+sel_id).fadeOut('slow');
$('#'+sel_id).remove();
$('.search_box').append(sel_1);
});
it looks like, you are trying something like this
$('.sel').bind('click', function(){
$this = $(this);
$this.fadeOut('slow', function(){$this.remove();});
$('.search_box').append(this.id);
});
That's because you are saying $('.sel')
You need to grab the one that is clicked, not any one that has that class. To make that work as you want, do this
$('.sel').click( function() {
var sel_id = $(this).attr('id');
$(this).fadeOut('slow');
// Wait for it to fade out before you remove it
setTimeout( function() {
$('#' + sel_id).remove();
}, 1000 );
$('.search_box:first').append(sel_id);
});
Related
I can't make my jQuery function work on individual elements. My function is a slider. When I put one slider to my html, it works fine, without problems. But whenever I try to put a second slider, it doesn't work properly. The first slider controls both of them, then the second slider takes the charge if I click right arrow too much etc.
Here is my jQuery code:
$('.right-arrow').click(function () {
var currentSlide = $('.slide.active');
var nextSlide = currentSlide.next();
currentSlide.fadeOut(300).removeClass('active');
nextSlide.fadeIn(300).addClass('active');
if (nextSlide.length == 0) {
$('.slide').first().fadeIn(300).addClass('active');
}
});
$('.left-arrow').click(function() {
var currentSlide = $('.slide.active');
var prevSlide = currentSlide.prev();
currentSlide.fadeOut(300).removeClass('active');
prevSlide.fadeIn(300).addClass('active');
if (prevSlide.length == 0) {
$('.slide').last().fadeIn(300).addClass('active');
}
});
And this is where I use it:
<style>
.slide {
display:none;
}
.slide.active {
display:block;
}
</style>
<div class="slider-container">
<div id="slider1">
<div class="slide active">#1</div>
<div class="slide">#2</div>
<div class="slide">#3</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
<div class="slider-container">
<div id="slider2">
<div class="slide active">#a</div>
<div class="slide">#b</div>
<div class="slide">#c</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
Like I said previously, when I click the first slider's right arrow, first slider's #2 and second slider's #b shows up.
You are getting this behavior because of the line
var currentSlide = $('.slide.active');
which selects all elements with the classes slide and active. try replacing that line with something like this:
var currentSlide = $(this).parent().find('.slide.active');
What this is doing is selecting the element the event was fired on $(this). Then getting the parent of that element, then finding the active slide within that element.
EDIT
Here is an example of your first if statement. Once again, you are getting the parent of the element that caused the event, then searching inside that dom element for all of the elements with a class of 'slide'.
As a side note you might want to make $(this) a variable something like var $this = $(this). Then use $this instead of $(this). It's a performance issue that you may or may not be concerned with.
if (nextSlide.length == 0) {
$(this).parent().find('.slide').first().fadeIn(300).addClass('active');
}
As other answers and comments mentioned, you are searching the .slide elements on the whole document. Instead you need to limit the search inside the related .slider-container element. For this purpose, you can use JQuery.closest(). Also, it will be nice to wait the fadeOut animation to finish using the complete callback function before showing the new .slide element. You can take next example as reference of implementation:
$('.right-arrow').click(function()
{
var container = $(this).closest(".slider-container");
var currSlide = container.find('.slide.active');
var nextSlide = currSlide.next(".slide");
if (nextSlide.length === 0)
nextSlide = container.find('.slide:first-child');
currSlide.fadeOut(300, function()
{
$(this).removeClass('active');
nextSlide.fadeIn(300).addClass('active');
});
});
$('.left-arrow').click(function()
{
var container = $(this).closest(".slider-container");
var currSlide = container.find('.slide.active');
var prevSlide = currSlide.prev(".slide");
if (prevSlide.length === 0)
prevSlide = container.find('.slide:last-child');
currSlide.fadeOut(300, function()
{
$(this).removeClass('active');
prevSlide.fadeIn(300).addClass('active');
});
});
.slide {
display:none;
}
.slide.active {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-container">
<div id="slider1">
<div class="slide active">#1</div>
<div class="slide">#2</div>
<div class="slide">#3</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
<div class="slider-container">
<div id="slider2">
<div class="slide active">#a</div>
<div class="slide">#b</div>
<div class="slide">#c</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
I have the following html:
<div class="container" id="1"></div>
<div class="container" id="2"></div>
<div class="container" id="3"></div>
<div class="details" id="1"></div>
<div class="details" id="2"></div>
<div class="details" id="3"></div>
and jQuery:
$(document).ready(function () {
$('.container').each(function () {
$(this).click(function () {
var elem = $(this),
containerId = elem.attr('id'),
activeId = $(containerId + '.active');
$(this).toggleClass('active').siblings().removeClass('active');
$('#details-' + containerId).toggleClass('visible').siblings().removeClass('visible');
});
});
});
What I'm trying to do is see if any other .container div has the same position top as the active container (the one I just clicked). If they don't have the same top position, then I'll slide them down and display the details in full width.
So I'm thinking that something like this should work - $(this) meaning the active .container div :
if($(this).siblings().position().top == $(this).position().top) {
// add some class to EACH sibling that has equal top position
}
but I'm not entirely sure how to do it. Any help would be greatly appreciated!
You need to something like
var top = $(this).position().top;
var $sibs = $(this).siblings().filter(function(){
return $(this).position().top == top
})
//do something with the matching siblings refferred by $sibs
$(this).siblings().position().top will return the top value of the first sibling elements, it will not check the value of rest of the siblings.
How can I show the div-element below the pushed button?
html:
<button id="one" class="btn">One</button>
<button id="two" class="btn">Two</button>
<button id="three" class="btn">Three</button>
<div id="popup">Message!</div>
JS:
$('.btn').click(function(e) {
const targetBtn = e.target;
$("#popup").show("slow").delay(3000).hide("slow"); //HOW TO SHOW IT BELOW TARGET BUTTON
})
Because your div has an id not class so you have to use # notation for ids:
$('.btn').click(function (e) {
$("#popup").css({
'position': 'absolute',
'left': $(this).offset().left,
'top': $(this).offset().top + $(this).height() + 5
}).show("slow").delay(3000).hide("slow");
});
Demo
Not sure if your button is allready visible or not before you want to replace it. But this puts the div after the clicked button:
$("button").click(function(){
$("#popup").insertAfter($(this));
});
http://jsfiddle.net/6FLLt/
If you want to show() it use
$("button").click(function(){
$("#popup").show().insertAfter($(this));
});
http://jsfiddle.net/6FLLt/2/
UPDATE
If you want to place the message below the buttons visually you have to change to html and CSS like so:
HTML
<div class="relative">
<button id="one" class="btn">One</button>
</div>
<div class="relative">
<button id="two" class="btn">Two</button>
</div>
<div class="relative">
<button id="three" class="btn">Three</button>
</div>
<div id="popup">Message!</div>
CSS
#popup{position:absolute; bottom:-20px; display:none;}
.relative{position:relative; float:left;}
http://jsfiddle.net/6FLLt/5/
try something like this
$('.btn').click(function(e) {
$(this).after($('#popup'));
})
Note : User # for id and .(dot) for class
How can I show the div-element below the pushed button?
Set the margin of the div accordingly (to show the div directly below the pushed button):
$('.btn').click(function(e) {
var $elem = $(e.target),
$div = $('#popup');
$div.css('margin-left', $elem.offset().left + 'px');
$("#popup").stop().show("slow").delay(500).hide("slow");
})
Demo: http://jsfiddle.net/abhitalks/5ef5L/
Note: You should .stop() before attempting the animation, because when you click another button, the earlier animation might still be underway, hence giving unexpected results.
Aside: You need to use the $('#...') selector, because popup is an id.
I have this div scrolling script:
$(document).ready(function () {
$('.tab-box').each(function () {
var top = 0;
var $tabbox = $(this);
var height = $tabbox.height();
$(this).find('.tab').each(function () {
var shift = top;
$(this).click(function () {
$tabbox.find('.items').animate({
marginTop: shift + 'px'
});
$tabbox.find('.tab').removeClass('active');
$(this).addClass('active');
});
top -= height;
});
$(this).find('.tab:eq(0)').addClass('active');
});
});
If I understand it correctly it gets every divs working only within the div "tab-box".
http://jsfiddle.net/9SfEH/5/
What I want to change is that I separate the "tabs" from the main tab-box div, but make them still controll the "items".
http://jsfiddle.net/w65Dn/1/
I was trying for a simple solution buuut couldn't come up with one by myself.
Thanks everyone in advance :)
The problem was that in the original code, it was looking for the tab clickables using $(this).find(".tab"), but the .tabs were no longer inside of the .tab-box. So, if you just search globally, with $(".tab"), it works.
Note that you can no longer have more than one tab box, because it is searching globally for the .tabs. You could use something like javaCity's solution (i.e. wrapping everything in another div) to fix this.
You were looking for .tabs inside the tab-box which does not exist. So how about creating a div outside of .tabs which also encloses tab-box?
http://jsfiddle.net/3D8we/
HTML:
<div class="enclosingDiv">
<div class="tabs">
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
</div>
<div class="tab-box">
<div class="items">
<div class="item" style="background: #cbe86b;"></div>
<div class="item" style="background: #f2e9e1;"></div>
<div class="item" style="background: #1c140d;"> </div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('.tab-box').each(function () {
var top = 0;
var $tabbox = $(this);
var height = $tabbox.height();
$('.enclosingDiv').find('.tab').each(function () {
var shift = top;
$(this).click(function () {
$tabbox.find('.items').animate({
marginTop: shift + 'px'
});
$tabbox.find('.tab').removeClass('active');
$(this).addClass('active');
});
top -= height;
});
$(this).find('.tab:eq(0)').addClass('active');
});
});
On line 7, change the selector from this to .tabs
$(this).find('.tab') becomes $(.tabs).find('.tab')
as seen here: jsfiddle example
I've the following code on my website: http://jsfiddle.net/dJLK3/1/
As you can see, it works just fine.
The problem is: those divs and link triggers come from a database. Today I have 1, tomorrow it can be 10...
I can not figure out how to convert it and make it work without needing to right lot's of codes like link1, link2, link3, link4, link5 and so on...
Anyone? :)
Use data attr and jQuery.data. reference
Update:
according to this comment.
html
<div class="menu">
Link1
Link2
</div>
<div id="div1" class="slide"></div>
<div id="div2" class="slide"></div>
js
$('.menu').on('click', '.link', function(){
var id = $(this).data('slideContent');
$('.slide').not('#' + id).slideUp(function() {
$('#' + id).slideToggle();
});
});
css
.slide {
display: none;
height: 100px;
width: 100px;
position: fixed;
top: 30px;
}
demo
References:
slideUp - http://api.jquery.com/slideUp/
slideToggle - http://api.jquery.com/slideToggle/
Update
Here's a fiddle with a possible answer - FIDDLE - Update - With new requirements
Code posted here for clarification
<div id='link_collection'>
Link1
Link2
</div>
<div id='div_collection'>
<div class='div current'></div>
<div class='div'></div>
</div>
$(document).ready(function() {
$('#link_collection').on('click', '.link', function() {
var divCollection = $('#div_collection .div'),
index = $(this).index(), hasClickedMeAgain,
current = divCollection.filter('.current');
hasClickedMeAgain = current.index() === index;
if (hasClickedMeAgain){
current.slideToggle();
return false;
}
current.slideUp(function() {
$(this).removeClass('current');
divCollection.eq(index).addClass('current').slideToggle();
});
})
});
This way, you don't need to keep tag of anything. Just keep inserting the div and link in the order in which they arrive, and the code then handles itself. All the best.
Will this work for you? Use the same class attribute for all of them. And have the following code on document.ready() to assign on click events:
HTML:
<a class="ui-link-option">Link 1</a>
<a class="ui-link-option">Link 2</a>
<div class="ui-link-option-text">Text Here 1</div>
<div class="ui-link-option-text">Text Here 2</div>
Javascript:
$("a.ui-link-option").each(
function (index) {
var $this = $(this);
$this.data("index", index);
$this.bind("click", function(e) {
var $this = $(this);
var linkIndex = $this.data("index");
$("div.ui-link-option-text").each(
function (index) {
if (index == linkIndex) {
$(this).slideToggle();
} else {
$(this).hide();
}
}
);
});
}
);