What my dir looks like:
I've doubled checked the name, the location everything, but it just shows the default no image found icon image. My code for the picture is <img src="img.png">. I tried changing the image, still no fix. When I hover over the img.png is says
[Follow link](file:///c:/Users/mathe/OneDrive/Documents/Data analysis/Python/CHAT-BOT/templates/img.png) (ctrl + click), so surely it should work?
Full html code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MJChat Bot</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<img src="img.png" alt="Italian Trulli">
<div class="container">
<h1>Welcome to MJ Chatbot</h1>
<hr>
<br>
<div class="row">
<div class="col-lg-9">
<input class="form-control" type="text" name="question" id="question">
</div>
<div class="col-lg-3">
<button class="btn btn-primary btn-block" id="submit-button">Send</button>
</div>
</div>
<br>
<div class="row">
<div class="col">
<p id="response"></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></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>
jQuery(document).ready(function() {
$("#submit-button").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/chatbot",
data: {
question: $("#question").val()
},
success: function(result) {
$("#response").append("<br><br><img src='picture.jpg'/> You: "+$("#question").val()+ "<br><br><img src='picture.jpg'/> MJBot: "+result.response);
$("#question").val("")
},
error: function(result) {
alert('error');
}
});
});
});
</script>
</body>
</html>
Related
The example code shows an input field with an Input Group Label. The background color of the Input Group Label is already set by default.
I need to modify this to an own RGB value. For example: #646464
I tried to modify the background color of the <span> and the <div> as you can see in the CSS code, but none of them solved my problem. The background color of the Input Group Label remains the same.
.myDivClass {
background-color: #FF0000;
}
.mySpanClass {
background-color: #00FF00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append myDivClass">
<span class="input-group-text mySpanClass">#example.com</span>
</div>
</div>
</form>
</div>
</body>
</html>
You can do something like this.
.myDivClass {
background-color: #FF0000;
}
span.mySpanClass {
background-color: #00FF00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="mySpanClass input-group-text">#example.com</span>
</div>
</div>
</form>
</div>
</body>
</html>
I have limited experience with Bootstrap 4 but am not sure why my page is acting like this. I have these 2 rows, one of which I want for the title to be above the container with white background. I am trying to make 2 columns, one for a sidebar and one for the content on the right however when I use columns they only stack which can be seen here - http://michaelfroseth.com/clients/notebook-html/subpage.html
I have no idea why? They seem to operate fine outside of the row, but am I not supposed to be using a new row? Any documentation or point in the right direction would be much appreciated!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<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="./css/custom.css?v=2">
<title>Pam's Notebook | V1.0</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-5"><span style="color:#fff;">Pam's Notebook</span> <span style="color:#CCAC23;">V1.0</span></h1>
</div>
</div>
<div class="row">
<div class="login-container col-md-12">
<div class="col-md-4">SIDEBAR</div>
<div class="col-md-8">CONTENT</div>
</div>
</div>
</div>
<!-- ALL OF YOUR SITE CODE HERE -->
<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>
<!-- ADDITIONAL JS HERE -->
</body>
</html>
You should use row inside the container, not as a wrapper.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<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="./css/custom.css?v=2">
<title>Pam's Notebook | V1.0</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-5"><span style="color:#fff;">Pam's Notebook</span> <span style="color:#CCAC23;">V1.0</span></h1>
</div>
</div>
<div class="login-container col-md-12">
<div class="row">
<div class="col-md-4">SIDEBAR</div>
<div class="col-md-8">CONTENT</div>
</div>
</div>
</div>
<!-- ALL OF YOUR SITE CODE HERE -->
<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>
<!-- ADDITIONAL JS HERE -->
</body>
</html>
I have a simple bootstrap tooltip button that should show a tooltip when I hover.However it does not work. I have followed many suggestions online about initialize tooltips on document load and it still won't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>Parent View</title>
</head>
<body>
<div class="container mt-5">
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="">
Tooltip on top
</button>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</div>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
When you put the script inside the HTML BODY it's execute before jQuery has loaded at the end of the body, so jQuery $ is undefined.
Move the script after jQuery, Bootstrap and Popper, or to the HTML HEAD tag.
And, make sure the Tooltip has a title.
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="My title">
Tooltip on top
</button>
Demo: http://codeply.com/go/2huMTgy7Q9
I have the following code and I am not sure why bg-info doesn't work for the whole body as I am new to bootstrap.
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Here's what I see:
Note: According to this video it should work though https://teamtreehouse.com/library/bootstrap-4-basics/getting-to-know-bootstrap-4/enhancing-the-page
You are using the alpha 4 of bootstrap(js), use bootstrap 3.x.
Also you have an extra </div> in the code.
This works:
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous" />
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</body>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
What do you mean by doesn't work for the whole body? Try to add this CSS property to your custom CSS:
.bg-info {background: #5bc0de!important;
}
I've built several Cordova apps before and have usually linked the 'index.html' to an 'app.html' after authentication using window.location = app.html
In my latest app, when I logout of my application (clicking a button in app.html), I get redirected correctly to my index.html, but once I'm there, I cannot click any of the form inputs to try to log back in. The only way I can get it to work is by closing and reopening the app again.
Also to add, the posted code works fine if I run the html pages straight through safari or chrome but I cannot click those inputs when running on the iOS sim
access_token = localStorage.getItem('access_token')
user_id = localStorage.getItem('user_id')
if(access_token != undefined && user_id != undefined) {
window.location = 'app.html'
}
$("#login-form").submit(function(ev) {
ev.preventDefault()
data = $(this).serialize()
$.ajax({
method: "post",
url: 'https://*******.io/api/login',
data: data,
success:function(result) {
token_object = JSON.parse(result)
localStorage.setItem('access_token', token_object.access_token);
localStorage.setItem('user_id', token_object.user_id);
window.location = 'app.html'
},
statusCode: {
401: function() {
$("#error-container").removeClass('hidden').html('Email/Password combination was not found.');
},
500: function() {
$("#error-container").removeClass('hidden').html('A server error has occured');
}
}
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Javascripts -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-loadtemplate.js"></script>
<title>MyApp</title>
</head>
<body>
<!-- 3. Display the application -->
<div class="container container-fluid login-container">
<div class="row">
<div class="col-xs-12 text-center">
<h1 class="text-center">
<i class="fa fa-map-marker"></i>
My App
</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2 text-center">
<form id="login-form">
<div id="error-container" class="form-group hidden"></div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="clearfix"></div>
<button class="btn btn-default">
<i class="fa fa-sign-in"></i>
Login
</button>
</form>
</div>
</div>
</div>
</body>