Hi i have this problem: I want to click on div which will flipped (this is work) but next step is flipp div back on click on "x" (this is my problem).
HTML code:
<div class="col-md-4">
<div class="balik">
<div class="panel panel-default panel-cube">
<div class=" flip">
<div class="card">
<div class="panel-body face front">
<h4>Balík 28 dní</h4>
<br>
<h1>16,80€</h1>
<br>
<h4>Zisti viac o balíku »</h4>
</div>
<div class="panel-body face back">
<p class="close">x</p> <h4>O Balíku 28 dní</h4>
» celkom 28 dní na topovanie
<br />» 5 topovaných inzerátov
<br />» -30% z ceny oproti balíku 7 dní
<br />
<br>
<button class="btn btn-success"><i class="fa fa-shopping-cart"></i> Kúpiť</button>
</div>
</div>
</div>
</div>
</div>
</div>
JQUERY code:
$(function(){
$('.flip').click(function(){
$(this).find('.card').addClass('flipped')
});// this is work
$('.close').click(function(){
$('.flip').find('.card.flipped').removeClass('flipped')
}); // this is not work
});
Thanks for answers.
Because .flipped is essentially a dynamically-created element, you'd need to use event delegation:
http://jsfiddle.net/isherwood/7Zg92/
$(document).on('click', '.close', function () {
$('.flip').find('.card.flipped').removeClass('flipped')
});
That's because events bubble up, you should stop the propagation of the event:
$('.close').click(function(event) {
event.stopPropagation();
$('.flip').find('.card.flipped').removeClass('flipped');
});
http://jsfiddle.net/aaLUs/
Related
Im trying addClass to wizard-step when button clicked, but still no luck :/
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user"></i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" onclick="step0(this);" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
JavaScript:
<script>
function step0(element) {
$(element).prev('div').find('.wizard-step').addClass('wizard-step-active');
}
</script>
Can anyone please help me !
prev is used to retrieve a previous sibling element. The .wizard-step you want to target is a child of a sibling to a parent of the button being clicked. As such you need to use closest() instead.
Also note that onclick (and all the other onX attributes) are not good practice and should be avoided. As you're already using jQuery you can attach your event unobtrusively, like this:
jQuery($ => {
$('.btn').on('click', function() {
$(this).closest('.wizard-steps').find('.wizard-step').addClass('wizard-step-active');
});
});
.wizard-step-active { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user">User icon</i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
Alternatively, instead of calling find() from the shared parent, you could select the form and use prev():
$('.btn').on('click', function() {
$(this).closest('.wizard-content').prev('.wizard-step').addClass('wizard-step-active');
});
Either is fine, it just depends on how your HTML is structured as to which fits best for this use case.
You don't want the div immediately before the button, but the one containing the relevant item(s). So instead of $(element).prev('div') write $('.mt-4').
Your this parameter is referring your button, not your div.
You can do this without Jquery, just using your function like this:
function step0() {
const element = document.getElementsByClassName('wizard-step');
element.classList.add('wizard-step-active');
}
So, you don't need to pass this as a parameter to step0 function.
When i click to show a toggle, it executes 2 times and again closing the toggle thereby hiding my contents.Could someone please help on this.
Here is the code:
html:
<div class="accordianbx">
<div class="acc_icon">
<div class="whyimgbx"> <span><img src="images/2.png" alt=""></span></div>
<h3>abcd <span>&xyzs </span></h3>
</div>
<div class="hospital acc_descrpbx">
<div class="innrleft_hospitalbx">
<h2>desc </h2>
<p>description</p>
Know More
</div>
</div>
</div>
jquery:
$('.acc_icon').unbind('click').click(function(){
// alert('came into toggle function');
$(this).parents('.accordianbx').find('.acc_descrpbx').slideToggle();
$(this).parents('.accordianbx').siblings().find('.acc_descrpbx').slideUp();
// alert('going out of toggle function');
});
I am creating a random quote generator. Every time I click the button "Get Quote", a new quote should be generated from an API, and the background color is changed. However, while the background color changes every time I click, the quote only changes the first time I click the button.
My HTML is as follows:
<body>
<div class="container-fluid">
<div id="centerThis" style="background: transparent">
<div id=target1>
<h1 class="text-center">Random Quote:</h1>
<div class="quote">
<blockquote>
<p id="quoteT">Humans are allergic to change. They love to say, 'We've always done it this way.' I try to fight that. That's why I have a clock on my wall that runs counter-clockwise.</p>
<footer id="quoteA">Grace Hopper</footer>
</blockquote>
</div>
<div class="row">
<div class="col-xs-2">
<i class="fa fa-twitter" aria-hidden="true"></i></button>
</div>
<div class="col-xs-2">
<i class="fa fa-tumblr" aria-hidden="true"></i></button>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
<button id = "getQuote" class = "btn colorButton">
Get Quote
</button>
</div>
</div>
</div>
<div id="target2">
<h5 id="byAnna" class="text-center">by anna</h5>
</div>
</div>
</div>
</body>
My jQuery looks like this (I left out the code for randColor and some other un-important parts):
$(document).ready(function() {
$("#target1").css("color",randColor);
$("#target2").css("background", randColor);
$("body").css("background", randColor);
$(".colorButton").css("background", randColor);
$("#getQuote").on("click", function(){
randColor = getRandomColor();
$("#target1").css("color",randColor);
$("#target2").css("background", randColor);
$("body").css("background", randColor);
$(".colorButton").css("background", randColor);
$.ajax({url: "http://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", success: function(result){
$(".quote").html("<blockquote><p>" + result.quoteText + "</p><footer>" + result.quoteAuthor + "</footer></blockquote>");
}});
});
});
Thanks for any help!
It seems that you have an error on your URL:
http://crossorigin.me/http://api.forismatic...
Do you see the Ajax request on the web inspector each time you click on the button?
Regards,
Jimmy
EDIT :
The issue is the text color:
It's the same as the bg.
Try to add this line in JS:
$(".quote").css("color", "black");
I have hide and show functionality on dynamically generated cards after form submission.
{{#each newaction}}
<div class="workflowcard">
<div class="module-card-small">
<div class="res-border"></div>
<div class="card-img">{{team}}</div>
<div class="res-content">
<div class=" newaction-name">{{action_title}}</div><hr>
<div class="newaction-des">{{description}}</div>
<!-- <div class=" due-on">Due on:{{d_date}}</div><hr>-->
</div>
<div class="due">
Due on:
<div>
<div class="day-stamp">{{weekday d_date}}</div>
<div class="date-stamp">{{date d_date}}</div>
<div class="month-stamp">{{month d_date}}</div>
</div>
</div>
{{> actioncardsubcontent}}
</div>
<div class="btn-box">
<button type="button" class="cancelsub">Hide Option</button>
<button type="submit" class="createbtnsub">Show Options</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
<template name="actioncardsubcontent">
<div class="subcontent" >
<div class="modulepath"><div>{{module_list}}</div></div>
<div class="linkto"><div>Linked To: <div class="linkto-color">{{link}}</div></div></div>
<div class="description"><div>Notes:<br>{{description}}</div></div>
</div>
</template>
When I click on show options button the action card subcontent is displaying and when I click on hide option it is hiding.
The problem is, the hide and show functionality is applying for all the cards which are creating dynamically at a time when I click on single card. I understand the reason is I have given the class name for the buttons. So how to stop that and make it work to current target.
Here is my JS:
Template.actioncardsubcontent.rendered = function(){
this.$(".subcontent").hide();
};
Template.workflow.events({
"click .createbtnsub":function(){
$('.subcontent').show();
},
"click .cancelsub":function(){
$('.subcontent').hide();
}
What you need to do is give a unique ID for each iteration to your cards div class attribute.
in JSTL usually has indexId attribute. You can use that and set your class.
Sample:
{{#each newaction indexId="i"}}
{{/each}}
<div class="btn-box">
<button type="button" class="cancelsub<%=i%>">Hide Option</button>
<button type="submit" class="createbtnsub<%=i%>">Show Options</button>
</div>
In your javascript:
use i to hide.
You have a couple of options here. The one I prefer is to put everything in the {{#each}} into its own template. If you do that, you can put the button click events inside of the child template's event which makes it much simpler to manipulate your data. An example:
Templates:
<template name='workflow'>
{{#each newaction}}
{{> card}}
{{/each}}
</template>
<template name='card'>
<div class="workflowcard">
<div class="module-card-small">
<div class="res-border"></div>
<div class="card-img">{{team}}</div>
<div class="res-content">
<div class=" newaction-name">{{action_title}}</div><hr>
<div class="newaction-des">{{description}}</div>
</div>
<div class="due">
Due on:
<div>
<div class="day-stamp">{{weekday d_date}}</div>
<div class="date-stamp">{{date d_date}}</div>
<div class="month-stamp">{{month d_date}}</div>
</div>
</div>
{{> actioncardsubcontent}}
</div>
<div class="btn-box">
<button type="button" class="cancelsub">Hide Option</button>
<button type="submit" class="createbtnsub">Show Options</button>
</div>
</div>
</div>
</template>
Javascript (template.$ docs):
Template.cards.events({
"click .createbtnsub":function(event, template){
template.$('.subcontent').show();
},
"click .cancelsub":function(event, template){
template.$('.subcontent').hide();
}
});
-- OR --
You can do a better DOM query.
Without more info on what is actually in the actioncardsubcontent template or proper testing, this is a best guess on what you're trying to find. You should be able to tweak this query to meet your specific needs easily enough through trial and error. Please read the jQuery Traversing docs as it should clear this up a bit for you.
Template. workflow.events({
"click .createbtnsub":function(event, template){
$(event.target).siblings('.due').find('.subcontent').show();
},
"click .cancelsub":function(event, template){
$(event.target).siblings('.due').find('.subcontent').hide();
}
});
I can't seem to figure out why my .off('click') jQuery method isn't working considering I am removing the event binding from '.reveal-menu'. The first animation works fine as each div moves to its respective location in increments of 78. But I can't seem to get it to go back.
JQUERY
$(function(){
var userMenuDivs = $('#user-menu div:gt(1)');
userMenuDivs.hide();
$('.reveal-menu').on('click',
function(){
$(this).addClass('down');
iconSpacerCount = 78;
userMenuDivs.show();
$.each(userMenuDivs, function(index,value){
$(this).animate({top:iconSpacerCount},200);
iconSpacerCount += 78;});
});
$('.reveal-menu').off('click',
function(){
$(this).removeClass('down');
iconSpacerCount = 0;
$.each(userMenuDivs, function(index,value){
$(this).animate({top:iconSpacerCount});
});
});
});
HTML
<div id="user-menu">
<div class="reveal-menu">
<i class="fa fa-plus fa-lg"></i>
</div>
<div class="post-option">
</div>
<div class="search-option">
</div>
<div class="chat-option">
</div>
<div class="profile-option">
</div>
<div class="friends-option">
</div>
<div class="organizations-option">
</div>
<div class="public-figures-option">
</div>
<div class="sign-out-option">
</div>
</div>
Here is a link to a video to show you what I'm doing.
https://dl.dropboxusercontent.com/u/3270373/2016-06-01_21-57-20.mp4
The .off is used to remove the events. It is not used to add the opposite event of .on. You can switch the click event between two function like this:
$(function() {
var userMenuDivs = $('#user-menu div:gt(1)');
userMenuDivs.hide();
$('.reveal-menu').on('click', revealMenuOn);
});
function revealMenuOn() {
$(this).addClass('down');
$('#user-menu div:gt(1)').slideDown( "slow" );
$('.reveal-menu').off('click').on('click', revealMenuOff);
}
function revealMenuOff() {
$(this).removeClass('down');
$('#user-menu div:gt(1)').slideUp( "slow" );
$('.reveal-menu').off('click').on('click', revealMenuOn);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="user-menu">
<div class="reveal-menu">
<i class="fa fa-plus fa-lg">1</i>
</div>
<div class="post-option">
2
</div>
<div class="search-option">
3
</div>
<div class="chat-option">
4
</div>
<div class="profile-option">
5
</div>
<div class="friends-option">
6
</div>
<div class="organizations-option">
7
</div>
<div class="public-figures-option">
8
</div>
<div class="sign-out-option">
9
</div>
</div>
You can try .unbind() event.
$('.reveal-menu').unbind('click',
function(){
$(this).removeClass('down');
iconSpacerCount = 0;
$.each(userMenuDivs, function(index,value){
$(this).animate({top:iconSpacerCount});
});
});