On hover I want to hide span(options) and show span(options2) and when the pointer out of that span it will it will be back to normal stage like span(options2) hide and span(options) show.
Some time it work but some time the span(options2) shows and not hide after pointer out of the span it stuck and continuously show the span(options2) until we don't hover again.
HTML:
<div class="layer"> <span class="pull-left circle border-solid full"><i class="flaticon stroke checkmark-1"></i></span>
<span class="pull-right options"><ul class="null"><li></li><li></li><li></li></ul></span>
<span class="pull-right options-2">
<ul class="null">
<li><i class="fa fa-trash-o"></i></li>
<li><i class="fa fa-pencil"></i></li>
</ul>
</span>
<div class="col-md-12 col-sm-12 col-xs-12 null">
<button class="btn btn-layer">Preview</button>
</div>
</div>
JQuery:
$(this).find('.layer').find('.options').hover(function () {
$(this).hide();
$(this).parent('.layer').find('.options-2').show();
$(this).parent('.layer').find('.options-2').mouseout(function () {
$(this).hide();
$(this).parent('.layer').find('.options').show();
});
});
You need to bind the mouseout event handler outside. Also .prev() and .next() can be used as .options and .options-2 are siblings.
$(function() {
$('.layer .options').hover(function() {
$(this).hide();
$(this).next('.options-2').show();
});
$('.layer .options-2').mouseout(function() {
$(this).hide();
$(this).prev('.options').show();
});
})
.options-2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer">
<span class="pull-left circle border-solid full">
<i class="flaticon stroke checkmark-1"></i>
</span>
<span class="pull-right options">
options
</span>
<span class="pull-right options-2">
options-2
</span>
</div>
Related
I am building a FAQ, behind every question there is a '+' icon, after clicking on it the answer appears and the icon changes to a '-' icon. The problem is that when you click on the next question the icon of the previous question doesn't toggle back to the original/previous/other icon.
See example:
https://codepen.io/pixelarchitect/pen/eXLEJV
HTML
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
Javascript
$('.faq span').hide();
$('.faq div.question').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('span');
$(".faq span").not($this).hide();
$this.toggle();
$(this).find('svg').toggleClass('fa-plus fa-minus')
});
I'm using jQuery and the free version of FontAwesome for this example.
Using a quite similar logic as your show/hide, you can restore all svg back to plus signs, except the clicked one... See below.
$('.faq span').hide();
$('.faq div.question').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('span');
$(".faq span").not($this).hide();
$this.toggle();
// This line turns all fa-minus into fa-plus except the clicked one
$('.faq svg').not($(this).find('svg')).removeClass('fa-minus').addClass('fa-plus');
$(this).find('svg').toggleClass('fa-plus fa-minus');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
You can find all the font-awesome svgs and use .addClass("fa-plus").removeClass("fa-minus") - excluding the current div's parent:
$('.faq span').hide();
$('.faq div.question').click(function(e) {
e.preventDefault();
var div = $(this).parent();
var $this = div.find('span');
$(".faq span").not($this).hide();
$(".faq").not(div).find("svg")
.addClass("fa-plus")
.removeClass("fa-minus");
$this.toggle();
$(this).find('svg').toggleClass('fa-plus fa-minus')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</div>
Updated codepen: https://codepen.io/anon/pen/EMevMz
I have a div object that should be clickable when it contains the class "clickable". In the Click function I remove the "clickable" class, but it still fires when clicking the object. Will it continue to fire even when I remove the class?
HTML:
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
jQuery:
$("div.vote-wrap > div.circle.clickable").click(function () {
let $circle = $(this);
$circle.removeClass("clickable");
}
because you didn't unbind the event in the click callback.
You just remove the class.
$("div.vote-wrap > div.circle.clickable").click(function() {
let $circle = $(this);
$circle.removeClass("clickable");
$(this).unbind('click');//unbind the click event
alert('clicked , and unbind now!');
})
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
and another way:
$("div.vote-wrap").on('click','div.circle.clickable',(function() {
let $circle = $(this);
$circle.removeClass("clickable");
alert('clicked');
}))
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
Use delegate event on() and unbind the click event with unbind('click') for dynamically created element.
$("div.vote-wrap > div.circle.clickable").on('click',function () {
let $circle = $(this);
$circle.removeClass("clickable");
$circle.unbind('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
The element event handler is attached to is determined when listener is attached, not when the event is emitted.
you could rewrite that code like this:
// element instance is captured once
var $elem = $("div.vote-wrap > div.circle.clickable")
$elem.click(function () {
let $circle = $(this)
$circle.removeClass("clickable")
})
For solution to your problem check the answers of this question: Event binding on dynamically created elements?
I have an icon bar with a simple script to hide/show the content. If a tab is active the and the user clicks it again it will disappear and display nothing below the icon bar. Is there a way to have content displayed when no icons are active?
HTML and JS:
<div class="container text-center">
<div class="icon-bar">
<i class="fa fa-line-chart"></i>
<i class="fa fa-heartbeat"></i>
<i class="fa fa-diamond"></i>
<i class="fa fa-exchange"></i>
<i class="fa fa-newspaper-o"></i>
<script>
$("a").click(function(){
var myelement = $(this).attr("href")
$(myelement).slideToggle(1);
$(".toggle:visible").not(myelement).hide();
});
</script>
</div>
</div>
example of what one of the <div>'s looks like.
<div id="box2" class="toggle" style="display: none;">
<p>content here</p>
</div>
I have a bit long info submission form. I have an option that someone click "add another", there is a notification box display with text like "Success!" like that with close button. Please check this image.
Therefore I have three "add another" buttons and three success alerts. When someone click close, that alert message needs to be disappear.
The problem
I used javascript for that success box. It does these things.
Click "Add another" button, appears success box. Click close button on
success box, box disappears.
Here is my code.
document.querySelector(".add-box").addEventListener("click", function() {
document.querySelector(".add-box-wrap").style.display = "inline-block";
});
document.querySelector(".add-box1").addEventListener("click", function() {
document.querySelector(".add-box-wrap1").style.display = "inline-block";
});
document.querySelector(".add-box2").addEventListener("click", function() {
document.querySelector(".add-box-wrap2").style.display = "inline-block";
});
$(".claim-btn-close").click(function() {
$(".add-box-wrap").hide();
});
$(".claim-btn-close1").click(function() {
$(".add-box-wrap1").hide();
});
$(".claim-btn-close2").click(function() {
$(".add-box-wrap2").hide();
});
<!-- This goes end of html page -->
function hide(target) {
document.getElementsByClassName(target).style.display = 'none';
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Success form-->
<div class="add-box-wrap">
<div class="claim-btn-close" onclick="hide('.claim-btn-close')">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box">Add another<i class="fa fa-plus"></i></a>
</div>
See.. there is a major problem with code repeating. (I didn't repeat html codes, just post here one example) I would like to know the best practice to achieve things like this.
For displaying the notification box without repeating the code, one of the way is you could make use of data attributes. Change the data attribute for all the buttons and let the class .add-box be the same. like so:
<div class="add-box-wrap1" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap2" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a>
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a>
</div>
And change your Jquery to just one function.
$(".add-box").click(function() {
$(".add-box-wrap" + $(this).data('target')).show(); //.add-box-wrap1 or .add-box-wrap2
});
Explanation of the above line: It just means we are getting the value of the "clicked" button's data-target value(which is 1 or 2) AND appending that value to the "add-box-wrap"(which will be add-box-wrap1 or add-box-wrap2) to search for that element to display it using .show().
Using show() or .css jquery functions is upto you. But I suggest not to mix both vanilla JS and JQuery codes(like in your question).
Closing
You can simply use closest or parent, like so:
$(".claim-btn-close").click(function(){
$(this).parent().hide();
});
$(".add-box").click(function() {
$(".add-box-wrap" + $(this).data('target')).show();
});
$(".claim-btn-close").click(function(){
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-box-wrap1" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap2" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a>
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a>
</div>
Update on another question(3 column):
Using bootstrap, you can wrap the add-box-wrap divs within a .row and give each of it a class like col-*-4(class="col-xs-4 col-md-4 col-lg-4") assuming you have 3 success buttons(12/3 = 4). So the first part of your html would become
<div class="row">
<div class="add-box-wrap1 col-md-4 col-lg-4" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap2 col-md-4 col-lg-4" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap3 col-md-4 col-lg-4" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
</div>
You can use DOM relationship to target the desired element. Bind event handlers using a common class then use .closest() to traverse up desired element.
$(".claim-btn-close").click(function(){
$(this).closest(".add-box-wrap").hide();
});
If element are dynamically generate use Event Delegation approach.
$(staticParentElemet).on('click',".claim-btn-close",function(){
$(this).closest(".add-box-wrap").hide();
});
I have multiple instances of the HTML below:
<div class="col-md-4">
<div class="widget">
<div class="widget-head">
<a class="collapse" href="#"><i class="fa fa-arrow-circle-down" aria-hidden="true"></i></a>
<span>Title</span>
<i class="fa fa-expand icon-spacer" aria-hidden="true" onclick="dosomething();"></i>
</div>
</div>
</div>
jQuery:
function dosomething() {
.widget above toggleClass('someClassHere');
}
I need to be able to click on dosomething and have a class toggled (added), to the nearest .widget above it.
How can I do this in jQuery?
You can use closest method of jQuery.
<i class="fa fa-expand icon-spacer" aria-hidden="true" onclick="dosomething(this);"></i>
function dosomething(obj) {
$(obj).closest('.widget').toggleClass('someClassHere');
}
You can use the onclick method to fire the event , and add class via jquery after a getSelectedElement
Use jQuery .closest()
$(function() {
$('.icon-spacer').click(function(e) {
e.preventDefault();
$(this).closest('.widget').toggleClass('red');
});
});
.red {
background: #f00;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="widget">
<div class="widget-head">
<a class="collapse" href="#"><i class="fa fa-arrow-circle-down" aria-hidden="true"></i></a>
<span>Title</span>
</div>
</div>
</div>