I'm trying to get code mirror to read and display the contents of a file into the textarea, but everytime I load a file, it prints the contents as one line, ignoring all line breaks, and if I try to manually enter text into the text field, it automatically tabs every line after the first.
Proper text form file format:
Proper textarea styling:
Unfortunate result of selecting a file (this text format won't function with the compile button):
Full HTML code (with suggested edits; still not working):
<!DOCTYPE html>
<html lang="en_US">
<head>
<title>Phoenix - UMSL's Online Assembly Code Compiler</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/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<link rel="stylesheet" href="codemirror/theme/colorforth.css">
<script src="codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/mode/cobol/cobol.js"></script>
<link rel="stylesheet" href="CSS/styling.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.css">
</head>
<body>
<fieldset>
<!-- Form Name -->
<nav class="navbar navbar-expand-lg navbar-expand-lg" style="border-bottom: 5px solid white;">
<a class="navbar-brand" href="./homepage.html"> <img src="IMGS/phoenix-small.png">PHOENIX</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="./homepage.html">Home</a>
<a class="dropdown-item" href="./reference.html">Reference</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="./about.html">About Team Phoenix</a>
</div>
</li>
</ul>
</div>
<a style="color:white;">UMSL's Online Assembly Code Compiler</a>
</nav>
<div class="WORKPLEASE" style="max-width: 98%;">
</br>
</br>
</br>
</br>
</br>
<!-- File Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="filebutton" style="font-size: 40px">Choose a file to compile: </br></label>
<div class="row justify-content-md-center">
<input id="filebutton" name="filebutton" class="input-file" type="file">
<!--File Upload Script -->
<script type="text/javascript" src="fileUploadScript.js"></script>
</div>
</div>
</br>
<div class="row justify-content-md-center">
<p style="font-size: 40px;"> or... </br></p>
</div>
</br>
<!-- Textarea -->
<div class="form-group">
<label class="row justify-content-md-center" for="textarea" style="font-size: 40px">Write the file in the text field below: </br></label>
<div class="col-md-6 offset-md-3">
<div id="textarea" name="textarea" placeholder="Type your code here!" style="min-height: 250px; min-width: 100%; border-style: solid;"></div>
<script>
let editor = CodeMirror(document.getElementById("textarea"),{
lineNumbers: true,
mode: "cobol",
theme: "colorforth"
});
document.getElementById("filebutton").addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
editor.setValue(this.result); // Need to use the setValue method
//document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
</script>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="singlebutton"></label>
<div class="row justify-content-md-center">
<button id="textareabutton" name="singlebutton" class="btn btn-primary" onclick="main()" style="background-color:red; border-color:red;">Compile</button>
<script src="assmblyCode.js"></script>
</div>
</div>
</div>
</fieldset>
<!--<div id="footer">-->
<!--<p style="padding-top: 25px;">-->
<!--© Copyright 2019 Team Phoenix-->
<!--</p>-->
<!--</div>-->
</body>
</div>
The styling.css file:
/* Color assignment */
body {
background-image: url("../IMGS/binary.gif");
background-color: #cccccc;
}
.form-group{background-color:black;}
head {background-color: firebrick;}
h1 {color: blue}
h2 {color: snow}
nav {background-color: firebrick;}
a {color: snow;}
div {color: Azure}
/*italicizes and specifies which page you are on with color*/
a:hover{font-style: italic;}
/* alignment and font size */
head { font-size: 20pt}
h1 {text-align: center}
h2 {text-align: center}
h2 {font-size: 22pt}
.argname {font-size: 20px; text-decoration: underline; padding-top: 10px; background-color: black;}
.sides{ width:50%; float:left; padding-left: 20px}
.LI-profile-badge{
width:25%;
float:left;
padding-left: 20px;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
background-color: black;
text-align: center;
}
The fileUploadScript.js used to load the file into the text area:
document.getElementById("filebutton").addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
//https://www.youtube.com/watch?v=QI_NClLxnF0
Hopefully someone can spot what's being done wrong.
CodeMirror has several Content manipulation methods. You will need to use the setValue method.
doc.setValue(content: string)
Set the editor content.
Please reference the following block of code for my suggestions.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.css">
</head>
<body>
<!-- File Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="filebutton" style="font-size: 40px">Choose a file to compile:</label>
<div class="row justify-content-md-center">
<input id="filebutton" name="filebutton" class="input-file" type="file">
</div>
</div>
<div class="row justify-content-md-center">
<p style="font-size: 40px;"> or...</p>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="row justify-content-md-center" for="textarea" style="font-size: 40px">Write the file in the text field below: </br>
</label>
<div class="col-md-6 offset-md-3">
<div id="textarea" name="textarea" placeholder="Type your code here!" style="min-height: 250px; min-width: 100%; border-style: solid; border-width: 1px; border-color: gray"></div>
<!-- This is where I think the problem is -->
<script>
let editor = CodeMirror(document.getElementById("textarea"), {
lineNumbers: true,
mode: "cobol",
theme: "colorforth"
});
document.getElementById("filebutton").addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
editor.setValue(this.result); // Need to use the setValue method
//document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
</script>
<!-- This is where I think the problem is -->
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="row justify-content-md-center" for="singlebutton"></label>
<div class="row justify-content-md-center">
<button id="textareabutton" name="singlebutton" class="btn btn-primary" onclick="main()" style="background-color:red; border-color:red;">Compile</button>
</div>
</div>
</body>
</html>
More specifically, editor.setValue(this.result); is what got it working. Take a look at this JS Bin
In your fileUploadScript.js you must use editor.setValue().
document.getElementById("filebutton").addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
editor.setValue(this.result);
//document.getElementById("textarea").textContent = this.result;
}
fr.readAsText(this.files[0]);
})
You can't force the code into the textarea. It just won' work. You have to use the setValue method as shown above.
CodeMirror: Usage Manual.
Related
I try to accomplish to make a chatbot but sounds like I have a problem on my code but no errors come up. I tried to debug the code but no errors come. I tried to get the message on the chat container, but in the main.js -when I try to access the input type text value. When I try let messageText = textbox.value; the .value does not exist. I can't see any error. Apparently this is my index.html file.
Also I have try to change to var textbox = document.getElementById('mytextbox').value; when clicked nothing happens and the text inside of the input is not created in chat container.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="ChatBot">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Helder Ventura">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ChatBot</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-center">Awesome Chatbot App</h1>
<div class="media">
<img class="rounded-circle float-left img-thumbnail" width="75px" src="https://i.imgur.com/8BlgN6L.png" alt="Generic placeholder image">
<div class="media-body">
<h5 style="margin:10px">ChatBot</h5>
<span style="margin-left: 10px;">Online</span>
</div>
</div>
<!--Messages Container-->
<div id="chatContainer" class="container border overflow-auto" style="height:500px">
<!--Chatbot message design-->
<div class="w-50 float-start shadow-sm" style="margin: 10px; padding: 5px;">
<span>Chat: </span>
<span style="margin-top: 10px; padding: 10px;">How are You?</span">
</div>
<!--User message design-->
<div class="w-50 float-end shadow-sm" style="margin: 10px; padding: 5px;">
<span>You: </span>
<span style="margin-top: 10px; padding: 10px;">Great</span">
</div>
</div>
<div class="input-group">
<input id="mytextbox" type="text" class="form-control"/>
<div class="input-group-append">
<button id="sendBtn" type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script scr="js/main.js"></script>
</body>
</html>
and this is my main.js file
//elements
var sendBtn = document.getElementById('sendBtn');
var textbox = document.getElementById('mytextbox');
var chatContainer = document.getElementById('chatContainer');
function sendMessage(messageText){
var messageElement = document.createElement('div');
messageElement.classList.add('w-50');
messageElement.classList.add('float-end');
messageElement.classList.add('shadow-sm');
messageElement.style.margin ="10px";
messageElement.style.padding ="5px";
messageElement.innerHTML = "<span>You: </span>"+
"<span style='margin-top:10px; padding:10px'>"+ messageText +"</span>";
chatContainer.appendChild(messageElement);
}
sendBtn.addEventListener('click', function(e){
let messageText = textbox.value;
console.log(e);
sendMessage(messageText);
});
Your JS code is fine.
The issue is <script scr="js/main.js"></script>
You have a typo in scr="js/main.js" should be src="js/main.js
var sendBtn = document.getElementById('sendBtn');
var textbox = document.getElementById('mytextbox');
var chatContainer = document.getElementById('chatContainer');
function sendMessage(messageText){
var messageElement = document.createElement('div');
messageElement.classList.add('w-50');
messageElement.classList.add('float-end');
messageElement.classList.add('shadow-sm');
messageElement.style.margin ="10px";
messageElement.style.padding ="5px";
messageElement.innerHTML = "<span>You: </span>"+
"<span style='margin-top:10px; padding:10px'>"+ messageText +"</span>";
chatContainer.appendChild(messageElement);
}
sendBtn.addEventListener('click', function(e){
let messageText = textbox.value;
textbox.value = "";
sendMessage(messageText);
});
<body>
<div class="container">
<h1 class="text-center">Awesome Chatbot App</h1>
<div class="media">
<img class="rounded-circle float-left img-thumbnail" width="75px" src="https://i.imgur.com/8BlgN6L.png" alt="Generic placeholder image">
<div class="media-body">
<h5 style="margin:10px">ChatBot</h5>
<span style="margin-left: 10px;">Online</span>
</div>
</div>
<!--Messages Container-->
<div id="chatContainer" class="container border overflow-auto">
<!--Chatbot message design-->
<div class="w-50 float-start shadow-sm" style="margin: 10px; padding: 5px;">
<span>Chat: </span>
<span style="margin-top: 10px; padding: 10px;">How are You?</span>
</div>
<!--User message design-->
<div class="w-50 float-end shadow-sm" style="margin: 10px; padding: 5px;">
<span>You: </span>
<span style="margin-top: 10px; padding: 10px;">Great</span>
</div>
</div>
<div class="input-group">
<input id="mytextbox" type="text" class="form-control"/>
<div class="input-group-append">
<button id="sendBtn" type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
You got some typos in your HTML file, remove the " from spans closing tag in <span style="margin-top: 10px; padding: 10px;">How are You?</span">
and
<span style="margin-top: 10px; padding: 10px;">Great</span">
After that the messages appear and it seems to work.
EDIT:
I missed the miss spell on the script tag where you miss spelled src with scr thanks for pointing it out.
I made a song and a lyric searching page. The first time search is working well but while I click in the search button the previous result remains and also search results also shown on the page.
Now I want to disappear the result while searching for another song or lyric.
And also I want to make the search the result same style but I don't get results as I wanted.
const text = document.getElementById('text');
const search = document.getElementById('search');
const result = document.getElementById('result');
// api url
const api= 'https://api.lyrics.ovh';
// song lyrics
function getLyrics (artist, title) {
let url = `${api}/v1/${artist}/${title}`
fetch(url)
.then(res => res.json())
.then(singerLyrics => {
const lyrics = singerLyrics.lyrics;
const getLyric = document.getElementById('getLyric');
getLyric.innerHTML = `<h2 class="text-success mb-4">${artist} - ${title}</h2>
<pre class="lyric text-white">${lyrics}</pre>`;
});
result.innerHTML= '';
}
// search by song or artist
function searchSongs(term){
fetch(`${api}/suggest/${term}`)
.then(res => res.json())
.then (showData);
};
// search result
function showData (data) {
result.innerHTML = `<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9"> ${data.data.map(song => `<h3 class="lyrics-name">${song.title}</h3>
<p class="author lead">${song.type} by <span>${song.artist.name}</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button onclick="getLyrics('${song.artist.name}','${song.title}')" class="btn btn-success">Get Lyrics</button>
</div>
</div>`)};
`;
};
//event listeners
search.addEventListener('click', function searchResult (){
const inputText = text.value.trim();
if (!inputText){
alert('this is not a song or artist')
}else {
searchSongs(inputText);
}
});
body{
background-color: #13141b;
color: #ffffff;
background-image: url(images/bg-image.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: top;
}
.form-control{
background-color:rgba(255, 255, 255, 0.2);
padding: 22px;
border: none;
border-radius: 25px;
}
.btn{
border-radius: 1.5rem;
padding: 9px 20px;
}
.btn-privious{
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.navbar-toggler {
border: none;
}
.search-box{
position: relative;
}
.search-btn {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.single-result{
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
}
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="text" type="text" class="form-control" placeholder="Enter your artist song name">
<button id="search" class="btn btn-success search-btn">Search</button>
</div>
</div>
<!-- === Simple results === -->
<div class="d-flex justify-content-center">
<div id="result" class="">
</div>
<!-- Single Lyrics -->
<div id="getLyric" id="artistTitle" class="single-lyrics text-center">
</div>
</div>
</main>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom Script Here -->
<script src ="javascrpt.js"> </script>
</body>
</html>
try to use autocomplete="off" like
<input type="text" name="foo" autocomplete="off" />
Every time, search is clicked, the lyrics container should be emtpied:
document.querySelector("#getLyric").childNodes.forEach(el => el.remove())
to fix the issue, add this to your script:
document.querySelector("#search").addEventListener('click', function () {
document.querySelector("#getLyric").innerHTML = '';
})
I have applied onblur to a div and want to fire that event when its child element loses focus. The div has two child elements, one of them is a textbox and the other is a div. Now when I click the textbox and click on outside of the parent div, it doesn't fire the onblur event but if I click on the child div and click outside of the parent div, then it does fire the event.
My requirement is the onblur event of the parent div should also fire if i click on the textbox and click on other div, like it is firing in case of the other child element. I am including my code snippet here, and you can run to see the output. In case you want to see the code in jsfiddle then click here. Please help.
function searchOnClick() {
document.getElementById("resultsSugg").className = "position-absolute d-block";
}
function focusOut() {
document.getElementById("resultsSugg").className = "position-absolute d-none";
}
function resOnclick(that) {
let data = that.getAttribute("data-ppp");
document.getElementById("inputText1").value = data;
}
.suggestions {
font-size: 0.9em;
border-bottom: 1px solid #eeeeee;
padding: 0.5rem 0.5rem;
background-color: white;
}
.suggestions:hover {
background-color: #f4f4f4;
}
.suggestions:last-child {
border-bottom: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4">
<label>dummy text</label>
</div>
<div class="col-4">
<div id="bloodhound">
<!--<input type="text" class="typeahead form-control" id="typeAheadText">-->
<div tabindex="0" onblur="focusOut()">
<input type="text" class="typeahead form-control dropdown-toggle"
id="inputText1" onkeyup="return searchElastic()" onclick="searchOnClick()"/>
<div class="position-absolute d-none" style="width: 100%; border:1px solid #eeeeee; z-index: 999;"
id="resultsSugg">
<div class="suggestions" onclick='return resOnclick(this)' data-ppp='John'>
<span>John</span> <span>Doe</span>
</div>
<div class="suggestions" onclick='return resOnclick(this)' data-ppp='Rocky'>
<span>Rocky</span> <span>Balboa</span>
</div>
<div class="suggestions" onclick='return resOnclick(this)' data-ppp='Samim'>
<span>Samim</span> <span>Yo</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<label>dummy text</label>
</div>
</div>
<div class="row">
<div class="col-10 offset-1">
<div>
<br><br><br>
<strong>Steps to reproduce the problem</strong><br>
<ul>
<li>Click on the textbox, then</li>
<li>Click on dummy text and click just outside of the parent div. It won't hide</li>
</ul>
</div>
</div>
</div>
</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>
In the code shown below, I have a post and in there is a comment button that will slide the comment box into view from the right. I'm resizing the main post element from 100% of the parent to 67% of the parent (col-lg-12 to col-lg-8). Although I'm trying to get the post element to simultaneously move with the entrance of the comment element.
Also in my fiddle i can't seem to fix how the comment slides all the way across the entire post element, rather than just a portion of it. Additionally, I can't fix the animation where it just appears rather than slides in, although the slide out animation works.
This is my JSFiddle
The code snippet below oddly doesn't work like jsfiddle does.
$('body').on('click', '#comments', function(e) {
var name = $(this).attr('name');
var style = $("#comments-body-" + name).prop('class');
if (style == "col-lg-4 hide") {
$("#post-card-" + name).prop('class', 'col-lg-8');
$("#comments-body-" + name).show("slide", {
direction: "right"
}, 1000, function() {
$("#comments-body-" + name).prop('class', 'col-lg-4 show');
});
} else if (style == "col-lg-4 show") {
$("#comments-body-" + name).hide("slide", {
direction: "right"
}, 1000, function() {
$("#post-card-" + name).prop('class', 'col-lg-12');
$("#comments-body-" + name).prop('class', 'col-lg-4 hide');
});
}
});
.quantity {
border-radius: 100px;
background: #dc3545;
color: white;
padding: 1px 6px;
}
span #comments {
cursor: pointer;
}
span #comments:hover {
color: blue;
}
.divider {
position: relative;
Float: left;
height: 100%;
width: 1px;
background-color: rgba(0, 0, 0, .125)
}
.comment-body {
padding: 0.75rem !important;
}
.show {
display: block;
}
.hide {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" media="all">
<link href="https://nofile.io/f/RA9FgtoD8yG/master.css" rel="stylesheet" media="all">
<body>
<div id="main-content" class="main-content">
<div id="notices" class="section__content section__content--p30">
<div class="container-fluid" id="content">
<div class="col-md-12">
<div class="overview-wrap">
<h2 class="title-1">Notices</h2>
<button class="au-btn au-btn-icon au-btn--blue" data-toggle="modal" data-target="#newPostModal">
<i class="zmdi zmdi-plus"></i>new post</button>
</div><br />
<div id="$id" class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-lg-8">
<strong class="card-title">
yeet
</strong>
</div>
<div class="col-lg-4">
<span style="cursor:pointer;" class="float-right">
<a id="remove-notice">
<i class="fas fa-times"></i>
</a>
</span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<span>
<small><span class="float-right" id="comments" name="1">Comments <span class="quantity"><bold>1</bold></span></span>
</small>
</span>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div id="post-card-1" class="col-lg-12" style="position:relative;">
xdxddxd
</div>
<div class="col-lg-4 hide" id="comments-body-1">
<div class="divider"></div>
<div style="margin-left:2vw;">
<div style="vertical-align:middle;">
<strong>Comments</strong>
<button class="au-btn au-btn-icon au-btn--blue" style="line-height:25px!important;padding:0 5px!important;float:right;"><i class="zmdi zmdi-plus"></i>comment</button>
</div>
<br />
<div class="card">
<div class="card-body comment-body" style="position:relative;">
<strong> User </strong><br/>
<p>
shfashfihgliahgal
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Okay, I hope you are still watching this question.
First, why your show("slide" is failed. Let's watch this code.
$(function() {
$("#button1").on("click", function() {
// fade in. (but it doens't show due to priority problem.)
$("#target1").fadeIn("slow", function() {
// It shows at this timing.
$("#target1").prop("class", "col-sm-4 show");
});
});
$("#button2").on("click", function() {
// fade in.
$("#target2").fadeIn("slow");
});
});
.hide {
display: none !important;
}
.display-none {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target1" class="col-sm-4 hide">
Hello my name is col-sm-4! for display:none !important;
</div>
<div id="target2" class="col-sm-4 display-none">
Hello my name is col-sm-4! for display:none;
</div>
<input type="button" class="button" value="show col-sm-4" id="button1">
<input type="button" class="button" value="show col-sm-4" id="button2">
Next, you want to move the entire post element.
Maybe I'm misunderstanding.
But I did fix some problem that what I thought.
Can you have a look? if anything, feel free to question me.
For Example.
I'm a beginner working on a project in the MEAN stack. I'm getting inconsistent HTML previews when I render it by itself and when I run it from the project.
What it's supposed to look like (when I preview it by itself):
imgur
and here's what it looks like when I build the project:
imgur
I'd like the partial view to sit under the header and fill the remaining space on the screen.
Here's my index.html
<!doctype html>
<html ng-app="angulobby">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="css/text" href="./stylesheets/style.css">
<script src="https://use.fontawesome.com/7222f42b52.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="./main.js"></script>
<script src="./services.js"></script>
<script src="./controllers.js"></script>
<base href="/">
</head>
<body data-ng-controller="IndexController">
<!-- HEADER AND NAVBAR -->
<div class="box">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AnguLobby Prototype</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> Login</li>
<li><i class="fa fa-comment"></i> Register</li>
<div ng-controller="logoutController">
<a ng-click='logout()' class="btn btn-default">Logout</a>
</div>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where the content will be injected -->
<div data-ng-view></div>
</div>
</div>
</body>
</html>
and here is the partial view home.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script></script>
</body>
</html>
and finally styles.css
html, body{
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
#main {
background-color: aliceblue;
flex-grow: 1;
}
#ng-view {
height: 100%;
}
#container {
height: 100%;
width: 100%;
}
#left, #middle, #right {
height: 100%;
width: 33%;
}
#chat-container {
display: flex;
flex-direction: column;
background-color: lightblue;
height: 100%;
width: 100%;
}
#messages-box {
flex-grow: 1;
}
You have an HTML page in the div of another HTML page. The inner page is 100% height of the div (which is only as high as the content)
Just remove the html and body tags from the home.html partial. You may want to examine how you are including your js scripts as well...
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>