Full screen responsive horizontal website

up vote
3
down vote

favorite

I am trying to find the best method in order to create a horizontal website, full screen and if possible responsive, minimum width to be for tablets. The thing is that I need also the horizontal scrolling with the mousewheel, and I saw that fullPage.js doesn't support that or at least i couldn't manage to make it work on this plugin.

Anyway, I need an idea on building the template, with full screen sections displayed inline - I will be very grateful for any tip. Thanks.

edited Apr 21 '15 at 11:13

Alvaro

26.8k1597231

asked Dec 21 '13 at 8:56

ilonashu

3623

1

the fullPage.js and this one minimit.com/articles/code-tips/… but i had trouble in making them to be horizontal- i didn;t figure it out - and all kind of tries in my original css which is not full screen - here is a draft of it jsfiddle.net/E8G9n also i need to mention that i have images as background for each section, a different one- thanks
– ilonashu
Dec 21 '13 at 9:18

add a comment |

up vote
3
down vote

favorite

Anyway, I need an idea on building the template, with full screen sections displayed inline - I will be very grateful for any tip. Thanks.

edited Apr 21 '15 at 11:13

Alvaro

26.8k1597231

asked Dec 21 '13 at 8:56

ilonashu

3623

1

the fullPage.js and this one minimit.com/articles/code-tips/… but i had trouble in making them to be horizontal- i didn;t figure it out - and all kind of tries in my original css which is not full screen - here is a draft of it jsfiddle.net/E8G9n also i need to mention that i have images as background for each section, a different one- thanks
– ilonashu
Dec 21 '13 at 9:18

add a comment |

up vote
3
down vote

favorite

Anyway, I need an idea on building the template, with full screen sections displayed inline - I will be very grateful for any tip. Thanks.

edited Apr 21 '15 at 11:13

Alvaro

26.8k1597231

asked Dec 21 '13 at 8:56

ilonashu

3623

Anyway, I need an idea on building the template, with full screen sections displayed inline - I will be very grateful for any tip. Thanks.

fullscreen horizontal-scrolling fullpage.js

edited Apr 21 '15 at 11:13

Alvaro

26.8k1597231

asked Dec 21 '13 at 8:56

ilonashu

3623

edited Apr 21 '15 at 11:13

Alvaro

26.8k1597231

asked Dec 21 '13 at 8:56

ilonashu

3623

edited Apr 21 '15 at 11:13

Alvaro

26.8k1597231

edited Apr 21 '15 at 11:13

Alvaro

26.8k1597231

edited Apr 21 '15 at 11:13

Alvaro

26.8k1597231

asked Dec 21 '13 at 8:56

ilonashu

3623

asked Dec 21 '13 at 8:56

ilonashu

3623

asked Dec 21 '13 at 8:56

ilonashu

3623

1

the fullPage.js and this one minimit.com/articles/code-tips/… but i had trouble in making them to be horizontal- i didn;t figure it out - and all kind of tries in my original css which is not full screen - here is a draft of it jsfiddle.net/E8G9n also i need to mention that i have images as background for each section, a different one- thanks
– ilonashu
Dec 21 '13 at 9:18

add a comment |

1

the fullPage.js and this one minimit.com/articles/code-tips/… but i had trouble in making them to be horizontal- i didn;t figure it out - and all kind of tries in my original css which is not full screen - here is a draft of it jsfiddle.net/E8G9n also i need to mention that i have images as background for each section, a different one- thanks
– ilonashu
Dec 21 '13 at 9:18

the fullPage.js and this one minimit.com/articles/code-tips/… but i had trouble in making them to be horizontal- i didn;t figure it out - and all kind of tries in my original css which is not full screen - here is a draft of it jsfiddle.net/E8G9n also i need to mention that i have images as background for each section, a different one- thanks
– ilonashu
Dec 21 '13 at 9:18

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

you could use one of the tools listed in the following links
http://www.cssdesignawards.com/articles/15-excellent-jquery-plugins-to-spice-up-your-sites/44/
http://jquery-plugins.net/scrollit-js-jquery-plugin-for-scrolling-pages

or you could also mix raw js/jquery with anchor links and add animations when clicked. in taht case you can scroll down using mouse wheel and also have fancy animations when a link is clicked
regarding responsiveness use css media queries

answered Dec 21 '13 at 9:05

lanlau

1067

Hello, for horizontal scrolling i have already make this work - css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel just that, the main problem is to make the horizontal website with fullscreen images as background, and responsive - and to be continous, like when scrolling with the horizontal scroll bar-
– ilonashu
Dec 21 '13 at 9:39

add a comment |

up vote
0
down vote

Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..

However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..

This is must guide / tutorial for people who want to get started with Horizontal Responsive approach

http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/

answered Dec 21 '13 at 9:10

Rahul Patil

4,16732551

Hello, thank you, I am alreday aware of it - i will continue with my searching and tries, it has to be done somehow :)
– ilonashu
Dec 21 '13 at 9:34

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20717279%2ffull-screen-responsive-horizontal-website%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

answered Dec 21 '13 at 9:05

lanlau

1067

Hello, for horizontal scrolling i have already make this work - css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel just that, the main problem is to make the horizontal website with fullscreen images as background, and responsive - and to be continous, like when scrolling with the horizontal scroll bar-
– ilonashu
Dec 21 '13 at 9:39

add a comment |

up vote
0
down vote

answered Dec 21 '13 at 9:05

lanlau

1067

Hello, for horizontal scrolling i have already make this work - css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel just that, the main problem is to make the horizontal website with fullscreen images as background, and responsive - and to be continous, like when scrolling with the horizontal scroll bar-
– ilonashu
Dec 21 '13 at 9:39

add a comment |

up vote
0
down vote

answered Dec 21 '13 at 9:05

lanlau

1067

answered Dec 21 '13 at 9:05

lanlau

1067

answered Dec 21 '13 at 9:05

lanlau

1067

answered Dec 21 '13 at 9:05

lanlau

1067

answered Dec 21 '13 at 9:05

lanlau

1067

Hello, for horizontal scrolling i have already make this work - css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel just that, the main problem is to make the horizontal website with fullscreen images as background, and responsive - and to be continous, like when scrolling with the horizontal scroll bar-
– ilonashu
Dec 21 '13 at 9:39

add a comment |

Hello, for horizontal scrolling i have already make this work - css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel just that, the main problem is to make the horizontal website with fullscreen images as background, and responsive - and to be continous, like when scrolling with the horizontal scroll bar-
– ilonashu
Dec 21 '13 at 9:39

Hello, for horizontal scrolling i have already make this work - css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel just that, the main problem is to make the horizontal website with fullscreen images as background, and responsive - and to be continous, like when scrolling with the horizontal scroll bar-
– ilonashu
Dec 21 '13 at 9:39

add a comment |

up vote
0
down vote

Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..

However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..

This is must guide / tutorial for people who want to get started with Horizontal Responsive approach

http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/

answered Dec 21 '13 at 9:10

Rahul Patil

4,16732551

Hello, thank you, I am alreday aware of it - i will continue with my searching and tries, it has to be done somehow :)
– ilonashu
Dec 21 '13 at 9:34

add a comment |

up vote
0
down vote

Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..

However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..

This is must guide / tutorial for people who want to get started with Horizontal Responsive approach

http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/

answered Dec 21 '13 at 9:10

Rahul Patil

4,16732551

Hello, thank you, I am alreday aware of it - i will continue with my searching and tries, it has to be done somehow :)
– ilonashu
Dec 21 '13 at 9:34

add a comment |

up vote
0
down vote

Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..

However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..

This is must guide / tutorial for people who want to get started with Horizontal Responsive approach

http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/

answered Dec 21 '13 at 9:10

Rahul Patil

4,16732551

Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..

However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..

This is must guide / tutorial for people who want to get started with Horizontal Responsive approach

http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/

answered Dec 21 '13 at 9:10

Rahul Patil

4,16732551

answered Dec 21 '13 at 9:10

Rahul Patil

4,16732551

answered Dec 21 '13 at 9:10

Rahul Patil

4,16732551

answered Dec 21 '13 at 9:10

Rahul Patil

4,16732551

Hello, thank you, I am alreday aware of it - i will continue with my searching and tries, it has to be done somehow :)
– ilonashu
Dec 21 '13 at 9:34

add a comment |

Hello, thank you, I am alreday aware of it - i will continue with my searching and tries, it has to be done somehow :)
– ilonashu
Dec 21 '13 at 9:34

Hello, thank you, I am alreday aware of it - i will continue with my searching and tries, it has to be done somehow :)
– ilonashu
Dec 21 '13 at 9:34

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk