I've got a page with ajax links between pages, and I'm having some problems with the transition. I set up a demo page on jsfiddle to demonstrate.
http://jsfiddle.net/UVr4A/
The problem is, when the content changes height, the div will end up in the wrong position and cause a non-smooth transition. I tried a couple things to try and fix this. My current solution is to remove the animate property from the div and then move it, but this doesn't always work. In my code I commented the delay to demonstrate the issue. Even with a 50ms delay it doesn't ways work properly (I think it's due to browser lag since it barely ever happens on this jsfiddle), so I'm looking for more elegant solution that doesn't cause the transition to take any longer.
I'm using css3 transitions rather than jquery because they tend to be much smoother.
I think the issue was the css transition. Check this out:
http://jsfiddle.net/UVr4A/2/
Well, it turns out the problem had nothing to do with what I thought it was.
Part of it was that I over-simplified my question and ended up removing the problem.
On my long page there are images that end up loading mid-transition, which is what was causing the jumping. I fixed this with an onload events and a timeout.
Related
I would like to set up animations of appearance once the page loaded. The problem is that before the CSS is loaded the elements arrive suddenly, and finally, once I have all that is loaded I have my animation that starts. It's not very cool visually.
The solution that I came up with defaults opacity on the container! Not sure, The problem is that if the browser does not support animations, the user will see the site with an opacity of 0. In other words, he will not see anything.
So are there ways to do it?
PS: I tried a lot of searches on Google without ever finding the answer to my question, maybe I have not used the right terms.
Keeping browser compatibility in mind is very important. However, your desired result can be achieved with CSS Animations and little stress: https://caniuse.com/#feat=css-animation.
If you provide some HTML and CSS a more specific answer could be provided. But, I would recommend defining keyframes for each element you want to animate (several could use the same one if desired) and use this for a one time animation at site load. No JS necessary.
So I have this issue with something like old deprecated <marquee>. Here's fiddle: https://jsfiddle.net/qbqz0kay/1/
It's one (and simpliest) of hundreds of attempts. I can't resolve main issues:
how to remove the gap between end and (new) beginning of the list (it should be like one infinitely scrolling sentence). I've tried with removing first li elements and adding them to the end but it affected overall dimensions of the list and in consequence - the animation was disrupted.
part of the list will be changing once in a while (site is connected to websocket) and every change in its content affect dimensions of the list also. So again - problem with stuttering animation occured.
Any ideas how to handle this? I've seen many ready-made examples but none of them handles those two issues.
Marquee can't help you in this case, as you can't achieve continuous scrolling using this element. Instead, just a bit of javascript might do the trick here. I tried this example which is also very well documented on my own blog and worked perfectly fine, more on this article:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I am using the latest release of bootstrap 3. I am using the affix plugin to make a static navbar fixed. It works however, there is a significantly long delay before the navbar updates and becomes fixed to the top. It is repeatable on all browsers.
I figured it would be easiest to show the problem with a video, I also provided some code.
see video
see JSFiddle
<h1></h1>
The effect I want is a clean instant transition like
this "http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix&"
I should also point out that I am using jQuery to define my section heights and the affix offset, I initially thought this would be causing the delay however, now I think that is out of the question.
This feels like a performance issue to me. I think jQuery is taking a little bit too long to figure out the height and apply the styling to the navbar.
I am hoping someone might have some insight into this matter.
So I figured out what the issue was.
I wrote used jQuery to get the height of the header (the content above the navbar) in this case it was a video, and made it the affix offset. The way I fixed my jumping issue is just make the offset property a function that calculated the height of the header instead of a static variable.
Here is the updated JSFiddle
https://jsfiddle.net/DTcHh/23013/
I have a problem where moving the cursor and clicking in text fields causes the page to show a wait cursor and also makes the page very unresponsive.
See this video for an example of it happening.
It only happens in IE7.
I've tried checking where I think it might be sending off ajax requests (thought this could be changing the cursor).
I've checked where I think multiple events may be firing simultaneously and tried commenting it out.
Has anyone seen anything similar happen and can point me in the right direction?
What is IE7's criteria for displaying the wait cursor?
Eventually I narrowed down the issue. After eliminating code bit by bit I deduced the problem isn't caused by JavaScript at all, it's a css issue.
The exact line of css is
overflow-y: auto
I don't know exactly the circumstances to reproduce it. But for a bit of info that might help others... The container the css is applied to is positioned absolutely. It has a fixed size (which also seems to be changed in JavaScript) and width. It's parent container is a div with display:block;.
Curiously if you scroll to the bottom of the container and back up it seems to fix the flickering bug.
Hi to everyone this is my first ask on stackoverflow
I've created a simple code to manage a menu. Here is the code.
http://jsfiddle.net/corvallo/97x89/5/
If I click on "gestione news" all the menu elements will slide left with different delay
and an image (that on jsfiddle u can't see) with the text "Articoli" will appear.
So i click on the image and the text "articoli" will fadeOut and the menu elements will reappear with delay in the same position as before.
So the problem is that if I try for 4-5 times the first animation(that is the sliding left of the menu elements) will slowdown, and if I try again animation will be slower and slower.
I don't that the problem is in the delay() functions but in the $.each(), maybe I'm wrong.
Can someone help me with this.
Thank you in advance.
The animations seem to somewhat be still running for a while after they have apparently done their job. Use the following to see when they stop in Firebug or Chrome:
$(this).animate({"marginLeft":"0px"},"slow", function(){console.log("anim stopped");});
I am not sure why they are still running, but you can stop them before running new animations like this:
$(this).stop().animate({"marginLeft":"0px"},"slow");
This seems to fix the slowdown issues that you are experiencing.
Put your menu in a div. Instead of doing a foreach on each element, animate the main div.
Delay should not be causing your issue as all that does is wait to begin the animation timing, but having that many animations going at once is starting several internal timers instead of just one, which could lead to hiccups.