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
Related
I know that this is not a 'good question' to pose—but I'm desperate by now and need to find some inspiration.
I have a questionnaire page/web-app that uses CSS transitions to slide to the next page of questions/options.
It is well-tested and the transitions in question aren't complex.
But the transition to one special page went out of control recently. And although I consider myself well versed in CSS and JavaScript I'm totally lost with this problem.
The construct in question works like this:
I have a 'window' that is positioned absolutely and has its overflow hidden.
Inside that is a page container positioned relative to no left or top values or transforms given.
The pages inside this container are positioned absolutely according to their status classes positioned on the left: 0 (active), left 100% (not yet shown), and left: -100% (already done)
What happens now is that when I switch classes to show a certain page, the page container 'jumps to the left'. In Chrome nearly -100% in Firefox about -70% same in Safari.
Those values are my guess because when I open the dev-tools, nothing is to be found in the styles, in the computed values anywhere.
When I move back to the previous page the container jumps back to its original position, and if I move again to the critical page it stays.
I do no positioning whatsoever with JavaScript anywhere, I only switch classes on HTML elements.
After hours of experimenting back and forth, I found out that the problem is in some way JavaScript-related anyhow.
Using the exact same CSS and HTML with a slightly older version of JavaScript does not show the strange behavior. The changes in the Script are mostly ES2020-module related, and the new version does nothing even remotely related to DOM manipulation different from the older working version.
When not using transitions, the shift of the container does not occur.
Has anyone come across something similar?
Does anyone know of other tools to deeper analyze the current layout state of a page more than the respective developer tools of the browsers?
Any other ideas?
Today I found a solution and at least some kind of explanation, but I still have to investigate some more to truly understand the why and how. I'll post an update if I find a better explanation.
The problem has to do with a text field and focus.
The page in question has a text (search) as its main component.
[I am aware and always was that browsers try to move focused elements into view, regardless of what the author's CSS says.
Therefore, when I decided to give focus to the text field which it does not have on its own, as every page movement required a button to be clicked, I did so on transitionend. This has never changed.
When the issue first occurred, one of the things I tried first was to disable that (auto) focus behavior. It did not solve the problem.
I cannot say what made that change in behavior happen. I change the construction of the page to include a grid some time before the issue occurred. That in itself was not the reason, however (it worked for quite some time with that system, and removing it did not sole the behavior).]
What solved the issue was to initially fully disable the text field and only enable it on transitionend (then focusing it).
The reason browsers moved the page to different positions likely has to do with this situation, as the text fields width is ch based.
The important takeaway (for now) for me is, that there is no hint to be found in the developer tools when the browsers moves - elements in the (in my case unsuccessful) attempt to keep inputs in the viewport.
I think that this should be changed/fixed.
I will as soon as I have the time try to better understand the things that made the problem occur, If someone has information or experience with similar situations pleas add useful hints and background info.
We have a page which works perfectly on all of the modern browsers EXCEPT for a couple of strange behaviors on Microsoft Edge only. Here is the URL:
http://www.oru.edu/online/
Scroll down to the section below "Earn a Fully Accredited Online Degree..." and click one of the photos or one of the degree names. Expected behavior is for a "details" section to slide down and the window to scroll down to it using jQuery's "slideDown" followed by "animate". The animations work well in all tested browsers.
The details section that comes down should contain a description of the degree on the left, and four rectangular clickable areas on the right: "Program Description", "Benefits of Degree", "Occupational Outlook", and "Degree Plan". Also, the background of the details areas should contain a blurred-out version of the picture you may have clicked to open it up.
All of the jQuery animations (slideDown, slideUp, animate, etc.) work in MS Edge, but when the details area slides down, sometimes (randomly, it seems) one or more of the four clickable rectangles does not appear until you hover the mouse over it.
Also at unpredictable intervals, the background image will only show behind part of the div, with the rest of it being a solid blue color.
I've tried changing the order of the jQuery events, I've researched possible changes to the CSS, I've tried it on two completely separate Windows 10 machines, and I can't seem to find anything that causes this to change in the least.
Thanks for any solutions or ideas!
I may have a solution regarding the scrolling issue in jQuery. No promises, but I did have a similar problem as yours once with an auto scrolling issue working in every browser except one. The fix was so tiny that I couldn't believe that one thing was causing such a big problem.
Without seeing your jquery code, I don't know if this the actual solution, but here goes...
Do you have a section of code in the animation portion of your jquery that looks anything like this?
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}
Of course, your code may not start with that "html body" or have "scrollTop" as the exact terms, but here is the point.
There needs to be a comma in between where the "html body" section of code is. In other words, like this...
$("html, body").animate({
scrollTop: $("#" + sectionID).offset().top
}
As I said, your code may be pointing to different divs or elements of your website than my code example is showing, but the concept holds true.
That little comma may be what's keeping your animation from working in Edge. That is what happened to me. In a site I was building I initially didn't have the comma and it worked in EVERY browser I could throw at it, except for Edge. I spent a week on the issue!!!! Finally, I stumbled upon a forum that mentioned the comma and BAM it worked!
Give it a try and please report your results. Good luck!
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
Using AngularJS 1.2.1 I have a page with 7 separate ngSwitchs and ngAnimates on them so they look like left-right sliders with each switch-on being one full row. The content slides in from right or left controlled by buttons. As I said, there are 7 of these sliding rows, all of which are inside one controller.
Everything works well in every browser I have tried but IE10. Here the animates work on random ngSwitches. Some animate, some just re-display as if there was no animation. Every refresh is different, sometimes none work, sometimes (though rarely) all do.
This seems like some sort of timing problem with each switch being filled in by separate REST get from the server. I have been unable to duplicate this in a Plunkr due to the service.get.
ngAnimate relies on changing the classes in the switch during the animations. Obviously I have the animations defined properly since they work fine everywhere else. Since ngAnimate changes the classes automatically during the animation I can't have messed that up.
Is this a known problem with ngAnimate? Is there a work-around?
As I added the version number I realized I should check for the latest and indeed this seems to be fixed in 1.2.13. If you try to animate too quickly after page load, it may not work but eventually the code catches up and all rows work correctly.
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.