I have a problem that still could not solve any questions already made in Stack.
I have a Sticky header that makes a jump when I move and I can not find a solution. That is, I do a little scrolling and I jump around 100px (to say an example).
My idea is that the movement is totally fluid without any strange leap.
Keep in mind that the button "categories" on clicking shows several things, and do not intend that the solution superimpose other elements below (as a response from a user who proposes to wrap the entire header in a div and add a height as the from the header)
I leave a snippet for you to see what happens:
/*=============================================
HEADER
=============================================*/
$("#btnCategorias").click(function(){
if(window.matchMedia("(max-width:767px)").matches){
$("#btnCategorias").after($("#categorias").slideToggle("fast"));
}else{
$("#encabezado").after($("#categorias").slideToggle("fast"));
}
})
/*=============================================
HEADER FIJO
=============================================*/
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the header
var header = document.getElementById("myHeader");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
/*=============================================
TOP
=============================================*/
#top ul{
padding-top:8px;
}
#top ul li{
display:inline;
line-height:30px;
margin:0px 5px;
color:white;
}
.registro ul{
text-align: left;
font-size:16px;
}
/*=============================================
HEADER
=============================================*/
header {
background-color: #FFFFFF;
z-index: 1000;
}
header #btnCategorias{
margin:20px 0;
cursor: pointer;
}
header #btnCategorias p{
line-height:46px;
margin-bottom:0px;
font-size: 20px;
}
header #categorias{
display:none;
margin-top:-10px;
position: relative;
padding-bottom:20px;
}
header #categorias h4{
margin-top:20px;
margin-bottom:-10px;
}
header #categorias hr{
border:1px solid rgba(255,255,255,.3);
}
/*=============================================
STICKY HEADER
=============================================*/
.sticky {
-webkit-box-shadow: 0 6px 6px -6px #222;
-moz-box-shadow: 0 6px 6px -6px #222;
box-shadow: 0 6px 6px -6px #222;
position: fixed;
top: 0px;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--=====================================
TOP
======================================-->
<div class="container-fluid barraSuperior" id="top">
<div class="container">
<div class="row">
<!--=====================================
REGISTRO
======================================-->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 registro">
<ul>
<li>Ingresar</li>
<li>|</li>
<li>Crear una cuenta</li>
</ul>
</div>
</div>
</div>
</div>
<header class="container-fluid" id="myHeader">
<div class="container">
<div class="row" id="encabezado">
<!--=====================================
BLOQUE CATEGORÍAS Y BUSCADOR
======================================-->
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
<!--=====================================
BOTÓN CATEGORÍAS
======================================-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 backColor" id="btnCategorias">
<p>CATEGORÍAS
<span class="pull-right">
<i class="fa fa-bars" aria-hidden="true"></i>
</span>
</p>
</div>
<!--=====================================
CATEGORÍAS
======================================-->
<div class="col-xs-12 backColor" id="categorias">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
<h4>
Lorem Ipsum
</h4>
<hr>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
</div>
</header>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
You just needed to change the #btnCategorias whitespace from margin to paddingso that the white space around the element is considered as part of the element.
/*=============================================
HEADER
=============================================*/
$("#btnCategorias").click(function(){
if(window.matchMedia("(max-width:767px)").matches){
$("#btnCategorias").after($("#categorias").slideToggle("fast"));
}else{
$("#encabezado").after($("#categorias").slideToggle("fast"));
}
})
/*=============================================
HEADER FIJO
=============================================*/
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the header
var header = document.getElementById("myHeader");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
/*=============================================
HEADER
=============================================*/
header {
background-color: #FFFFFF;
z-index: 1000;
}
header #btnCategorias{
padding:20px 0;
cursor: pointer;
}
header #btnCategorias p{
line-height:46px;
margin-bottom:0px;
font-size: 20px;
}
header #categorias{
display:none;
margin-top:-10px;
position: relative;
padding-bottom:20px;
}
header #categorias h4{
margin-top:20px;
margin-bottom:-10px;
}
header #categorias hr{
border:1px solid rgba(255,255,255,.3);
}
/*=============================================
STICKY HEADER
=============================================*/
.sticky {
-webkit-box-shadow: 0 6px 6px -6px #222;
-moz-box-shadow: 0 6px 6px -6px #222;
box-shadow: 0 6px 6px -6px #222;
position: fixed;
top: 0px;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
<header class="container-fluid" id="myHeader">
<div class="container">
<div class="row" id="encabezado">
<!--=====================================
CATEGORIES BUTTON
======================================-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 backColor" id="btnCategorias">
<p><strong>CATEGORÍAS
<span class="pull-right">
<i class="fa fa-bars" aria-hidden="true"></i>
</span>
</strong>
</p>
</div>
<!--=====================================
CATEGORIES
======================================-->
<div class="col-xs-12 backColor" id="categorias">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
<h4>
Lorem Ipsum
</h4>
<hr>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
</div>
</header>
<div id="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
Related
Okay, so I've been attempting to fix this bug on my personal website for a while now. I can't seem to find an answer that's specifically relating to my issue. It might be uncommon -- could be that I used a poor practice when making it.
I have three columns on a page. The HTML for these columns is as follows:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /*adds the card */
padding: 16px;
text-align: center;
background-color: #f1f1f1;
overflow: hidden;
}
.column {
float: left;
width: 31%;
font-size: 1em;
font-family: 'Arvo', serif;
text-align: center;
position: relative;
padding: 0 5px;
}
.col-row {
padding: 0 8em;
margin: 0 -5px;
}
.col-row:after {
content: "";
display: table;
clear: both;
}
<div class={"columns-container"}>
<div class="col-row">
<div class="column" id={"column-1"}>
<div class="card">
<h3>Title</h3>
<div class={"p-container"}>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<h4 class="heading-details">Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
<h4 class="heading-more-details">More Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="column" id={"column-2"}>
<div class="card">
<h3>Title</h3>
<div class={"p-container"}>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<h4 class="heading-details">Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
<h4 class="heading-more-details">More Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="column" id={"column-3"}>
<div class="card">
<h3>Title</h3>
<div class={"p-container"}>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>"Lorem ipsum dolor sit amet elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<h4 class="heading-details">Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
<h4 class="heading-more-details">More Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
I don't really mind scraping the CSS I have for this. I just want to make it work. So, what's happening is the tag lines up. The text in the .p-container lines up perfectly. But, the tags (heading-details and heading-more-details) don't line up responsively. So, they'll align on a 15-inch laptop, but not at the half screen or on a 13-inch laptop. Usually, they're one or two lines off.
I'd especially like to get it so that it lines up regardless of how much text is in the p-container. That way it's easier to manage to add/remove text. Any help would be much appreciated!
I have used Isotope JS to show the contents within the vertical tabs. However, each tabs have different contents, when the initial time of loading it shows contents from all tabs for a little bit of time. After 1-2 sec it will be fine. Can we solve that loading time issue? Actually, on loading time I need to show only contents from the first tab.
var first = $(".item:first")
$('#items').isotope({
filter: first
});
// Filters out items
$('#filters a').click(function(e) {
e.preventDefault()
var selector = $(this).attr('data-filter');
$('#items').isotope({
filter: selector
});
});
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
.isotop-tabs {
border-right: 1px solid #aaa;
}
.isotop-tabs li {
float: none;
width: 100%;
}
.isotop-tabs li a {
display: block;
padding: 10px 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.4/isotope.pkgd.min.js"></script>
<div id="isotope">
<div class="col-sm-3">
<ul class="isotop-tabs" id="filters">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
<div class="col-sm-9">
<div id="items" class="item-list">
<div class="item one">
<img src="https://placeholdit.co//i/555x150" class="img-responsive">
<h3>Heading One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="item two">
<img src="https://placeholdit.co//i/555x150" class="img-responsive">
<h3>Heading Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="item three">
<img src="https://placeholdit.co//i/555x150" class="img-responsive">
<h3>Heading Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="item four">
<img src="https://placeholdit.co//i/555x150" class="img-responsive">
<h3>Heading Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="item five">
<img src="https://placeholdit.co//i/555x150" class="img-responsive">
<h3>Heading Five</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
JSFiddle link: https://jsfiddle.net/vishnuprasadps/c0kf8nyf/3/
I would do something like:
$('#items').isotope({
// Options
}).addClass('is-show');
and CSS:
#items {
display:none;
}
#items.is-show {
display: block;
}
Demo: https://jsfiddle.net/b7Lw18ny/
In my blog, the title of the posts are shown on a div where a video plays in the background. Sometimes the title of the blog is 2 words, sometimes it is more than 20 words. And in the latter case, the text may overflow from its parent container where the video plays.
I do not want to hide the overflown material or use a scrollbar or any "...". The solution I am looking for is resizing the font dynamically if the text overflows so that it fits exactly to its parent div in any viewport.
Here is the code: https://codepen.io/anon/pen/QgBZqd
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>SINEMACERA</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Cabin" rel="stylesheet">
</head>
<body>
<!--NAVBAR STARTS-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SINEMACERA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Anasayfa</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Hakkımda</li>
<li>İletişim</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!--NAVBAR ENDS-->
<div id="COVERPHOTO">
<div id="COVER">
<h1 id="COVERTEXT">A TEXT SO LONG THAT IT CAN NOT FIT INTO THE PARENT DIV CONTAINER AND MIXES UP WITH THE BLOG, HENCE IT BECOMES UNAESTHETIC. THIS TEXT COULD HAVE BEEN EVEN LONGER AND LONGER</h1>
<video autoplay loop id="video-background" muted plays-inline>
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="container">
<div class="row">
<div id="MAJORCONTENT">
<div class="col-lg-12">
<h1>Lorem Ipsum Üzerine</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<span class="readmore">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</span>
<button type="button" class="btn btn-primary wide-button">Devamını oku!</button>
</div>
<div class="col-lg-12">
<h1>Lorem Ipsum Üzerine</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<span class="readmore">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</span>
<button type="button" class="btn btn-primary wide-button">Devamını oku!</button>
</div>
<div class="col-lg-12">
<h1>Lorem Ipsum Üzerine</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<span class="readmore">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</span>
<button type="button" class="btn btn-primary wide-button">Devamını oku!</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sinemacera.js"></script>
</body>
</html>
CSS
body {
background: black;
color:white;
font-family: Cabin;
}
.wide-button {
width:100%;
}
h1 {
text-align: center;
text-shadow: 0px 2px 10px rgba(255, 255, 255, 0.4)
}
.row {
float:left;
}
.readmore {
display:none;
}
#COVERPHOTO {
margin-top: 50px;
}
#COVER {
opacity:0;
position: relative;
font-size: 40px;
text-align: center;
}
#COVERTEXT {
opacity: 0;
margin:0;
font-family: Anton;
font-size: 10vw;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.7),
0px 8px 13px rgba(0, 0, 0, 0.3),
0px 18px 23px rgba(0, 0, 0,0.3);
position: absolute;
top:50%;
left:0;
right: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: -moz-translateY(-50%);
}
#MAJORCONTENT {
text-align: justify;
font-size: 1.5em;
margin-bottom: 5%;
}
video {
width:100%;
height: auto;
}
.container:nth-of-type(2) {
padding-bottom: 1%;
}
JS
$(".btn-primary").click(function() {
var thisBTN = $(this);
var RM = $(this).prev();
RM.slideToggle(1000, function() {
thisBTN.toggleClass("btn-info")
if(thisBTN.text()==="Küçült") {
thisBTN.text("Devamını oku");
}
else {
thisBTN.text("Küçült")
}
});
});
$("#COVER").fadeTo(400,1);
$("#COVERTEXT").delay(600).fadeTo(500,0.5);
I was fiddling around the other day and discovered I made a solution to this once.
Node.prototype.fitText = function(maxSize) {
maxSize = maxSize || 500;
this.style.whiteSpace = "nowrap";
this.style.overflow = "scroll";
this.style.fontSize = maxSize + "px";
while (this.scrollWidth > this.clientWidth) {
this.style.fontSize = --maxSize + "px";
}
}
document.querySelector('.container').fitText();
<div class="container">
Text To Fit
</div>
You can use in css the vh unit:
font-size: 20vh;
Im working on a menu that is located on the left side of the screen, and with a button that is located on the main content area i hide/show the menu.
When the screen width is less than 768px i hide the menu using css, the problem that im having is that because the menu is already hided, when the user clicks on the button instead of showing the menu it is trying to hide the menu again.
Im having a lot of troubles trying to explain the problem,
Here is the live demo, with all the code of what I have.
The code works fine for desktop, the problem is when the screen is less that 768px.
This is the function tham using to show/hide the menu and to move the content
$('#menu-toggle').click(function(e)
{
e.preventDefault();
$('#sidebar').toggleClass('show-hide');
$('#page-content').toggleClass('show-hide');
});
CSS
.show-hide
{
margin-left: -250px;
}
Full Code Live Demo: https://jsfiddle.net/c7cpLq9m/
Just added this to the media query:
#wrapper .show-hide {
margin-left: 0;
}
$('#menu-toggle, .mobile-trigger').click(function(e) {
e.preventDefault();
$('#sidebar').toggleClass('show-hide');
$('#page-content').toggleClass('show-hide');
});
.container-fluid {}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mobile-trigger{
display: none;
}
#sidebar {
z-index: 1000;
position: fixed;
height: 100%;
width: 250px;
overflow-y: auto;
background: #1b1e24;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-hide {
margin-left: -250px;
}
ul.sidebar-nav {
list-style: none;
padding: 0;
}
ul.sidebar-nav li a {
display: block;
padding: 10px 25px;
color: #8b91a0;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1em;
}
ul.sidebar-nav li span {
padding-right: 10px;
}
ul.sidebar-nav li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
#page-content {
transition: 0.5s;
/* position: absolute; */
padding-left: 255px;
/* width:100%;
background: grey;*/
}
#media ( max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#wrapper .show-hide{
margin-left: 0;
}
.mobile-trigger{
display: block;
}
#page-content {
padding-left: 0px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<div id="sidebar">
<ul class="sidebar-nav">
<li><a class='mobile-trigger' href="#"><span class="glyphicon glyphicon-menu-hamburger"></span> Hide mobile menu</a></li>
<li class="sidebar-brand"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-user"></span> Contacts</li>
<li><span class="glyphicon glyphicon-picture"></span> Content</li>
<li><span class="glyphicon glyphicon-inbox"></span> Inbound</li>
<li><span class="glyphicon glyphicon-envelope"></span> Outbound</li>
<li><span class="glyphicon glyphicon-globe"></span> Social</li>
<li><span class="glyphicon glyphicon-folder-close"></span> Automation</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Reports</li>
<li><span class="glyphicon glyphicon-cog"></span> Settings</li>
<li><span class="glyphicon glyphicon-comment"></span> Feedback</li>
</ul>
</div>
<div id="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Duis aute</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Toggle Menu
<h1>Duis aute</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-6">
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ./wrapper -->
Update:
On mobile is better if you not push the content because it will look very messy. It's better to have the menu over the content and add a button inside the menu to close it. For this I added an extra element inside the menu, added the class mobile-trigger, I've hidden it by default on desktop and showed it on mobile using display: block;. Also added the selector mobile-trigger to the click event.
In lonut's answer its better adding this styles:
#menu-toggle {
position: absolute;
top: 0;
right: 10px;
}
To bring the toggle menu button top right of page.
This is my css
<style type="text/css" media="screen">
body {
margin: 0;
}
#wrap1{
width:600px;
margin:0 auto;
overflow:hidden;
-moz-box-shadow: 0 0 2px 2px #ccc;
-webkit-box-shadow: 0 0 2px 2px #ccc;
box-shadow: 0 0 2px 2px #ccc;
}
#body1{
width: 8000px;
}
.panel {
width: 600px;
float: left;
left:0px;
top:0px;
margin-top: 45px;
background: #eee;
}
#banner {
position: fixed;
}
#banner ul {
line-height: 45px;
margin: 0 30px;
padding: 0;
}
#banner ul li {
display: inline;
margin-right: 30px;
}
</style>
This is what I have in my body
<div id="wrap1">
<div id="body1">
<div id="banner">
<ul>
<li>
Home
</li>
<li>
Newsletter
</li>
<li>
Directions & Opening Hours
</li>
<li>
Contact us
</li>
</ul>
</div>
<div id="home" class="panel">
<h2>
Home
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="newsletter" class="panel">
<h2>
Newsletter
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="directions" class="panel">
<h2>
Directions
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="contact" class="panel">
<h2>
Contact
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
and this is the javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#banner a").bind("click",function(event){
event.preventDefault();
var target = $($(this).attr("href"));
$("html, #wrap1").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
</script>
I want to have something like this. So, when I clicked the navigation contact, the page inside the wrap1 will scroll smoothly to the where the anchor #contact is
However, what i get right now is the smooth scroll is working fine, however, it doesn't seem stop at where it is supposed to stop. For instance, when I click Newsletter link, the scroll will stop in the half part of Newsletter. So when click Newsletter link, it will show me half part of Newsletter and half part of Directions.
Please jQuery guru out there help me fix this issue. This has been bugging me for days.
Thanks and sorry for the lack of jQuery knowledge I have.
*EDITED:
This is my page looks like right now. Please help
http://testhscroll.tumblr.com/
Your problem is that offset() returns values relative to the document, whereas scrollLeft will be relative to the parent.
You need to adjust by the position of the parent (div#banner or the UL).