I want a menu hidden at the top of the page, that slides down after clicking a button so it shifts the other content bellow it down. What I have is the hidden menu and I use jQuery functions slideDown() and slideUp() to toggle it. The problem is that eg. on iPhone the slide is not fluent, so I would like to use some acceleration.
I wanted to just add -webkit-trasnform: translate3d as described here, but this seems not working with jQuery slide functions. Also I tried to use jQuery('.menu').animate({height: ..}) but it didn't work also (I think jQuery toggle uses the same). So I found out, that probably the transform3d works only for moving elements by adjusting its coordingates (left, top ..) but not width and height.
I found out this jQuery plugin https://github.com/benbarnett/jQuery-Animate-Enhanced , that should help accelerate width and height changes also, but it didn't work at all in my case.
So I managed to move the menu by adjusting the Top property and adding translate3d, which finally makes the menu move fluently, but now I cannot force the content bellow it to move down when the menu slides - if the menu has position:relative and is moved out of the screen, there is still a hole of its height at the top of the content. If it has position:absolute , it doesn't influence content bellow. If position:static, Top: property has no influence.
Am I missing something or what is the "recommended" way to implement this ? You can see the current implementation on http://www.huureenkerstboom.nl (please downsize your browser window to see the mobile implementation).
Related
I got a website (which I didn't made) that, when I resize to test responsiveness, it works normally, though, when getting it back and scrolling down (and then up), there seems to appear a gap between the header and the element under it.
Site: http://miriam.mx/index/
Before resize and scroll:
After resize and scroll:
The site is using a lot of plugins and css:
The thing is that I need some hint to solve it, since I'm not experienced with any of those CSS works yet.
This has to do with your sticky code. Looks like you are using Sticky-Kit. It's setting the height of the sticky div to a height bigger than your children elements. You are using 1.1.1, which they have 1.1.2 and that seems to add some support with auto adjusting when scrolling. You could also play around with the recalc settings.
I'm trying to create a responsive website in Dreamweaver with a header and menu which initially scroll and then stick to the top of the page.
The header and menu would need to scroll over the top of a fixed hero image.
This hero image can't be defined as a background as it will be powered by a flexslider script to change the image after a set time.
I would also like the sticky header to possibly shrink down in height when it reaches the top of the page, to reduce the amount of screen space it takes up.
I've found a number of sticky menu examples on-line and some seem to have the annoying trait where the content directly below the menu disappears behind it at the point at which the menu sticks to the top of the screen. I would like to avoid this.
Please find a Mock-up of what I'm looking for here
Obviously, all of the above won't be acceptable on a mobile device.
So for mobiles, the header would need to scroll out of the way, leaving just a hamburger style menu fixed at the top of the screen.
I have found a number of examples on-line with elements of what I require, but nothing yet that combines everything.
I've tried cutting and pasting code from different sources, but haven't yet achieved the desired effect.
I don't know if what I'm asking for is workable, but I would appreciate if anyone could point me to examples of how to achieve this (or improve upon what I'm looking for).
Thanks
Neil White
Use this JS
http://stickyjs.com/
it adds the class is-sticky to the element which you wanted to stick to top. So you can add height in css for is-sticky class. Which in terms will reduce or increase the height of element when it reaches to top as per your requirement.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I'm building a mobile app using HTML, CSS, Javascript and jQuery.
Is there a way to scroll a div that is longer (700px) than the mobile screen (480px) using only two buttons, one for down and one for up?
So when a user presses and holds the down button it appears to scroll down the div by about 10px at a time.
Edit:
The mobile app is actually being compiled with Phonegap, so it won't be a mobile website but an actual application.
The application features dragging and dropping quite heavily and in order to do this using JQuery and HTML, I've had to bind the mousedown, mouseup and mousehover events to touch events.
Because of this the user cannot simply drag the screen to scroll as they would a typical application. Therefore, I have decided to go with physical buttons instead of scrolling the navigation div.
The navigation div is set to have a greater height than the canvas (screen height and width) div. This will be the div the user is scrolling.
Is the div you're talking about scrolling the full page itself? Or is it a specific div that you want to "scroll" within the page (kind of like an iframe)?
Both can be done. If you're scrolling the full page, I'm not sure why you'd want to use buttons rather than let Safari simply handle the standard swipe gestures. But, it could be done this way:
Use fixed positioning on the buttons so that they don't move as the rest of the screen scrolls.
Use use jQuery's .scrollTop method to do the scrolling.
If, on the other hand, you want to make a scroll effect on a single div, without the rest of the page scrolling, then just do the following:
Wrap that div in another div that has overflow:hidden; position:relative
Make the inner div position:absolute
Animate the inner div's top property to create the scrolling effect.
You may find this plugin useful: http://logicbox.net/jquery/simplyscroll/vertical.html
Anyway, why would you need that? The user may be able to scroll normally with a finger swipe if the content is bigger than the screen.
I have a login button at the footer of my main page or landing page.Currently when user click on the button a login form will get open from TOP to BOTTOM i.e. from the start of form to the "LOGIN" button.What i want is that when i click on the login button it should open the form using slide effect but from the BUTTON to the TOP.I don't want to include library like jQuery as there are some conflict issue with it.
Please help me out or refer me some url where it happens.
Regards,
Salil Gaikwad
See my demo.
I make no promises on compatibility, as I did it in a few minutes, but it works for me in Safari 4 beautifully. Essentially you need to wrap your element, set the wrapper's height and width to that of the inner container, then set the inner container's height to 0px. I use $fx to transition css properties. All you have to do then is transition the elements height from 0 to the height of it's wrapper, and have it's scrollTop set to that height as well. No worries, with $fx you can set the speed and such.
See the code if none of this makes sense, I am not so good at explaining, and good luck!