Fancy Sliding Form with jQuery Navigation - javascript

I am a junior programmer and struggling with a plugin.
Everything works well except when you want to confirm all the details. The confirmation page display incorrectly and you can't see the whole page.
Any ideas to what I am doing wrong?
Here is a link to the single page with the form:
http://www.creatiffweb.co.za/emillingTester/list.html
Thanks!

I think there is a problem in your calculation of the widths array. Some child elements of your pages (the fieldset.step elements) also have the class step. That's because you are calculating too much widths and for the last page the width is too short.
This results in the page being only half displayed. Then you focus the button on the page, which is not entirely visible yet. The browser then scrolls your steps to the left to fully show the button and breaks the layout.
You should propably adjust the selector to something like the following, to only include the actual pages:
$('#steps fieldset.step').each(function(i) {
// ...
});

Related

Div height to be remaining space of page

I apologize for the poor wording of my title, I am not sure how to explain my question in the most concise way.
I have an isotope JavaScript plugin that filters I use to filter some elements. The plugin works fine, however I added my own "No results" text that appears when there are no results. It functions correctly, however what is not working is the animation.
At the moment, if you are scrolled down on the page, and the results go from multiple shown results to 0 results where my "No Results" code appears, there is an animation glitch where my footer (which I have set using flex display to be at at the bottom of the screen) moves up from the bottom, and then snaps into the bottom.
I have worked out that one possible solution for this may be to give the "No results" text a height that would make all of the contents on the page add up to 100vh. Is there a way to calculate it so that it will be the calculated height of what is left on the page to ensure the min size of the contents of the page are 100vh.
Here are some screenshots of the issue:
This is how it should look the entire time when there are no results. However this only happens at the end of the animation
This is what happens during the actual animation. The page resizes in a strange way where the footer first moves up, leaving the white space at the bottom and only then does it snap down into position.
Attached is the live code of my site, to see what I mean, please first scroll down and then click the "Financial Sustainability" checkbox.
Link to live code
If anyone has any advice at all about this, even on how to explain the question better, I am open to any feedback and suggestions and I really appreciate all of the support.

Changing URL while displaying page change animation

Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.

ngTable not showing page links

I have a small AngularJS app using ngTable. The app has several tables, but most of them don't need pagination. I'm working on one table that will require pagination.
When the table renders, I know there are quite a few entries in the table (more than 100). When it first renders, it shows the first 10. It draws the page size selector ("10 25 50 100") on the bottom right, but it doesn't draw the page selector on the bottom left.
I can click the buttons in the page size selector, and it will redraw showing that many entries, but it still doesn't show the page selector.
I tried examining the default pagination template, and I even defined a custom one on my page, but just pasted in the default one, so I could play with it. I added some junk content to the page size selector div, and that never showed up when it rendered, even though I can see that change in the script block in firebug.
Anyone have any ideas what's going on here?
I've managed to construct a plunkr that demonstrates this.
You need add params.total($scope.completedQueries.length); before $defer.resolve because when you init ngTableParams array $scope.completedQueries is empty, it filled when called getData

Scroll up if page becomes shorter than current scroll position (bootstrap + jquery)

What is the best way to approach this problem?:
I have a list that has names which you can click on. When you click on the name, the list disappears and information about that name appears. However, that list is often longer than the information, so if you click on a name toward the bottom of the list... the list is replaced with the information (so the page gets shorter). However, Chrome (on OS X 10.8) keeps the current scroll position even though the scrollbar has shrunk... so a user will see just a gray screen (because the page no longer goes that far down).
Any help would be greatly appreciated! I can clarify the question if needed :)
Edit: I had previously tried what AwokeKnowing suggested, but it's not a great option because if the added content is already in the viewport scrolling to the top has a "jerky" feeling to it. You can already see it being added, so why adjust the scroll in that case? There needs to be a way to test if the content is visible in the viewport or not.
$("button").click(function(){
alert($("div").scrollTop());
});
Also, AwokeKnowing also suggested this may simply be a browser bug. If that's the case, is there a work around?
Edit 2: More specifics, the names are a list of links (<a href="#">) in a bootstrap tab-pane and clicking on them creates a new tab-pane and switches to it. The issue is that the newly created pane is significantly shorter than the one with the list on it. Switching to the shorter pane creates the unwanted behavior.
with jquery you can scroll to any element, so just scroll top your div when you handle the click
$("button").click(function(){
alert($("div").scrollTop());
});

Page scrolls to bottom when reached from a link

I'm having an issue with a page auto scrolling to the middle rather than starting at the top when the user reaches it via links. For instance, when I click any of the buttons that say "[#] Recommendations" below the image, the link takes me to that image's recommendations page. The problem is that if the page has more than one recommendation, as in these particular requests:
http://whatgoeswiththis.co/#request/8
http://whatgoeswiththis.co/#request/5
The page loads scrolled halfway down. If there isn't a recommendation uploaded yet, it appears to load fine.
Appears to be a problem on all browsers, and it appears that the scroll is set to a random location depending on number of recommendations that have been uploaded. The page has a regular HTML/CSS header, but everything below the top inch is handlebars.js scripts.
How can I make it so that any time the user reaches the recommendations page it starts at the top of the page? I don't want to add a new javascript tag, I'd prefer to remove whatever is causing the scrolling if possible. Thanks!
I finally realized what the problem was. I had this exact same problem on a Backbone app I was working on awhile back. The problem is that the page remains at the exact same scroll position when you click on a request-card. So depending on how far down the home page you scroll will determine where on the request page it looks like you landed.
I'm not sure how best to fix this on your site, so I'll describe what we did to fix it on ours. On our website, we just rebuilt the DOM of the main element on our site so that the scroll position would be reset to 0. For your site, this would mean that the template for the homepage would only have the elements within #homepage, and when you click on a link, a new template is used that contains everything inside #requestpage.

Categories

Resources