How can I manipulate alert() with a toggle element? - javascript

I have some icons with jQuery toggleClass() to switch the icons, let's say Icon A and Icon B, when clicked. I also want an alert box to show up ONLY when changing from Icon A to Icon B.
I applied click() method together with alert() but the alert box simply shows up every time I click the icons (either when switching from Icon A to Icon B or from Icon B to Icon A.)
Is there a way to manipulate the alert box to achieve my goal? Please look at my pen for a clearer example. Thank you.

Check the class of the child i element when you click your heart. If it has the class fa-heart then it's filled:
$("a[id^=heart-]").click(function(){
if($("i", this).hasClass('fa-heart'))
alert("I need this alert box only when I fill the hearts.");
});
Updated pen

Related

Javascript to show/hide affects all boxes when one is clicked

I added a simple Javascript to show/hide boxes, which works correctly, but when I click on show all the boxes open. How to fix?
$(document).ready(function(){
$(".header").click(function(){
$(".contents").toggle();
});
});
CSS:
.contents{display:none;}
.header{cursor:pointer; user-select:none;}
HTML:
<div class="header">Exemple</div>
<div class="contents">Exemple</div>
I want only that box I clicked to open or close. Thanks
You need to apply show or hide logic is on box so when you click first need to check that show class exist or not if class not exist then add class to hide the box.
In the opposite if click again then if class exist then remove the class so box will be visible.

tooltip to work for mouse hover and click both - ngbootstrap

I am using https://ng-bootstrap.github.io/#/components/tooltip/ and required to open tooltip on mouse over and also on click.
Basically, on mouse hover text1 appears and on click tooltip text changes to text2. In examples I see only on one event ( either on click or hover).
best example is - https://pypi.org/project/nltk/ - same functionality I needed using https://ng-bootstrap.github.io/#/components/tooltip/.
Angular 7 is being used in my project.
You can use the context and manual triggers functionality of ngb-tooltip to achieve this.
In your HTML, define the tooltip:
<ng-template #tipContent let-greeting="greeting">{{greeting}}</ng-template>
The above HTML will display the value of the variable greeting as the text in the tooltip.
Also define the button (or other HTML) element that you want the tooltip to appear on
<button
type="button"
class="btn btn-outline-secondary mr-2"
[ngbTooltip]="tipContent"
triggers="manual"
#t1="ngbTooltip"
(mouseover)="openTooltip(t1, 'text 1')"
(mouseout)="closeTooltip(t1)"
(click)="openTooltip(t1, 'text 2')">
Tooltip on top
</button>
This uses manual triggers, and you can bind to the mouseover and mouseout events to display the tooltip text 1 on hovering over the button. The click binding will display the tooltip text 2 when clicking on the button.
The openTooltip function is defined in the TypeScript file opens the tooltip passing in the text that was passed in as an argument to the method. The line tooltip.close() is required otherwise the clicking on the button to display the text 2 tooltip will not work:
openTooltip(tooltip, greeting: string) {
tooltip.close();
tooltip.open({ greeting });
}
There's a working StackBlitz demo here.
The closeTooltip function simply closes the tooltip:
closeTooltip(tooltip) {
tooltip.close();
}

Trigger Element Click

JSFiddle Live Demo
Script Explanation
My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from A-Z to Z-A and visa-versa.
The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.
What I Wish To Implement
Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target, I'm not sure how to trigger this correctly as my attempts have been doing nothing.
Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:
$('.dropdown-toggle').trigger("click");
I've updated the plunker
You can trigger the click this way.
if ($(e.target).closest('.Sort').length) {
if ($(e.target).hasClass('Active')) {
$(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
} else {
$('.dropdown-menu .Sort').find('.Active').removeClass('Active');
$('.dropdown-menu .Sort').find('i').remove();
$(e.target).addClass('Active');
$(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
}
//Here.
//Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
$('.dropdown-toggle').click();
}

Is there any way to hide a checkbox's parent div upon clicking it, with pure CSS?

I have this example: http://dabblet.com/gist/540b8d498447aaea159fa4215d18984f which gets me close.
I'd like for the click of the "I'm a Toggle" to hide itself and the top green box.
Is this possible without Javascript?
Thanks in advance!
As of 2016, there is no way to select the parent of an element in CSS. Check this link.

How to have all other image buttons in group "reset" to previous image when a new button is clicked

a key http://www.bestmarketingnames.com/elementsDLS/art.jpga key http://www.bestmarketingnames.com/elementsDLS/beauty.jpga key http://www.bestmarketingnames.com/elementsDLS/business2.jpg
I have a web page with several "keys" like the above. When the user clicks on one,
I would like it to switch to a blue button image. When the user clicks on a different
key, I would like it to switch to blue and the others go back to grey.
There will be a total of about 30 keys. They will also be hyperlinked.
I have found a semi-solution using css to create "buttons," but it works with IE and not chrome:
http://archive.simurai.com/lab/buttons/#
I would prefer to do it with image switching anyway, but css would be my second choice.
Can this be done without a giant mess?
Thanks.
You can use jQuery with .addClass() and .removeClass() functions ... maybe something like this:
$("button").click(function(){
$("button").removeClass("blue");
$(this).addClass("blue");
});
jsfiddle
and in the CSS you just need to make your .blue class style the blue image button.
EDIT: I added an example with image buttons, so you can get an idea: jsfiddle

Categories