Im trying to "make a para (in a div) editable and automatically show cursor in para" when clicked on edit icon. The para does becomes editable but cursor stays with the edit icon. I've read almost all answers regarding click event on SO, nothing helped.
This is my code
JS:
//Add a icon in para containing div when hover on div
$(document).on('mouseenter', '.editable', function () {
$(this).append('<i class="pull-right ml-auto edit-content-icon fa fa-pencil-square-o" aria-hidden="true"></i>')
})
//Make para content editable and show cursor in para
$(document).on('mousedown touchdown', '.edit-content-icon', function (e) {
$(this).prev('p').prop('contentEditable', 'true')
$(this).prev('p').click()
})
HTML:
<div id="some" class="editable col-md-9 col-lg-6 d-flex ">
<p class="ml-md-3 my-auto">My Para...</p>
</div>
Related
Running this piece of Bootstrap HTML and JS code below, I am struggling to not initiate the modal when clicking on the dropdown navi-link (e.g. Mark as Read).
<ul id="notification_items" class="navi navi-hover">
<!--begin::Item-->
<li id="1f7cbbe4-2345-486a-ab66-b05601f033a9" data-notification-id="1f7cbbe4-2345-486a-ab66-b05601f033a9" data-notification-subject="Some Subject" data-notification-message="And some message" class="notification_item cursor-pointer navi-item">
<div class="pr-10 pl-2 navi-link">
<div class="navi-label mx-5"><span class="label label-dot label-lg label-primary mt-n6"></span></div>
<div class="navi-text">
<span class="font-weight-bolder font-size-lg">Some Subject</span><span class="text-muted"> - And some message</span>
<div class="text-muted font-size-sm">3 hours ago</div>
</div>
<div class="notification_actions dropdown dropdown-inline d-none">
<i class="far fa-ellipsis-h"></i>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right" style="">
<ul class="navi flex-column navi-hover py-2">
<li class="navi-item"><span data-notification-id="1f7cbbe4-2345-486a-ab66-b05601f033a9" class="notification_mark_as_read navi-link"><span class="navi-icon"><i class="fad fa-comment-check"></i></span><span class="navi-text">Mark as Read</span></span></li>
<div class="dropdown-divider"></div>
<li class="navi-item"><span class="navi-icon"><i class="far fa-trash-alt text-danger"></i></span><span class="navi-text text-danger">Delete</span></li>
</ul>
</div>
</div>
</div>
</li>
<!--end::Item-->
</ul>
And the simple JS code piece to show the modal when clicking on the <li>:
$(document).on("click", ".notification_item", function () {
$('#notification').modal('show');
});
I tried to e.stopPropagation(); when clicking on the .notification_actions Which works initially, but then obviously every other event won't work anymore.
You have to play with the arguments from the event parameter of the click event: target and currentTarget
target will return your DOM element on which the click occurred
initially
currentTarget will always be the DOM element on which your handlers
is attached -> in your case the li.notification_item
The solution is to identify the element the click occured on - target. There are a lot of ways - in your case you can detect if your click occured in the dropdown navi-link (.dropdown-menu) by traversing the DOM up until the root menu (#notification_items):
$(document).on("click", ".notification_item", function (e) {
// you traverse up to the root ul, and looking if you are in a dropdown menu
if ($(e.target).closest('.dropdown-menu', '#notification_items').length > 0) {
// You are in a drop down menu -> do nothing
} else {
// you are somewhere else -> trigger the modal
$('#notification').modal('show');
}
});
JSFiddle
P.S. this codes checks if you are in a dropdown-menu, you can use specific selector if you want to check for a specific dropdown.
I'm having trouble adding a link to a button inside a card. the card is wrapped in a div element which when clicked automatically expands and closes.
Is there anyway to remove this functionality just when clicking on the details button? So it acts as a normal link?
Here is the code:
https://codepen.io/candroo/pen/wKEwRL
Card HTML:
<div class="card">
<div class="card__image-holder">
<img
class="card__image"
src="https://source.unsplash.com/300x225/?wave"
alt="wave"
/>
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch
devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
Read more
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var zindex = 10;
$("div.card").click(function (e) {
e.preventDefault();
var isShowing = false;
if ($(this).hasClass("show")) {
isShowing = true;
}
if ($("div.cards").hasClass("showing")) {
// a card is already in view
$("div.card.show").removeClass("show");
if (isShowing) {
// this card was showing - reset the grid
$("div.cards").removeClass("showing");
} else {
// this card isn't showing - get in with it
$(this).css({ zIndex: zindex }).addClass("show");
}
zindex++;
} else {
// no cards in view
$("div.cards").addClass("showing");
$(this).css({ zIndex: zindex }).addClass("show");
zindex++;
}
});
});
You can check the target of the event and see if it is an <a> using is()
Something like:
$("div.card").click(function (e) {
// only run when not an `<a>`
if(!$(e.target).is('a')){
e.preventDefault();
//the rest of your code
....
}
});
I don't know Jquery but with javascript you can do this inside your code:
const links = document.querySelectorAll('.btn');
links.forEach(link => link.addEventListener('click', (e)=>e.stopPropagation()))
I have a bootstrap panel with another panel in it. Both have in the panel header a glyphicon. The panels are collapsed by default. When the panels are collapsed, the glyphicon-unchecked is set. When I click on this glyphicon, the panel uncollapses. I wrote following JavaScript function for this:
$('#outerPanelGlyph').click(function () {
$('#outerPanelBody').collapse('toggle');
});
This works properly. When I click this, the outer panel gets uncollapsed but the inner is still collapsed. I wrote methods, so the glyphicon gets exchanged with "glyphicon-check" on uncollapse and vice versa:
$('#outerPanelBody').on('show.bs.collapse', function () {
$('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});
$('#outerPanelBody').on('hide.bs.collapse', function () {
$('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
});
I wrote exactly the same code as above for the inner panel. When I click on the glyph of the inner panel, the inner panel gets uncollapsed and the glyph exchanged. But, when I click on the glyph of the inner panel again, the inner panel collapses and both the glyph of the inner panel and of the outer panel get exchanged. I just want the inner panel glyph exchanged when I click on the glyphicon of the inner panel.
Here is the HTML-Code:
<div class="panel panel-dark" id="outerPanel">
<div class="panel-heading">
<span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="outerPanelGlyph"></i></span>
</div>
....some code....
<div class="collapse panel-body" id="outerPanelBody">
<div class="panel panel-default" id="innerPanel">
<div class="panel-heading panel-dark">
<span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="innerPanelGlyph"></i></span>
</div>
<div class="collapse panel-body" id="innerPanelBody">
....some code....
</div>
</div>
</div>
</div>
When you click the inner panel, you also click the outer panel so you need to stop propagation in the inner panel click event otherwise both events will be fired.
$('#outerPanelBody').on('show.bs.collapse', function (e) {
e.stopPropagation();
$('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});
$('#outerPanelBody').on('hide.bs.collapse', function (e) {
e.stopPropagation();
$('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
});
The answer from Steve Harris does work, but he wrote it in the wrong method. Here are my new methods which toggle the glyph:
$('#outerPanelBody').on('show.bs.collapse', function (e) {
e.stopPropagation();
$('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});
$('#outerPanelBody').on('hide.bs.collapse', function (e) {
e.stopPropagation();
$('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
});
Thank you very much for the fast help!
I'm fairly new to Javascript/Jquery and I'm trying to hide multiple children/adjacent classes when a specific parent class is clicked.
Here's my HTML
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
</div>
</div>
What I'm aiming to do is: When a user clicks one of the two smaller icons shown (pov_icon_small), for that individual icon: the classes pov_icon_small and pov_title_small will change to pov_icon_large and pov_title_large respectively. In the same time, I want the other 'large' icon and 'title' to revert back to the 'small' state
I've started calling some Javascript but I don't think I'm headed the right way:
$('.pov_icon_small').on('click', function (e) {
$(this).toggleClass("pov_icon_large");
});
Would anyone be willing to point me to the right direction?
To use individual click
$('.pov_icon_small , .pov_icon_large').on('click', function (e) {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
});
and for title the same way
$('.pov_title_small , .pov_title_large').on('click', function (e) {
$('.pov_title_large').not($(this)).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
To run both action on icon click use this
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
Note: be sure to include Jquery
You can add a common class icon for the icon div and title for the title div and following code will work,
$(".pov_icon_small").on('click',function(){
$(this).parent().siblings().children('div').each(function(value){
if($(this).hasClass('icon'))
$(this).addClass('pov_icon_small').removeClass('pov_icon_large');
else if($(this).hasClass('title'))
$(this).addClass('pov_title_small').removeClass('pov_title_large');
});
$(this).addClass('pov_icon_large').removeClass('pov_icon_small');
$(this).siblings('.title').addClass('pov_title_large').removeClass('pov_title_small');
});
Here as you can see, I am first getting parent of the icon clicked i.e. Your pav_icon div now I am changing for all the siblings now each div in the sibling. If it is Iicon changing icon classes as required if title changing title classes.
I have made a simple system which detects double taps. I want to show a heart icon when someone double taps on an image, just like on Instagram.
This is what my code looks right now:
var elements = document.getElementsByClassName('snap_img');
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
// Some javascript to show the heart icon
});
});
This is what the HTML looks like:
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
<div class="snap_too">
</div>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
LA is the shit...
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
So when the element 'snap_img' is double tapped, I need to get the element 'like_heart' which is one line below the snap_img element. How do I get that sibling element and fade it in with JQuery?
Like this
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
$(element).next().text('♥').hide().fadeIn();
});
});
P.S. I've added that heart text, since the sibling was empty.
On the event handler, i would do $(element).parent().find('.like_heart').fadeIn(); So the code is not dependant on the element ordering.
(To clarify to selector: take the parent element which is the div.snap_item and find an element with class like-heart inside it)