I’ currently working on a website, where a user should be able to write and insert new songs with belonging chords into a database.
To sum things up, and get to the point pretty quick, here is my problem:
I have a div with the id “#textarea”, and the attribute contenteditable=“true”. On each enter/linebreak, I would like to create a new div with the class “.chords” and the attribute contenteditable=“false”. This ".chords" div should be placed right before the new line, like the image shows here:
The red color is the #textarea div, and the blue color the .chords divs
So my question is: how do I do this?
I’ve posted the code I've tried in the end of this post, but as you see if you run it, the .chords divs are positioned below the new line, so I’m now a bit stuck.. If any of you guys have an idea on how to do this, please let me hear from you!
$(function(e) {
$('#textarea').keydown(function(e) {
var i = 0;
// Check if the returnkey is being pressed
if (e.keyCode === 13) {
$("#textarea div:last-of-type").after("<div class=\"chords\" id=\"" + (i + 1) + "\" contenteditable=\"false\"></div>");
i = i + 1;
}
});
})
#textarea {
border: 1px solid black;
line-height: 50px;
font-size: 20px;
}
.chords {
height: 30px;
border: 1px solid black;
position: relative;
}
#textarea div:not(.chords) {
margin-top: 20px;
min-height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textarea" contenteditable="true">
<div class="chords" id="1" contenteditable="false"></div>
<div></div>
<!--End of #textarea-->
</div>
Similar Something like that
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#textarea {
border: 1px solid red;
line-height: 50px;
font-size: 20px;
min-height: 40px;
}
.chords {
height: 30px;
border: 1px solid black;
position: relative;
margin-top:5px;
}
#textarea div:not(.chords) {
margin-top: 20px;
min-height: 40px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(e) {
$('#textarea').keydown(function(e) {
var i = 0;
// Check if the returnkey is being pressed
if (e.keyCode === 13) {
$(this).after('<div class="chords" id="'+ (i + 1) +'" contenteditable="false"></div><div>'+$(this).html()+'</div>');
$(this).html("");
i = i + 1;
}
});
})
</script>
<div id="textarea" contenteditable="true">
</div>
<div class="chords" id="1" contenteditable="false"></div>
<div></div>
<!--End of #textarea-->
</body>
</html>
Check it out
https://jsfiddle.net/emarufhasan/66L2ohnp/?utm_source=website&utm_medium=embed&utm_campaign=66L2ohnp
Related
function myFunction() {
var element = document.getElementById("one1");
element.classList.toggle("one2");
var element = document.getElementById("two1");
element.classList.toggle("two2");
}
<style>
#section{margin-left:50px;
margin-right:50px
}
#monbouton{float:right;
font-size:25px;
width:50px;
height:50px;
background-color:#F1F1F1;
border:1px solid ##F1F1F1
}
#one1{
float:left;
width:40%;
height:100px;
border:1px solid blue
}
.one2{
width:10% !important;
height:200px;
border:1px solid red !important;
}
.one2 #afairedisparaitre{display:none
}
#two1{float:right;
width:59%;
height:100px;
border:1px solid green
}
.two2{width:89% !important
}
</style>
<!DOCTYPE html>
<html>
<body>
<div id="section">
<div id="one1">
<button id="monbouton" onclick="myFunction()">↔</button>
<div id="afairedisparaitre">This is DIV #one1<br />
Button toggle to CLASS .one2<br />
and reverse</div>
</div>
<div id="two1">This is DIV #two1<br />
Button toggle to CLASS .two2<br />
and reverse</div>
</div>
</body>
</html>
I am trying to make the leftside of my website shrink, so that the users can have a wider rightside if they find it more confortable.
What I am missing is a way that would keep the choice all over the site, when an other page is loaded, until the user clicks again. Maybe the solution would be a few more lines in js with "localStorage" ? I would really appreciate any help.
Made your CSS a bit better. Now we need to toggle only one class .with_toggle for #section.
It can sow errors here, in Snippet, but will fork fine on Codepan, see please. Try to switch it and reload the page on Codepan.
// checking if our storage is not empty
if (localStorage.toggled != '') {
// set class to #section form storage value
document.getElementById("section").classList.toggle(localStorage.toggled);
}
function myFunction() {
if (localStorage.toggled != "with_toggle") {
document.getElementById("section").classList.add("with_toggle");
localStorage.toggled = "with_toggle";
} else {
document.getElementById("section").classList.remove("with_toggle");
localStorage.toggled = "";
}
}
#section {
margin-left: 50px;
margin-right: 50px;
}
#monbouton {
float: right;
font-size: 25px;
width: 50px;
height: 50px;
background-color: #F1F1F1;
border: 1px solid #F1F1F1;
}
#one1 {
float: left;
width: 40%;
height: 100px;
border: 1px solid blue;
}
.with_toggle #one1 {
width: 10%;
border: 1px solid red;
}
.with_toggle #one1 #afairedisparaitre {
display: none;
}
#two1 {
float: right;
width: 59%;
height: 100px;
border: 1px solid green;
}
.with_toggle #two1 {
width: 89%;
}
<div id="section">
<div id="one1">
<button id="monbouton" onclick="myFunction()">↔</button>
<div id="afairedisparaitre">This is DIV #one1<br /> Button toggle to CLASS .one2<br /> and reverse</div>
</div>
<div id="two1">This is DIV #two1<br /> Button toggle to CLASS .two2<br /> and reverse</div>
</div>
Sure. Just create a localStorage variable that keeps track of whether the shrink should be active and use that to apply your styles on page load or something similar.
function shrinkActive() {
var shrink;
if (!(shrink = localStorage.getItem("shrink"))) {
localStorage.setItem("shrink", "false");
return false;
}
return JSON.parse(shrink);
}
function setShrink(active) {
var element1 = document.getElementById("one1");
var element2 = document.getElementById("two1");
if (active) {
element1.classList.add("one2");
element2.classList.add("two2");
} else {
element1.classList.remove("one2");
element2.classList.remove("two2");
}
localStorage.setItem("shrink", active.toString());
}
function myFunction() {
setShrink(!shrinkActive());
}
window.onload = function() {
setShrink(shrinkActive());
}
Link to working Codepen. https://codepen.io/bugcatcher9000/pen/pogZbrz?editors=1111
I try to load an array from an external JS file into my HTML and have problems with that.
My js.js:
var temp_max = [4,9,2,5,8,4,2,10];
My HTML:
Note: Please download this file DateJS and insert it into "DATE-JS"!!
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--CSS for layout-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!--Date library for german date layout-->
<script src="DATE-JS"></script>
<script src="js.js"></script>
</head>
<body>
<br>
<br>
<div style="width:80%" position="absolute">
<div class="header">
<script>
for(var i = 0 ; i <8 ; i++)
{
var weekday=Date.today().addDays(i).toString('dddd');
document.write("<div id='div_weekday'>" + weekday + "</div>");
}
for(var i = 0 ; i <8 ; i++)
{
var day = Date.today().addDays(i).toString('dd');
document.write("<div id='div_date'>" + day + "</div>")
}
</script>
</div>
</div>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
}
body {
background-color: rgb(86,86,85);
}
h1:after {
content: " ";
width: 70.5%;
height: 2px;
background-color: rgb(228,203,153);
position:absolute;
top: 50%;
margin-left: 15px
}
.header {
width: 100%;
}
.header > div {
color: rgb(228,203,153);
width: 12.5%;
float: left;
border: solid rgb(228,203,153);
border-width: 1px 1px 1px 0;
text-align: left;
word-break: break-all;
}
.header > div:first-child {
border-width: 1px;
}
#div_date {
border: none;
width: 12.5%;
font-size: 60px;
text-align: right;
border-bottom: solid rgba(228,203,153,0.3);
border-width: 0.5px;
padding-right: 1%
}
#div_weekday {
border: none;
width: 12.5%;
font-size: 20px;
text-align: left;
padding-left: 1%
}
Here is a screenshot without importing the JS array.
So I want that my temp_max array values are displayed exactly above the German weekdays!
So above the first information: 'Donnerstag' the script should display the value 4 from the array and so on.
Please note that I want to export this array from an external JS-file, I am not able to write this variable into my HTML file!
I already tried to use
document.getElementById
but this does not work for me.
If the problem just in looping over the created divs, I think you can do this.
All what you need to change is just adding a different ids to your divs.
Just use i index in your ids.
Something like this:
Creation:
for(var i = 0 ; i <8 ; i++) {
var weekday=Date.today().addDays(i).toString('dddd');
document.write("<div id='div_weekday_" + i + "'>" + weekday + "</div>");
}
Updating data:
for (var i = 0; i < 8; i++) {
document.getElementById('div_weekday_' + i).innerHTML = temp_max[i].weekday;
}
var count = 0;
$(document).ready(function() {
$("div").on("click", function() {
$("#test").fadeOut(500);
count++;
$("#test").fadeIn(500);
document.getElementById("test").innerHTML = count;
});
});
div {
background-color: gold;
border: 2px solid goldenrod;
border-radius: 7px;
text-align: center;
vertical-align: middle;
font-family: Arial;
font-size: 35px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div><span id="test">0</span></div>
</body>
</html>
I am new to Jquery. In the above code, the number inside the div increments on clicking and fades out and in. I want it to work such that the existing number disappears first and then the next number appears while, here, the number first changes and then fades out and in, which is not how I want it to work. Please run the snippet to see the problem. What is wrong or missing in my code? Any help would be appreciated.
It's because it takes the fadeOut 500 ms but the increment of count and the assignment happens right away. You can use the callback complete of fadeOut to achieve what you need:
$("#test").fadeOut(500, function() { // the function will be called when the fadeOut is completed
count++; // increment count
this.textContent = count; // assign it to this element (#test) textContent
}).fadeIn(500); // then fadeIn
var count = 0;
$(document).ready(function() {
$("div").on("click", function() {
$("#test").fadeOut(500, function() {
count++;
this.textContent = count;
}).fadeIn(500);
});
});
div {
background-color: gold;
border: 2px solid goldenrod;
border-radius: 7px;
text-align: center;
vertical-align: middle;
font-family: Arial;
font-size: 35px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div><span id="test">0</span></div>
</body>
</html>
Try this
you need to increment in callback of fading out, meaning increment when animation is complete
var count = 0;
$(document).ready(function() {
$("div").on("click", function() {
$("#test").fadeOut(500, function(){
count++;
document.getElementById("test").innerHTML = count;
}
);
$("#test").fadeIn(500);
});
});
div {
background-color: gold;
border: 2px solid goldenrod;
border-radius: 7px;
text-align: center;
vertical-align: middle;
font-family: Arial;
font-size: 35px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div><span id="test">0</span></div>
</body>
</html>
var count = 0;
$(document).ready(function() {
$("div").on("click", function() {
count++;
$("#test").fadeOut(500).$("test").text(count).fadeIn(500);
});
});
"JQuery Chaining"
https://www.w3schools.com/jquery/jquery_chaining.asp
I am trying to get a div to fadeIn() from white to the normal dark gray color. However, my attempt is failing and it is killing my other scripts on the page. What am I doing wrong?
function(){
$('.dark-gray').fadeTo(1200, 1);
}
.dark-gray {
height: 500px;
width: 100%;
background-color: #202020;
}
#dark-gray-container {
text-align: center;
padding: 150px 0;
}
#dark-gray-container-title {
color: #FFF;
font-size: 1.7em;
font-weight: bold;
}
#dark-gray-container-description {
color: #FFF;
font-size: 1.3em;
padding-top: 40px;
}
#dark-gray-container-button {
padding-top: 80px;
}
#dark-gray-container-button-span {
color: #FFF;
padding: 20px 25px;
border: 2px solid #FFF;
cursor: pointer;
transition: ease-in-out .3s;
}
#dark-gray-container-button-span:hover {
border: 2px solid #45a5ba;
transition: ease-in-out .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dark-gray">
<div id="dark-gray-container">
<div id="dark-gray-container-title">GET IN TOUCH WITH US</div>
<div id="dark-gray-container-description">Looking for advice or would you like to speak to a member of the OD team? Please hit the button below.</div>
<div id="dark-gray-container-button"><span id="dark-gray-container-button-span">CONTACT US</span></div>
</div>
</div>
UPDATE:
I want the function to start when the div is scrolled to. What about this?
$(function() {
var oTop = $('.green').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
fadeinGray();
}
});
});
function fadeinGray(){
$('.dark-gray').fadeTo(1200, 1);
}
check out a working example HERE
There were couple of issues. First your dark-gray class was always dark gray. You had to change the CSS opacity to something lower than 1 for the beginning. Then you were making it complicated to calculate the top offset.
this is how you can use fadeIn when mouseenter this is the code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
div.mystyle{
width:500px;
height: 500px;
border:2px solid black;
}
div.check{
width: 100%;
height: 100%;
background-color: gray;
display: none;
}
</style>
</head>
<body>
<div class="mystyle">
<div class="check">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".mystyle").mouseenter(function(){
$(".check").fadeIn(1000);
});
});
</script>
</body>
</html>
if you want call back function(when mouse leave) use this code also.
$(document).ready(function(){
$(".mystyle").mouseleave(function(){
$(".check").fadeIn(1000);
});
});
I have an div container that contains three div child element in which just first child div element is displayed on page load.
I just need to display subsequent child div element on button click. It means when i click button first time then it should display div containing text "Series Type2" and again when i click button then next child element "Series Type3" should be displayed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/div/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>On Demand | Vod Info</title>
</head>
<style>
body {
font-family: Arial;
font-weight: bold;
color: #FFFFFF;
}
#recording-container {
width:100%;
margin:0 auto;
background-color:#8E898F;
width:40%;
margin-top:10%;
height:100px;
}
#type {color: #fff; width: 100%}
#save {color: #fff; width: 100%}
.placeholder{
height:20px;
}
.spacer{
height:20px;
}
.margin-5{
margin-left:5%
}
.highlight {
/*-moz-box-shadow: 0 0 5px 4px red;*/
-webkit-box-shadow: 0 0 0px 0px #ad2eb2;
box-shadow: 0 0 3px 3px #ad2eb2;
border-radius: 3px;
}
.title{
background-color: #ad2eb2;
text-align: center;
}
.series {
height: 36px;
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.seriesType{
float: left;
height: 36px;
line-height: 36px;
margin: 0 5px;
padding: 0 10px;
text-align: center;
width:100%
}
</style>
<body>
<div id="recording-container">
<div id="title" class="title">Record</div>
<div class="placeholder"></div>
<div class="series highlight">
<div class="seriesType" id="series_0">Series Type1</div>
<div class="seriesType" id="series_1">Series Type2</div>
<div class="seriesType" id="series_2">Series Type3</div>
</div>
</div>
<input type="button" onclick="switchdiv()" name="Switch" value="Switch">
<script>
function switchdiv()
{
// Need to write code here
}
</script>
</body>
</html>
I see you are not using jQuery so this answer wont either.
There are a few ways to do this, here's a fiddle: http://jsfiddle.net/SP67E/
I would recommend using a list instead and not having each one overlay the other. Each list item would be hidden until it was needed to be shown.
But that is your choice, so the fiddle accommodates to that.
Fiddle Code:
var seriesId = 0;
var seriesCount = 3;
function switchdiv() {
// Stops last series from being hidden
if (seriesId >= (seriesCount -1)) return;
// Hides each element in turn
document.getElementById("series_" + seriesId).style.display="none"
seriesId++;
}
Edit: If you want to decrement here is the updated fiddle: http://jsfiddle.net/SP67E/1/
Maybe not the most elegant but this should work.
<script>
var nextSeries = 2;
function switchdiv()
{
$("#series_" + nextSeries).show();
nextSeries += 1;
}
</script>