Responsive horizontal page sliding
Horizontal page sliding
with left-margin animation
This jQuery snippet :
- Calculates the number of slides and set the width of the wrapper accordingly.
- According to which link is clicked,
left-margin
is animated on the wrapper to show the corresponding slide with a smooth transition - Toggles the class of the clicked link for active link highlighting
Note that this solution:
- Uses only one menu occurence to minimize markup and prevent content repetition.
- Requires only the jQuery library
- 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:
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
Filling Empty Cells in CSS Grid Layout
Retrieving Percentage CSS Values (In Firefox)
Inherited CSS Values via JavaScript
How to Remove Imported CSS in Reactjs
Transforms Are Added...Endlessly
Changing Background Color of Div on Scroll
How to Create Dynamic Elements Inside Global Tabs
Show Dynamically Added Navlinks When Added in Bootstrap Navbar
Mutationobserver: New Value in the Format of 'Oldvalue'
Arrange Multiple Divs in CSS/Js
Changing Pseudo-Element Style from JavaScript
JavaScript Incapable of Getting Element's Max-Height via Element.Style.Maxheight
How to Set the Universal CSS Selector with JavaScript
Multiline Typewriter Effect with Two Consistent Words
Changed Id Not Being Found by Jquery
IE8 V8 Not Changing Class for a Dom Element Despite Js Function Changing the Element Attribute
How to Generate an APK That Can Run Without Server with React-Native