I am trying to set up a simple example with Bootstrap's affix.js.
However, the problem is that the item which I am trying to have sticky jumps off the screen with a negative top as soon as it switches from affix-top to affix. And it never recovers from there.
I set up a small jsfiddle, which illustrates the issue: https://jsfiddle.net/mjg12uep/6/
I have done it successfully on another project, but can't for the heck of it figure out what is going on here.
When playing around a little bit more, I realized that it works when I add position: relative to .affix-top. I suppose without that, the javascript was not sure where to "anchor" the element, and pushed it off screen. I have updated the fiddle accordingly.
Related
First of all, I really do not know how to describe my problem. So, I ask you to check my JSFiddle Code Playground at the beginning.
https://jsfiddle.net/coming123/q46tjuev/
To see the problem, I want you to run this playground with a low width. Then, click to the "navbar-toggler" on the top left, which is provided by Bootstrap4's itself and a little bit desiged by me. When you click it, the navbar will be appeared from top to bottom on the right side. The problem appears at this point.
This navbar make the background became higher and makes the other contents move to bottom side. Scroll the page and you will see a bug appeared. background became higher but the parallax effect has been broken. Now you should make the area resized by pulling or pushing from sides. Just a little resizing will make this bug fixed. What I afraid is on mobile phones, you can not resize the browser. So the bug will not be fixed. Also I do not want it to be fixed by this way. I did not get why this problem appears.
I tried to make the div reloaded when you click the navbar-toggler but nothing has been fixed.
document.querySelector("button").addEventListener("click", () => {
var container = document.getElementsByClassName("top");
var content = container.innerHTML;
container.innerHTML= content;
console.log("Done");
});
Any suggestion?
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 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.
I know there are various solutions out there, including JQuery solutions, that will do this, but I was trying to write my own simple version...
I want to hide a <div> but sliding it off the left or right of the screen.
For some reason I'm unable to read and set the .style.left value of my div though.
This fiddle shows the problem: http://jsfiddle.net/47MNX/3/
Seems to work fine if you set the position property, e.g. position:absolute; (or relative) to #myLeftMenu. You never set the position, so while the JavaScript was running it had no way to make the change.
jsFiddle example
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.