I have made a JavaScript translation of some text that occurs live rather than on server side, but it blinks when it replaces and thus is not user friendly. Is there anything I could do about it? I made
this jsfiddle
and here is the summary of the code:
// bind the animation so I can catch a node inserted and then
if(event.animationName == "nodeInserted")
{
if ($(event.target).hasClass('translate'))
{
$(event.target).text(Translate($(event.target).attr('translate')));
}
}
// where function Translate() replaces the text
However it blinks when it replaces and I am out of ideas how this can be more eye friendly. I hope the example is simplistic enough to picture my problem.
Based on your fiddle, I can give few remarks. First, your animation is way to short (0.001s) which probably could be a reason why it blinks (animation happens too fast).
Also, your fade starts at 50%, instead of 0%.
Maybe I am wrong about all this, and I did not understand your question, but I have provided and edited fiddle so you can see for yourself what am I referring to. It is nice fading in this way:
http://jsfiddle.net/TMGLX/9/
Related
I am trying to make an animated leaderboard using move.js (). There are four sections, and when loaded it should hide the people who are not in first place, do a bit of an animation of the first place people and then fade in the other users.
I have fiddled it up: https://jsfiddle.net/muwc4enz/
and the JS:
$(document).ready(function() {
// on load, animate it...
// set opacity to 0
$('[data-position!="0"]').css({'opacity':'0'});
$('[data-position!="0"]').addClass("fadein");
// now display the first place people..
$('.leader_section_1st').each(function(i, obj) {
// now animate...
move(obj).scale(3.0).duration(500).end(function() {
move(obj).scale(1.0).duration(500).end(function() {
// and load the rest of the section...
$('[data-sectionid="'+i+'"]').css({'opacity':'100'});
});
});
});
});
As you can see, I dont get the animations at all, but I do get the fade. After the fade IN, it goes back to 0 opacity again. I am unsure of why this might be the case and have checked it isnt rerunning the document load function, it isnt.
Without the funky opacity stuff the animation does at least work on THREE of the people at the top of the leader boards, but here is the other problem: The user at the very top, named FAILURE in the fiddle, only animates half correctly... as if it got halfway through the animation and got stuck.
As an extra piece of info, the content is loaded dynamically via a php script.
I suspect its an issue with the timing of when things run, as everything seems to run and I don't get errors (I was worried about the syntax relating to the data variables). I was wondering if anybody could see any reason from the code why it would not do what I expect... which was to reiterate:
Make everything except the top people in each category invisible.
Make those top students really big (scale 3) and then quickly small again ( to scale 1)
When the top students become small again the rest of the students should fade in, and stay faded in.
Thanks.
Alex
I have a working JSFiddle where I'd like to be able to change how "filled" the progress bar is depending on the button clicked. When I click said buttons, nothing is happening.
I (previously) added in alerts/logs to make sure that I had the click functionality correct and due to those alerts/logs working once a button was clicked, I'm lead to believe that I just have something wrong in the way I am trying to move the progress bar.
$('.quarter').click(function(){
$(this).parent().prev().children('span').css('width','25%');
});
$('.half').click(function(){
$(this).parent().prev().children('span').css('width','50%');
});
$('.three-quarters').click(function(){
$(this).parent().prev().children('span').css('width','75%');
});
$('.full').click(function(){
$(this).parent().prev().children('span').css('width','100%');
});
$(this) is probably not returning what you think it is. Consider that $(this) relates to the container that the code itself is in; ponder on that for a while and make a comment if you need me to elaborate.
David784 has a great solution for your code as is. Alternatively, consider giving the span that is the moving part of your progress bar some identifier. As an example, while the following will work for changing your progress bar to 100%,
$('span').css('width', '100%');
you'll be changing every span in your code if you have them.
Change
$(this).parent().prev().children('span')
to
$('.progress-bar > span')
With jquery, using these .parent().prev().etc chains will never end well. It's too easy to break by making small changes to your DOM.
fiddle
Your paragraph holding the links was closed, but not opened:
<p> <!-- Here -->
25%
50%
75%
100%
</p>
Fixed JSFiddle: https://jsfiddle.net/j6jxpLwx/
I am trying to use CSS animations on an element with a focused input box. My use case is a popup box with two or more pages. The "pages" are a single container that slides left/right using CSS transitions.
Everything was great until I wanted to have an input field on page 2 be focused upon navigating to that page. The entire CSS animation gets screwed up. I could try a timeout for the jQuery focus() function I'm using to focus the input box, but I don't like mixing timeouts with CSS transition times (and am guessing that isn't the proper thing to do).
I've seen this behavior in the latest Chrome/Firefox/IE, and have replicated it in this fiddle:
http://jsfiddle.net/bmh5g/40/
If you comment the noted focus() line out of it, you can see the intended animation
The relevant code here is just:
Javascript:
$('#next').on({
click: function(){
//comment the following line out to see proper animation:
$('#the-input').focus();
$('.content').addClass('page2');
}
});
CSS:
.page2 {
left: -100%;
}
I have also tried (and, on my actual project, am now) using a translateX transformation for the CSS animation. Exact same issue.
I don't think I'll find a fix to make the input actually properly animate, but I can't think of any potential workarounds for focusing after the animation. I appreciate any help with this one! Thanks in advance.
Take a look here:
DEMO
You will have to use a CSS transition end event binder here, which will do the job.
$('#next').on({
click: function(){
$('.content').addClass('page2');
}
});
$(".content").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
if($(this).hasClass("page2"))
$('#the-input').focus();
});
I have a website that I am developing and I have multiple Divs on the main page. I have a div on the right side of the page labeled right_bar2 and I want it to change every 5-10 seconds. The entire div will just be an image that is a link. Basically I assumed the easiest way to do this would be to have a div with a bunch of hidden div's in it and then maybe some javascript that unhides one div at a time and then hides it again and unhides another. However I am unsure the best way to do it. I have looked at a bunch of example and can't get it to work 100% correctly.
Thanks for any advice ;)
JsFiddle examples would be great!
I tried something like this http://jsfiddle.net/VENLh/4/ but in my rails environment/setup, it breaks multiple things, so I'd like something cleaner and easier.
I cleaned it up a bit in this fiddle, but if you said the original breaks multiple things in your original environment, this might not fix them. What specifically did it break?
What I cleaned up was to avoid the need to keep a manual count of the DIVs for the JS or to worry about their IDs. The code is pretty simple:
$(function() {
var $divs = $('div', '#container'),
total = $divs.length,
counter = 0,
showDiv = function() {
$divs.stop().hide();
$($divs[counter]).show('fast');
counter = (conter + 1) % total;
setTimeout(showDiv, 3000);
};
$divs.hide();
showDiv();
});
I didn't perform one optimization that should probably be done. You probably should cache the results of the jQuery selectors on each DIV. It would be easy to do with a jQuery map statement, but I didn't want to muddy the waters here.
The only problem I can see in this case is if you are going to use heavy image, it may take some time to load. As the image will start getting loaded when you show it first time. So for this I would say you should keep the opacity 0 and load the image at the time of pageload.
And also to remove the delay you are having where one div is getting hidden and other is getting visible can be removed by using opacity. reduce opacity of one from 100 to 0% and for other increase from 0 to 100%.
I have a form which is a simple CRUD.
I am trying to display a cool looking success message when user enters or deletes a record. I've seen this a lot around the web.
I am very new to jquery. does anyone know any examples that would show how to do this?
Basically a div that would slowly dim out.
Your question is a little vague as a "cool looking success message" is not much to go with.
If you are interested, however, through answering questions here I have replicated the functionality of two of Stackoverflow's "notification" features that people seem to enjoy: the banner at the top of the page that comes up when you get a new badge, etc. and the red boxes around the site whenever something goes wrong with an action. I've used techniques similar to these to show success messages in my applications and my clients have loved them.
To show the top banners - demo
To show the red boxes - demo
The examples are very simple, as all it is doing is showing a DIV somewhere in the document and fading it in and out depending on the situation. That's all you really need to get started.
In addition to this, if you are a Mac fan (and even if you're not) there is the jQuery Growl plugin which is based on the OS X notification system. I am also a big fan of using the BeautyTips plugin to show messages near an element, as the bubbles are very nice and easy to style.
I really like jGrowl. It's very unobtrusive as the messages appear in the left corner and the user can continue to do whatever he's doing, but he does get feedback from the system. And it also looks very fancy :).
Just throw in a new absolutely positioned div and use the fadeOut-function to animate it's opacity with a slow animation.
Something like this:
var newDiv = $('div').css({position: 'absolute', left: '100px', top: '100px'}).text('SUCCESS!!!').appendTo($('body'));
newDiv.fadeOut(5000);
This should work:
function showSnazzySuccessMessage(text)
{
if($("#successMessage").length < 1)
{
//If the message div doesn't exist, create it
$("body").append("<div id='successMessage' style='text-align:center;vertical-align:middle;width:400px;position:absolute;top:200px;left:300px;border:2px solid black;background:green;margin:20px;display:none'>" + text + "</div>");
}
else
{
//Else, update the text
$("#successMessage").html(text);
}
//Fade message in
$("#successMessage").show('slow');
//Fade message out in 5 seconds
setTimeout('$("#successMessage").hide("slow")',5000);
}
You'll have to play with the style to get it to look the way you want, but you get the idea.
Perhaps you're looking for something like this or a straight fade like this. There are a few effects to choose from.