Im trying to build a collapsible sliding left panel using bootstrap 5. Im almost there but having some issues.
If you have a look at the code here: https://jsfiddle.net/dizzy0ny/86wjas9L/108/
You will see i try to achieve this two different ways. one using javascript and one using Boostrap/CSS. The behavior are different.
i would like the panel to slide left. this works for the javascript code (Toggle1 button). But does not for toggle2 button. in the latter's case it slides up instead
regardless of method used the content shown does not resize to fit the entire page width then the panel is collapsed. And in other case when the window is smaller, if i expand the collapsed panel, a horizontal scrollbar appears as the chart does not resize to fit. Ive tried a few styling options to try and correct this - but have thus far failed.
lastly - anyway to have the content area's height adjusted to fit also so the vertical scroll bar does not show?
here is the html:
<head>
<!-- JQuery links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.css" integrity="sha384-X8QTME3FCg1DLb58++lPvsjbQoCT9bp3MsUU3grbIny/3ZwUJkRNO8NPW6zqzuW9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbar">
<div class="navbar-nav">
Toggle1
Toggle2
<a class="nav-item nav-link" id="home" href="#">Home</a>
<a class="nav-item nav-link" id="menu1" href="#">Menu 1</a>
<a class="nav-item nav-link" id="menu2" href="#">Menu 2</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row flex-nowrap">
<div id="sidebar" class="col-auto px-1 collapse collapse-horizontal show border-end">
<!--left collapsible nav bar-->
<div id="sidebar-nav" class="min-vh-100">
<form>
<div>
<div class="mb-3">
<select id="cot_contract" name="cot_contract" class="form-control selectpicker" data-live-search="true">
<option>Some Item Number 1</option>;
<option>Some Item Number 2</option>';
<option>Some Item Number 3</option>';
</select>
</div>
<div class="mb-3">
<input type="text" class="form-control" id="input1" name="input1" placeholder="Enter some text" />
</div>
</div>
</form>
</div>
</div>
<!--main content area-->
<main class="col ps-md-2 pt-2">
<div id="container"></div>
</main>
</div>
</div>
</body>
Here is the CSS:
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
padding: 5px;
align-items: stretch;
}
#sidebar.active {
margin-left: -250px;
}
#container {
height: 100%;
width: 100%;
}
and finally the javacript:
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
padding: 5px;
align-items: stretch;
}
#sidebar.active {
margin-left: -250px;
}
#container {
height: 100%;
width: 100%;
}
Thanks much
Update:
Finally got all of this to work. the final issue of re-sizing the content and dealing with the vertical scroll bar always showing:
added d-flex h-100 flex-column to top level container for the row
containing the nav panel and content.
added body/html height 100%
main content column needs a display of 'content'.
to fix the vertical scroll bar always showing - moved nav into top
level div as another row. added 'h-100' 2nd row (containing the
collapsing pane and content).
Updated and working jsfiddle: https://jsfiddle.net/dizzy0ny/86wjas9L/513/
Man i hate css.
According to documentation from W3School, it's possible to do the sidebar the same without jQuery in a more pure way.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
Highcharts.chart('container', {
series: [{
data: [2, 5, 2, 3, 6, 5]
}]
});
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="mySidebar" class="sidebar">
×
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
<div id="container"></div>
</div>
Demo: https://jsfiddle.net/BlackLabel/kned9yuv/
----- EDIT
To adjust the chart to your container you can use chart.reflow(), every time when you resize the window.
Demo: https://jsfiddle.net/BlackLabel/kned9yuv/3/
Related
I am new to HTML and have been reverse engineering code to suit my own needs for developing an updated internal website for my work.
Currently I have my code linking to different .htm pages that simulate being on the same page. Obviously this is entirely too tedious to change if I need to add or change documents.
I know that I can change the source for an iframe, but every solution I have seen doesn't work for me. I'm so inexperienced I don't even know where to start. I've tried the onclick function, but it just breaks my buttons and does nothing beyond that.
Any help is appreciated.
Here is my current code:
<!DOCTYPE html>
<!---Version: 2.x FOUNDATION--->
<html>
<head>
<title align="center">MainPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown {
top: 7px;
position: center;
display: inline-block;
}
.dropdown-menu {
background-color: white;
color: black;
padding: 12px;
font-size: 14px;
border: none;
left: -100%;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.navbar {
background-color: #C0C0C0;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 0px;
}
/* Links inside the navbar */
.navbar a {
float: left;
position: center;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 59px; /* Add a top margin to avoid content overlay */
}
iframe {
display: block;
border-style:none;
}
</style>
</head>
<body>
<!---Creates a Navbar at the top of the screen. Will scroll with site if content of the "Main" section is long enough.--->
<div class="navbar">
<p align="center" style="font-size:100%;"><b>Main Page</b></p> <!---Creates a "button" that links to the main page.--->
<div class="dropdown"> <!---The start of the buttons and drop down menus inside the Navbar.--->
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">On Air</a>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="button1.htm">Example1</a></li>
<li class="dropdown-submenu"><!---Creates a submenu inside of the parent menu.--->
<a class= "test" tabindex="-1" href="#">Weather<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex"-1" href="submenuButton1.htm">Example 2</a><li>
<div class="main"> <!---Creates the Main section of the page that the navabar sits over.--->
<p align="center">Welcome to the new and improved sampleURL.</p>
<!---Creates an iframe that displays the sampleURL.--->
<p align="center"><iframe name="mainframe" width="100%" height="770" src="sampleURL.htm?wmode=transparent" frameborder="0" allowfullscreen wmode="transparent"></iframe></p>
</div>
</a>
<script><!---A script that allows the submenu functions to work properly.--->
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Set a custom class to each tag that changes the iframe like this:
<a class="iframe-change" tabindex"-1" href="submenuButton1.htm">Example 2</a>
Now, catch the click event with this javascript script:
$(".iframe-change").on("click", function(event) {
event.preventDefault(); // Prevents the <a> event
$("[name=mainframe]").attr("src", $(this).attr("href")); // Changes the iframe "src" property to the url setted in the clicked <a>
});
My side-panel height is not expanding when my div content's get bigger. I've given the height to 100% it's working fine for mobile view but for the desktop view, sometimes my sidebar's height is not increasing as it's fixed. But I want this height to be dynamic with content of my div. This is my whole code : JSFiddle
Here you can see, if you click the navbar, it's open the bar, and down below you will see side-bar and div content are not in the same height. This is the problem I'm getting :
I want side bar to expand. How can I resolve this? All I can say that I've to change this css class's height but how ?:
.sidepanel {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
left: 0;
background-color: #221F20;
overflow-x: hidden;
padding-top: 40px;
transition: 0.3s;
}
if you add position: relative to your body, your problem should be solved.
$(document).ready(function() {
//sidepanel navigation
$(".toggleButton").on("click", function() {
if ($(".sidepanel").css("width") == "0px") {
var mainWidth = $("#main").width() - 256;
$(".sidepanel").css("width", `15%`);
$("#main").css("margin-left", `15%`);
$("#main").css("width", `85%`);
} else {
$(".sidepanel").css("width", "0%");
$("#main").css("margin-left", "0%");
$("#main").css("width", "100%");
}
});
//menu item navigation
$(".menuItem").on("click", function() {
// if this menuitem is collapsed
if ($(this).next().css("height") == "0px") {
// turning off all other menu items except for this
$(".menuItem").not($(this)).next("div").css("height", "0px");
$(".menuItem").not($(this)).removeClass("openAnchor");
$(".menuItem").not($(this)).addClass("collapsedAnchor");
// turning off all sub menu items except for this
$(".subMenuItem").next("div").css("height", "0px");
$(".subMenuItem").removeClass("openAnchor");
$(".subMenuItem").addClass("collapsedAnchor");
// substituting collapsed class for open class
$(this).removeClass("collapsedAnchor");
$(this).addClass("openAnchor");
var numberOfChildren = $(this).next("div").find("> a").length;
var height = 37 * numberOfChildren;
$(this).next("div").css("height", `${height}px`);
} else {
$(this).removeClass("openAnchor");
$(this).addClass("collapsedAnchor");
$(this).next("div").css("height", "0px");
}
});
// sub menu item navigation
$(".subMenuItem").on("click", function() {
// if this menuitem is collapsed
if ($(this).next().css("height") == "0px") {
// accesing sibling open anchor
var openAnchorChildNumber = $(this).parent().find(".openAnchor").first().next("div").find("> a").length;
var heightToDeduce = 37 * openAnchorChildNumber;
console.log(heightToDeduce);
// turning off all other sub menu items except for this
$(".subMenuItem").not($(this)).next("div").css("height", "0px");
$(".subMenuItem").not($(this)).removeClass("openAnchor");
$(".subMenuItem").not($(this)).addClass("collapsedAnchor");
// substituting collapsed class for open class
$(this).removeClass("collapsedAnchor");
$(this).addClass("openAnchor");
var numberOfChildren = $(this).next("div").find("> a").length;
var height = 37 * numberOfChildren;
$(this).next("div").css("height", `${height}px`);
var parentHeight = $(this).parent().height() + height - heightToDeduce;
$(this).parent().css("height", `${parentHeight}px`);
} else {
$(this).removeClass("openAnchor");
$(this).addClass("collapsedAnchor");
$(this).next("div").css("height", "0px");
var numberOfChildren = $(this).next("div").find("> a").length;
var height = 37 * numberOfChildren;
var parentHeight = $(this).parent().height() - height;
$(this).parent().css("height", `${parentHeight}px`);
}
});
});
body {
position: relative;
}
/* The sidepanel menu */
.sidepanel {
height: 100%; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: absolute; /* Stay in place */
z-index: 1;
left: 0;
background-color: #221F20; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 40px; /* Place content 60px from the top */
transition: 0.3s;
}
.sidepanel .collapsedAnchor::after {
font-family: 'Font Awesome 5 Free';
float: right;
font-weight: 900;
content: "\f054";
}
.sidepanel .openAnchor::after {
font-family: 'Font Awesome 5 Free';
float: right;
font-weight: 900;
content: "\f078";
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #B7B6B8;
display: block;
transition: 0.3s;
font-size: 13px;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #FFFFFF;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
a.menuItem i.fa{
font-size: 15px;
}
#main {
transition: margin-left 0.5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.sidepanel .subMenus {
padding-left: 3%;
/* position: fixed; */
overflow-y: hidden;
transition: 0.5s;
}
.subMenus a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 13px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar" >
<i class="fa fa-align-left" style="color: #000;"></i>
<p>
user
</p>
</div>
<div class="sidepanel">
<!-- General panel -->
<i class="fas fa-file-alt sidepanel-icon"></i> General
</div>
<div class="container-fluid px-5 mt-2" id="main">
<div class="row py-4">
<div class="col-md-6 page-title-div">
<div class="page-header">
<h2>HTML</h2>
</div>
</div>
</div>
<div class="row card py-4 rounded">
<div class="col-md-6 page-title-div">
<div>
<p>In HTML, there are two main types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
</p>
</div>
</div>
</div>
</div>
position should be fixed.
top 0 property solved the space issue.
added toggle inside the nav to toggle it when it opens, you only need to restyle the toggle that is inside the nav if you wish.
.sidepanel {
height: 100%;
top: 0;
width: 0;
position: fixed;
z-index: 9999;
left: 0;
background-color: #221F20;
overflow-x: hidden;
padding-top: 40px;
transition: 0.3s;
}
<div class="navbar" >
<i class="fa fa-align-left" style="color: #000;"></i>
<p>
user
</p>
</div>
<div class="sidepanel">
<i class="fa fa-align-left" style="color: #000;"></i>
<!-- General panel -->
<i class="fas fa-file-alt sidepanel-icon"></i> General
</div>
<div class="container-fluid px-5 mt-2" id="main">
<div class="row py-4">
<div class="col-md-6 page-title-div">
<div class="page-header">
<h2>HTML</h2>
</div>
</div>
</div>
<div class="row card py-4 rounded">
<div class="col-md-6 page-title-div">
<div>
<p>In HTML, there are two main types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
</p>
</div>
</div>
</div>
</div>
I wanted to make my right dark column fixed and sidebar fixed, but the problem is that they both overlap, I have tried a lot of other methods and none of them worked, I tried to style with fixed parameters, but it didnt work either. I want class content-c to be fixed (thats the dark column) and sidebar to be fixed without overlapping eachother or another column which is in middle for main content
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
background: #fff;
border: none;
border-radius: 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
.stay-open {display:block !important;}
.codep {
color: #f0ad4e;
padding-top: 10px;
padding-bottom: 10px;
}
.code {
padding-top: 20px;
padding-left: 3px;
}
.neapolitan {
background:red;
position:relative;
height:1px;
content:'';
background:gray;
width:100%;
}
.cont{
padding-top: 10px;
}
.cont h3 h2 h6{
padding-top: 20px;
}
.cont p{
color: #696969;
font-size: 14px;
}
.label-default {
background-color: #777;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.cont li {
font-family: 'Poppins', sans-serif;
font-weight: 300;
line-height: 1.7em;
color: #696969;
font-size: 14px;
padding-bottom: 10px;
}
.cont ul{
padding-left: 40px;
}
.cont{
height: 100vh;
}
.ind{
}
.cont-t{
font-size: 11px;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 4px;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
/* Code snippet style for output.html*/
#dvid{
z-index: 0;
position: absolute;
}
#dvid1{
z-index: 1;
position: absolute;
}
#dvid2{
z-index: 2;
position: absolute;
}
#dvid3{
z-index: 3;
position: absolute;
}
#dvid4{
z-index: 4;
position: absolute;
}
#dvid5{
z-index: 5;
position: absolute;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
min-width: 250px;
max-width: 250px;
background: #343a40;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar ul.components {
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 0.9em;
display: block;
}
#sidebar ul li a:hover {
color: #343a40;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #f0ad4e;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.7em !important;
padding-left: 30px !important;
background: #292b2c;
}
.content-c {
height: 100vh;
}
.content-m{
height: 100vh;
}
.linknav {
padding-left: 74px;
}
.linknav a{
display:inline;
margin-right:1.5em;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
.navbar{
width: auto;
}
.content-c{
width: 30%;
}
.content-m{
width: 50%;
}
.content-cf{
width: 25%;
}
.content-mf{
width: 55%;
}
.sidebar{
width: auto;
}
}
<!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">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-1.8.3.js" integrity="sha256-dW19+sSjW7V1Q/Z3KD1saC6NcE5TUIhLJzJbrdKzxKc=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="../css/style.css" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="../index.html">IP Intelligence</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav">
<li class="nav-item active">
<a class="nav-link" href="../index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="../input/input.html">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="output.html">Output</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../flags/flags.html">Flags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../flags/flags.html#error">Error Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../contact/contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav class="" id="sidebar" style="position: fixed;">
<ul class="list-unstyled components">
<li>
Home
</li>
<li>
Input
<ul class="collapse list-unstyled" id="inputSubmenu">
<li>
Input
</li>
<li>
Optional Input Settings
</li>
</ul>
</li>
<li>
Output
<ul class="collapse list-unstyled stay-open" id="outputSubmenu">
<li>
Expected Output
</li>
<li>
Interpretation of the Results
</li>
<li>
Variations of Implementation
</li>
</ul>
</li>
<li>
Comparing Flags
</li>
<li>
Error Codes
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="container-flex content-m col-5">
<!--main page-->
<div class="cont">
<span id = "othdiv"></span>
<h3>Expected Output</h3>
<p>On a valid request, the system will return a value between 0 - 1 (inclusive) of how likely the given IP is a proxy. On error, a negative value will be returned. If <span class="label label-default">format=json</span> is used, a valid JSON format will be returned with extra information, see below for details.</p>
<br>
<br>
<span id = "othdiv1"></span>
<h3>Interpretation of the Results</h3>
<p>If a value of 0.50 is returned, then it is as good as flipping a 2 sided fair coin, which implies it's not very accurate. From my personal experience, values > 0.95 should be looked at and values > 0.99 are most likely proxies. Anything below the value of 0.90 is considered as "low risk". Since a real value is returned, different levels of protection can be implemented. It is best for a system admin to test some sample datasets with this system and adjust implementation accordingly. <b>I only recommend automated action on high values ( > 0.99 or even > 0.995 )</b> but it's always best to manually review IPs that return high values. For example, mark an order as "under manual review" and don't automatically provision the product for high proxy values. <b>Be sure to experiment with the results of this system before you use it live on your projects.</b> If you believe the result is wrong, don't hesitate to contact me, I can tell you why. If it's an error on my end, I'll correct it. If you email me, expect a reply within 12 hours.
</p>
<br>
<br>
<span id = "othdiv2"></span>
<h3>Variations of Implementation</h3>
<h6 class="ind">Use Dynamic Ban List Only (Skip Dynamic Check and Bad IP Checks)</h6>
<p class="ind">If you get a value between 0 - 1, exclusive (like 0.99, 0.99999, 0.97), these values are generated by dynamic checks which looks for <b>characteristics</b> of the given IP. IPs that are either manually banned or seen on a public proxy site will return a value of 1. If you only want manually banned or public proxies, then in your code just look for the value "1". However, there are many IPs that haven't gone through manual review and IPs can change behavior very frequently (which is why dynamic checks exist in the first place). If you <b>only</b> look for the value of "1", then expect to have more proxy / VPN / bad IPs go through your system, however, false positives are less likely if you use the dynamic ban list option.</p>
<br>
<p class="ind">If you wish to use only manually banned & public proxy IPs, append the parameter <span class="label label-default"><span class="label label-default">&flags=m</span></span>, the system will only return a result of 0 or 1. <b>This option is the best to start off with that will have a noticeable impact in bot / proxy / VPN traffic, especially if you don't have any data sets to test with the system.</b> The query should look something like</p>
<p class="ind alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=m</p>
<p class="ind">This option is the fastest. </p>
<br>
<br>
<span id = "othdiv3"></span>
<h6> Use Dynamic Ban List and Dynamic Checks Only (Skip Some of the Bad IP Checks)</h6>
<p class="ind">In this scenario, you want to use dynamic checks as well but you want to skip additional checks to see if the IP is a bad ip (see What do you mean by "Bad IP"?). In this mode, some bad IPs are still detected but the system does not attempt to go through the full bad IPs check because the time for the extra checks vary wildly (between an extra 200ms to 2 seconds). In this mode, false positives are more likely than dynamic ban lists only. Scores are lower compared to the full IP check (without any flag options) because less attributes are considered.</p>
<br>
<p class="ind">If you wish to use dynamic ban list and dynamic checks only, append the parameter <span class="label label-default">&flags=b</span>.This option is the best if dynamic ban lists isn't catching enough IPs but you don't want to run the full check because it takes too long and/or you want to have a predictable execution time. The query should look something like </p>
<p class="alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=b</p>
<p>This option is slower than dynamic ban lists only, but much faster than the full check (no flags in query). This option is good if you only want proxy / VPN detection and you do not care about bad IPs, but <span class="label label-default">&flags=m</span> is not catching enough proxy / VPN IPs. </p>
<br>
<br>
<span id = "othdiv4"></span>
<h6>Default Lookup</h6>
<p class="ind"> This is the default lookup with no flags. Since the system is designed to work with real-time systems (return a result as fast as possible), some time consuming checks are put into a background process. This allows the system to return a result much faster. If those time consuming checks reveal that the returned result was not accurate (which is rare), the system will adjust the values. However, you must query the service again with the same IP to obtain the new result. Typically, the background jobs take no longer than 5 seconds to complete. If you want to force the system to do a full lookup (no background processes), use <span class="label label-default">&flags=f</span> option. </p>
<span id = "othdiv5"></span>
<br>
<br>
<br>
<h6>Force Full Lookup</h6>
<p> If you don't mind waiting up to 5 seconds for a result and you want the system to do a full lookup with one query, then use <span class="label label-default">&flags=m</span> option. The query should look something like </p>
<p class="alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=f</p>
<p style="padding-bottom: 500px;">This option is the slowest and should only be used on non-real-time applications. </p>
</div>
</div>
<div class="container-flex content-c col-4 bg-dark task-column" style="position: fixed;">
<!--Code Editor-->
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"/>
<div id="dvid">
<code>Code 0</code>
</div>
<div id="dvid1">
<code>Code 1</code>
</div>
<div id="dvid2">
<code>Code 2</code>
</div>
<div id="dvid3">
<code>Code 3</code>
</div>
<div id="dvid4">
<code>Code 4</code>
</div>
<div id="dvid5">
<code>Code 5</code>
</div>
</div>
</div>
</div>
</body>
</html>
give the two position:fixed ; right:0px; and left:0px;
I am experiencing issue. The navigation components owl-nav and owl-dots are no longer wrapped with owl-controls.
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots disabled">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
Demos show:
<div class="owl-controls">
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots disabled">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
This is breaking the default css selections within owl-theme.
Can any one help me to solve this issue?
Thanks in advance.
Had the same problem, used some CSS-Styling my own:
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
If you don't want to overlaps the dots just use:
.owl-dots {
text-align: center;
}
You've to add owl-theme file also to get pagination dots.
$(document).ready(function(){
$('#demoCarousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots: true // if you don't want dots, change to false
});
});
#demoCarousel .item {
height: 10rem;
background: #4DC7A0;
padding: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme" id="demoCarousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
I had same issue, Add more slides and dots will appear.
i have a theme based on bootstrap 2.2
Now i am customizing it.
When my menubar is scrolled to the top a menubar appears at the top.
When you click on the search bar it expands to a with of 200px ... and slides over the menu bar.
Now i want the same for the normal menubar. But when it gets to long it jumps under the menubar in stead of sliding over it.
How can i change that?
HTML code of the right search bar:
<div class="container">
<div class="row">
<div class="span12">
<nav>
<div id="megamenu">
</nav>
</div>
<div class="spy-left">
<div class="spy-right">
<div class="spyshop">
<div class="shoppingcart">
</div>
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
</form>
</div>
Here is the html code of the menubar which has to be changed:
<div class="container">
<div class="wrapper_w">
<div class="row">
<div class="span12">
<div class="menufront">
<div class="spy-left">
<nav>
<ul class="nav nav-list hidden-desktop">
<div id="megamenu">
<ul id="nav">
...
<div id="menufront" class="pull-right padding-1">
<div class="form-search-wrapper">
<form id="form-search-spy" class="form-search" method="get" action="http://h2374118.stratoserver.net/catalogsearch/result/">
<input class="search-query" type="text" name="q" placeholder="Zoeken...">
<button class="btn" onclick="document.getElementById('orm-search-spy').submit()" type="submit">
<i class="icon-search-2 icon-large"></i>
</button>
</form>
</div>
etc ...
Piece of the css:
#spy .form-search input.search-query:focus {
width: 200px !important;
}
#spy .form-search input.search-query {
border: 2px solid #fff;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.27);
float: left;
font-size: 12px;
height: 24px;
padding-left: 44px;
transition: all 0.5s ease 0s;
width: 49px;
}
#menufront .form-search input.search-query:focus {
display: inline-block;
float: left !important;
visibility: visible !important;
width: 140px !important;
}
#menufront .form-search input.search-query {
width: 100px !important;
}
Who can help me?
Use absolute positioning; then use property values of top , right and z-index to get desired effect.
you-search-bar {
position: absolute;
right: 0; /* adjust as needed */
top: -25px; /* Adjust as needed to get the number that will keep it above the menu */
z-index: 999; /* Whatever number that keeps it above the menu */
}
Note: As mentioned by Shipow, the parent needs to have a position value of relative.
You'll need to set the float rule in the CSS for that element to:
float: clear
You may have to do some other positioning to get things to look correct after that, but it's difficult to be more specific with seeing the code in action.
You can move it via the position: relative in your css
#spy .form-search input.search-query:focus {
width: 200px !important;
position: relative;
top: 30px;
}