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>
Related
I can't use emojionearea in a simple page in Django. I have followed the basics steps, listed on their website:
What I have done:
downloaded the zip from their GitHub and copied both of these files into CSS and JavaScript folder
configure django static settings e.g add to url, add static dir, add url pattern
added the script written above.
Code:
{% load static %}
<!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.0">
<title>TODO</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/emojionearea.min.css' %}">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
<body>
{% include 'navbar.html' %}
{% block content %}
{% endblock content %}
<script>
$(document).ready(function() {
$("#mytextarea").emojioneArea();
})
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{% static 'js/emojionearea.min.js' %}"></script>
</body>
</html>
and this is the form text area I want to add the emoji to:
<form method="post" action="" class="edit">
{% csrf_token %}
<div class="form-row">
<div class="col-12">
<label for="inputTask">Tweet:</label>
<textarea class="form-control" placeholder="Enter Tweet:" name="tweet" id="mytextarea"></textarea>
</div>
<div class="col-10">
<label for="inputTime">Image:</label>
<input type="file" class="form-control" placeholder="select image:" name="images">
</div>
<div class="col-2" style="margin-top: 35px;">
<button type="submit" class="btn btn-outline-primary float-right">Add Tweet</button>
</div>
</div>
</form>
I have also tried putting textarea out of form tag and do the stuff on it, but still no effect
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'm trying to use Material Bootstrap Alert in my Django app. If user inputs wrong password or username while trying to login to the page, the error toast message should appear in the upper right corner. With js alert it works perfectly fine but when I'm trying to invoke toastr.error('Wrong login credentials. Please, try again...'); I get these erorrs:
jQuery.Deferred exception: toastr is not defined #http://127.0.0.1:8000/login/:63:9
j#http://127.0.0.1:8000/static/js/jquery-3.2.1.min.js:2:29997
g/http://127.0.0.1:8000/static/js/jquery-3.2.1.min.js:2:30313
undefined
ReferenceError: toastr is not defined
Here is my login.html page:
{% extends 'utas/template.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Login{% endblock %}</title>
</head>
<body>
{% block pagecontent %}
<div class="container">
<!-- Begin Form login -->
<form method="post" class="mt-5" style="width: 24rem; margin: 0 auto;">
{% csrf_token %}
<p class="h5 text-center mb-4">Sign in</p>
<div class="md-form">
<i class="fa prefix material-icons grey-text">account_circle</i>
<input type="text" id="defaultForm-user" class="form-control" name="username"
required
oninvalid="this.setCustomValidity('Username is required!')"
oninput="setCustomValidity('')">
<label for="defaultForm-user">Your username</label>
</div>
<div class="md-form">
<i class="fa prefix material-icons grey-text">lock</i>
<input type="password" id="defaultForm-pass" class="form-control" name="password"
required
oninvalid="this.setCustomValidity('Password is required!')"
oninput="setCustomValidity('')">
<label for="defaultForm-pass">Your password</label>
</div>
<div class="text-center">
<button type="submit" class="btn btn-default">Login</button>
</div>
</form>
<!-- End Form login -->
</div>
{% endblock %}
{% block script %}
{% if form.errors %}
<script type='text/javascript'>
$(document).ready(function()
{
toastr.error('Wrong login credentials. Please, try again...');
});
</script>
{%endif%}
{% endblock %}
</body>
</html>
And here is my template.html with required scripts:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>UTAS - {% block title %}{% endblock %} </title>
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="{% static 'css/style.css'%}" rel="stylesheet">
</head>
<body>
{% block pagecontent %}
{% endblock %}
</body>
<script src="{% static 'js/jquery-3.2.1.min.js'%}"></script>
<script src="{% static 'js/popper.min.js'%}"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/mdb.min.js'%}"></script>
{% block script %}
{% endblock %}
</html>
I'm not very experienced with JS or jQuery. All javascript files are from official MDB website.
Found the reason of error. I've been using version of framework which don't have toast messages
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.
Hi I was advised to use ui-router due to having problems with nested views.
I'm trying to create a form like this to go in the middle of my page.
the form
However it doesn't work and it's made my website not being able to load properly. I cannot view anything from the header down. The logo and the header works...but No body and no footer. Form pages are in partials/form.html etc. The body and footer loaded fine before I edited the code to include the forms.
Here's my plunker my app
here's index.html
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
</div>
<body ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Form</a>
</li>
<li ng-class="{active: isState('contact') }">
<a ui-sref="contact">Contact</a>
</li>
</ul>
<h3 class="text-muted">Demo Page</h3>
<br>
<div ui-view=""></div>
</div>
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"> </script>-->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"> </script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"> </script>
<script src="js/script.js"></script>
<!--<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>-->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Thanks