Responsive Horizontal Page Sliding

Responsive horizontal page sliding

Horizontal page sliding

with left-margin animation

This jQuery snippet :

  1. Calculates the number of slides and set the width of the wrapper accordingly.
  2. According to which link is clicked, left-margin is animated on the wrapper to show the corresponding slide with a smooth transition
  3. Toggles the class of the clicked link for active link highlighting

Note that this solution:

  1. Uses only one menu occurence to minimize markup and prevent content repetition.
  2. Requires only the jQuery library
  3. works for a dynamic number of slides

$(document).ready(function() {  var slideNum = $('.page').length,    wrapperWidth = 100 * slideNum,    slideWidth = 100 / slideNum;  $('.wrapper').width(wrapperWidth + '%');  $('.page').width(slideWidth + '%');
$('a.scrollitem').click(function() { $('a.scrollitem').removeClass('selected'); $(this).addClass('selected');
var slideNumber = $($(this).attr('href')).index('.page'), margin = slideNumber * -100 + '%';
$('.wrapper').animate({ marginLeft: margin }, 1000); return false; });});
html,body {  height: 100%;  margin: 0;  overflow-x: hidden;  position: relative;}
nav { position: absolute; top: 0; left: 0; height: 30px;}
.wrapper { height: 100%; background: #263729;}
.page { float: left; background: #992213; min-height: 100%; padding-top: 30px;}
#page-1 { background: #0C717A;}
#page-2 { background: #009900;}
#page-3 { background: #0000FF;}
a { color: #FFF;}
a.selected { color: red;}
.simulate { height: 2000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="wrapper">  <nav>    <a href="#page-1" class="scrollitem selected">page 1</a>    <a href="#page-2" class="scrollitem">page 2</a>    <a href="#page-3" class="scrollitem">page 3</a>  </nav>  <div id="page-1" class="page">    <h3>page 1</h3>    <div class="simulate">Simulated content heigher than 100%</div>  </div>  <div id="page-2" class="page">    <h3>page 2</h3>    <div class="simulate">Simulated content heigher than 100%</div>  </div>  <div id="page-3" class="page">    <h3>page 3</h3>    <div class="simulate">Simulated content heigher than 100%</div>  </div></div>

How to prevent horizontal scrolling on responsive webpage?

i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.

horizontal slide in html

You need to scroll to the top of the div when you click on the box.
Here's the code:

$(function() {
var vheight = Math.max($("#box-1").height(), $("#box-2").height());
$("#viewport").height(vheight)
});
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
$('html,body').animate({
scrollTop: $("#box-1").offset().top
});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
$('html,body').animate({
scrollTop: $("#box-2").offset().top
});
});

I also updated the JS Fiddle: http://jsfiddle.net/Av7P3/1/

Horizontal slider gets pushed down from page in react-bootstrap

You overuse Grid there (like many other people do), as you do not have a real two-dimensional layout. I would strongly recommend to stick to flexbox as much as possible. There is a component for it in react-bootstrap called Stack. Using only Stack you will come very far. In your case I would layout application only with this component:

Sample Image

Look into following sandbox: https://codesandbox.io/s/clever-elion-frb220. I have provided colors, ids, names and some padding, so you can see how this layout is structured:

  • Upper Stack is vertical, for stacking top appbar/navbar and the rest of your application
  • Lower Stack is horizontal, for stacking sidebar(probably with fixed width) and the content section

Regarding your problem: In your Layout component you define a Row, but do not define Cols everywhere - the imported Sidebar component is not a Col.

Grid is for example useful when:

  • You have table like structure (two-dimensional)
  • You want to define responsive design with different layout on some breakpoints
  • You want to work with offsets, so things are aligned consistently.

How to avoid horizontal scroll on mobile web with responsive web design?

Check all the paddings. If you add padding to something with width set to 100% it will go outside the parent.

Shown here
http://jsfiddle.net/wzZ3W/

Code

<div id="fillX">
<div id="childXFill">
</div>
</div>

#fillX
{
background:red;
width:100%;
opacity:0.5;
}

#childXFill
{
background:blue;
width:100%;
padding:10px;
opacity:0.5;
}

Also check negative left and right margins on elements that span the page. E.g. http://jsfiddle.net/s7zrukj2/2/

Also, use a CSS Reset.


If you wan't to use overflow: hidden you should probably set it on the body element too. Like so

body, html { overflow-x:hidden; }

Although the fact that something is overflowing indicates an error in your responsive design and you should try and fix it instead to prevent something not being visible to a mobile user.

How to make a JS horizontal content slide from px to % responsive

You can read more about the TB3 grid here: http://getbootstrap.com/css/#grid

Also read: Twitter's Bootstrap mobile: more columns and Twitter's Bootstrap 3 grid, changing breakpoint and removing padding


You will need something like:

<div class="row">
<div class="col-sm-4">
<div class="panel">Panel 1</div>
</div>

<div class="col-sm-4">
<div class="panel">Panel 2</div>
</div>

<div class="col-sm-4">
<div class="panel">Panel 3</div>
</div>
</div>

Below the 768 pixels your columns will stack (100% screen-width) caused by the col-sm-4. Above the 767 pixels you can use a media query to give your panels a fixed width:

@media (min-width: 768px)
{
.panel {width:200px}
}

update (based on the comment) below.

Try this: http://bootply.com/73541

CSS

@media (max-width: 767px)
{

#panel1 {visibility:visible}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}
}
@media (min-width: 768px)
{
#menu {visibility:hidden}
}

javascript

function showandhide(show)
{
$('.panel').hide();
$('#' + show).css('visibility','visible').slideDown("slow");
}

$('.panellink').click(function()
{

showandhide($(this).attr('rel'))
return false;
} );

html

<div id="menu" class="row">
<div class="col-12">
<a class="panellink" rel="panel1" href="">panel 1</a> |
<a class="panellink" rel="panel2" href="">panel 2</a> |
<a class="panellink" rel="panel3" href="">panel 3</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

Update 2 based on the response.

1) above the 767 pixels, all panel are shown in my example. You will have to reload the page when you resize from small to big.
To could also trigger this reload with $(window).resize() note some browser will fire this twice, see https://stackoverflow.com/a/4298653/1596547 for a solution

2) for "sliding in sideways" rewrite this: http://jsfiddle.net/ax4AC/2/:

    $('.panel').css('margin-left','-260px').hide();
$('#' + show).css('visibility','visible');
$('#' + show).show();
$('#' + show).animate({
'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
opacity: "show"
});

html (new)

<div id="menu" class="row">
<div class="col-12">
<a class="panellink" rel="panel1" href="">panel 1</a> |
<a class="panellink" rel="panel2" href="">panel 2</a> |
<a class="panellink" rel="panel3" href="">panel 3</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-lg-3">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-3 col-lg-3">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-6 col-lg-6">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

javascript (new)

function showandhide(show)
{
// source: http://jsfiddle.net/ax4AC/2/

$('.panel').css('margin-left','-260px').hide();
$('#' + show).css('visibility','visible');
$('#' + show).show();
$('#' + show).animate({
'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
opacity: "show"
});

//.slideDown("slow");
}

$('.panellink').click(function()
{

showandhide($(this).attr('rel'))
return false;
} );

//source timeout: https://stackoverflow.com/a/4298653/1596547
var id;

$(window).resize(function()
{

clearTimeout(id);
id = setTimeout(doneResizing, 500);

});

function doneResizing()
{

if($(window).width()>=768)
{
$('.panel').css('display','block');
$('.panel').css('visibility','visible');
$('.panel').css('margin-left',0);
}

}

css (new)

@media (max-width: 767px)
{
.panel{
margin-left: -260px;
}
#panel1 {visibility:visible; margin-left:0}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}

}
@media (min-width: 768px)
{
#menu {visibility:hidden}
.panel {display:block; visibility:visible; margin-left:0}
}

see: http://bootply.com/73715 (new!!)

Responsive website: How to get rid of horizontal scroll bar?

Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.

$.each( $('*'), function() {     if( $(this).width() > $('body').width()) {        console.log("Wide Element: ", $(this), "Width: ", $(this).width());     } });

Horizontally scrolling cards with a sticky card

Add an overflow to the wrapper/container class (<div class="d-flex flex-row flex-nowrap bg-warning">).

.d-flex.flex-row.flex-nowrap.bg-warning {
overflow: auto;
}

You can find other options here.



Related Topics



Leave a reply



Submit