My objective is to make the contents of multiple div elements editable either with all of the same div class name, or with different class names. I am aware of the contenteditable attribute but my problem is being able to save it using java-script so that when the page reloads, the edited content is saved and displayed. I have been trying to follow the tutorial on this website...
http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/
So far i have separated the java-script code into a different file called mailscript.js
I included the file near the top of the html5 file using...
I also changed the ...
document.getElementById
to...
document.getElementsByClassName
in the Java-script file that a made. I don't really know where to go from here. In short, the edits fail to save. Her are the files...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Package Information</title>
<script type="text/javascript" src="mailscript.js"></script>
<link rel="stylesheet" href="mailstyle.css">
<link rel="icon"
type="image/ico"
href="favicon.ico">
</head>
<body onload="checkEdits()">
<div id="wrapper">
<div id="header">
<header><h1>Bison Mail</h1></header>
</div>
<hr>
<br id="clearleft">
<div id="leftcolumn">
<hr>
<ul class="navbar">
<li>Home</li>
<li>Packages</li>
<li>Contact Us</li>
<li>Sign-Out</li>
</ul>
<hr>
</div>
<div id="rightcolumn">
<div class="container">
<div class="table-row">
<div class="heading">Name:</div>
<div class="name" contenteditable="true">Meshech Price</div>
</div>
<div class="table-row">
<div class="heading">Date Received:</div>
<div class="dateRecieved" contenteditable="true">11/1/2014</div>
</div>
<div class="table-row">
<div class="heading">Date of Pickup:</div>
<div class="dateOfPickup" contenteditable="true">None</div>
</div>
<div class="table-row">
<div class="heading">ID:</div>
<div class="ID" contenteditable="true">N/A</div>
</div>
<div class="table-row">
<div class="heading">E-mail:</div>
<div class="email" contenteditable="true"><address>shackster3773#yahoo.com</address></div>
</div>
<div class="table-row">
<div class="heading">E-mail Sent:</div>
<div class="emailSent" contenteditable="true">Sent</div>
</div>
<div class="table-row">
<div class="heading">Signature:</div>
<div class="signature" contenteditable="true">N/A</div>
</div>
</div>
<hr>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<input type="button" value="add package" onclick="addElement()"/>
<br>
<hr>
<div id="footer">
<br>
<p>By: Meshech ©</p>
</div>
</div>
</div>
</body>
</html>
and for the java-script file
function saveEdits() {
//get the editable element
var editElem = document.getElementsByClassName("name");
//display.write(editElem);
//get the edited element content
var userVersion = editElem.innerHTML;
//display.write(userVersion);
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementsByClassName("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!==null)
document.getElementsByClassName("name").innerHTML = localStorage.userEdits;
}
Any help would be Greatly appreciated. Thanks in advance!
Try this. Your divs need to look like <div id="name" class="edit" contenteditable="true">Meshech Price</div>
HTML
<div class="container">
<div class="table-row">
<div class="heading">Name:</div>
<div id="name" class="edit" contenteditable="true">Meshech Price</div>
</div>
<div class="table-row">
<div class="heading">Date Received:</div>
<div id="dateRecieved" class="edit" contenteditable="true">11/1/2014</div>
</div>
Javascript
function saveEdits() {
var editElem = document.getElementsByClassName("edit");
localStorage.userEdits = {}
Array.prototype.forEach.call(editElem, function(e) {
console.log(e.id)
localStorage.setItem([e.id], e.innerHTML);
});
document.getElementsByClassName("update").innerHTML="Edits saved!";
}
function checkEdits() {
if(localStorage.userEdits) {
var editElem = document.getElementsByClassName("edit");
Array.prototype.forEach.call(editElem, function(e) {
console.log(e.id)
e.innerHTML = localStorage.getItem(e.id);
});
}
}
Related
I'm trying to use a set of inputs in HTML but I would like to create a PHP onclick function that takes the value of certain elements in HTML when clicked. The problem is I don't think I can use a conventional HTML method="post" form because I'm trying to get the value of something which isn't and I'm trying to get the value of a div.
Specifically, I want to assign a value to each of the squares depending on their color and then use that value to store in a database in PHP. Any help is appreciated.
<?php
session_start();
include("database.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
$text_custom = $_POST['text_custom'];
echo $text_custom;
}
?>
<!DOCTYPE html>
<html>
<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 rel="stylesheet" href="bootstrap customiser.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="containter">
<div class="row">
<div class="col-3 offset-1 d-flex justify-content-end" id="logo">
<a href="http://localhost/website/test_1_customiser.php"><img id="logoclick" src="smiding logo.png"
alt="logo"></a>
</div>
<div class="col-7 offset-1" id="navbar">
Customiser
News
About us
<?php
if (!empty($_SESSION['logged'])){
echo 'Account';
}else{
echo 'Account';
}
?>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-12 text-center">
<h1>Customiser</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-1">
<img src="label.png" id="Gin_Label">
</div>
<div id="labeltext">
text
</div>
<div class="col-md-4 offset-md-2">
<div id="textchanger">
<h3>Text Picker</h3>
<input type="text" id="textpicker" name="text_custom">
<input type="button" id="update" value="Click me!" onclick="changetext()">
</div>
<div id="colourchanger" class="row"></div>
<h3>Colour Picker</h3>
<div class="row">
<div class="col-md-1">
<div class="square" id="colourpicker" onClick="invert()"></div>
</div>
<div class="col-md-1 offset-md-1">
<div class="square2" id="colourpicker2" onClick="invert2()"></div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-7">
<h3>Extra Ingredient</h3>
<select name="ingredient">
<option value="none">None</option>
<option value="lemon">Lemon</option>
<option value="orange">Orange</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-5">
<form method="post">
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function changetext() {
let bruh = document.getElementById('textpicker').value;
document.getElementById('labeltext').innerHTML = bruh;
}
function invert() {
document.getElementById("Gin_Label").style.filter = "invert(100%)";
document.getElementById("labeltext").style.color = "white";
}
function invert2() {
document.getElementById("Gin_Label").style.filter = "invert(0%)";
document.getElementById("labeltext").style.color = "black";
}
</script>
</body>
</html>
although I am not very clear about your question
but to use HTML value in PHP
you need to put all the HTML tag that consists of the value you wish to save to the database inside a
<form action="yourPhpNameWithTheRelatedCode" method="POST"> tag
the submit button <button type="submit" name="submit">Submit</button>
then in PHP
if (isset($_POST["submit"])){
$value= $_POST["theNameOfTheTagThatYouWishToSaveThatValue"]??"";
}
I want something like the attached image. I am able to do the same look except blurring the background. I tried making it using angularjs. I am unable to blur. How can I make it as the below image. I have used the below angular code to make the page blur. I have searched and I have got blurring a page except a form. But in this case it is not a form. I want to blur the page except div content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
</head>
<body>
<div>
<div class="container">
<center>
<h3 class="container">Select a type</h3>
<div>This is to test the page:
<div class = "btn-group pull-center">
<button type = "button" class = "btn dropdown-toggle" data-toggle = "dropdown">Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
</center>
</div><br/><br/>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>This is to test the page</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-primary col-md-6">button 1</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-success col-md-6">button 2</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-warning col-md-6">button 3</div> <br/><br/>
</div>
</div>
</div>
<hr style="margin-right:9cm"></hr>
</div>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>empty space between </p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-danger col-md-6">Button 4</div><br/><br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Create three containers, one for your content that doesn't exist on the form, one for the blur and one for the form content.
<div class="normal-content">
<p>Content that is on your page</div>
<div class="blur"></div>
<div class="form-content">
<p>Content that would exist on the form</p>
</div>
CSS
.blur{
position:absolute;
// We'll grow the blur box to be bigger than 100% so there isn't some weird effects that you can get with blur
width: 104%;
height: 104%;
top: -2%;
left: -2%;
filter: blur(5px);
}
I would like to add external Javascript files, for specific pages in my Phonegap app. The app uses Framework7 for the UI.
Example:
Exercise page 2.1 has JavaScript file exercise2_1.js.
Exercise page 2.9 has JavaScript file exercise2_9.js ect.
I only want to load the JavaScript files, when the user is on that specific page.
The JavaScript files work, when they are included in the header section on the index page. I don't want to load all the exercise JavaScript files. I only want to load the one's being used. Is it possible to do this, without loading all the js files?
In the my-app section, i tried to load the files as an external js file. But could not get it to work. Nothing happens.
Index page
<html>
<title>My App</title>
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/exercise.css" />
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">2</div>
</div></a>
<div class="accordion-item-content">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
Exercise 2</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="views">
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
my_app.js page
var myApp = new Framework7();
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('exercise2_1', function (page) {
})
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name === 'exercise2_1') {
}
});
$$(document).on('pageInit', '.page[data-page="exercise2_1"]', function (e) {
myApp.alert('Test');
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
//document.body.appendChild(js);
document.getElementsByTagName("head")[0].appendChild(js);
}
includeJs("js/exercise2_1.js");
})
Exercise 2.1 page (exercise2_1.html)
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">Exercise 2.1</div>
<div class="right">
<i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="pages">
<div data-page="exercise2_1" class="page">
<form id="Cloze" method="post" action="" onsubmit="return false;">
<div class="ClozeBody">
Use verbs from the Alex-text.<br><br>Example: Alex er våken og TENKER.<br><br>Pappa <span class="GapSpan" id="GapSpan0">
<input type="text" id="Gap0" onfocus="TrackFocus(0)" onblur="LeaveGap()" class="GapBox" size="6"></span> på et kontor. <br>Han <span class="GapSpan" id="GapSpan1"><input type="text" id="Gap1" onfocus="TrackFocus(1)" onblur="LeaveGap()" class="GapBox" size="6">
</span> ingeniør.
</div>
</form>
<button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> Check </button>
<button class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="ShowHint()"> Hint </button>
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FuncButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="HideFeedback(); return false;"> OK </button>
</div>
</div>
</div>
I accomplished this by including JQuery and doing the following:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
if (page.name == 'page1') {
$.getScript("js/page1.js");
} else if (page.name == 'page2') {
$.getScript("js/page2.js");
}
});
I found the problem. It had to do with the onload event on the index page.
I removed the onload event from the index page and put it in the exercise page.
This solved my issue.
<iframe style="display:none" onload="StartUp()" id="TheBody" src="js/exercise2_1.js"></iframe>
Hopes this helps someone else.
This is my JS and HTML. The first line of JS is not working. In Sublime my = should turn red as the other do but this first one does not and I have no idea why. I am a function newbie. Please let me know what you think! Thank you
var main = function() {
$('form').submit(function(event){
var $input = $(event.target).find('input');
var comment = $input.val();
if (comment != ""){
var html = $('<li>').text(comment);
html.prependTo('#comments')
$inputs.val("");
}
return false;
});
}
$(document).ready(main);
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' />
<link rel='stylesheet' href='style.css' />
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<h1>Gossipz</h1>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="row">
<form class="form">
<div class="col-xs-8 col-md-10">
<input id="comment" type="text" placeholder="share your thoughts">
</div>
<div class="col-xs-4 col-md-2">
<button type="submit" class="btn">post</button>
</div>
</form>
</div>
<ul class="comments" id"comments">
<li> No Honey, I don't gossip... I <b>truth</b>!</li>
<li> OMG...She said <big>what</big> girl?!?</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="script.js"></script>
</body>
</html>
I run this code in plunker but could not replicate the problem.Below is an issue which you may look.
1)<ul class="comments" id"comments"> It is typo it should be
If your sublime text is configured with jsLint/jsHint you can hover on the issue to see the error at the bottom.
You can check the working of your code here in this PLUNKER
I'm having trouble on a project I mentioned earlier, now the problem is that I want to drag a div and drop it to another div. If I drag a div then it should be added below the previously dropped div. How can I achieve that? My current code is not appending the next div dropped, it overwrites the first one. I have tried many solutions but all end up doing more damage than good. Can anybody please help me, Thank you.
<html>
<head>
<title>CRM</title>
<link rel="stylesheet" href="style/style.css" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(".dragable").draggable({
cancel:"a.ui-icon",
revert:true,
helper:"clone",
cursor:"move",
revertDuration:0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').html($item);
}
});
});
</script>
</head>
<body>
<div class="main-container">
<div class="wrapper">
<div class="tb-head">
<div class="target">
<span class="target-span">Target</span>
</div>
<div class="user1">
<span class="user1-span">User1</span>
</div>
<div class="user2">
<span class="user2-span">User2</span>
</div>
<div class="user3">
<span class="user3-span">User3</span>
</div>
<div class="user4">
<span class="user4-span">User4</span>
</div>
<div class="clear"></div>
</div>
<div class="tb-body">
<div class="inner-target">
<div class="dragable">
<span class="targetinn-span">Target Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign1 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign2 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign3 Lead</span>
</div>
</div>
<div class="inner-user1">
<div class="droppable">
<span class="user1inn-span"></span>
</div>
</div>
<div class="inner-user2">
<div class="droppable">
<span class="user2inn-span"></span>
</div>
</div>
<div class="inner-user3">
<div class="droppable">
<span class="user3inn-span"></span>
</div>
</div>
<div class="inner-user4">
<div class="droppable">
<span class="user4inn-span"></span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Just change this line of code
$(this).addClass('has-drop').html($item);
to this
$(this).addClass('has-drop').append($item);
By calling .html() you replaced the original html just with last dropped element.