Develop Reference

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/

How to get popup to expand vertically up and down

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.

prevent redirect to php file after form submit

After researching this for too many hours I finally decided to post the question myself, as what is working for others, doesn't seem to work for me. Please keep in mind that I am fairly new to ajax and jquery, but as I am on a deadline with my current project I wont have time to go through it all.
I have the following html form:
<div class="form">
<form id="savePlacemarkForm" method="post" action="createPlacemark.php">
<div>
<input type="text" id="placemarkName" name="placemarkName" placeholder="Name:"/>
</div>
<div>
<input type="text" id="placemarkAddress" name="placemarkAddress" placeholder="Adress:"/>
</div>
<div>
<input type="text" id="placemarkTag" name="placemarkTag" placeholder="Tags:"/>
</div>
<div>
<textarea id="placemarkDescription" name="placemarkDescription" placeholder="Description" rows="1" cols="1"></textarea>
</div>
<div>
<input id="latitude" type="text" name="latitude"/>
</div>
<div>
<input id="longtitude" type="text" name="longtitude"/>
</div>
<button class="md-close" id="savePlacemark" onclick="createPlacemark();"/>Save</button>
</form>
<button class="md-close">Cancel</button>
<script src="my_script.js" type="text/javascript"></script>
</div>
As you see I have the action set to createPlacemark.php which takes input from these fields and saves it to my DB, which works fine!! However since this should work without redirecting or resubmitting the page, meaning ajax! I include my_script.js which looks like this:
$("#savePlacemark").click( function() {
$.post( $("#savePlacemarkForm").attr("action"),
$("#savePlacemarkForm :input").serializeArray();
});
clearInput();
});
$("#savePlacemarkForm").submit( function() {
return false;
});
function clearInput() {
$("#savePlacemarkForm :input").each( function() {
$(this).val('');
});
}
As you see it does the post for me, which works, but for some reason the return false; doesnt seem to work for me, as I am continuously redirected to the before mentioned php file.
Any help would be greatly appreciated! thx!

Try the following. The .submit() function actually triggers a submit for the form. Take this out of the script since you don't need it when you've already posted the values with $.post.
$("#savePlacemark").click( function() {
$.post( $("#savePlacemarkForm").attr("action"),
$("#savePlacemarkForm :input").serializeArray();
});
clearInput();
});
function clearInput() {
$("#savePlacemarkForm :input").each( function() {
$(this).val('');
});
}

try this
<button onclick="return createPlacemark();">Save</button>
it may help you.

E-mail form interactivity

I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->

This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->

There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.