i am trying to create html app without any framework. i want add some animation for changing one div to another div. so then it will be feel like better then just jump one div another div. for animation using animate.css. now problem is when i continuously next and back sometime animation not work and div not. i found why it is but can not fix. it is because of class not add and remove properly by click.
Please check my example. when i click NEXT it's show another div then when i click Create an Account it's show another div then when i click BACK it is back signup page. this is animation working but again when i click Create an Account then div move (login page) away but another div (signup page) not showing.
Demo
https://jsfiddle.net/cyber007/u78adoto/1/
Html
<div class="overlaycontent">
<!-- Choose country area -->
<div class="country-selector">
<h4>Choose Country</h4>
<form>
<input id="bangaldesh" type="radio" name="country" value="bangaldesh" />
<label class="country-label bd" for="bangaldesh"></label>
<input id="malaysia" type="radio" name="country" value="malaysia" />
<label class="country-label my" for="malaysia"></label></form>
<div class="next-btn">Next</div>
</div>
<div class="userinput hidepanel">
<div class="section country-selectd"> <img src="images/flag-bangladesh.png" alt=""/></div>
<!-- sign in area-->
<div class="section signin-panel">
<form action="call-log.html">
<div class="inputarea user">
<input type="text" placeholder="Phone Number">
</div>
<div class="inputarea password">
<input type="password" placeholder="Password">
</div>
<input type="submit" class="sbtn btn-login" formaction="call-log.html" value="login">
<input type="submit" class="sbtn btn-create" formaction="call-log.html" value="Create an Account" id="creatbtn">
<input type="submit" class="sbtn btn-more" formaction="call-log.html" value="More">
</form>
</div>
<!-- sign up area-->
<div class="section signup-panel hidepanel">
<div class="inputarea phone"><input type="tel" placeholder="Your Telephone Number"></div>
<div class="inputarea user"><input type="text" placeholder="User Name"></div>
<div class="inputarea password"><input type="password" placeholder="Password"></div>
<div class="inputarea password"><input type="password" placeholder="Password"></div>
<input type="submit" class="sbtn btn-login" formaction="call-log.html" value="Sign Up">
<input type="submit" class="sbtn" value="Back" id="backbtn">
</div>
</div>
</div>
Js
$(".next-btn a").click(function(){
$('.country-selector').addClass('animated slideOutLeft');
$('.userinput').addClass('animated slideInRight').show();
return false;
});
$(".btn-create").click(function(){
$('.signin-panel').addClass('animated slideOutLeft');
$('.signup-panel').addClass('animated slideInRight').removeClass('hidepanel slideOutLeft').show();
return false;
});
$("#backbtn").click(function(){
$('.signup-panel').addClass('animated slideOutRight').removeClass('slideOutLeft');
$('.signin-panel').addClass('animated slideInLeft').removeClass('hidepanel slideOutLeft');
return false;
});
i am not sure my JavaScript or slideing way is good or bad but if you guys know any other solution for slide one div to another and feel that Android page animation please advice.
may be without animate.css also possible just position transition with css animation
This is because you still have the classes on the elements when you are going through things. I would remove the classes on the elements when the animations are finished.
However if you do this, it will revert to the old styles without the classes animated slideXX So I would suggest removing the unused HTML after the animations are finished. This is what using a framework will give you.
Anyway you have already identified this.
So what you were after, even though is a poor selector and even poor solution it might help you:
function removeClasses (){
var selectors = '.slideOutLeft, .animated, .slideInRight';
$().removeClass(selectors );
}
$(".next-btn a").click(function(){
removeClasses ();
$('.country-selector').addClass('animated slideOutLeft');
$('.userinput').addClass('animated slideInRight').show();
return false;
});
$(".btn-create").click(function(){
removeClasses ();
$('.signin-panel').addClass('animated slideOutLeft');
$('.signup-panel').addClass('animated slideInRight').removeClass('hidepanel slideOutLeft').show();
return false;
});
$("#backbtn").click(function(){
removeClasses ();
$('.signup-panel').addClass('animated slideOutRight').removeClass('slideOutLeft');
$('.signin-panel').addClass('animated slideInLeft').removeClass('hidepanel slideOutLeft');
return false;
});
finally i make it happen. manually but it would if there any script like that. may be some kind of slider code will work. updated code here
> https://jsfiddle.net/cyber007/u78adoto/3/
Related
I want to pull data using JavaScript and show it in console. I don't know what I did wrong.
main.js
// ADD TO CART
$("#addToCartBtn").on('click',function(){
var _qty=$("#productQty").val();
var _productId=$(".product-id").val();
var _productName=$(".product-name").val();
console.log(_productId,_productName,_qty);
});
I am using django framework to write backend
detail.html
<div class="product-btns">
<div class="qty-input">
<span class="text-uppercase">Ədəd: </span>
<input class="input" type="number" value="1" id="productQty">
</div>
<input type="hidden" class="product-id" value="{{product.id}}">
<input type="hidden" class="product-name" value="{{product.name}}">
<button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart" id="addToCartBtn"></i> Səbətə at</button>
</div>
The problem is probably that the element that has id="addToCartBtn" is not really the button but the <i> element - which has no content and therefore no width. So it is never clickable.
I have a search field that is hidden, and when a user clicks on the search icon, it opens and I want to bring focus to the search input immediately so the user does not have to click twice. It works perfect in Chrome, but not in Safari (desktop). I saw some other suggestions that wrapping it in a timeout will work, but still no dice. Any thoughts?
jQuery:
$search = $('.header--search-container');
$searchInput = $('.header--search-input input[type=search]');
$search.click(function(){
$searchInput.toggleClass('search-active');
setTimeout(function(){
$('header .header--search-input .search-field').focus();
}, 1);
});
HTML (Don't really think its needed but just so you can see... Also redacted is the <header> element) :
<div class="header--search-input">
<form role="search" method="get" class="search-form" action="http://example.com/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>
</div>
<div class="header--search-container">
<svg>
.. redacted for legibility on stack overflow ..
</svg>
</div>
Adding a higher setTimeout value works.
$search.click(function(){
$searchInput.toggleClass('search-active');
setTimeout(function(){
$('header .header--search-input .search-field').focus();
}, 500);
});
I have the following fiddle to show what I have for a pop up already...
https://jsfiddle.net/05w8fpL5/6/
I am looking for my pop up to expand in a vertical fashion up and down upon page load. An example would be on Facebook. When you click the 'more' link that is next to birthdays.
Ie- it will say:
John Smith and 5 more birthdays today
or something like that. If you click on that you will see the pop up display as a small rectangle and then expand to the whole thing and display the content.
How could I do that?
Right now I have my pop up displaying on page load.
$(document).ready(function () {
// On Load Show
$(".light_admin,.white_overlay").fadeIn("slow");
// Set time Out 5 second
setTimeout(function () { $(".light_admin,.white_overlay").fadeOut("slow"); }, 5000);
});
$('.admin_popup').on('click', function () {
$(".light_admin,.white_overlay").fadeIn("slow");
});
$('.close_admin_popup').on('click', function () {
$(".light_admin,.white_overlay").fadeOut("slow");
});
I think I get what you're trying to do. First create a wrapper around the content. Hide both the content and the outside wrapper. You can achieve a stretching effect by increasing the padding of the top and bottom while at the same time, set a negative margin-top that is equal to the padding-top that you set. That way, you don't move the element while expanding it.
HTML
<div class="dashboard_welcome_help">
<a class="admin_popup" href="javascript:void(0)">Click Here</a>
<div class="admin_help_popup light_admin">
<a class="close_admin_popup" href="javascript:void(0)">Close</a>
<div class="wrapper">
<div id="indexpopupTitleWrap">
<div id="indexpopupTitle">Have Questions?</div>
</div>
<div id="contactMessageStatus"></div>
<form id="admin_help_form" name="admin_help" action="" method="POST" autocomplete="on">
<div id="admin_help_form_wrap">
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbaremail" name="email" placeholder="Email" required>
<textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Send Message" id="admin_submit">
</label>
</div>
</form>
</div>
</div>
<div class="white_overlay"></div>
</div>
JQuery
$(document).ready(function () {
$(".light_admin,.white_overlay").fadeIn("slow",function(){
$(".light_admin").animate({paddingBottom:'50px',paddingTop:'50px',marginTop:'-50px'},170);
});
});
$('.admin_popup').on('click', function () {
$(".light_admin,.white_overlay").fadeIn("slow",function(){
$(".light_admin").animate({paddingBottom:'50px',paddingTop:'50px',marginTop:'-50px'},170);
});
});
$('.close_admin_popup').on('click', function () {
$(".light_admin,.white_overlay").fadeOut("slow",function(){
$(".light_admin").animate({paddingBottom:'0px',paddingTop:'0px',marginTop:'0px'},170);
});
});
Fiddle
Take a note as to the marginTop values. If you change the paddingTop, you have to make the marginTop the negative of the value that you change to.
I've built a simple chat application with message rating functionality. I want to prevent self-ratings by hiding the corresponding rating buttons. So on Bob's screen for example there should be no rating buttons next to Bob's messages.
I've tried to realize that by comparing the #name and #user-name. If they are equal, the rating buttons should be hidden. But it looks like I'm doing that not correctly.
That main problem is that a message div .standard-msg is created dynamically so I need something like "on-dom-change".
Every help appriciated.
$("#standard-msg").on("DOMSubtreeModified", function() {
$('.standard-msg').each(function() {
if ($('#name').val() == $(this).find('#user-name').text()) {
$('button').hide();
}
});
});
<div id="chat-wrapper" class="wrapper">
<div class="message-box" id="message-box">
<div class="standard-msg">
<button class="rating like-btn">Like</button>
<button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Bob</span> : <span class="user-message">hi</span>
</div>
<div class="standard-msg">
<button class="rating like-btn">Like</button>
<button class="rating dislike-btn">Dislike</button><span style="color:#FF7000" class="user-name">Alice</span> : <span class="user-message">hello</span>
</div>
</div>
<div class="panel">
<input type="text" name="name" id="name" placeholder="Your Name" maxlength="10" />
<input type="text" name="message" id="message" placeholder="Message" maxlength="80" />
<button id="send-btn" class="btn">Send</button>
</div>
</div>
If the buttons were added to the page after the page has loaded then they won't respond to any code (in the page before they were created) that references them. This is because new event listeners are added for the buttons when they are created and somehow they don't pickup on any code older than they are.
To get around this quirk, just add the code dynamically as you add the buttons to the page and it should work.
e.g.
var s = "$('#standard-msg').on('DOMSubtreeModified', function() { $('.standard-msg').each(function() { if ($('#name').val() == $(this).find('#user-name').text()) { $('button').hide(); } }); }); ";
then append to the page,
$("body").append(s);
I have a add/remove textfield feature wherein I want to implement a jQuery function to all the textfields in a div.
Can I use the same jQuery function for all the fields in the div or should I write different for each.
DEMO can be got here. In the demo I have made it work for one input field, how can I make it work for the rest.
HTML
<div id="single">
<div id="Ivrgroupzbase_grpzWelcomeNotes" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
<div id="p_scents" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
</div>
fiddle http://jsfiddle.net/Drea/28h0L6eb/
html
changed id "addScnt" to class - you should avoid using same id multiple times
js
$('.addScnt').on('click', function (event) {
event.preventDefault();
$(this).closest('.row').append(createInput($('#Ivrgroupzbase_grpzWelcomeNotes p').length + 1), '');
});