Isotope JS tabs shows all contents on first loading - javascript

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/

Related

Sticky Bootstrap Navbar and Smooth-Scroll - Padding / Margin-Top

I'm trying to implement a bootstrap sticky navbar (fixed height of 81px) with smooth-scroll behavior.
The HTML site features section tags, such as <section class="section" id="news">, which works in order to jump to certain areas by using <a class="nav-link" href="#news">News</a> in the navbar. I am using the following CSS and JS technologies, which load at the beginning of the <body>:
https://getbootstrap.com/docs/4.6/components/navbar/
https://github.com/iamdustan/smoothscroll
https://github.com/jonaskuske/smoothscroll-anchor-polyfill
So far it works: at the bootstrap specific --breakpoint-lg at 992px, the navbar collapses into a burger menu. In order to compensate for the fixed-height navbar, I added the following code to my custom.css (loaded after the bootstrap.min.css of course), according to a trick found at https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
#media (max-width: 991px) {
section {
padding-top: 382px;
margin-top: -382px;
}
}
#media (min-width: 992px) {
section {
padding-top: 80px;
margin-top: -80px;
}
}
This works fine on larger dimensions of the browser window width, but as soon as it's loaded on smaller width windows (991px and below) - on almost all mobile devices - clicking the navbar-link jumps to a point slightly vertically offset. Any ideas why this happens? It seems my media-query for max-width: 991px is being ignored.

Thanks for your advice of creating a snippet. This shows the working trick by use of background colors for the individual divs within the sections. This way the very first element (a h2-heading) is at the top of each area that we jump to. When not using background-colors this totally works for the viewer and reader of the continous text with h2-headers in between.
I think I found a satisfying solution. My problem with the padding-top / margin-top trick was: instead of (correctly) styling the <div class="container" id="first"> in the CSS, I styled the <section>. Eventually, I also did not need the #media query anymore.
$(function() {
$(".nav-link").click(function() {
let nav = $(".navbar-collapse");
if (nav.hasClass("show")) {
nav.removeClass("show");
}
})
})
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
font-family: 'scroll-behavior: smooth;', sans-serif;
}
.container {
padding-top: 80px;
margin-top: -80px;
}
p {
line-height: 2em;
}
.navbar {
background: lightgoldenrodyellow;
}
.container {
display: grid;
}
#first {
background-color: lightcoral;
}
#second {
background-color: lightgreen;
}
#third {
background-color: lightblue;
}
#fourth {
background-color: lightgray;
}
#fifth {
background-color: lightyellow;
}
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>bootstrap / breakpoint / smooth-scroll issue</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.easing#1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/smoothscroll#0.4.0/smoothscroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/smoothscroll-anchor-polyfill#1.3.4/dist/index.min.js"></script>
<script src="script.js"></script>
<!-- Navigation Start -->
<nav class="navbar navbar-expand-lg sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-center">
<li class="nav-item active">
<a class="nav-link" href="#first">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#second">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#third">Third</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fourth">Fourth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fifth">Fifth</a>
</li>
</ul>
</div>
</nav>
<!-- Navigation End -->
<!-- Content Start -->
<section class="section">
<div class="container" id="first">
<h3>first</h3>
<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. 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. 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. 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>
</section>
<section class="section">
<div class="container" id="second">
<h3>second</h3>
<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. 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. 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. 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>
</section>
<section class="section">
<div class="container" id="third">
<h3>third</h3>
<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. 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. 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. 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>
</section>
<section class="section">
<div class="container" id="fourth">
<h3>fourth</h3>
<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. 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. 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. 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>
</section>
<section class="section">
<div class="container" id="fifth">
<h3>fifth</h3>
<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. 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. 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. 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>
</section>
<!-- Content End -->
</body>
</html>

Sticky Header jump while scrolling

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>

How to add a dropdown menu to a tab menu

I have a page that uses a tab system to organise the content. To do this I've used the 'Tabify' jQuery plugin (code below).
What I now need to do is to add a dropdown menu to one of the tabs so I can have sub-sections of this tab.
The trouble is that the tab script appears to only work on direct children of the UL element, meaning that my extra UL and LI elements for my dropdown behave very strangely.
See this example (code below)
I can manage a little jQuery but editing the script code to work is sadly beyond me.
Anyone know how I might get this to work?
Thanks in advance,
Tom
HTML:
<!-- TABS -->
<div class="container">
<ul id="tab-menu">
<li class="active">Tab 1</li>{/if}
<li>
Tab 2
<ul class="sub_sub_menu">
<li>Overview</li>
<li>Floorplans</li>
<li>Specifications</li>
</ul>
</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
</div>
<!-- CONTENT -->
<div class="container">
<div id="tab1">
<p>Tab 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="tab2">
<div id="dropdown1">
<p>Dropdown 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="dropdown2">
<p>Dropdown 2 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="dropdown3">
<p>Dropdown 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
</div>
<div id="tab3">
<p>Tab 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="tab4">
<p>Tab 4 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
</div>
JS:
(function(a) {
a.fn.extend({
tabify: function(e) {
function c(b) {
hash = a(b).find("a").attr("href");
return hash = hash.substring(0, hash.length - 4)
}
function f(b) {
a(b).addClass("active");
a(c(b)).show();
a(b).siblings("li").each(function() {
a(this).removeClass("active");
a(c(this)).hide()
})
}
return this.each(function() {
function b() {
location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent())
}
var d = this,
g = {
ul: a(d)
};
a(this).find("li a").each(function() {
a(this).attr("href", a(this).attr("href") + "-tab")
});
location.hash && b();
setInterval(b, 100);
a(this).find("li").each(function() {
a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide()
});
e && e(g)
})
}
})
})(jQuery);
$(document).ready(function($){
$("#tab-menu").tabify();
});

Hre is a demo for the one i am talking about, you dont need to make any javascript calls for this, all you need to do is to play around with your html and css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tabs With Dropdown Menu</h3>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>

See here i used bootstrap along with the tabify to open a dropdown with in a tab, see if that helps , i am in office currently so could not do more, hope you can use it and do some effort to make it work as you want it
(function(a) {
a.fn.extend({
tabify: function(e) {
function c(b) {
hash = a(b).find("a").attr("href");
return hash = hash.substring(0, hash.length - 4)
}
function f(b) {
a(b).addClass("active");
a(c(b)).show();
a(b).siblings("li").each(function() {
a(this).removeClass("active");
a(c(this)).hide()
})
}
return this.each(function() {
function b() {
location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent())
}
var d = this,
g = {
ul: a(d)
};
a(this).find("li a").each(function() {
a(this).attr("href", a(this).attr("href") + "-tab")
});
location.hash && b();
setInterval(b, 100);
a(this).find("li").each(function() {
a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide()
});
e && e(g)
})
}
})
})(jQuery);
$(document).ready(function($) {
$("#tab-menu").tabify();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://takazudo.github.io/jQuery.tabify/demos/1/styles.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>
<script src="http://takazudo.github.io/jQuery.tabify/jquery.tabify.js"></script>
<!-- TABS -->
<div class="container">
<ul id="tab-menu">
<li class="active">Tab 1</li>
<li>
<div class="dropdown">
<a class="dropdown-toggle" type="button" data-toggle="dropdown">Tab 2</button>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Floorplans</li>
<li>Specifications</li>
</ul>
</div>
</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
</div>
<!-- CONTENT -->
<div class="container">
<div id="tab1">
<p>Tab 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido
consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="tab2">
<div id="dropdown1">
<p>Dropdown 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="dropdown2">
<p>Dropdown 2 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="dropdown3">
<p>Dropdown 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
</div>
<div id="tab3">
<p>Tab 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido
consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="tab4">
<p>Tab 4 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido
consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
</div>

How to change font-size dynamically so that it always fits into its parent container

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;

Can't get my .js to work in my Dreamweaver file

I am following a video tutorial for creating a sticky navigation after some scrolling, and I have almost completely copied the html, css, and js, but still nothing seems to be happening for me.
I have a hunch that the issue lies in file placements. But after hours of trying to fix the problem, I'm honestly at a complete loss of what to do next. I need another set of eyes.
All I am trying to do at the moment, is get an 'alert' to pop up when I refresh the page, letting me know how many pixels the nav bar is from the top.
Thanks in advance
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Stickey Navigation</title>
<link href="../Styles/sample-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Scripts/sample-script.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.11.2.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
</head>
<body>
<!--container-->
<div class="container">
<h1>Sample Header</h1>
<!--navigation-->
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</nav>
<!--end navigation-->
<h2>Content Header</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>
<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>
<!--end container-->
CSS
#charset "UTF-8";
/* CSS Document */
body {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.container {
margin: 100px;
padding: 20px;
box-shadow: 10px #333;
}
nav {
max-width: 100%;
background: #999;
}
nav ul, li {
display: inline-block;
background: #999;
margin: 0;
padding: 10px;
}
h1 {
font-size: 4.6em;
}
JS/jQuery
jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
alert(navOffset);
});

You are trying to eat the pizza before you make it. You try to use jQuery before you load jQuery.
There is also no need to include the min version and the dev version of the same file. Load only one.
Your includes:
<script type="text/javascript" src="../Scripts/sample-script.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.11.2.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
The way it should be
<script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../Scripts/sample-script.js"></script>

Categories

Resources