Sir. After log in fb with javascript or python or php or any other sources is it possible to speedly or rapidly scroll down into a fb group? I need to copy all posts and comments of a group at very short time.
@@gingaduten4883 Hei! :) Jeg går 2-års Frontend på Noroff nettstudier - det er bra ja! men er alltids mer å lære utenfor skolen også, så jeg bruker mye tid på youtube og udemy. De har studiene på skolene også hvis man heller vi det :)
What a beautiful, simple and extremely useful tutorial. Thank you for providing us this video. Now, I can see a lot of changes and improvements in my job as a Frontend Developer. Thank you!
Thanks Gary, this is was so helpful. To change the color for the navigation dots there's you can add this to the css #fp-nav ul li a span, .fp-slidesNav ul li a span { background: #ffffff; /*Your preferred color*/ }
I would love to see a video from Scratch on how to do something like this as you mention as a posibility by the end of the video! Thanks for all the great work!
You can also try to just read the code :) It is open sourced for everybody to learn from it: github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.js
Very cool. Followed along and it all worked exactly as expected. Thanks. This has given me some great ideas for landing pages. Looking forward to a tutorial on how to do it without the Frontpage.js.
Thank you for the tip. One thing to note: using !important in CSS is a bad practice and should rarely be used. Most likely you could have targeted the span with something like ".fullpage-navigation span" instead.
Very cool library, i was actually looking for that functionality and also saw that that the creator has a vue specific library as well. Btw how would it be done without the lib? Like a simple custom way?
lmao nothing works for me at all for reasons unknown to me. Everytime I try to follow a tutorial it looks incredibly easy, and nothing works on my end. Fantastic.
Are we able to use bootstrap within the sections ? I only need fullpage for scrolling between pages easily, i need bootstrap to actually build the content
Is there a reason for a separate js file not being created here to house the JavaScript code? Or is it just for purposes of video that the js is being saved in the .html file?
Sir their is any library for Reactjs then we achieve same thing like when we are using parallex they provide somekind of animation on scrolling time Their is any library for we can scroll down component to component Direct like you created a project but I wanna make with Reactjs library with using parallex if you know please rpy me thanks for this video
Something's wrong with skillshare Can't sign up When I hit enter after putting my info it just restarts the page Non of the buttons work Anyone else with this problem?
Whenever I go to these cdn libraries the links i get are not the same as the ones shown in this video. They are incomplete, without the cdnjs.cloudfare.com and stuff. Why is that?
try use this js when height content of slide (not just h1 and background) > height window... it doesn't work good and one more test on ios not only on android...
Glad you point it out! Actually the best way to deal with small screen devices is by making use of the responsive options that fullPage.js provides. Check the `responsiveWidth`, `responsiveHeight`, `responsiveSlides` options and `fp-auto-height-responsive` class.
Hey, Gary! I'm planning to make a website but I want to add a feature where you can change the language of the page. Should I use JavaScript that handles this or should I have separate .html files for every language or even use subfolder or subdirectories? Plz halp! :D
For the one page is better to use elements with lang attribute and only switch lang attribute for HTML element with one string of JS and hide all the elements with other lang using 1 css rule like html[lang="langOne"] *[lang="langTwo"]{display: none;}
Hello, I have been coding along but received this error message "fullpage.js:3438 fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option. Read about it here:". I am not sure where I went wrong. Can someone please advise?
would anyone know why i copied everything he did and yet my h1's have a top margin that makes the image not cover completely and when i text-align the h1 center they only move to the center of the top and not the absolute center of the page?
You should solve this by yourself :) There are some breakpoints for height and width in init section, overall, this aproach is not for sites with frequently changeable content
Solution is quite easy. There are a few options available for these cases. You can just use the options `responsiveHeight` or `responsiveWidth` to remove the autoscroll feature. That, combined with the class `fp-auto-height-responsive` that removes the constraint of having full height sections, solves most of the cases. See this example: alvarotrigo.com/fullPage/examples/autoHeightResponsive.html Some people prefer to use the option `scrollOverflow` to create a scrollbar inside the section, but I usually do not recommend its use as it can be buggy in certain cases. alvarotrigo.com/fullPage/examples/scrolling.html And then you can even make use of the extension `responsiveSlides` to turn horizontal slides into vertical ones when in responsive mode. alvarotrigo.com/fullPage/extensions/responsive-slides.html
Kinda. You can use scroll-snap property of CSS but it is not 100% cross browser compatible and won't do all the magic for you. Bear in mind that fullpage is much more than just snap scrolling. It has responsive options, css state classes, callbacks, lazy loading, auto play pause media elements, bullets navigations, normalScrollElements, plenty of methods, functions and of course, extensions. And all of it cross-browser compatible up to IE 9 ;)
@@alvaro_trigo it's pretty clear on your website that it can do more than just scroll-snapping, but I don't like using 3rd party libraries unless it's really really necessary, and I see the scroll-snapping as just for show kind of thing, and the rest of what your lib offers is already available to me from other libs that I'm already using... I wish the best for you and the future of your library I really like it maybe I'll change my mind and use it in one of my future projects :)
There's a plugin called easyScrollDots that does this effect with the vertical scrolling but you dont need full screen slides. github.com/Superhands89/EasyScrollDots
sir, I got an issue on full page.js. I need a continuous horizontal slider in a circular loop. I have used continuous horizontal: true, I had referred all the solutions in these links and other solutions from this link Continuous horizontal slider · Issue #124 · alvarotrigo/fullPage.js but I can't solve this issue.
Вся крутизна заканчивается на попытках скрестить didplay:table с флексами, нерабочей навигацией, переполнением одного из экранов, ради которого надо купить плагин за 25 баксов и других весёлых вещах
Fullpage is VERY outdated in markup and css which it produces. Looks like it was developed once 10 years ago for paid addons without any improvement. Author is unfriendly. Many issues on github without any support. Once i've used it i decided not to use it never.
@@alvaro_trigo wonder that you replied, that is pretty strange, instead of many github issues and feature proprosals :) why don't you use tables in 2019, wrapping anything by table-cells is not enough, just don't forget to ditch the doctype :))))))) At the other hand, i now how difficult to maintain any public project with long lifetime and big user base and it's very hard work everyday. You should upgrade your soft skills and be more friendly to the users. Build a support team for that.
@@sashabeep yeah I also response thousands of questions in stackoverflow, Webflow forums, twitter... so not really that strange :) TH-cam is just another bit. Tables? Do you mean "flexbox"? Because I'm pretty sure the table element is much older than the CSS property table-cell :) Are you suggesting using a table instead of the table-cell property? In any case, you can always disable the table-cell element by using `verticalCentered:false`. I've been thinking about the support person for a while, but perhaps it's better for the moment for me to keep doing that, as this way I can realise what developers demand and what they struggles are. However it is something that has been in my mind for a while!
@@alvaro_trigo It shows this error. "fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option." Can I get a open source activation key for this.
Be sure to subscribe and click on that notification icon!
Sir. After log in fb with javascript or python or php or any other sources is it possible to speedly or rapidly scroll down into a fb group? I need to copy all posts and comments of a group at very short time.
I just finished my 1st year of Frontend studies and have one more to go, and I have learned so much from your channel! Never stop! :D
Ser etter samme studie selv. kan jeg spør hvilket studie du går? er det bra?
@@gingaduten4883 Hei! :) Jeg går 2-års Frontend på Noroff nettstudier - det er bra ja! men er alltids mer å lære utenfor skolen også, så jeg bruker mye tid på youtube og udemy. De har studiene på skolene også hvis man heller vi det :)
What a beautiful, simple and extremely useful tutorial. Thank you for providing us this video. Now, I can see a lot of changes and improvements in my job as a Frontend Developer. Thank you!
Thanks Gary, this is was so helpful.
To change the color for the navigation dots there's you can add this to the css
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: #ffffff; /*Your preferred color*/
}
You're a lifesaver man! Please don't ever stop with your content!
I would love to see a video from Scratch on how to do something like this as you mention as a posibility by the end of the video! Thanks for all the great work!
You can also try to just read the code :)
It is open sourced for everybody to learn from it:
github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.js
Still very useful after almost 2 years, thank you very much!
Are there still alternative scripts like this that do the same thing? (not like locomotivescroll)
awesome tutorial man, we want more fullpage.js content. pls make those. love your work.
Love contents of this ♥️
Keep it up man 😉😊
Awesome js library and Awesome channel.
Thank you for this amazing tutorial.
Very cool. Followed along and it all worked exactly as expected. Thanks. This has given me some great ideas for landing pages.
Looking forward to a tutorial on how to do it without the Frontpage.js.
You mean without fullPage.js?
Why would you try to re-invent the wheel? :)
@@alvaro_trigo Yes of course I mean Fullpage.js. Depends on the type of wheel. ;-)
man please one video for styled components in reactjs, need you break it ,thank you.
Thank You Very Much Design Course
Thank you man, I love this channel
Thank you for the tip. One thing to note: using !important in CSS is a bad practice and should rarely be used. Most likely you could have targeted the span with something like ".fullpage-navigation span" instead.
Thank you very much and good luck👍👍👍👍👍👍👍👍
thank you so much 😍😍😍😍😍😍😍😍
thank you
I really enjoy these videos
Is there a JS library that you didn't cover? :D
Amazing and useful video thank you keep going
thanks a ton
glad I found your channel.....
Please make a reactjs crash course :( BTW, Cool stuff man!
Tks man!
Great tutorial. And if you do a course on it. Please include GSAP.
love your videos
Thank you. 🍻❤️
Very god video. Thx!
Great job,thx u very much.
Very cool library, i was actually looking for that functionality and also saw that that the creator has a vue specific library as well.
Btw how would it be done without the lib? Like a simple custom way?
The custom way is not as simple as it seems :)
But basically , catch the mousewheel event and use translate3d CSS properties to scorrll up or down.
@@alvaro_trigo hmm translate3d, will try it out, thanks! 😃
Спасибо)
lmao nothing works for me at all for reasons unknown to me. Everytime I try to follow a tutorial it looks incredibly easy, and nothing works on my end. Fantastic.
Hi how can i move the navigation bar from right to bottom? I cant find in the documentation how to change the style of the nav bar.
Gonna try this with React.
There's an official React wrapper for it here:
github.com/alvarotrigo/react-fullpage
Why will it not allow to scroll on to the next section when text content is placed in the div ( with content and styling )
Tks a lot
how can I add images to the slides?
I tried with different classes and poiting them with different images on CSS but it didn't work.
All good but.. problem will be on mobile screens ?
How to use inside of a middle page
hello, is there a solution for fullpage js when the internet is slow, the style is broken in late loading?
Dang, was hoping you were gonna use npm. I installed via npm but now I don't know how to actually include/implement it
you dumbass it easy
@@fernandocabrera6231 cool story, douche
are you allowed to use this (fullpage.js) if youre going to use it in actual website ? Hotel, store etc
Great Tutorial.! Is it possible to use Fullpage.js in combination with a css framework like Materialize or Bootstrap?
Of course! It i just a JS library :)
Awesome
is something supposed to go in main.css and main.css.map?
Ты просто красава , спасибо тебе
when we do this, is the entire page loaded at once? because i want to load one section at a time
do you have any key ?
Are we able to use bootstrap within the sections ? I only need fullpage for scrolling between pages easily, i need bootstrap to actually build the content
How to add a menu
Is there a reason for a separate js file not being created here to house the JavaScript code? Or is it just for purposes of video that the js is being saved in the .html file?
Is there any alternative for this plugin? This is great but I would like to use this in my commercial website but needed to pay it :(
its free to use
@@usynnstradler yeah but I think I read somewhere in the docs I need to buy a license for commercial use
Hi... How can I add this to an angular.js project?
can you this feature in custom html/css and js and not in fullpage.js
Sir their is any library for Reactjs then we achieve same thing like when we are using parallex they provide somekind of animation on scrolling time
Their is any library for we can scroll down component to component Direct like you created a project but I wanna make with Reactjs library with using parallex if you know please rpy me thanks for this video
how can we add navbar in page ?
Something's wrong with skillshare
Can't sign up
When I hit enter after putting my info it just restarts the page
Non of the buttons work
Anyone else with this problem?
What is 'free for non commercial use' means? It means that I can't develop a website for somebody else using this without a license?
Whenever I go to these cdn libraries the links i get are not the same as the ones shown in this video. They are incomplete, without the cdnjs.cloudfare.com and stuff. Why is that?
whats with that weird camera angle?
is it free plugin to using in browser ?
try use this js when height content of slide (not just h1 and background) > height window... it doesn't work good and one more test on ios not only on android...
Glad you point it out!
Actually the best way to deal with small screen devices is by making use of the responsive options that fullPage.js provides. Check the `responsiveWidth`, `responsiveHeight`, `responsiveSlides` options and `fp-auto-height-responsive` class.
Hey, Gary! I'm planning to make a website but I want to add a feature where you can change the language of the page. Should I use JavaScript that handles this or should I have separate .html files for every language or even use subfolder or subdirectories? Plz halp! :D
For the one page is better to use elements with lang attribute and only switch lang attribute for HTML element with one string of JS and hide all the elements with other lang using 1 css rule like html[lang="langOne"] *[lang="langTwo"]{display: none;}
@@sashabeep So just hide the elements I don't want to see on one language and show all the others and vice versa. Thanks for your help! :D
Hallo sir, what extension do you use for the vscode to get the type .class shortcut to div class thing?
emmet
Hello, I have been coding along but received this error message "fullpage.js:3438 fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option. Read about it here:". I am not sure where I went wrong. Can someone please advise?
yeah, i had the same issue, have you resolved the problem?
would anyone know why i copied everything he did and yet my h1's have a top margin that makes the image not cover completely and when i text-align the h1 center they only move to the center of the top and not the absolute center of the page?
The browser possibly. Did you try to open it in different browsers, e.g. Chrome and Firefox.
Cool
isn't the script tag supposed to be under the body tag?
Or should be async.It doesnt really matter in this case,because its not a huge site and not a webdev tutorial.
Before the closing
what happens on mobile when content exceeds 100% viewport height?
You should solve this by yourself :) There are some breakpoints for height and width in init section, overall, this aproach is not for sites with frequently changeable content
Solution is quite easy. There are a few options available for these cases.
You can just use the options `responsiveHeight` or `responsiveWidth` to remove the autoscroll feature. That, combined with the class `fp-auto-height-responsive` that removes the constraint of having full height sections, solves most of the cases. See this example:
alvarotrigo.com/fullPage/examples/autoHeightResponsive.html
Some people prefer to use the option `scrollOverflow` to create a scrollbar inside the section, but I usually do not recommend its use as it can be buggy in certain cases.
alvarotrigo.com/fullPage/examples/scrolling.html
And then you can even make use of the extension `responsiveSlides` to turn horizontal slides into vertical ones when in responsive mode.
alvarotrigo.com/fullPage/extensions/responsive-slides.html
First + 2
Nice video!
I think there's a way to do it with just css?
Kinda. You can use scroll-snap property of CSS but it is not 100% cross browser compatible and won't do all the magic for you.
Bear in mind that fullpage is much more than just snap scrolling. It has responsive options, css state classes, callbacks, lazy loading, auto play pause media elements, bullets navigations, normalScrollElements, plenty of methods, functions and of course, extensions. And all of it cross-browser compatible up to IE 9 ;)
@@alvaro_trigo it's pretty clear on your website that it can do more than just scroll-snapping, but I don't like using 3rd party libraries unless it's really really necessary, and I see the scroll-snapping as just for show kind of thing, and the rest of what your lib offers is already available to me from other libs that I'm already using... I wish the best for you and the future of your library I really like it maybe I'll change my mind and use it in one of my future projects :)
@@weltmeister sure! Use whatever best fits your needs! ;)
There's a plugin called easyScrollDots that does this effect with the vertical scrolling but you dont need full screen slides. github.com/Superhands89/EasyScrollDots
where are the source code bro?
Here it is :)
github.com/alvarotrigo/fullPage.js
Please, someone, answer me. I'm about to design my idea in Figma. But after im finished, what is the next step to actually make it functional?
Mine won't work. I was about to have code like you.
sir, I got an issue on full page.js.
I need a continuous horizontal slider in a circular loop.
I have used continuous horizontal: true,
I had referred all the solutions in these links
and other solutions from this link Continuous horizontal slider · Issue #124 · alvarotrigo/fullPage.js
but I can't solve this issue.
+
Круто кста
Вся крутизна заканчивается на попытках скрестить didplay:table с флексами, нерабочей навигацией, переполнением одного из экранов, ради которого надо купить плагин за 25 баксов и других весёлых вещах
Fullpage is VERY outdated in markup and css which it produces. Looks like it was developed once 10 years ago for paid addons without any improvement. Author is unfriendly. Many issues on github without any support. Once i've used it i decided not to use it never.
I'm also wondering, why do you say the CSS it produces is outdated? Can you please elaborate that?
What about the HTML markup you think is outdated?
@@alvaro_trigo wonder that you replied, that is pretty strange, instead of many github issues and feature proprosals :) why don't you use tables in 2019, wrapping anything by table-cells is not enough, just don't forget to ditch the doctype :))))))) At the other hand, i now how difficult to maintain any public project with long lifetime and big user base and it's very hard work everyday. You should upgrade your soft skills and be more friendly to the users. Build a support team for that.
@@sashabeep yeah I also response thousands of questions in stackoverflow, Webflow forums, twitter... so not really that strange :) TH-cam is just another bit.
Tables? Do you mean "flexbox"? Because I'm pretty sure the table element is much older than the CSS property table-cell :)
Are you suggesting using a table instead of the table-cell property?
In any case, you can always disable the table-cell element by using `verticalCentered:false`.
I've been thinking about the support person for a while, but perhaps it's better for the moment for me to keep doing that, as this way I can realise what developers demand and what they struggles are. However it is something that has been in my mind for a while!
@@alvaro_trigo It shows this error. "fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option." Can I get a open source activation key for this.
is it possible to have custom icons instead of the dots for navigation. i would like to replace the dots with svg icons i created in adobe illustrator
Awesome tutorial, thank you!
great thanks