`I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive
.top-section{
padding-top: 2rem;
}
.btn-search{
background-color: #EEEFEE;
border-radius: 0px !important;
}
.fa-search{
color: #8E8F8F;
}
.form-control{
border-radius: 0px !important;
}
.link-end{
text-align: end;
display: flex;
justify-content: end;
align-items: baseline;
}
.first-link{
margin-right: 2rem;
}
#media (max-width:991px) {
.link-end{
padding-top: 2rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<link rel="stylesheet" href="contact.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print-Shop Contact</title>
</head>
<body>
<div class="top-section">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-12">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-search" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<!--Empty Div-->
<div class="col-lg-4 d-md-block d-none"></div>
<!--End of Empty Div-->
<div class="col-lg-4 col-12">
<div class="link-end">
Help
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want the dropdown menu to be responsible. It only got irresponsible when I align both to inline. I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive
To test the grid structure, I removed the styles that added margin and padding to the elements. Then I updated the columns for responsive design; see the reference document for the grid system to be displayed differently in different browser sizes.
.btn-search {
background-color: #EEEFEE;
}
.fa-search {
color: #8E8F8F;
}
.link-end {
text-align: end;
display: flex;
justify-content: end;
align-items: baseline;
}
.first-link {
margin-right: 10px;
}
.customDropdownStyle{
margin-right: 110px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<link rel="stylesheet" href="contact.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print-Shop Contact</title>
</head>
<body>
<div class="top-section">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-search" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="link-end">
Help
<div class="dropdown customDropdownStyle">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
References
Grid system
just update the css of this class .link-end add this line in the css align-items: flex-end;
check the link here of updated code. updated code
Related
I have a simple navigation for resolution less than 757px I used bootstrap and pure JavaScript
if i resize my desktop browser it works but in mobile browser it doesn't work, even on fiddle it works but in real mobile browser it doesn't work(i have uploaded project to server)
now it doesnt work on desktop either i cant remove d-none class for links
html code
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header>
<div class="clearfix mx-3 my-2 d-md-none">
<label class="float-left">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="show()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="hide()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled d-none" id="links">
<p>واحدها<p>
<p> محصولات</p>
<p> <a href="/pages/درباره-ما"
class="text-white">درباره ما</a></p>
<p> اخبار</p>
<p> ارتباط با ما</p>
</ul>
</div>
</header>
</body>
</html>
css
#my-menu{
position: relative;
}
#links{
position: absolute;
padding: 30px 25px;
border-radius: 7px;
background-color: #3CB371;
text-align: center;
color: white;
transition:all .5s ease;
z-index: 10;
}
javascript
function show() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
function hide() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
here is the jsfiddle link
thank you in advance
I've changed your code little bit. jsfiddle working demo
HTML
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
</head>
<body>
<header>
<div class="clearfix mx-3 my-2">
<label class="float-left d-none">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="toggle()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="toggle()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled" id="links">
<li>
واحدها
<p></p>
<p>محصولات</p>
<p>درباره ما</p>
<p>اخبار</p>
<p>ارتباط با ما</p>
</li>
</ul>
</div>
</header>
</body>
</html>
js
const navIcon = document.querySelector('.float-left')
const menu = document.querySelector('#my-menu')
const signOne = document.getElementById('sign-one');
const signTwo = document.getElementById('sign-two');
function toggle() {
signOne.classList.toggle('d-none');
signTwo.classList.toggle('d-none');
menu.classList.toggle('d-none')
}
function responsive(e) {
if (window.innerWidth < 757) {
navIcon.classList.remove('d-none')
menu.classList.add('d-none')
// If sign-two not hidden then menu shown on less then 757px screen
if (!signTwo.classList.contains('d-none')) {
menu.classList.remove('d-none')
}
} else {
navIcon.classList.add('d-none')
menu.classList.remove('d-none')
}
}
window.addEventListener('resize', responsive);
window.addEventListener('load', responsive);
Remove d-md-none from <div class="clearfix mx-3 my-2 d-md-none">
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'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.
I have couple of questions about site, which I'm making with help of Bootstrap 4. I would like to make simple page just using on screen space (no scroll except mobile version) with logo in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch. I made some HTML/CSS proposals, but they didn't work properly. Do you have some ideas how to make it? :/
Thanks a lot!
<!DOCTYPE html>
<html lang ="cs">
<head>
<meta charset="utf-8">
<!-- Mobile adaptation -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Page information -->
<meta name="description" content="GeoExpo Eshop. Od replik přes zkameněliny do trilobitů.">
<meta name="keywords" content="eshop zoo, eshop Zoo Praha, GeoExpo, zkameněliny, suvenýry, repliky, šutry, kameny">
<meta name="author" content="Ondřej Sloup">
<!-- Mine Stylesheet -->
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<!-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<!-- Scripts (jQuery) -->
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Tittle -->
<title>Geo Expo</title>
</head>
<body>
<header>
<img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
</header>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid p-0">
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
</main>
And CSS
/*INSERT*/
#import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
#import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body, main {
height: 100% !important;
max-width: 100% !important;
}
body {
background: grey !important;
}
/*Header*/
header {
height: 15%;
}
.logo {
display: inline-block;
padding: 1rem 0 .5rem 0 !important;
}
/*Images*/
.row {
height: 30% !important;
}
/* NavBar */
nav {
font-size: 13pt;
font-family: 'Cinzel', sans-serif;
padding: .3rem 0 .3rem 0 !important;
text-transform: capitalize;
}
.nav-link {
color: #fff !important;
margin: 0 25% 0 25%;
}
.nav-link:hover {
font-style: underline;
}
For future, you can use the http://shoelace.io/
That being said, your html code should look like this:
<div class="container">
<div class="row Logo">
<div class="col-sm-3">
<!-- This is where you should put your logo image -->
</div>
</div>
<div class="row Menu">
<div class="col-sm-12">
<!-- this is where your menu goes in -->
</div>
</div>
<div class="row Images">
<div class="col-sm-4">
<!-- your first image -->
</div>
<div class="col-sm-4">
<!-- your second image -->
</div>
<div class="col-sm-4">
<!-- your third image -->
</div>
<div class="col-sm-4">
<!-- your forth image -->
</div>
<div class="col-sm-4">
<!-- your fifth image -->
</div>
<div class="col-sm-4">
<!-- your last image -->
</div>
</div>
</div>
Also, have a look at the bootstrap layout page https://getbootstrap.com/docs/4.0/layout/grid/
I want to show different color to glyph icon on hover.
This is my code:
<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
<span class="glyphicon glyphicon-globe"></span>
<span class="hidden-xs"> TRADING</span>
</div>
css
.span-hover:hover {
background-color: rgba(0,0,0,0.4);
color:white;
}
.glyphicon
{
font-size: 25px;
color:red;
}
.glyphicon:hover
{
color:#44c5ff;
}
When user place the cursor on div tag,Now it's only changing text color.But I want to change text color:white and at the same time glyph icon color:#44c5ff;
.glyphicon:hover it's working when user exactyly place cursor on glyphicon. But not in div tag.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.glyphicon:hover{
color:#44c5ff;
font-size:30px;
}
</style>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#">
<span class="glyphicon glyphicon-envelope"></span>
</a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
</body>
</html>
Try It Once
.span-hover:hover {
background-color: rgba(0,0,0,0.4);
color:white;
}
.glyphicon
{
font-size: 25px;
color:red;
}
.glyphicon:hover
{
color:#44c5ff;
}
.span-hover:hover .glyphicon{
color:#44c5ff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
<span class="glyphicon glyphicon-globe"></span>
<span class="hidden-xs"> TRADING</span>
</div>
try this snippet. and you can use this type of hover
.span-hover:hover .glyphicon{
color:#44c5ff;
}