I am having some problems to make work together scrollspy and tabs components.
As you can see in the follow example, every time that I scroll the content, it works funny, i tested in different ways, and it seems the problem is because the tabs are hidden... but I sincerely dont know how to fix this.
I created an example here:
http://bootply.com/66613
Is there a way not to scroll certain elements inside of a scrollable element, I was thinking an attribute not scroll or something like that, I couldnt find any documentation about this.
Thanks!
Related
I guess, it is better if I show you what I tried.
So, I am working to build a weather app in order to learn https://material-ui.com/.
I am trying to prototyping the animation how I see it in Google flights as
I tried to do this using Grid, Fade available in material-ui (I used latest 3.9.3).
However, in my version, even though I use Grid, when I hide the AppBar and the Form content, the grid beneath it, does not slide up. My version looks like
As you might see, what I mean. So, how do I slide the content up?
I have shared my code at https://codesandbox.io/s/13q4mmm36q?fontsize=14
Can someone please help me understand what I am missing?
Fade will simply just change the opacity. It doesn't inherently set its height to 0 or become display: none after fading out.
Just use material-ui Collapse component on the Header.
Code:
https://codesandbox.io/s/ooyxn96mo9
Documentation:
https://material-ui.com/api/collapse/
I'm using fullpage.js (which is brilliant), but I haven't been able to get a few of its options to have any effect. For example, the navigation won't appear, nor is the content vertically centered. Here is a link to the code I am using. These are the options that aren't taking effect so far:
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
verticalCentered: true
});
If anyone familiar with fullpage.js could take a look it would be much appreciated.
I did never use fullpage.js but I just checked out the source and your example.
This is what I came up with:
The "navigation" option doesn't work because fullpage.js can't append the section navigation items to the element with the id #fp-nav. That's probably because it sets the "nav" selector before it adds this element to the body. You can see that it was correct in a previously tagged version: https://github.com/alvarotrigo/fullPage.js/blob/v.2.2.8/jquery.fullPage.js vs https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js
I'm not sure what's up with the "master" branch, but it seems like this is broken (or it only works with a specific version of jQuery).
You could however dirty-fix the navigation problem by adding a
<div id="fp-nav"><ul></ul></div>
somewhere in your body.
The vertical alignment seems to work for me.
It looks like your settings are being applied, but you are expecting the results to be different. for example, verticalCentered is working as you can tell by inspecting the page and seeing that vertical-align:middle is happening.
and your navbar is there, just not visible for some reason (maybe you need to pass in more settings? Not sure on this one.)
I am not sure what you are looking for it to look like exactly, but I would use chrome devtools if you aren't already to help check if things are actually changing.
I have a web page with anchor links and I wish for them to stay highlighted when they are clicked AND when the user manually scrolls down. I have seen some jquery code here codepen.io/jakob-e/pen/mhCyx that does what I wish to do, however I wish to achieve this effect using raw javascript and I can't see it posted anywhere. Thanks for any help.
Sounds like you're looking for animated scrolling and scrollspy functionality? Shameless plug for two native JS (non-jQuery) scripts I wrote that are designed to work together:
Smooth Scroll: https://github.com/cferdinandi/smooth-scroll
Gumshoe for scrollspy: https://github.com/cferdinandi/gumshoe
How can a website shift effect be done like this website? http://showmyshift.com/# When you click a link, the content flies by and shifts.
I believe they are either using CSS3 or Jquery to do this, how can it be done?
EDIT: I also have no idea what this effect is called, nor have I seen it before. I'm hoping someone more experienced has seen this effect before and knows what it is.
it's just a slider, simply look for a slider that allows linking to specific slides, like Unslider (tricky if you don't know what are you doing) or Owl Carousel or the millions out there, and simply link each menu item to a slide. You can also use CSS, but for what you say about your knowledge, it's not recommended since it's way more difficult
Please check this site: pixeli.ca/works/italia
There I work on the site. The problem is when I just open this address, it doesn't show two panels using jScrollPane properly - these look like narrow horizontal stripes with content inside them. Then I click any of the top nav bar items and it becomes what it should be - all looks fine. What can I do to make it work right way from the beginning?
Seems like there is something related to jQuery hide() function. When I turn it off in the document, it works well. Did anybody face something like this before?
Yes, I have solved the issue. So, there is a simple animation effect implemented in the site through jQuery fadeIn function. It shows elements gradually first time, then sets a cookie so this animation doesn't work anymore.
Here is a piece of code where I made it work:
setTimeout(function () {
loadContent('about');
$('#doc2').fadeIn(1000);
}, 7000);
The #doc2 div is the main container for content and I noticed that when it is visible and I load content using my function loadContent('about') it works fine but doesn't work right way if #doc2 is hidden. I just added this function to be executed the same time as fading in #doc2 and now it works well. If you have any questions regarding it, please feel free to ask.