The issue I am having involves two objects which are supposed to have a function bound to them once the page loads.
One of the objects is a widget loading via a script. The widget is eventually placed in the div.
The other object is pure html, which works as expected.
I am assuming this is an issue with the order the objects are loading, but I can't seem to come to a solid conclusion since my script to build the div is in the head (so it should load first?), followed by the html, and finally the script at the bottom of my document. So if this is all true, the object should be loaded before the final $(document).ready function runs, but the bind does not seem to be applied to the generated div.
Any help would be greatly appreciated and will receive a fast response! (I promise!!!)
<script type="text/javascript" id="BROKEN_OBJECT" src="https://link.com/broken.js"></script> //(In Head)
<div>
<span /> Object to be loaded via JS
</div>
<div class="widget">
<ul class="hs">
<li>
<div>
<span /> Object loaded via HTML
</div>
</li>
</ul>
</div>
jQuery(function ($) {
$.fn.hScroll = function (amount) {
amount = amount || 120;
$(this).bind("DOMMouseScroll mousewheel", function (event) {
var oEvent = event.originalEvent,
direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
position = $(this).scrollLeft();
position += direction > 0 ? -amount : amount;
$(this).scrollLeft(position);
event.preventDefault();
})
};
});
$(document).ready(function () {
$('.hs').hScroll(60); // You can pass (optionally) scrolling amount
});
EDIT
I've created a new version of the code which includes almost everything.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" id="BROKEN_OBJECT" src="https://link.com/broken.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Events Scroll</title>
<style>
.widget {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
--gutter: 20px;
padding-left: 50px;
padding-right: 50px;
}
.widget > * {
grid-column: 2 / -2;
}
.widget > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 0px;
grid-template-rows: 285px;
grid-auto-flow: column;
grid-auto-columns: 200px;
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.25 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
width: 10px;
}
ul {
list-style: none;
padding: 0;
}
.widget {
width: 100%;
height: 100%;
}
.hs > li,
.event {
transform: scale(.96);
scroll-snap-align: center;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(240, 240, 240);
border-radius: 8px;
border: solid 1px gray;
background-repeat: no-repeat;
height: 285px;
background-size: 200px 200px;
}
</style>
</head>
<body>
<div class="lwcw" data-options="id=3&format=html"></div>
<div class="widget">
<ul class="hs full no-scrollbar" id="scroll">
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
</ul>
</div>
<script>
$('.widget').on("DOMMouseScroll mousewheel", '#scroll', function (event) {
amount = 60
var oEvent = event.originalEvent,
direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
position = $('#scroll').scrollLeft();
position += direction > 0 ? -amount : amount;
$('#scroll').scrollLeft(position);
event.preventDefault();
});
</script>
</body>
</html>
Related
Here is a link to a CodeSandbox with the code below.
There is a div with a class of content that I want to take up the remaining height and have the children share the rest of the height (2 children => both take half; 3 children => each takes a third etc.), while taking up the full width.
I can't for the life of me figure out how to do this. I tried both grid and flex approaches, but wasn't able to make either work.
How would you achieve this layout?
The code:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app" class="app">
<h1 class="sr-only">My Title</h1>
<nav class="nav">
<li>some</li>
<li>nav</li>
<li>items</li>
</nav>
<header>
<h2>
Where do you want to go?
</h2>
</header>
<!-- Content should take all of the remaining available height -->
<div class="content">
<!-- Link 1, 2, and 3 should take a third of content's height each and take up the full width -->
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
index.js:
import "./styles.css";
styles.css:
body {
font-family: sans-serif;
}
html,
body {
height: 100%;
}
.app {
min-height: 100%;
}
.nav {
display: flex;
}
.content {
display: flex;
flex-direction: column;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
Using flex:
body {
font-family: sans-serif;
}
html,
body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.app {
min-height: 100%;
background: #00fa
}
.app,
.content {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
background: #fe0;
}
.content > a {
flex: 1;
border:solid 1px;
}
.nav {
display: flex;
}
<div id="app" class="app">
<nav class="nav">
<li>some</li>
<li>nav</li>
<li>items</li>
</nav>
<header>
<h2>
Where do you want to go?
</h2>
</header>
<!-- Content should take all of the remaining available height -->
<div class="content">
<!-- Link 1, 2, and 3 should take a third of content's height each and take up the full width -->
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Each time I change displays within one HTML file JS stops working (I've tried to replace HTML onclick call with JS function, but it's still the same)
UPD: Sorry for bad explanation. The problem is that if I move from the main display of this site by clicking links on nav panel (e.g. from #main to #contacts or #cart) JS script stops responding on burger icon click (clicking on burger nav panel for screen max-width of 800px doing nothing)
Code:
const burger = document.querySelector('.burger i');
const nav = document.querySelector('.nav');
function toggleNav() {
burger.classList.toggle('fa-bars');
burger.classList.toggle('fa-times');
nav.classList.toggle('nav-active');
}
burger.addEventListener('click', function() {
toggleNav();
});
html,
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: #ffffff;
color: #343434;
border-bottom: 1px solid #343434;
border-top: 1px solid #343434;
}
.logo {
letter-spacing: 3px;
}
.nav {
display: flex;
justify-content: space-around;
width: 30%;
}
.navlink {
list-style: none;
margin: 0;
}
.navlink a {
color: #343434;
text-decoration: none;
font-size: 1.2em;
}
.burger {
font-size: 1.2em;
display: none;
}
#media screen and (max-width: 800px) {
.burger {
display: block;
}
.nav {
margin: 0;
background: #ffffff;
position: absolute;
right: -100%;
top: 70px;
width: 50%;
height: calc(100% - 70px);
flex-direction: column;
justify-content: space-around;
padding: 0;
transition: all 400ms;
}
.navlink {
text-align: center;
}
.nav-active {
right: 0;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="./site.css">
<script src="site.js" type="javascript"></script>
<title>Атлас</title>
</head>
<body>
<div id="main" style="display:block">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('main').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="contacts" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('contacts').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="delivery" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('about').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="cart" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('cart').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
<script src="./site.js"></script>
</header>
</div>
<div id="payment" style="display:none">
</div>
<script src="./site.js"></script>
</body>
</html>
The problem is that you have several .burger in your HTML and you only define a Javascript event for the very first one. You could remedy this via:
const burgers = document.querySelectorAll('.burger i');
and
for (let burger of burgers) {
//define your event
}
but it's not the best approach. The very best thing that you could do is to refactor your HTML and have a single item with the .burger class, but with more reliable event.
I keep getting the Error: Uncaught TypeError: ui is undefined when running this file in browser
File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bla</title>
<link rel="stylesheet" href="styles/jquery-ui.css">
<style>
#outer {
/* position: relative; */
width: 60%;
height: 700px;
background-color:cornflowerblue;
text-align: center;
margin: 0 auto;
}
li {
/* position:relative; */
margin: 0;
padding: 0;
background-color: pink;
}
.inner {
/* position: relative; */
margin: 0;
padding: 0;
background-color:darkgoldenrod;
height: 5em;
}
#sortable {
list-style-type: none;
}
p {
margin: 0;
padding: 0;
}
.tilt {
background-color:lightslategrey;
transform: rotate(5);
}
</style>
</head>
<body>
<div id="outer">
<ul id="sortable">
<!-- <li> -->
<div class="inner"><p>hello 1</p></div>
<!-- </li> -->
<li class="ui-state-default">
<div class="inner"><p>hello 2</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 2e</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 4</p></div>
</li>
</ul>
</div>
<button id="lebutton">Save</button>
<script src="scripts/jquerymin.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.min.js"></script>
<script>
$(function() {
$('#sortable').sortable();
$('#sortable').disableSelection();
$('#lebutton').on('click', function(e) {
e.preventDefault();
let childrens = $('#sortable').children();
childrens.each(function(index, elem) {
console.log(index + ": " + elem.textContent);
});
});
});
$('#sortable').sortable({
handle: function(event, ui) {
$(ui.item).addClass("tilt");
console.log('handle')
},
stop: function(event, ui) {
$(ui.item).removeClass("tilt");
console.log('stop');
},
});
</script>
</body>
</html>
I read the documentation for JQuery UI, and I thought one could select the item that is dragged in sortable by ui.item like $(ui.item)
I tried the example select statements from these places:
drag event for jquery-ui-sortable
Add and remove a class on click using jQuery?
jQuery Sortable - How to get current dragged element attribute
$('#'+ui.item[0].id).removeClass("ui-state-default"); from this answer:
https://stackoverflow.com/a/1931019/7989121
and ui.helper.addClass('red'); from this answer:
https://stackoverflow.com/a/25018112/7989121
What am I doing wrong?
According to the jQuery UI documentation handle
is not a function type, so you cannot pass event and ui to it.
Correct me if I'm wrong but I assume you want to add a class to the item that is being selected (.tilt) and then when the item is dropped in its new position, the class is removed...correct?
Remove the $("#sortable").sortable() line because you are calling this in the other function
Put your other "sortable" function inside the jQuery $(function()
Change handle to activate
Use ui.item to access the element.
$(function() {
$('#sortable').sortable({
activate: function(event, ui) {
ui.item.addClass("tilt");
},
stop: function(event, ui) {
ui.item.removeClass("tilt");
}
});
$('#sortable').disableSelection();
$('#lebutton').on('click', function(e) {
e.preventDefault();
let childrens = $('#sortable').children();
childrens.each(function(index, elem) {
console.log(index + ": " + elem.textContent);
});
});
});
#outer {
/* position: relative; */
width: 60%;
height: 700px;
background-color:cornflowerblue;
text-align: center;
margin: 0 auto;
}
li {
/* position:relative; */
margin: 0;
padding: 0;
background-color: pink;
}
.inner {
/* position: relative; */
margin: 0;
padding: 0;
background-color:darkgoldenrod;
height: 5em;
}
#sortable {
list-style-type: none;
}
p {
margin: 0;
padding: 0;
}
.tilt {
background-color:lightslategrey;
transform: rotate(5) !important;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="outer">
<ul id="sortable">
<!-- <li> -->
<div class="inner"><p>hello 1</p></div>
<!-- </li> -->
<li class="ui-state-default">
<div class="inner"><p>hello 2</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 2e</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 4</p></div>
</li>
</ul>
</div>
<button id="lebutton">Save</button>
i'm trying to change the active class to the selected item but i could not did it right i've searched on google and here on stack overflow as well and i found the toggle() method so i give it a go on my code but i think i didn't use it right
here is my code:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item active" onclick="active()">home</li>
<li class="main-nav-item active" onclick="active()">contact</li>
<li class="main-nav-item active" onclick="active()">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
.main-nav{
display: flex;
align-items: center;
}
.main-nav-items{
display: flex;
width: 1200px;
list-style-type: none;
justify-content: flex-end;
align-items: center;
font-size: 18px;
padding: 10px;
}
.main-nav-item{
font-size: 18px;
padding: 10px;
border-radius: 10px;
}
.main-nav li.active{
background-color: #542188;
padding: 10px;
border-radius: 10px;
color: white;
}
.main-nav-item:hover{
background-color: #ddd;
color: white;
}
JS:
function active(){
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList=items[i].classList.replace("active","")
}
document.querySelector(".main-nav-item").classList.toggle("active");
}
thank you in advance
first add Jquery to your html doc like this
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item" onclick="active(1)" id="1">home</li>
<li class="main-nav-item" onclick="active(2)" id="2">contact</li>
<li class="main-nav-item" onclick="active(3)" id="3">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- here is jquery plugin -->
<script>
function active(id){
$("#"+id).on("click",function(){
$(this).toggleClass("active");
});
}
</script>
</body>
</html>
<li class="main-nav-item active" onclick="active(this)">home</li>
<li class="main-nav-item active" onclick="active(this)">contact</li>
<li class="main-nav-item active" onclick="active(this)">about</li>
you need to pass the element that was clicked, to get a reference on which element would remain to be active.
function active(target){
/* this block is to remove all the active class on all main-nav-item
* [if this scenario is the one you really needed to do
* else remove this part]
*/
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
/* use the parameter "target" on which you passed using the html code
* "onclick(this)" and toggle the class "active"
*/
target.classList.toggle("active");
}
PS.
if all your main-nav-item has the same flow,
you could use, "querySelectorAll" to get all the main-nav-item and from there, add an event listener for click, and you remove all the "onclick" on your HTML
<ul class="main-nav-items">
<li class="main-nav-item active">home</li>
<li class="main-nav-item active">contact</li>
<li class="main-nav-item active">about</li>
</ul>
var mainNavItems = document.querySelectorAll(".main-nav-item");
Array.forEach(mainNavItems, function( navItem ) {
navItem.addEventListener("click", function(){
/* again, you could remove this block of codes, if you
* just intend to toggle the active class */
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
this.classList.toggle("active");
});
});
I have got a code for navbar which is working perfectly... Also i have got the code for a collapsable side bar which is also working perfectly. But now i dont understand how to add these two together so that i get a page with navbar and sidebar together.
This is my code for navbar - (complete with html):
<html>
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
<!-- Font styles -->
<style type="text/css">
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
</style>
</head>
<body style="background-color:#E6E6FA">
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
</body>
</html>
Those links in the head tag - i got it by simply googling.
Also, my sidebar code is here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
But not now. how do I combine these? I want a page which will have both the top navbar and the sidebar. I have all combinations of pasting the codes but with no luck. What i have latest now - after combining these two is this -
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<link rel="stylesheet" href="styles.css">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Sidebar nav -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Sidebar Ends -->
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
By combining it like this, The side bar is working correctly but the top navbar is just a big white block. Nothing in there.
Divide both the sections differently. Put both in one row and give col-2 to the sidebar side and col-10 to the nav-bar side. This way you'll be having a side and nav-bar both side by side, you can also use the nav-bar side for creating a normal webpage. All the best!
First of all, your missing an opening style tag just after your <title>both</title>. (You have a closing /style tag just before your nav). This will apply inline styles for the time being. You should see what you want to achieve now.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
/* styles */
</style>
</head>
But ultimately, you need to copy these styles into a CSS file and then link the CSS file in your HTML like this: <link rel="stylesheet" href="css/styles.css">. That is presuming, your stylesheet is called "styles.css" and is inside a 'CSS' folder.
Have a look at the HTML link tag for linking your external CSS file.