How to get popup to expand vertically up and down - javascript

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.

Related

Add Class on Scroll Issue with Vanilla JS

I am coding a new site for a client and I want to add a class to a div element once the user reaches 100vh. I have given the body an id of "myBody" and the div element that I want to add the class to an id of "quoteForm" and a class of "quote-form" Here is the html of the page...
<body id="myBody">
<div id="quoteForm" class="quote-form">
<div id="quoteFormHead"></div>
<form action="<?php the_permalink(); ?>" method="post">
<div id="quoteFormBody">
<div class="formfullwrapper">
<input type="text" name="message_fname" placeholder="Enter your full name here...">
</div>
<div class="formfullwrapper">
<input type="email" name="message_email" placeholder="Enter your email address here...">
</div>
<div class="formfullwrapper">
<input type="number" name="message_phone" placeholder="Enter your phone number here...">
</div>
<div class="formfullwrapper">
<textarea name="message_msg" placeholder="Details, please! Audience? Word count? Type of document? Tone? Deadlines? Sensitive content?"></textarea>
</div>
</div>
<div id="quoteFormFooter">
<div class="formfullwrapper">
<input type="submit" id="submitform" value="Get my free quote">
</div>
</div>
</form>
</div>
</body>
as you can see its quite a simple form. Below if the javascript logic I have used to add the class name...
document.addEventListener("DOMContentLoaded", function(){
var scrollElement = document.getElementById('myBody');
var scrollElementPos = scrollElement.scrollTop;
var form = document.getElementById('quoteForm');
scrollElement.addEventListener('scroll', function(){
scrollElementPos = scrollElement.scrollTop;
if(scrollElementPos >= 10){
form.classList.add("form-fixed");
} else {
form.classList.remove("form-fixed");
}
console.log(scrollElementPos);
});
});
At present nothing is happening and the class name is not being added to the quote form. Any ideas? Many thanks,
Phillip Dews
Yep its the scroll "On" Window. This is what I came up with and it works a dream...
window.onscroll = function(){
var top = window.pageYOffset || document.documentElement.scrollTop;
var form = document.getElementById('quoteForm');
if (top > 1000) {
form.classList.add("form-fixed");
} else {
form.classList.remove("form-fixed");
}
}

How not to lose Div focus when inside button is clicked

Below is my HTML and js code, i want when write_post_text (id) get focus then write_post_upload (id) div should show and when write_post_container (id ) div lose the foucus then it should get hide, actually its working fine but the problem is. when user click the upload_post_img (id) button then it lose focus and the write_post_upload got hide with slideUp function but when. I want to keep the focus even when this button is clicked.
<div class="upload_post" id="write_post_container" tabindex='-1'>
<form method="post">
<div class="upload_div">
<textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
<input type="hidden" name="post_img">
<ul>
<li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
</ul>
<input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" />
<div class="post">
<button>Post</button>
</div>
</div>
</form>
Here is my JS code :
<script type="text/javascript">
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
$("#write_post_upload").slideUp();
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
</script>
you can create a variable and change it whenever Choose file is clicked
like this
don't forget to reset it
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
var blur = false;
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
if(!blur){
$("#write_post_upload").slideUp();
}
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
$("#bTimelineFile").click(function () {
blur = true;
});

jQuery .focus() not working in Safari (desktop) on search field

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);
});

show and hide div Android style

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/

jQuery/JS - Hiding specific dynamically created elements/buttons

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);

Categories

Resources