Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?
We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238
Related
I implemented a sticky sisebar library that aims to be easy to use as you are free in setting up the sidebar and its CSS. The library only gives you an additional value as custom property (--push-down) you can use in CSS to push the sidebar to its current position.
The problem I'm facing is that the script causes massive jitters in the sidebar position on some devices. These do only occur on the first scroll - if you've scrolled through the site once, it's working fine.
I would like to know why that could be the case (and if it's possible to be fixed. If not I still want to find out what's happening here.)
Using throttle functions does not make a difference here, as described here: https://stackoverflow.com/a/44779316/6336728. I'm already using the suggested method of doing layout read on scroll and layout write with requestAnimationFrame.
I put the code of my GitHub repo in this CodePen to try it out quickly; only the JS part is relevant.
So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.
The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here
It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?
I'm trying to build a sticky header with next and previous button in my site.
Initially there is no sticky section but when the user scrolls down the menu hides into a hamburger menu and the sticky element comes up. On further scrolling the sub section titles like Features, Contact Us, etc... are updated .Also we we can goto next and previous section as shown in the image.
So, how do I build this or is there a plugin that I can make use of?
Thank you.
Sticky Things
Sticky sections can be achieved using a combination of regular HTML, regular CSS and a Javascript plugin like sticky.js here. Using it you can use JS to attach a CSS class to certain HTML sections when a visitor is scrolling.
You can then style the CSSaccordingly to display / or hide certain sections of the page on scroll and thereby override / rewrite the original positioning.
Previous and Next
To achieve a previous and next button you could link those manually using HTML as well - which would be quite some work. If you look for dynamically linke site content you should have a look at static site generators like Octopress, or Jekyll - or consider using a CMS like Wordpress.
Edit: If you mean "jumping" up and down from one section of the site to another you can look at HTML anchor links
I have done a sticky header and a previous / next button in the footer for my website using Jekyll with some manual modifications. You can have a look at my blog on Github to see how I solved it.
Besides this it is not easy as there is not default solution to what you are trying to do. It fairly depends on your constraints, preferences and skills.
everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/
I am trying to create a responsive navigation menu. I found some tutorials online and after finding one that I liked the style of, I followed the directions to create it on my website, but I can't seem to get a couple features working.
1: I can't get the hover effect to work that adds a bottom border to the icons/links to help accent the one that is in focus.
2: When getting down to a screen size that is below 32.5em (519px), the menu is supposed to become a single column menu that folds up. The menu does become a single column, but it doesn't fold up into a button like it is supposed to. It keeps displaying all of the links which takes up a lot of vertical space.
Here is a jsFiddle of my project so you can see what I have so far:
https://jsfiddle.net/4Ljs1bfn/1/
You need to use the js detection that the example uses.
Add class="no-js" to your body element.
Then on load, set document.body.className = "js" (or equivalent).
This will enable the menu.
For the :hover problem, you need the class="no-touch" on your body element (then remove it using js if a touchscreen is detected).
Another thing: You have a html error at <a href="...""> on line ~8 (that extra " at the end).
Updated fiddle: https://jsfiddle.net/4Ljs1bfn/2/. You still have some css issues, but I assume you can fix them yourself.