$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
});
jQuery(function($){
$(document).mouseup(function (e){
var div = $(".link");
var second = $('.elem');
var close = $('.close');
if (!div.is(e.target)
&& (second.has(e.target).length == 0 || close.is(e.target))) {
second.hide();
}
});
});
.wrapper {
width: 1180px;
margin-right: auto;
margin-left: auto;
}
.elem {
display:none;
margin-top: 14px;
width: 480px;
height: 310px;
background-color: grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
box-shadow:0 2px 3px rgba(0,0,0,0.5);
transition: 0.4s;
}
.elem:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 33px;
}
.title {
margin: 0px 0px 10px 10px;
padding-top: 15px;
position: relative;
}
.link {
margin-left: 13px;
}
.regions {
height: 50px;
display: inline-block;
}
.floating {
display: inline-block;
margin: 10px;
line-height: 0.4;
width: 20px;
}
a.floating {
text-decoration: none;
width: 24%;
}
a.floating:hover {
text-decoration: underline;
}
.otherregion {
margin: 0px 0px 10px 10px;
padding-top: 15px;
}
.edit {
border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
margin: 0px 0px 10px 10px;
}
.formtext {
margin: 0px;
padding-top: 2px;
}
.top {
margin-left: 13px;
margin-right: 38px;
}
.close {
margin: -27px 0px 20px 444px;
position: absolute;
font-size: 18px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>new project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="wrapper">
<a class="link" href="#">S.T.E.A.M. lab</a>
<div class="elem">
<p class="title">Choose youre hobby</p><a class="close">X</a>
<div class="regions">
<a class="floating" href="#">Math</a>
<a class="floating" href="#">Art</a>
<a class="floating" href="#">Science</a>
<a class="floating" href="#">Technology</a>
<a class="floating" href="#">Engineering</a>
</div>
<p class="otherregion">Or choose another one:</p>
<form>
<input class="edit" type="text" name="add" placeholder="write some text bro">
</form>
<div class="top">bla bla bla bla bla :
<p class="formtext"> • </p>
<p class="formtext"> • .</p></div>
</div>
</div>
</body>
</html>
Hi everyone.This is my simple window.Already 3 days im struggling to change S.T.E.A.M. lab text to other text from floating class which one is clicked.And if its possible save this result in cookie.more details more details more details more details (sorry this is for stackoverflow they neeed more details )
You have to add a click listener to your floating Elements and save the text to link. For setting cookie I used hier vanilla JS, but you can use this https://github.com/carhartl/jquery-cookie too
$(document).ready(function(){
$(".link").click(function(){ // when .link clicked
$(".elem").toggle(); // toggle .elem visibility
});
$('.floating').click(function(evt){
evt.preventDefault();
$('.link').text(event.target.textContent);
// document.cookie = "cookiename=event.target.textContent";
});
});
jQuery(function($){
$(document).mouseup(function (e){
var div = $(".link");
var second = $('.elem');
var close = $('.close');
if (!div.is(e.target) && (second.has(e.target).length == 0 || close.is(e.target))) {
second.hide();
}
});
});
.wrapper {
width: 1180px;
margin-right: auto;
margin-left: auto;
}
.elem {
display:none;
margin-top: 14px;
width: 480px;
height: 310px;
background-color: grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
box-shadow:0 2px 3px rgba(0,0,0,0.5);
transition: 0.4s;
}
.elem:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
left: 33px;
}
.title {
margin: 0px 0px 10px 10px;
padding-top: 15px;
position: relative;
}
.link {
margin-left: 13px;
}
.regions {
height: 50px;
display: inline-block;
}
.floating {
display: inline-block;
margin: 10px;
line-height: 0.4;
width: 20px;
}
a.floating {
text-decoration: none;
width: 24%;
}
a.floating:hover {
text-decoration: underline;
}
.otherregion {
margin: 0px 0px 10px 10px;
padding-top: 15px;
}
.edit {
border:1px solid #9E9E9E;
color: #000000;
padding: 3px;
font-size: 14px;
font-family: Verdana;
background: #FFF;
width: 90%;
height: 23px;
}
form {
margin: 0px 0px 10px 10px;
}
.formtext {
margin: 0px;
padding-top: 2px;
}
.top {
margin-left: 13px;
margin-right: 38px;
}
.close {
margin: -27px 0px 20px 444px;
position: absolute;
font-size: 18px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>new project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="wrapper">
<a class="link" href="#">S.T.E.A.M. lab</a>
<div class="elem">
<p class="title">Choose youre hobby</p><a class="close">X</a>
<div class="regions">
<a class="floating" href="#">Math</a>
<a class="floating" href="#">Art</a>
<a class="floating" href="#">Science</a>
<a class="floating" href="#">Technology</a>
<a class="floating" href="#">Engineering</a>
</div>
<p class="otherregion">Or choose another one:</p>
<form>
<input class="edit" type="text" name="add" placeholder="Начните вводить название">
</form>
<div class="top">bla bla bla bla bla :
<p class="formtext"> • </p>
<p class="formtext"> • .</p></div>
</div>
</div>
</body>
</html>
Step 1 : Add a click event to the a tag under regions.
Step 2 : On this click event handler get the inner text of the clicked element which is the subject - and store in a variable for display and to be stored in a cookie.
Step 3: Write a cookie save function that takes a string parameter and which is called on step 2 , pass in the subject name to be saved in the cookie.
$("body").on("click" "div.regions a", function(e) {
// Your code here that fetches the event.target.innertext or some such
var txt = $(e.target).text(); // sample code not tested
SetCookie(txt);
SetStemLabText(txt)
});
SetCookie(txt) {
$.cookie("Subject", text);
}
SetStemLabText(txt) {
$('.link').text(txt)
}
Related
Hi Everyone!
I want to make an editor for my website with functions like working light/dark toggle button, Working editor that really shows the result and Syntax Hilighting. I have made the frame of the editor...
function compile(){
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function(){
code.open();
code.writeln(html.value+"<style>"+css.value+"<\/style>" + "<script>"+js.value+"<\/script>")
code.close();
}
}
compile();
* {
padding: 0;
margin: 0;
outline: 0;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: #444444;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
textarea ::-webkit-scrollbar {
width: 8px;
}
textarea ::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
textarea ::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
header#playground_header {
background: #1e1f26;
height: 65px;
}
header#playground_header > h1 {
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
line-height: 35px;
font-family: 'IBM Plex Sans', sens-serif;
}
iframe#code {
bottom: 0;
position: relative;
width: 100%;
height: 40vh;
border: unset;
background: #f2f4f6;
}
.prism-live {
min-height: 350px;
overflow-x: hidden;
width: 100%;
}
div#coding_area > div {
width: 100%;
border-left: 15px solid #555865;
}
div#coding_area > div:first-child {
border-left: none;
}
div#coding_area {
width: 100%;
height: calc(60vh - 60px);
min-height: 125px;
display: flex;
overflow: hidden;
border-bottom: 15px solid #555865;
}
textarea {
font-size: 15px;
color: #fff;
background: #000000;
}
div#code_output {
height: 100%;
}
<head>
<title>Coding Playground | #Programmer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
</head>
<body>
<div id="coding_playground_outer">
<header id="playground_header">
<h1>Coding Playground | #Programmer</h1>
</header>
<hr color="#fff">
<div class="page-wrap twilight">
<div class="boxes">
<div id="coding_area">
<textarea id="html" placeholder="HTML" class="prism-live language-html"></textarea>
<textarea id="css" placeholder="CSS" class="prism-live language-css"></textarea>
<textarea id="js" placeholder="JavaScript" class="prism-live language-js"></textarea>
</div>
<div id="code_output">
<iframe id="code"></iframe>
</div>
</div>
</div>
</div>
<body>
This code is 65% working as I imagined it. Just need a working toggle light/dark switch button now and a Syntax Hilight. Please help me as soon as possible...
let playing = false
let score
$(function() {
// start smash
$('startgame').click(function() {
if (playing == true) {
location.reload()
} else {
playing = true
score = 0
$('#scorevalue').html(score)
$('life').show()
}
})
})
html {
height: 100%;
background: skyblue;
}
#container {
height: 640px;
width: 700px;
background-color: white;
margin: 70px auto;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 4px 3px 0px;
position: relative;
}
#scorebox {
height: 30px;
width: 90px;
background-color: powderblue;
text-align: center;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
padding: 4px;
position: absolute;
left: 600px;
top: 10px;
}
#fruitsdisp {
height: 460px;
width: 560px;
background-color: ghostwhite;
padding: 10px;
border-radius: 15px;
position: relative;
left: 60px;
top: 60px;
box-shadow: 0px 1px 2px 0px;
}
#startgame {
height: 35px;
width: 200px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family: fantasy;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
left: 280px;
top: 610px;
}
#gameover {
height: 260px;
width: 480px;
background-color: gainsboro;
padding: 10px;
border-radius: 15px;
position: absolute;
left: 120px;
top: 170px;
box-shadow: 0px 1px 2px 0px;
text-align: center;
font-size: 5em;
z-index: 2;
font-family: monospace;
display: none;
}
#life {
height: 35px;
width: 130px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family: serif;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
top: 10px;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruit Smash</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1,user-scalable=yes"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"
/>
</head>
<body>
<div id="container">
<div id="scorebox">score: <span id="scorevalue">0</span></div>
<div id="fruitsdisp"></div>
<div id="startgame">SMASH</div>
<div id="gameover">GAME OVER! YOUR SCORE IS <span>0</span></div>
<div id="life">life</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery.js"></script>
</body>
</html>
I'm stuck here as my jquery code is not running.
Here is my html, css and jquery code.
As soon as I click the smash button, it should show the <div id="life">life</div> element But this is not happening and I don't know why.
I have been using brackets to run my code. Html and css are running ok but jquery isn't. I would like to know where I went wrong in this.
you are using the wrong selectors,
id selectors should be prefixed with "#"
var playing = false;
var score;
$(function() {
//start smash
$("#startgame").click(function(){
if(playing == true){
location.reload();
}else{
playing=true;
score=0;
$("#scorevalue").html(score);
$("#life").show();
}
});
});
html{
height: 100%;
background: skyblue;
}
#container{
height: 640px;
width: 700px;
background-color: white;
margin: 70px auto ;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 4px 3px 0px;
position: relative;
}
#scorebox{
height: 30px;
width: 90px;
background-color: powderblue;
text-align: center;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
padding: 4px;
position: absolute;
left: 600px;
top: 10px;
}
#fruitsdisp{
height:460px;
width: 560px;
background-color: ghostwhite;
padding: 10px;
border-radius: 15px;
position: relative;
left: 60px;
top: 60px;
box-shadow: 0px 1px 2px 0px;
}
#startgame{
height: 35px;
width: 200px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family: fantasy;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
left: 280px;
top: 610px;
}
#gameover{
height:260px;
width: 480px;
background-color: gainsboro;
padding: 10px;
border-radius: 15px;
position: absolute;
left: 120px;
top: 170px;
box-shadow: 0px 1px 2px 0px;
text-align: center;
font-size: 5em;
z-index:2;
font-family: monospace;
display: none;
}
#life{
height: 35px;
width: 130px;
background-color: powderblue;
border-radius: 5px;
box-shadow: 0px 2.5px 4px 0px;
font-family:serif;
font-size: 20px;
padding-top: 5px;
text-align: center;
position: absolute;
top: 10px;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruit Smash</title>
<meta charset="utf-8">
<meta name = "viewport"
content = "width=device-width, initial-scale=1,user-scalable=yes">
<link rel="stylesheet"
href = "style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id ="container">
<div id = "scorebox">
score: <span id="scorevalue">0</span>
</div>
<div id="fruitsdisp">
</div>
<div id="startgame">SMASH
</div>
<div id="gameover">GAME OVER!
YOUR SCORE IS <span>0</span></div>
<div id="life">life
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
<script src="jquery.js">
</script>
</body>
</html>
I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom
You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});
You are using the id "editable" twice, could you change that and retry?
<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()
When sorting an item in a sortable list, the item jumps from its center position in the browser to the far left while sorting/dragging.
Hit add task twice, and then sort an item into new position and you'll see what I'm talking about.
$(document).ready(function() {
$(function() {
$('#sortable').sortable();
$('#sortable').disableSelection();
});
$(document).ready(function() {
$('#add').on('click', () => {
$('.ul').append(
'<div class="divvy">' +
'<input type="text" class="inputty"/><button class="remove" id="deletestyle" style="float: right;"> X </button>' +
'<div class="detailcontainer" style="float: left;" > <p>▼</p></div><div class="panel">' +
'<form class="form-inline"><p>Details</p><br><textarea name="details" rows="6" cols="15">' +
'</textarea><p>Due Date</p><input type="date" name="date" style="margin-bottom: 25px; width: 127px;"></form></div></div>');
});
$('.ul').on('click', '.detailcontainer', function() {
$(this).closest('.divvy').find('.panel').toggle();
});
});
$('.panel').hide();
$('.optionBox').on('click', '.remove', function() {
$(this).parent().fadeOut(400, function() {
$(this).remove();
});
});
});
.panel {
display: none;
}
.center {
text-align: center;
margin-top: 58px;
}
.center div {
margin: 0 auto;
}
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
#deletestyle {
background: #f04d25;
border: solid 1px white;
color: white;
font-weight: 700;
height: 45px;
width: 10%;
border-radius: 0px;
}
.divvy {
border: solid 1px black;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
position: relative;
min-width: 325px;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
.divvy:hover {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
min-width: 325px;
margin: 0 auto;
}
.divvy:active {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
-webkit-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
min-width: 325px;
margin: 0 auto;
}
.inputty {
width: 75%;
height: 45px;
font-size: 22px;
font-family: 'work sans';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="center">
<div class="optionBox" style="position: relative;">
<button class="addtask" id="add" class="center">＋ ADD TASK</button>
<div id="sortable" class="ul" class="center"></div>
</div>
</div>
(fiddle)
You could simply add to your .divvy class :
.divvy {
top:0;
right:0;
left:0;
}
$(document).ready(function() {
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
$(document).ready(function() {
$('#add').on('click', () => {
$('.ul').append(
'<div class="divvy">' +
'<input type="text" class="inputty"/><button class="remove" id="deletestyle" style="float: right;"> X </button>' +
'<div class="detailcontainer" style="float: left;" > <p>▼</p></div><div class="panel">' +
'<form class="form-inline"><p>Details</p><br><textarea name="details" rows="6" cols="15">' +
'</textarea><p>Due Date</p><input type="date" name="date" style="margin-bottom: 25px; width: 127px;"></form></div></div>');
});
$('.ul').on('click', '.detailcontainer', function() {
$(this).closest('.divvy').find('.panel').toggle();
});
});
$('.panel').hide();
$('.optionBox').on('click', '.remove', function() {
$(this).parent().fadeOut(400, function() {
$(this).remove();
});
});
});
.panel {
display: none;
}
.center {
text-align: center;
margin-top: 58px;
}
.center div {
margin: 0 auto;
}
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
#deletestyle {
background: #f04d25;
border: solid 1px white;
color: white;
font-weight: 700;
height: 45px;
width: 10%;
border-radius: 0px;
}
.divvy {
border: solid 1px black;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
position: relative;
min-width: 325px;
margin-left: auto;
margin-right: auto;
overflow: auto;
top: 0;
right: 0;
left: 0;
}
.divvy:hover {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
min-width: 325px;
margin: 0 auto;
}
.divvy:active {
border: solid 2px darkgray;
padding: 10px;
width: 35%;
border-radius: 2px;
background: #C0C0C0;
-webkit-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.15);
min-width: 325px;
margin: 0 auto;
}
.inputty {
width: 75%;
height: 45px;
font-size: 22px;
font-family: 'work sans';
}
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<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 type="text/javascript" src="java4.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="center">
<div class="optionBox" style="position: relative;">
<button class="addtask" id="add" class="center">＋ ADD TASK</button>
<div id="sortable" class="ul" class="center">
</div>
</div><br>
</div>
</body>
</html>
Specifying a width for #sortable seems to solve the issue:
#sortable {
width: 380px;
}
My chatbox won't maximize, autoscroll or return to bottom for new input. and also, is there any way to make the popup avatar act as android facebook messenger app, with onclick function to minimize and maximize? any help will really be appreciated here. thanks in advance.
<html>
<head>
<title>chatbox</title>
<style>
.popup-wrap {
top: 100px;
cursor: pointer;
width: 80px;
height: 110px;
position: fixed;
right: 40px;
}
.popup-avatar {
top: 11px;
left: 11px;
background: url(../images/ella1.jpg);
position: absolute;
height: 78px;
width: 78px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-radius:45px 45px 45px 45px
}
.shell-1 {
right: 20px;
background: #583983;
height: 80px;
width: 80px;
padding: 5px;
margin: 5px;
-moz-border-radius:25px 25px 25px 25px;
border-radius:45px 45px 45px 45px
}
.shell-2 {
background: white;
height: 78px;
width: 78px;
padding: 0px 0px 2px 2px;
margin: 0px;
-moz-border-radius:25px 25px 25px 25px;
border-radius:45px 45px 45px 45px
}
.tinyBanner {
background: #583983;
color: white;
height: 24px;
width: 100px;
display: inline-block;
text-align: center;
padding-top:5px;
border-radius: 15px 0px 15px 0px;
}
.msgbox_wrap {
background:white;
width:250px;
height:400px;
position:fixed;
right:20px;
padding:2px 2px 2px 2px;
bottom:0px;
display: none;
border: 1px solid #b0b0b0;
border-radius:10px 10px 0px 0px;
}
.msgbox_wrap-on {
display: block !important;
}
.msg_head{
cursor:pointer;
background:#583983;
padding:15px;
color:white;
bottom:0px;
border-radius:10px 10px 0px 0px;
}
.close{
float:right;
color:white;
}
.msg_wrap{
background:url(../images/m3-act.jpg);
min-width:250px;
height:355px
}
.chatlog {
height:300px;
}
.botMessage {
background-color: #ffffff;
position: relative;
padding: 5px;
margin: 5px;
display: inline-block;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.userMessage {
background-color:#583983;
position: relative;
color: #FFF;
padding: 5px;
margin: 5px;
display: inline-block;
float: right;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
}
.convo {
height: 290px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
.scroll {
overflow-y: auto;
overflow-x: hidden;
}
.msg_input {
background:#583983;
height: 42px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #eeeeee;
}
</style>
</head>
<body>
<div class="popup-wrap">
<a href="#" id="addClass">
<div class="shell-1">
<div class="shell-2">
<div class="popup-avatar"></div>
</div>
</div>
</a>
<div class="tinyBanner">Talk to Ella</div>
</div>
<div class="msgbox_wrap" id="qnimate">
<div class="msg_head">Talk to Ella
<div class="close">X</div>
</div>
<div class="msg_wrap">
<div class="convo scroll">
<div id="chatlog"></div>
</div>
<div class="msg_input">
<form method="post" name="talkform" id="talkform" action="index.php">
<form id="talkform" class="talkform">
<input id="say" name="say" placeholder="You say...." type="text" style="background: #white; height: 41px; width: 237px; font-color: #B1B1B1; font-size: 14px; font-weight: 400; border-radius:5px 5px 5px 5px;">
</form>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
// This minimize and close
$(document).ready(function(){
$('.msg_head').click(function(){
$('.msgbox_wrap').animate({height:45},'slow');
});
$('.close').click(function(){
$('.msgbox_wrap').hide();
});
});
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//popup chat fromm avatar icon
$(document).ready(function(){
$("#addClass").click(function () {
$('#qnimate').addClass('msgbox_wrap-on');
});
});
</script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//This autoscrolls
setInterval(function(){
$('.msg_wrap').load('convo scroll');
$('#chatlog').animate({scrollTop: $('msg_wrap')[0]}, 1000);
});
</script>
</body>
</html>
Nothing in your code animates the chat box back to full height. You set it to 45px and never do anything else.
$('.msgbox_wrap').animate({height:200},'slow');