I have a mobile app with a search bar and these functions:
$(".dk").hide(0);
$("#fus").click(function () {
$(".dk").fadeOut(100);
$("#sim").removeAttr("autofocus")
});
$("#ys").click(function (e) {
$("#s,#u,#n,#l,#a,#m,.dk").hide(100);
$("#re,#r").animate({"margin-left": "0px"}, 200);
$("#s,#u,#n").animate({ "margin-left": "2px"}, 200);
$("#sim").delay(300).attr({"autofocus": "autofocus"});
$(".dk").fadeIn(100);
e.stopPropagation();
});
})
HTML
<div style="padding-top:10px;" id="toolbar">
<div class="tbar">
<img style="height:30px;" src="img/cles.png" />
<div class="ha">
<img id='ys' style=" height:27px" src="img/searchico.png" />
</div>
</div>
</div>
<div class='dk'>
<form id="hif">
<input id='sim' type="search">
<img style="position:absolute;height:26px;margin-left:-270px;margin-top:20px;" src="img/searchicog.png">
</form>
</div>
I am trying to fade in and out the div .dk (aka the search box). #Ys is the search icon, #sim is the input field, and #fus is the place to click (or tap) to trigger the fadeOut func.
Unfortunately it only autofocuses once. It also it messes up the fadeIn when it does work. After, I have to refresh the page for it to autofocus again.
This YouTube video shows what I want to accomplish: https://www.youtube.com/watch?v=T5n3m2LRy5Y
Setting the autofocus attribute does not cause the focus to change. Instead, you should use the .focus() method.
$(".dk").hide(0);
$("#fus").click(function () {
$(".dk").fadeOut(100);
$("#sim").removeAttr("autofocus")
});
$("#ys").click(function (e) {
$("#s,#u,#n,#l,#a,#m,.dk").hide(100);
$("#re,#r").animate({"margin-left": "0px"}, 200);
$("#s,#u,#n").animate({ "margin-left": "2px"}, 200);
$("#sim").delay(300).focus();
$(".dk").fadeIn(100);
e.stopPropagation();
});
})
Additionally, .delay does not delay non-animations, so to delay the focus, you'll need to use setTimeout.
setTimeout(function(){
$("#sim").focus()
},300)
Related
I am working on angular program in which I have an image which I am animating by using jQuery .animate() property.Its working fine but the issue occur when I change the state using ui-router in middle of the animation.
It result in abrupt behaviour like even its url changes but the animation process still persist.I have tried .stop() , .clearQueue() and even .finish() property to end the animation before switching but nothing help me at all.
app.controller('appCtrl',function () {
setTimeout(function () {
$('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000);
},1000);
setTimeout(function () {
$('#character').animate({marginTop:"A2px",marginLeft:"B2px"},1000);
},3000);
setTimeout(function () {
$('#character').animate({marginTop:"A3px",marginLeft:"B3px"},1000);
},5000);
setTimeout(function () {
$('#character').animate({marginTop:"A4px",marginLeft:"B4px"},1000);
},7000);
setTimeout(function () {
$('#character').animate({marginTop:"A5px",marginLeft:"B5px"},1000);
},9000);
});
<div class="">
<div class="">
<img src="character.png" id="character" alt="" />
</div>
<div class="">
<input type="button" name="name" value="BACK" ui-sref="backpage">
<input type="button" name="name" value="NEXT" ui-sref="nextpage">
</div>
</div>
Here is updated plunker.
Use $timeout and on controller destroy remove the timeout .
$scope.$on('$destroy', function() {
$timeout.cancel(timer);
});
Better practice do never merge jQuery with Angular.
Use ngAnimate instead of jQuery's .animate() property.
Check here for illustrations and examples.
For the above. try this
angular.element(document.querySelector(#character)).animate({marginTop:"A1px",marginLeft:"B1px"},1000);
instead of
$('#character').animate({marginTop:"A1px",marginLeft:"B1px"},1000);
How can I make this scroll left or right using navigation button?
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
JS
$("#slider-left").click(function(){
alert("< clicked.");
});
$("#slider-right").click(function(e){
alert("> clicked.");
$('.slide-wrap').scrollLeft(5000);
});
Fiddle
You are selecting the wrong <div>. Note the selector: $('.slider-wrap') (not .slide-wrap).
$("#slider-left").click(function () {
$('.slider-wrap').animate({
scrollLeft: 0
}, 200);
});
I have used .animate because you get visual feedback about what's happening (so I think using animate is better for UX). This would work equally well with .scrollLeft() though:
$("#slider-left").click(function () {
$('.slider-wrap').scrollLeft(0);
});
See it working in a fiddle
I have an element (#cols) that's 3x wider than the <body>. It has 3 columns, each of which is exactly as wide as <body>. Clicking a button slides the #cols element over by the width of one column and simultaneously focuses the <input> in the column that's sliding into view:
http://jsbin.com/puhurakewa/1/edit?html,css,js,output
The problem, as you can see from the demo, is that focusing the input causes weird behavior. I believe the browser says,
"Crap, the user focused an input that's off-screen. I need to show it!"
and then magically scrolls the input into view. This breaks the transition.
Is there a way to disable this behavior? It's extremely undesirable. I've noticed it in Chrome, Safari, and Firefox on my Mac.
EDIT: Thank you for the answers so far. I should have been more specific with my question. I'm aware that I can "work around" this issue by waiting for the animation to end, but what I'm curious about is how to work through this issue and focus the input immediately. It's a better experience, because users can begin typing before the transition is over.
Add the focus event after transition ends
$('#cols').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
$input.focus();
});
JSbin Demo
Since you already using Jquery might as well leverage the animate method, then on the complete function you focus the input, for more info check out the docs
Heres the JS (this works perfectly, but spend some time neatening it up/refactoring if you wish):
$(document).ready(function () {
$('button').on('click', function () {
var colId = $('.showing').attr('id');
if(colId == "col-1"){
$('#cols').animate({
right: '200px'
}, 1000, "swing", function(){
$("#col-2").find('input').focus();
$('#col-1').removeClass('showing');
$('#col-2').addClass('showing');
});
}
else if(colId == "col-2"){
$('#cols').animate({
right: '400px'
}, 1000, "swing", function(){
$("#col-3").find('input').focus();
$('#col-2').removeClass('showing');
$('#col-3').addClass('showing');
});
}
else if(colId == "col-3"){
$('#cols').animate({
right: '0px'
}, 1000, "swing", function(){
$("#col-1").find('input').focus();
$('#col-3').removeClass('showing');
$('#col-1').addClass('showing');
});
}
});
});
Then change your CSS to position relative like so:
#cols {
height: 100%;
transition: transform 400ms;
white-space: nowrap;
width: 600px;
position:relative;
}
HTML (just add 'showing' class to first col):
<body>
<button>Shift Cols & Focus Input</button>
<div id="cols" col-to-show="1" >
<div class="col showing" id="col-1">
<input type="text" value="1" />
</div>
<div class="col" id="col-2">
<input type="text" value="2" />
</div>
<div class="col" id="col-3">
<input type="text" value="3" />
</div>
</div>
</body>
Here's a fiddle
magically scrolls the input into view
This is the key. Just change scrollLeft of the container to 0 after focusing. I had to put a wrapper around it though.
http://jsbin.com/danarucama/1/edit?html,css,js,output
I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page. The Iframe takes a while to load.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
This is the Hide/Show script
$(function () {
$('#form_710370').submit(function (e) {
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
This is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
This is the relevant CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}
Detect your iFrame has loaded :
$('#YourIframe').load(function(){
});
On your form submitted :
$("#form_710370").on('ajax:complete',function(){
});
Put your hide and show code inside iframe load() function.
$('#frame').load(function(){
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
});
Try this
timeout = setTimeout(function () {
$('#form_container').hide();
}, 6000);
// delay
setTimeout(function () {
// after delay
$('#form_container').animate({
'height': '0px'
}, '400', 'swing', function () {
// finish animate fadeIn
$('#mydivhide1, #mydivhide2').fadeIn('400');
});
}, '700');
Hope is help
I am trying to get some text to fade in after some images move once you reach a certain point on the page. It works fine if I am already down the page and I refresh, but when I scroll from the top to the area it does the correct animation but then the text starts to flash over and over again. Is there any way to stop this?
Here is the javascript
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 1350) {
$('#managecontent1').animate({bottom: '0px'},900);
$('#managecontent2').animate({bottom: '0px'},900,function(){
$('#twocolumntextcontainer').css("visibility","visible").hide().fadeIn('slow');
});
}
});
});
and here is the HTML
<div id="twocolumntextcontainer">
<div id="twocolumntextleft">
<p>C.M.S. <span>Wordpress</span></p>
</div>
<div id="twocolumntextright">
<p>F.T.P. <span>FileZilla</span></p>
</div>
</div>
<div class="twocolumnlayout">
<div id="managecontent1">
<img src="img/wordpresslogo_203x203.png" />
</div>
<div id="managecontent2">
<img src="img/filezillaicon_210x208.png" />
</div>
</div>
You have set conditions that will cause this.
If you take a look, you are triggering the animation every time the window scrolls and the scrollTop value is greater than 1350px. If you continue to scroll at all beyond this point, the animation will continually trigger.
You will likely want to unbind the eventListener as soon as your condition is met (assuming you don't want the animation to happen again until the page is refreshed).
Add this within your if statement:
$(this).unbind('scroll');
That will unbind the scroll listener entirely from the window once your condition is met once.
Can you try following
$(document).ready(function () {
$(window).scroll(function () {
$('#twocolumntextcontainer').fadeOut("slow");
if ($(this).scrollTop() > 1350) {
$('#managecontent1').animate({ bottom: '0px' }, 900);
$('#managecontent2').animate({ bottom: '0px' }, 900, function () {
$('#twocolumntextcontainer').fadeIn('slow');
});
}
});
});