4

I created a very simple webpage that uses fullPage.js script. Basically it works as the sample page provided by the author. Now, I would like to put there min-width on the page, so that when user decides to resize the window horizontally and make it small enough - instead of shrinking the divs inside - I would just display browser-native horizontal scrollbars. I tried to add either:

body {
    min-width: 900px;
    width: 100%;            
}

or the same in other css tag:

.section {
    text-align:center;
    width: 100%;
    min-width: 900px;
}

but none of those worked well. I found this communication with the author of the plugin, but I'm not exactly sure if his response is helpful enough. Can you help me with implementation of that feature? Thanks!

Bram
  • 2,183
  • 5
  • 29
  • 48
randomuser1
  • 2,583
  • 5
  • 25
  • 59
  • I've decided to do so because otherwise the content shrinks a lot and it looks messy... I thought it would solve my issue, just for example as they did on www.apple.com or google.com pages - there are also horizontal scrollbars if you shrink the webpage enough – randomuser1 Apr 22 '15 at 14:32
  • @JDB you should be telling that to Google, Flickr, Tumblr, Facebook, Apple, Sony, RedBull, British Airways, Mediafire... all of them make use of this technique in some of their pages. – Alvaro Apr 23 '15 at 11:49
  • I don't want to get into a flame war. There is a time and a place for everything, including less-than-optimal UI strategies. My only advice is that you ask yourself *why* are *you* choosing this particular design pattern. If the only answer you can come up with is *because cool*, then you might want to think about it a bit more. It may seriously annoy some (perhaps many) of your users. – JDB still remembers Monica Apr 23 '15 at 13:56

3 Answers3

2

So I decided to make a test page myself and read up on the plugin. Coming to the conclusion that this would be the way to go instead of trying to alter the plugin itself :

$(document).ready(function() {
  $('#fullpage').fullpage({responsive: 900});
});

It's actually right here as a comment on the GitHub question that was linked to (blush). The disadvantage of this is that it triggers the vertical scrollbar as well.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

After some more testing, the 'dirty' approach below from a first draft of the answer appears to be working as well (strangely only when I externally linked to the modified script on Codepen) - creating a horizontal bar but keeping the full page height intact (with no vertical overflow). But it seems to be very tricky to get it to trigger correctly, depending on the order in which the scripts are loaded.

Both html and body have overflow: hidden in the CSS, so I would suggest changing it to this :

html, body {
overflow-y: hidden;
}

But it looks like the style is also set through an inline script. That is minified so it may be tricky to find the exact code there (but not impossible, I see only two likely candidates in fullPage.min.js). Last option would be to override that again with jQuery but that's a bit messy altogether.

Edit - the relevant code in the non-minified script :

if(options.autoScrolling && !options.scrollBar){
    $htmlBody.css({
    'overflow' : 'hidden',
    'height' : '100%'
});

Looks the same as this :

c.autoScrolling&&!c.scrollBar?(w.css({overflow:"hidden",height:"100%"})

So I would try :

c.autoScrolling&&!c.scrollBar?(w.css({"overflow-y":"hidden",height:"100%"})
Shikkediel
  • 4,890
  • 15
  • 41
  • 70
  • Thanks for your effort Shikkediel and sorry for late response! Could you give me a little bit more detail how exactly should I implement your solution? Should I change the java script library of the fullpage.js or just insert that line somewhere in my code? Thanks! – randomuser1 Apr 23 '15 at 12:29
  • 1
    Sure, no problem. Got slightly annoyed in general because someone just downvoted for no apparent reason. But that's fine. If you're linking to the minified script, you could use a text editor and 'find' that line of code and replace only that. Make sure to use an editor that doesn't add a BOM though. Notepad++ or http://www.editpadlite.com/ should do. The full script is actually quite readable and has some nice tips in it on what's doing what. Let me know if it works. Can't fully test myself but can certainly debug on the result it's having. – Shikkediel Apr 23 '15 at 12:36
  • Thanks again for your help. It's kind of strange, but the solution you provided doesn't work in my case.. I added the html and body css code and modified the script itself by adding the -y value, but still when I resize the window - I can't see the scrollbars... Is there any way that I'm doing sth wrong? Should I set the minimum width of the screen somewhere as well? Thanks for your patience though :) – randomuser1 Apr 23 '15 at 13:12
  • 1
    I'll have another good look if I might be missing anything. Do you have a link to your page maybe? That would make debugging much easier. One tricky bit could be that `overflow` needs quotes around it when you add the y-axis. – Shikkediel Apr 23 '15 at 13:18
  • Thanks, I added the quotes here, unfortunately so far the site is not published yet, but it contains plain fullpage.js plugin and the customization provided by you. I'm not sure what can be the case here, but I really appreciate your help :) – randomuser1 Apr 23 '15 at 13:31
  • 1
    Glad that did the trick. But are the vertical scrollbars desired? The script is much woven into the `overflow` properties so I haven't gotten to the point where the horizontal scrollbar is visible but vertical is *not*... – Shikkediel Apr 23 '15 at 14:26
  • You know the situations in life when you desire something and do everything to reach that goal, and when you're finally there - you start thinking whether was worth it or not? :) I currently implemented your solution and now I'm considering the real value of that, if it's useful in this particular case or not.. All in all, you made my day with your effort, so of course thanks for that! – randomuser1 Apr 23 '15 at 14:29
  • 1
    Very welcome. You know what they say, it's about the journey and not so much the destination. Lol. – Shikkediel Apr 23 '15 at 14:39
1

Add overflow:auto to your <body> tag. Scroll bar will appear based on the window size.

  • Thanks, but this solution didn't work well for me, I think the plugin blocks it somehow - on a normal webpage it would work, but probably not on the one based on fullPage.js – randomuser1 Apr 22 '15 at 14:27
  • @randomuser1 I added overflow:auto in the sample page in your question and it worked. Isn't that page has fullpage.js? –  Apr 22 '15 at 14:30
-2

Make use of media query for the specified dimension of the window and add the property "overflow: scroll".

@media screen and (max-width: 900px) {
body {
overflow: scroll;
}
}
gopal rao
  • 293
  • 1
  • 11
  • Thanks, but the situation is the same as in the comment provided by DivakarDass - it doesn't work, the scrollbars didn't appear when I resized the window, in my case it might be the problem of the fullPage.js plugin... – randomuser1 Apr 22 '15 at 14:28
  • @randomuser1 - That solution is not perfect! You have a constraint, particular width! so overflow: auto would not work magically for 900px. media query is the way. If it is not working, its probably because the script is stopping from showing the scrollbar. – gopal rao Apr 22 '15 at 14:33