I have an alert box with multiple close buttons:
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
I registered a handler for the close event as the docs suggest:
$(document).on('close.fndtn.alert', function(event) {
console.info('An alert box has been closed!');
console.info(event);
});
But unless I've missed it, the event doesn't seem to indicate which of the buttons was clicked.
How should I modify my HTML/JS to find out which of the close buttons was clicked? I don't want to modify Foundation's own JS, and I do want the UI behavior to remain consistent for both buttons, nice transitions and all.
Here is working spinet as #Panomosh mentioned above:
$('a.close').on('click',function(e){
console.log($(e.target).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
Greetings!
Related
I am confused. This exact CSS works on other sites and same browser.
But on a certain website. The drop down does not work?
Is there a Heading Setter or something? Website setting? Its confusing me.
<button onclick="javascript:showElement('bshd')" style="padding:2px;"> Button </button>
<div id="bshd" style="display:none;">
This Should Show Now
</div>
I get that this showElement fucntion is custom made by you? You can achieve the same thing by using jquery show() function:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button onclick="$('#bshd').show()" style="padding:2px;"> Button </button>
<div id="bshd" style="display:none;">
This Should Show Now
</div>
I'm actually new to JQuery, and i am trying to trigger a quick view from the css framework Bulma, you can get documentation on the quickview here:
https://wikiki.github.io/components/quickview/
The quickview is set like this:
<div id="quickviewDefault" class="quickview">
<header class="quickview-header">
<p class="title">Quickview title</p>
<span class="delete" data-dismiss="quickview"></span>
</header>
<div class="quickview-body">
<div class="quickview-block">
...
</div>
</div>
<footer class="quickview-footer">
</footer>
</div>
And i can call it with this button (as saw on the wiki):
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
So far its working, but i want to create a second button that ll call the quickview with JQuery, how can i do it ?
So far i've tried to click on the button who work great with JQuery when i click on my second button.
<!-- First button, work great -->
<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show quickview</button>
<!-- Second button, doesn't work yet -->
<button class="clickmeplz">></button>
The first button is working well, and the second one should call the same quickview as the first one but with JQuery.
This is the code i've tried so far with my second button.
$(document).ready(function(){
$(".clickmeplz").click(function(){
$('button[data-target="quickviewDefault"]').click();
});
});
Unfortunately, it seem that the method click() cannot trigger the event of my first button like this.
Hello !
Let's try this:
$(document).ready(function(){
$(".clickmeplz").click(function(){
if($('div#quickviewDefault.is-active').length) { //If the quickview is showed
$('div#quickviewDefault.is-active').removeClass('is-active'); //Remove the class to hide
}else {
$('div#quickviewDefault').addClass('is-active'); //Add the class to show
}
});
});
I have a form that I am controlling visually with jQuery. I am using removeClass to remove a few classes on the first part of the form, which works fine. However when the button is clicked to go to the second part of the form, the form is not responding to the removeClass and I can't figure out why this is happening. I have tried adding an event (below) to see if I am able to target the class/id within the div, but no luck either. Any suggestions would be greatly appreciated.
$(document).ready(function(){
$('input#createMember').click(function(){
$.find('account-edit-engagement-block').removeClass('col-md-6');
});
});
Ok Here is the code for the form. I am trying to remove the classes associated to this segment ""
<div class="form-container promo-carousel-lp__form">
<h4>Get $150 for signing up</h4>
<div class="account-edit-engagement-block"><script
src="/bundles/ActivationFormBlock?
v=FmZitrV3y_UtI4ysqjWZ2dKUPIGjPegx-dWRIDqgcrI1"></script>
<div id="activateAccount">
<div class="">
<div id="activationview"></div>
<div id="editview">
<script src="/bundles/AccountEdit?
v=V6iouLyL7iEfMRGYC4DTKQc8Yv95VNfdF_08-ZAgeRU1"></script>
<div id="editAccount">
<div class="row">
<div class="col-md-offset-3 col-md-6 col-xs-12">
<form action="/api/UserApi/EditUserAsync"
EDIT Try this again, iterate:
$(document).ready(function(){
$('input#createMember').click(function(){
$('.account-edit-engagement-block').each(function(ix,ex){
$(ex).find('.col-md-6').removeClass('col-md-6');
});
});
});
Fiddle HERE: https://jsfiddle.net/u5bLfrks/1/
I am using featherlight lightweight jQuery lightbox plugin but I don't understand how to load lightbox using with click event as I am not good with jQuery codes.
Here is my code work:
HTML:
Load Lightbox
<button id="openbox">Load Lightbox on click event</button>
<div class="lightbox" id="fl1">
<h2>Delete Item</h2>
<div class="row">
<div class="twelve columns">
<strong>Are you Sure?</strong>
<br>blubblub?
</div>
</div>
<div class="right"> Close
Yes
</div>
</div>
jQuery:
jQuery(document).on("click", "#openbox", function() {
jQuery('.lightbox').featherlight();
});
JSFiddle: jsfiddle.net/g68bZ/18/
Comment Reply:
But what If I want to display lightbox with logical condition like:
var checkedCount = $('.chkAssets:checked').length; // Getting some counts
if(checkedCount == 1){
// Load lightbox if condition is match
}
I hoping someone guide me proper way.
Thanks.
$.featherlight('#fl1');
Pay attention that the lightbox has id "fl1"
here is the fiddle
http://jsfiddle.net/g68bZ/26/
and here with if else example
http://jsfiddle.net/g68bZ/27/
I am trying to copy the Like button of Facebook, but the problem is on the specific place to click to change the button.
When it's not yet liked, the user should click anywhere on the button and the button will change on the gray state (already liked). This is already done.
But the problem is when unliking it, I think I'm not using jquery correctly so that it should set to the blue state(not liked), only if it is clicked on the image.
Here's what I've made, take a look at it so you can understand better: https://glenrdsgn.com/button/
I've added a class '.unlike' to the ch2 div so that the HTML looks like this:
<div id="like" >
<div id="ch1" class="btn btn-empty no-like">
<div class="pad">
<div class="like-text">
<div id="ch2" class="data-empty"></div>
<div class="txt">Like</div>
</div>
</div>
</div>
</div>
Then the following jQuery does what I think you mean:
$(function() {
$('.btn').live('click', function() {
$('#ch1').attr('class', 'btn like btn-fill');
$('#ch2').attr('class', 'unlike data-fill');
});
$('.unlike').live('click', function() {
$('#ch1').attr('class', 'btn btn-empty no-like');
$('#ch2').attr('class', 'data-empty');
return false;
});
});
The return false is needed as otherwise both events are triggered. Hope this helps