I'm making a website with Twitter's Bootstrap Framework (version 3), and I want to use the awesome script made by Roko C. Buljan Please see this StackOverflow post: How to fade loop background images?
This is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="img/favicon.ico">
<title>MY SITE</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" rel="home" title="PAGE">
<img style="max-width:64px; margin-top: -8px;" src='img/logo.png'>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><i class='glyphicon glyphicon-tasks'></i> Info</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class='glyphicon glyphicon-lock'></i> Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="fakebg"></div>
<div id='page' class="container">
<div class="starter-template">
<div class="row">
...
</div><!-- row -->
</div><!-- starter template -->
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bgchanger.js"></script>
</body>
</html>
CSS:
html, body, .fakebg
{
background: #000 none 0 50% / no-repeat center center fixed;
overflow:auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page
{
overflow:auto !important;
}
.fakebg
{
overflow:auto !important;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
background: #000 none 50% / cover no-repeat;
}
And bgchanger.js is the script by Roko.
The problem: My page is long (height), so the background cuts off at a certain height. This happens when I scroll.
What am I doing wrong?
Well, turns out that you need to set
html, body{ height:100%;}
in order to allow the .fakebg enlarge it's size to 100% (of the html / body parent ).
Related
I deployed website using Django. I used external js code for grid (I want site to be user-friendly for all screens). When running just html using same js code or running it on my computer through manage.py it works fine. But when I actually deployed website grid become unclickable from small screens and you cannot see menu.
I couldn't find anything in Google. I am not sure if I have to use load static because I use external script, but tell me if I am wrong
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- DOCUMENTATION NAVBAR -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<!-- Inside of a Container -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- This is the actual code that create the "hamburger icon" -->
<!-- The data-target grabs ids to put into the icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!-- Code for the hamburger icon-->
<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" style="color:white;"
href="{% url 'wpb:index' %}">
Mycroft Conspiracy Project</a>
</div>
<!-- Anything inside of collapse navbar-collapse goes into the "hamburger" -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">О проекте <span class="sr-only">(current)</span></li>
<li class="active">Политика<span class="sr-only">(current)</span></li>
<li class="active">Психология<span class="sr-only">(current)</span></li>
</ul>
<!-- SEARCH BAR -->
<form action="{% url 'wpb:search' %}" method="get" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Поиск">
</div>
<button type="submit" class="btn btn-default" name="search">Поиск</button>
</form>
<!-- Stuff on the Right -->
<ul class="nav navbar-nav navbar-right">
<li>Обратная связь</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- OTHER STUFF ON THE PAGE -->
<!-- Need to have JQuery and Javascript for DropDown Actions to work -->
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<br />
<br />
<br />
<body style=" height: 800px;
position: relative;">
{% block body_block %}
{# Anything outside of this will be inherited if you use extend.#}
{% endblock %}
</body>
</div>
</br>
<div style="font-family:Palatino Linotype;position: sticky; position: -webkit-sticky;left:0;bottom:0;width:100%; top: 100%; height: 12rem;background-color:#2e2c27; border:1px dotted #003333; padding:.8em; ">
<h4 style="color:white;font-weight: bold;">Mycroft Conspiracy Project</h4>
<span style="font-size:12pt; font-family: 'Cambria','times new roman','garamond',serif; color:white;">Достоверность информации</span></br>
<p style="font-size:10pt; line-height:10pt; font-family: 'Cambria','times roman',serif; color: white;">Проект является любительским и не носит информационный характер. Хотя автор указывает в каждой статье степень своего личного отношения к
описываемым версиям или данным, здесь отсутствуют намерения представить статьи как источники, на которые стоит ссылаться. При копировании материалов с сайта ссылка
обязательна.</p>
<span style="padding-top:10px; font-weight:bold; color:#CC0000; font-size:10pt; font-family: 'Calibri',Arial,sans-serif; "></span></br></br>
</div>
</body>
</html>
Found it. Problem was that link to js code was starting with http. Browser was blocking it as mixed content. Needed just to change it to https.
For some reason no matter what I do my navbar displays menu items horizontally on collapse with my logo in the middle of them! When I used the visible-xs etc it aligns it to the left for some reason when it is visible!
I have tried methods found on other similar overflow questions such as displaying the list items inline-block (despite not wanting to use inline-styles!)
But nothing is working for me!
I know the problem is because I have my logo in the center of my menu items on desktop view, so it isn't a standard menu but there must be a way around this to make my menu items display vertically without the logo in the middle? I am new-ish to this so perhaps I am just being stupid and missing something?
I am using jquery mobile if it makes any difference (could it be this breaking the menu and preventing it from being closed?)
here is what I have and have tried:
HTML for navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, no-index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favv.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../assets/js/main.js"></script>
<!-- Custom styles for this template -->
<link href="../node_modules/jquery-mobile/mobilestyles.css" rel="stylesheet">
<link href="/Silver-Lining/css/template.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]>
<!--============ Navigation ===============-->
<nav class="navbar navbar-default navbar-fixed-top text-center">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="top-social">
<a href="tel:+1-303-499-7111"> <i class="fa fa-phone" aria-hidden="true">
</i> 0787000000
</a>
<a href="#">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>OUR CARS</li>
<li>PRICES</li>
<a class="hidden-sm-down" href="index.php" data-ajax="false"><img src="../assets/images/logo" width="250" alt="Logo"></a>
<li>PACKAGES</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS example to make menu items appear vertically on Collapse:
#media (max-width: 932px) {
#navbar-primary .navbar-nav li a {
float: none;
position: inherit;
display: inline-block !important;
vertical-align: top;
max-height: 300px;
}
}
Css for navbar
// Remove excess borders
.navbar-default {
border-top: none;
border-left: 0;
border-right: none;
margin-top: 0px;
padding-bottom: 10px;
font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 0;
font-size: 18px;
border-color: transparent;
white-space: normal;
}
.navbar-default .navbar-nav > li {
margin-top: 20px;
}
Any help would be much appreciated, I have been very confused and stuck on this for several days at least and really want to keep the same navbar without having to make it all over again
After much playing with the code I found that
#media screen and (max-width: 768px) {
#navbar-primary .navbar-nav > li {
display: block;
}
}
gave me the result I wanted (vertically stacked menu items on collapse!)
So I'm learning JS/Ajax and I wanted to try to load html content into my page with the click of a button. Everything works as long as I call the function outside of my Navbar and I cant figure out why?
I'm trying to load html content from "bestellung.html" into a div with the id of "main-well". Everything works fine except when I want to call the ladeBestellung() function from within my Navbar... the content gets loaded but is instantly overwritten and disappears... why??
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QR2BUY Bestellübersicht</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Eigene Styles -->
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"><!-- Haupt-Container -->
<!-- Haupt-Navigationsleiste -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><!-- Anfang Navigationsleiste-Header -->
<!-- Button für die mobile Ansicht -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation aufklappen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-qrcode"></span> QR2BUY
</a>
</div><!-- Ende Navigationsleiste-Header -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Hilfe</li>
<li class="dropdown">
Konto <span class="caret"></span>
<ul class="dropdown-menu">
<li>Einstellungen</li>
<li>Bestellhistorie</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right"><!-- Anfang Suchfeld -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Bestell-Nr. eingeben...">
<div class="input-group-btn">
<button class="btn btn-default" onClick="ladeBestellung()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form><!-- Ende Suchfeld -->
</div>
</div>
</nav><!-- Ende Haupt-Navigationsleiste -->
<div class="row"><!-- Start Main-Row -->
<div class="col-xs-12"><!-- Start Main Col -->
<div class="well" id="main-well">
</div><!-- Ende Well -->
</div><!-- Ende Main-Col -->
</div><!-- Ende Main-Row -->
</div><!-- Ende Haupt-Container -->
<footer class="footer"><!-- Anfang Footer -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<p class="text-center">
<span>© 2016 QR2BUY</span> - Impressum - Kontakt
<p>
</div>
</div>
</div><!-- Ende Haupt-Container -->
</footer><!-- Ende Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
document.getElementById('main-well').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'bestellung.html');
function ladeBestellung() {
xhr.send();
}
</script>
</body>
</html>
Default type of <button> is "submit" which reloads the page and overrides the javascript-generated html - so the solution is to use <button type="button"></button>
my code is working properly, but after the output of my images i want them to overlap each other a bit, that might be using margins, padding or any other script, and is there a possiblity to add z-index beacuse these images should overlap, each other.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Petroleum Project</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="css/home.css" rel="stylesheet">
</head>
<body>
<div id="main">
<nav id="nav01"></nav>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="home.html">Home</a>
<!--<a class="navbar-brand" href="index.html"><img src="images/main-icon.jpg" style="width:80px;"/></a>-->
<a class="navbar-brand" href="index.html">Layers_Lib</a>
<a class="navbar-brand" href="well_formation.html">Well Formation</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">
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-4" >
<div class="thumbnail" style='padding-left:20px;' >
<div class="caption-full" >
<center><h2><strong>Well Formation Inputs</strong></h2></center>
</div>
<h4><b>Enter Height of the well:</b><input type="text" id="well_height"></h4>
<h4><b>Select Layers:</b>
<select multiple="true" id="layers_box">
<option value="conglomerate">Conglomerate</option>
<option value="gravel">Gravel</option>
<option value="sandstone">Sandstone</option>
<option value="siltstone">Siltstone</option>
<option value="shale">Shale</option>
<option value="clay">Clay</option>
<option value="limeStone">LimeStone</option>
<option value="dolomite">Dolomite</option>
</select>
</h4>
(press and hold CTRL to select multiple layers)
</br></br>
<button id="layer_submit"class="btn-info btn" ><b>Submit</b></button>
<button id="layer_clear"class="btn-info btn" onClick='$("#layers_box option:selected").removeAttr("selected");$("#well_height").val("");' ><b>Clear</b></button>
</div>
</div>
<div class="col-md-5" id="" style="display:block">
<h3> Layers </h3>
<div id="layer_structure" style="width:402px;border:1px solid #000;margin-left:200px;">
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
function img_create(src, alt, height) {
var img= document.createElement('img');
img.src= src;
if (alt!=null) img.alt= alt;
img.style.width = '400px';
img.style.height = height+'px';
$("#layer_structure").append(img);
}
jQuery(document).ready(function(){
$("#layer_submit").click(function() {
height_of_well = $("#well_height").val();
hw = parseInt(height_of_well);
if(height_of_well == ""){
alert("Please Enter Height of Well");
return false;
}
console.log(height_of_well);
layers = $("#layers_box").val();
layer_heights = [];
$("#layer_structure").html("");
$("#layer_structure").css("height",height_of_well+"px");
for(i = 0; i< layers.length; i++){
layer_heights[i] = prompt("Please Enter height of" +layers[i],"");
hw = hw - parseInt(layer_heights[i]);
if(hw < 0){
alert("Well height is less than layers height");
return false;
}
img_create("images/well_formation/"+layers[i]+".png",layers[i],layer_heights[i]);
}
});
});
</script>
<style>
.list-group{
background-color:#337ab7;
}
</style>
</div>
</body>
</html>
Overlapping in CSS can be done like this. The top image should have a z-index that is greater than the image below. And also, those elements must have a position set.
.frame{
position:relative;
}
.frame img{
width: 100%;
position:absolute;
}
.frame img#gabe{
z-index: 10;
top: 50px;
left: 50px;
opacity: 0.5;
}
.frame img#hl3{
z-index: 9;
}
<div class="frame">
<img id="gabe" src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg">
<img id="hl3" src="http://masterherald.com/wp-content/uploads/2014/12/Half-Life-3.jpg">
</div>
When viewing at mobile screen resolution and you select the mobile nav icon bar, nothing happens. The desired effect is to have the same main navigation be used in mobile. I have ensured my data-targets (mobile_nav) match, and that markup looks good, but am new to Bootstrap. Any help appreciated!
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Loading Fonts Awesome CDN from boostrapcdn.com -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- add padding from best practices for fixed topbar navs -->
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobile_nav" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div class="collapse navbar-collapse" id="mobile_nav">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<form action="" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</header>
</body>
</html>
Bootstrap requires jQuery to work, you should include it before the Bootstrap JS in your HTML:
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>