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.
Related
Im using Fullpage.js and trying to make it work with wordpress, and its going forward. However, I'm trying to figure out how to be able to scroll trough a slide with content higher then the active slide. The plugin comes with a scroll overflow function, but that vill make a scrollbar that scrolls trough your content, and keeps going to the next slide.
Ideally a constant scrollbar that stops at the current slide would be the best option for me, but i dont know if this is possible.
Been fiddling with this for a while, so if anyone has any ideas how to solve this i would be thankful. My site:
http://www.svenssonsbild.se/Fullscreen/
Edit: Realize that what i want should be able to achieve by setting scrolloverflow: true in the plugins setting. Just didnt realize it didnt work for me.
So, if anyone hav any ideas why it wont work for me then it would be great. I suspect it have something with having the scripts hardcoded in the header and not enqueued, which i havent been able to figure out how to, since the supercontainer the script creates duplicates.
anyhow, any pointers will be very appriciated.
I struggled with this myself, then went to read through the documentation again. Here what it states:
scrollOverflow: (default false) defines whether or not to create a
scroll for the section in case its content is bigger than the height
of it. In case of setting it to true, it requieres the vendor plugin
jquery.slimscroll.min and it should be loaded before the fullPaje.js
plugin. For example:
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
Not loading SlimScroll.js was the issue here.
Then set your $.fn.fullpage({ }) config accordingly.
$('#fullpage').fullpage({
scrollOverflow: true
});
Just to add a little info that mighht help out others, I've been using both plugins (fullpage.js and slimscroll.js) but found issues with slimscroll when using it on mobile devices (momentum and lag issues).
It is possible to set scrollOverflow to false and add this next bit to the afterSlideLoad function to get native scrolling if content is too long:
$('.slide .active').css('overflow-y','auto');
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!
My Problem (Fiddle)
My problem is that on my jquery animated dropdown menu, when you hover over the "Other" link, the sub menu does not appear. When using firefox to 'Inspect Element', I find height is animated, and the width appears to be alright, yet all I see is the left border.
I noticed that if I have that particular section display as a block, when you animate the first menu it is shown, but upon entering the unordered list, it disappears (ex). I imagine it is somehow related to this, but I can not figure out what is causing this.
Any incite into what I'm probably just overlooking would be great, and of course much appreciated.
Notes:
I have had this problem in Firefox, Chrome, Opera, and IE.
It's designed such that it could work with only css. The the first .each is overriding default css hover behavior.
the empty span holds the arrow image.
only relevant code is posted. However, you may view my site here
If you have any tips on making something more efficient, always welcome.
http://jsfiddle.net/sailorob/4cdTV/5/
I've removed your CSS for simplicity's sake and simplified your functions by utilizing jQuery slideUp and slideDown, which essentially handle many of the css properties you were managing with your functions. From here, I think it would be fairly simple to work back in some of your CSS.
When utilizing javascript/jQuery/animation on menus, I highly suggest using timers (setTimeout) for firing mouseenters and 'leaves. This way, your menu is more forgiving when a user accidentally moves their mouse a few pixels out of the menu and it closes.
Well, in debugging the JS and CSS I found that if you remove ALL the JS you have, the drop down menu with sub menus work fine. The Other li opens up the ul below it just fine. Note, it doesn't animate without the JS though.
Here's a forked fiddle.
I tested it in latest Chrome and Firefox.
I'm trying to find out how to recreate Chrome's new tab homepage with all it's features.
I've tried plugins like isotope, however I've met a lot problems with sorting using the jQuery sortable class.
I've tried just using good`ol css with floats to create a grid, but it's nowhere close to as good as what Chrome has.
Is there a tutorial out there that covers this?
Any pointers in the right direction would be helpful
If your using chrome it'll be easier to use the inspect element function of the right click context menu. This brings up the developer console showing the elements tab. It should also take you to the meat of the layout straight away, without having to scroll through lots of lines! :)
If you haven't seen the developer tools in chrome before, it's well worth getting into! The elements panel will be of particular use:
https://developers.google.com/chrome-developer-tools/docs/elements
In short, the elements panel will give you a live view of the HTML DOM, including a view of the CSS classes that are present on any given element.
Update
From a quick look at the source myself though, it looks like a lot of it is generated in JavaScript first, i.e. the margins and widths of icons etc are set using JavaScript when you manually resize the page. I pretty sure their layout isn't just pure CSS.
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.