I am using the materialize.min.css and materialize.min.js and no other stylesheets.
I made a simple webpage. The code:
{% load static %}
<html>
<head>
<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link type="text/javascript" href="{% static 'js/jquery-1.11.3.min.js' %}">
<title>
TITLE
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body data-marker-image="{% static 'img/truck3.png' %}">
<div>
<nav class="light-green lighten-3">
<div class="nav-wrapper">
<a class="brand-logo center" href="SITE" target="_blank">
LOGO<!-- <img src="{% static 'img/LOGO1.png' %}" style="height: 100%; width: 35%;"/> -->
</a>
</div>
</nav>
<div class="side-menu-bar">
<ul id="slide-out" class="side-nav full">
<li>About Us</li>
<li>Support</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse">
<i class="large mdi-navigation-menu white"></i>
</a>
</div>
</div>
<main>
<div id="map-canvas" style="width: 100%; height: 100%;">
<div id="onmap-div">
<div id="onmap-price"></div>
</div>
</div>
</main>
<footer>
<div class="page-footer light-green lighten-3">
<div class="container">
Footer Note
</div>
</div>
<div class="footer-copyright light-green lighten-2">
<div class="container">
Copyright
</div>
</div>
</footer>
<script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/materialize.min.js' %}"></script>
<script>$(".button-collapse").sideNav();</script>
<script type="text/javascript">var shipment_id = {{shipment_id}};</script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-US"></script>
<script type="text/javascript" src="{% static 'js/socket.io.js' %}"></script>
<script type="text/javascript" src="{% static 'js/map.js' %}"></script>
<script>google.maps.event.addDomListener(window, 'load', initialize());</script>
</body>
</html>
The webpage made was like this: http://pasteboard.co/1hz4vuHF.png
As you can see from the image that the blue button is not coming on top of the NavBar.
How to fix it?
PS - Also How to change its color?
I think it's because you added the additional div
<div class="side-menu-bar">
</div>
Try removing that.
Related
For some reason the dropdown in my navbar is not working. The dropdown button is there but it is not dropping, so there is probably something wrong in the triggering part of the dropdown. I've tried everything but I can't fix it, any help is appreciated. Here is the link to the documentation of materialize: https://materializecss.com/navbar.html
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Casual Clothing comparer</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<div class="row">
{% for post in final_products %}
<div class="col s12 m6 l4">
<div class="card horizontal hoverable z-depth-1-half">
<div class="card-image" id="card_image" style="height:300px">
<img src="{{ post.6 }}">
</div>
<div class="card-stacked">
<div class="card-content">
<span class="card-title">{{ post.0 }}</span>
<p>Initial Price €{{ post.3 }}</p>
<p>Discount {{ post.7 }}%</p>
<p style="margin-top: 10px; font-size: x-large">Price €{{ post.2 }}</p>
</div>
<div class="card-action">
Buy
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
//Initialize dropdown
$(".dropdown-trigger").dropdown();
});
</script>
</body>
</html>
The $(document) is a jQuery selector and you did not included a path for the jQuery.
I added the following line to your code and the drop-down works fine: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. You can read more about this here.
The line of code should be included before the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
The reason why your code did't worked is that Materialize CSS uses jQuery methods.
I'm working on a Django Project and I see navbar error after adding a few script tags. It worked before.
Navbar is moving down but it is not moving back to its position. I see after commenting a few script tags it works. I'm unsure what it needs exactly. HTML code below.Thanks
I could understand that we need to add few js files. But what needs to be added is my question.
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<title>Cricket Management</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-black">About</h4>
<p class="text-muted">CrickyMac is an Indian cricket news website owned by Times Internet. It features news, articles and live coverage of cricket matches including videos, scorecards, text commentary, player stats and team rankings. Their website also offers a mobile app. </p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-black">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-primary">
<div class="container d-flex justify-content-between">
<a href="{% url 'index' %}" class="navbar-brand d-flex align-items-center">
<img src="{% static 'Hello.jpg'%}" class="img-rounded" alt="WorldCup" width="80" height="50">
<em>CrickyMac</em>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
{% block content%}
<div class="hero-wrap js-fullheight" style="background-image: url('{% static 'backgroundImage.jpg'%}');" data-stellar-background-ratio="0.1">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center" data-scrollax-parent="true">
<div class="col-md-11 ftco-animate text-center">
<h1 class="mb-4">Howdy Partner !!!! CRICKET- not just a game It’s an emotion, For Team Details click Below.</h1>
<p>Teams <span class="ion-ios-arrow-forward"></span></p>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">Stats</strong>
<h3 class="mb-0">Matches and Results</h3>
<p class="card-text mb-auto">Get to Know all the scheduled Matches, News and Other Updates in regards to the IPL, ODI, TEST</p>
<p><a class="btn btn-primary btn-lg" href="" role="button">Fixures »</a></p>
</div>
<div class="col-auto d-none d-lg-block">
<img src="{% static 'fixtures.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Rankings</strong>
<h3 class="mb-0">Points Table</h3>
<p class="mb-auto">Cricket Council ranking for One Day International (ODI) cricket teams. Discover latest ICC rankings table, predict upcoming matches, see points and rating.</p>
<p><a class="btn btn-primary btn-lg" href="" role="button">Points Table »</a></p>
</div>
<div class="col-auto d-none d-lg-block">
<img src="{% static 'point.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js">
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datepicker.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/scrollax.min.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="{% static 'js/google-map.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>CricketManagement#2020 © “Life is simply a cricket match, with temptation as the bowler.”</p>
</div>
</footer>
</html>
The problems which I can see in your code which is causing this problem is:
You have called bootstrap 4 CDN in your code's head.
you have also called bootstrap JS files in your footer
you have called proper.js which is a dependency for BS 4, jQuery is needed for BS and proper before.
Solution:
Remove bootstrap CDN from your head
add it to bottom of your page,
make sure jquery is called before BootStrap's js and proper.js.
don't call any js file twice, weather its jquery or BS files.
now I am updating your code in this edit... check now and don't forget to checkpoints below.
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<title>Cricket Management</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-black">About</h4>
<p class="text-muted">CrickyMac is an Indian cricket news website owned by Times Internet. It features news, articles and live coverage of cricket matches including videos, scorecards, text commentary, player stats and team rankings. Their website also offers a mobile app. </p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-black">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-primary">
<div class="container d-flex justify-content-between">
<a href="{% url 'index' %}" class="navbar-brand d-flex align-items-center">
<img src="{% static 'Hello.jpg'%}" class="img-rounded" alt="WorldCup" width="80" height="50">
<em>CrickyMac</em>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
{% block content%}
<div class="hero-wrap js-fullheight" style="background-image: url('{% static 'backgroundImage.jpg'%}');" data-stellar-background-ratio="0.1">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center" data-scrollax-parent="true">
<div class="col-md-11 ftco-animate text-center">
<h1 class="mb-4">Howdy Partner !!!! CRICKET- not just a game It’s an emotion, For Team Details click Below.</h1>
<p>Teams <span class="ion-ios-arrow-forward"></span></p>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">Stats</strong>
<h3 class="mb-0">Matches and Results</h3>
<p class="card-text mb-auto">Get to Know all the scheduled Matches, News and Other Updates in regards to the IPL, ODI, TEST</p>
<p><a class="btn btn-primary btn-lg" href="" role="button">Fixures »</a></p>
</div>
<div class="col-auto d-none d-lg-block">
<img src="{% static 'fixtures.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Rankings</strong>
<h3 class="mb-0">Points Table</h3>
<p class="mb-auto">Cricket Council ranking for One Day International (ODI) cricket teams. Discover latest ICC rankings table, predict upcoming matches, see points and rating.</p>
<p><a class="btn btn-primary btn-lg" href="" role="button">Points Table »</a></p>
</div>
<div class="col-auto d-none d-lg-block">
<img src="{% static 'point.jpg'%}" class="img-rounded" alt="WorldCup" width="200" height="250">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>CricketManagement#2020 © “Life is simply a cricket match, with temptation as the bowler.”</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery-migrate-3.0.1.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/jquery.easing.1.3.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js' %}"></script>
<script src="{% static 'js/jquery.timepicker.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datepicker.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/scrollax.min.js' %}"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="{% static 'js/google-map.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
I have updated you code, check now, the mistakes you are still doing was match with your code.
You were calling bootstrap and proper js and jquery cdn many times before body closing tag.
you were calling footer after body closing tag which is wrong. all your html tags need to be within the body.
you were using a link tag to add script files, which is wrong.
I am a total newbie of Jquery and JavaScript. I am using this code as reference: https://jsfiddle.net/6uzU6/2/
What I am trying to do is similar as the link above, which is to display a div after a corresponding button is clicked while others divs are hidden.
I was trying to modify the code to use div instead of unordered list.
The problem I am having right now is when I use Brave Browser to open the page, the divs are not hiding and no changes are made after clicking the button. While using Chrome, the page will be blank, nothing is shown.
tutorialIndex.html
{% extends "morse_logs/base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'morse_logs/css/style.css' %}">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.structure.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.theme.min.css' %}" rel="stylesheet">
<div class="container">
<h1>Tutorial</h1>
</div>
<div id="menu">
<button class="justClick" href="#">A</button>
<button class="justClick" href="#">B</button>
<button class="justClick" href="#">C</button>
<button class="justClick" href="#">D</button>
</div>
<div class="content">
</div>
<div class="content1">
<h1>A</h1>
<img src="{% static 'morse_logs/img/A.png' %}" alt="A" style="width:128px;height:128px;">
</div>
<div class="content2">
<h1>B</h1>
</div>
<div class="content3">
<h1>C</h1>
</div>
<div class="content4">
<h1>D</h1>
</div>
<script src="{% static 'morse_logs/js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'morse_logs/js/jquery-ui/jquery-ui.js' %}"></script>
<script src="{% static 'morse_logs/js/app.js' %}"></script>
{% endblock content %}
app.js
$('div').not(".content").hide();
$('.justClick').bind('click', function() {
$('div').not(".content").hide();
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
Not sure about your code but here's another way to do it.
Its easy to read and understand...
$(document).ready(function(){
$(".justClicka").click(function() {
$(".content1").css("display", "block");
$(".content2,.content3,.content4").css("display", "none");
});
$(".justClickb").click(function() {
$(".content2").css("display", "block");
$(".content1,.content3,.content4").css("display", "none");
});
$(".justClickc").click(function() {
$(".content3").css("display", "block");
$(".content1,.content2,.content4").css("display", "none");
});
$(".justClickd").click(function() {
$(".content4").css("display", "block");
$(".content1,.content2,.content3").css("display", "none");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'morse_logs/css/style.css' %}">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.structure.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.theme.min.css' %}" rel="stylesheet">
<div class="container">
<h1>Tutorial</h1>
</div>
<div id="menu">
<button class="justClicka" href="#">A</button>
<button class="justClickb" href="#">B</button>
<button class="justClickc" href="#">C</button>
<button class="justClickd" href="#">D</button>
</div>
<div class="content">
</div>
<div class="content1" style="display:none">
<h1>A</h1>
<img src="{% static 'morse_logs/img/A.png' %}" alt="A" style="width:128px;height:128px;">
</div>
<div class="content2" style="display:none">
<h1>B</h1>
</div>
<div class="content3" style="display:none">
<h1>C</h1>
</div>
<div class="content4" style="display:none">
<h1>D</h1>
</div>
Page is blank because $('div').not(".content").hide() hides ALL divs except the one with the class="content" including the container and menu divs
Change it to $('div.content ~ div').hide()
I have the below page from a website I inherited. Everything is fine when I try different window sizes but if I switch to mobile view in Chrome divs start to float on top of the page.
I just don't understand what makes this happen.
{% load staticfiles %}
<!doctype html>
<head>
<meta charset="utf-8">
<title>www</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="static/favicon.ico">
<link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/static/StudioHanel/styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="{% static "bower_components/modernizr/modernizr.js" %}"></script>
<!-- endbuild -->
</head>
<body onLoad="studioHanel.StudioHanel()">
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="navbar-fixed-top">
<img class="logo" src="{% static "images/logo_large.png" %}" alt="Studio Hanel"/>
<ul id="menu" class="nav nav-pills pull-right"></ul>
</div>
<div id="landing">
</div>
<div id="teaser-about" class="teaser">
<h1></h1>
<div class="arrow"></div>
</div>
<div id="about">
<div class="container-fluid">
<div class="header"></div>
<h1></h1>
<div class="container">
<div class="row">
<div id="about-copy-column" class="col-md-8"><div class="two-columns"></div></div>
<div id="about-photo-column" class="col-md-4"><img src="{% static "images/cordelia_old.png" %}" width="244" height="274"></div>
</div>
</div>
</div>
</div>
<div id="interiors">
<div class="container-fluid"></div>
</div>
<div id="teaser-interiors" class="teaser">
<div class="shadow-up"></div>
<div class="pattern"></div>
<h2></h2>
<div class="shadow-down"></div>
<div class="arrow"></div>
</div>
<div id="case-study">
<div class="container-fluid">
<div class="row">
<div id="cell1" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div id="cell2" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div class="row">
<div id="cell3" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div id="cell4" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div class="row">
<div id="cell5" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div id="cell6" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
</div>
<div id="product-design">
</div>
<div id="teaser-contact" class="teaser">
<h2></h2>
<div class="arrow"></div>
</div>
<div id="contact-util"></div>
<div id="contact">
<div class="container">
<div class="row">
<div class="col-md-7" id="contact-form">
<form name="contact" action="" method="">
<fieldset>
<input id="name" class="text-input" type="text" name="name" placeholder="Your name">
<input id="email" class="text-input" type="text" name="sender" placeholder="Your email">
<input id="message" class="text-input" type="text" name="message" placeholder="What's on your mind?">
<label id="error"></label>
<input id="send" class="button" type="button" value="Send">
<!--<input id="send" class="button" name="submit" value="Send">-->
</fieldset>
</form>
</div>
<div class="col-md-4">
<div id="contact-details">
<div id="phone" class="contact-details"></div>
<div id="address" class="contact-details"></div>
</div>
</div>
</div>
</div>
<div class="shadow-up"></div>
<div class="pattern"></div>
</div>
<div id="copyright">
<p>© Studio Hanel 2014 All rights reserved including all imagery as shown on this website</p>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="{% static "bower_components/jquery/dist/jquery.js" %}"></script>
<!-- <script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js" %}"></script> -->
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js" %}"></script>
<!-- <script src="{% static "bower_components/greensock/src/uncompressed/TweenMax.js" %}"></script> -->
<script src="{% static "bower_components/gsap/src/uncompressed/TweenMax.js" %}"></script>
<!-- <script src="{% static "bower_components/greensock/src/uncompressed/plugins/ScrollToPlugin.js" %}"></script> -->
<script src="{% static "bower_components/gsap/src/uncompressed/plugins/ScrollToPlugin.js" %}"></script>
<!-- <script src="{% static "bower_components/modernizr/feature-detects/css/scrollbars.js" %}"></script> -->
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!--
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js" %}"></script> -->
<!-- build:js scripts/plugins.js -->
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js" %}"></script>
<script src="{% static "bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js" %}"></script>
<!-- endbuild -->
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="{% static "scripts/utils.js" %}"></script>
<script src="{% static "scripts/landing.js" %}"></script>
<script src="{% static "scripts/about.js" %}"></script>
<script src="{% static "scripts/interiors.js" %}"></script>
<script src="{% static "scripts/case_study.js" %}"></script>
<script src="{% static "scripts/product_design.js" %}"></script>
<script src="{% static "scripts/contact.js" %}"></script>
<script src="{% static "scripts/menu.js" %}"></script>
<script src="{% static "scripts/navigation.js" %}"></script>
<script src="{% static "scripts/main.js" %}"></script>
<!-- endbuild -->
</body>
</html>
main.css
can't be posted due to large size.
can be downloaded from here
The problem seems to be the logo and nav bar overlapping.
To fix this you can wrap the logo with a div and use the bootstrap's class hidden-xs like this:
<div class="navbar-fixed-top">
<div class="hidden-xs">
<img class="logo" src="{% static "images/logo_large.png" %}" alt="Studio Hanel"/>
</div>
<ul id="menu" class="nav nav-pills pull-right"></ul>
</div>
I'm using dropzone in conjunction with Bootstrap and Django, the dropzone actually appears in Safari and Firefox, but does not show up correctly in Chrome. I'm using Chrome version 45.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Metadata</title>
{% load staticfiles %}
<link href="{% static 'main/css/bootstrap.css' %}" type="text/css" rel="stylesheet"/>
<link href="{% static 'main/css/dropzone.css' %}" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<!-- Main component -->
<div>
<form action="/file-upload" class="dropzone" id="myDropzone">
<!--<button id="submit-all"> Submit all files </button> -->
</form>
</div>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{% static 'main/js/bootstrap.min.js' %}"></script>
<!-- DROPZONE -->
<script src="{% static 'main/js/dropzone.js' %}"></script>
</body>