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

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

Related

JavaScript change value and data from value in a span

I need help with this. I need to make the value in the other place change all the time while user session is active. How can I get the value from a span and make other value in a data change?
Look at there!
1 <div class="pt-uea-container">
2 <span class="pt-uea-currency pt-uea-currency-before"> € </span>
3 <input type="text" class="pt-field pt-uea-custom-amount" autocomplete="off" name="pt_items[1][amount]" id="pt_uea_custom_amount_1" value="199" placeholder="" data-parsley-errors-container="#pt_uea_custom_amount_errors_1">
4 <input type="hidden" class="pt-field pt-uea-custom-amount-formatted" name="pt_items[1][amount]" value="199" data-pt-price="199">
5 <input type="hidden" name="pt_items[1][label]" value="Amount:">
6 <input type="hidden" name="pt_items[1][tax_percentage]" value="0">
7 <input type="hidden" name="pt_items[1][type]" value="open">
8 <div id="pt_uea_custom_amount_errors_1"></div>
9 <span class="form-price-value">85</span>
10 </div>
The value in row 9 needs to constantly change values in row 3 and 4 on the same session. Don't mind the value in row 6.
Let me know how I can get this done. Or maybe a different approach?
Greetings!
========
So this is what I got for now from you guys:
jQuery(document).ready(function($) {
var checkViewport = setInterval(function() {
var spanVal = $('.form-price-value').text();
$('#pt_uea_custom_amount_1').val(spanVal);
$('#pt_uea_custom_amount_formatted_1').val(spanVal);
$('#pt_uea_custom_amount_formatted_1').attr('data-pt-price', spanVal);
}, 1000);
});
This code works, but it only affects my needs when I put my mouse in pt-field pt-uea-custom-amount and add a space in it. Then it does apply to the page source. But this is not correct. The source needs to get changed too without touching that class or a space or something!
You can easily do this with the help of jQuery.
With the help of jQuery I would do like this.
Understanding what input field needs to be tracked for changes. I will give all this field a class (track-me).
In the document ready, I will look for changes for that tracked field.
On change of that field I will get the value and put in other input fields (class copy-to - or you can do whatever you like).
See an example below,
HTML
<form>
<div class="">
<input type="text" class="track-me" value=""/>
</div>
<div class="">
<input type="text" class="copy-to" value=""/>
</div>
<div class="">
<input type="text" class="copy-to" value=""/>
</div>
<div class="">
<input type="text" class="copy-to" value=""/>
</div>
<div class="">
<div class="">Please type anything in the first input box</div>
</div>
</form>
jQuery
$(document).ready(function(){
$('.track-me').change(function (){
$('.copy-to').val($(this).val())
});
});
I made comments in the above jQuery code so you can understand. Also, I have made a fiddle so you can play and have a look. In this fiddle, I am using Bootstrap4 just for the purpose of styling, you don't have to worry about that.
Link to fiddle
https://jsfiddle.net/anjanasilva/r21u4fmh/21/
I hope this helps. Feel free to ask me any questions if you have. Cheers.
This is not an ideal solution. I'm not sure there is a verified way of listening for when the innerHTML of a span element changes. This sort of stuff is usually based on user interaction, and the value of the span will be modified by your page. The best solution would be to use the same method that updates the span element to update the values of you hidden input fields.
However, I've placed an interval that will run every second, that takes the text value of the span element and gives it to the values of the 2 input fields:
function start() {
setInterval(function() {
document.getElementById("pt_uea_custom_amount_1").value = document.getElementById("price_value").innerHTML;
document.getElementById("pt_uea_custom_amount_2").value = document.getElementById("price_value").innerHTML;
}, 1000);
}
window.onload = start();
<div class="pt-uea-container">
<span class="pt-uea-currency pt-uea-currency-before"> € </span>
<input type="text" class="pt-field pt-uea-custom-amount" autocomplete="off" name="pt_items[1][amount]" id="pt_uea_custom_amount_1" value="199" placeholder="" data-parsley-errors-container="#pt_uea_custom_amount_errors_1">
<input type="hidden" class="pt-field pt-uea-custom-amount-formatted" name="pt_items[1][amount]" value="199" data-pt-price="199" id="pt_uea_custom_amount_2">
<input type="hidden" name="pt_items[1][label]" value="Amount:">
<input type="hidden" name="pt_items[1][tax_percentage]" value="0">
<input type="hidden" name="pt_items[1][type]" value="open">
<div id="pt_uea_custom_amount_errors_1"></div>
<span id="price_value" class="form-price-value">85</span>
</div>
MutationObserver should work here..
const formValuePrice = document.querySelector( '.form-price-value' );
const inputText = document.querySelector( 'input[type="text"]' );
// timer to change values
window.setInterval( () => {
formValuePrice.textContent = Math.round( Math.random() * 100 );
}, 1000 );
// mutation observer
const observer = new MutationObserver( ( mutationsList ) => {
inputText.value = formValuePrice.textContent;
} );
observer.observe( formValuePrice, { childList: true } );
https://codepen.io/anon/pen/LgWXrz?editors=1111
try this, simple using jquery, you can check in inspect element for value attribute data-pt-price
Update: you can using jquery event .on() like change, click, keyup or else to Attach an event handler function for one or more events to the selected elements,
you can read the doc here.
here the updated code
$(function() {
var spanVal = $('#price_value').text();
$('#pt_uea_custom_amount_1').val(spanVal);
$('#pt_uea_custom_amount_formatted_1').val(spanVal);
$('#pt_uea_custom_amount_formatted_1').attr('data-pt-price', spanVal);
$('#pt_uea_custom_amount_1').on('change click keyup', function() {
$('#pt_uea_custom_amount_formatted_1').val($(this).val());
$('#price_value').text($(this).val());
$('#pt_uea_custom_amount_formatted_1').attr('data-pt-price', $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pt-uea-container">
<span class="pt-uea-currency pt-uea-currency-before"> € </span>
<input type="text" class="pt-field pt-uea-custom-amount" autocomplete="off" name="pt_items[1][amount]" id="pt_uea_custom_amount_1" value="199" placeholder="" data-parsley-errors-container="#pt_uea_custom_amount_errors_1">
<input type="hidden" class="pt-field pt-uea-custom-amount-formatted" name="pt_items[1][amount]" value="199" data-pt-price="199" id="pt_uea_custom_amount_2">
<input type="hidden" name="pt_items[1][label]" value="Amount:">
<input type="hidden" name="pt_items[1][tax_percentage]" value="0">
<input type="hidden" name="pt_items[1][type]" value="open">
<div id="pt_uea_custom_amount_errors_1"></div>
<span id="price_value" class="form-price-value">85</span>
</div>

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.

jQuery - issue with appendTo()

I have a problem with the appendTo function.
I am currently working on a responsive design.
If the window is smaller than a certain size, login and search are appended to another div.
If it gets bigger again, they will be moved to where they come from, theoretically.
And what happens instead? With ".login", it works perfectly. But the ".search" is f*cking things up. Everytime you resize the window, instead of being appended TO, it just get appended, so resize the window with 100px and you will have a 2^100 of those ".search"-forms.
Funny thing is, they are all the same.
HTML
...
<div class="wrap1">
<div class="login">
<form method="post" action="#">
<input type="text" name="user" placeholder="Username"/>
<input type="text" name="pass" placeholder="Password"/>
<input type="submit" value="Submit"/>
</form>
</div>
</div>
<div class="wrap2">
<div class="search">
<form method="get" action="#">
<input type="text" name="search" placeholder="Search"/>
<input type="submit" value="Search"/>
</form>
</div>
</div>
<div class="wrap3">
</div>
...
JavaScript / jQuery
$(document).ready(function(){
$(window).resize(function(){
if ($(window).width() < 461) {
$(".login, .search").prependTo($(".wrap3"));
} else {
$(".login").appendTo(".wrap1");
$(".search").appendTo(".wrap2");
}
})
})
Any ideas?
I'd be happy with jQ but pure JS answers are also welcome.
I hope below answer will help you.
function searchPos(){
if ($(window).width() < 461) {
$(".wrap1 .login, .wrap2 .search").prependTo($(".wrap3"));
} else {
$(".wrap3 .login").appendTo(".wrap1");
$(".wrap3 .search").appendTo(".wrap2");
}
}
searchPos();
$(window).resize(function(){
searchPos();
});
See Demo
Found it!
#nnnnnn was actually right:
There were multiple wraps. My JS is actually $(".login").appendTo(".wrap1 .centerwrap")
(it's still called wrap1 for comprehension)
So there wouldn't be any problems, but I forgot that there were multiple nested (bc of pos:abs navigation) centerwraps in .wrap2. That's why the .wrap1 .login worked perfectly but the .wrap2 .search didn't.
Solved it with
$(".login").appendTo(".wrap1 > .centerwrap");
$(".search").appendTo(".wrap2 > .centerwrap");
And yes, I feel dumb. Have been looking for the answer for 2 days now.

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.

Categories

Resources