spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

How to make the contents of multiple div class elements editable


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);
            });
        }
}

Categories : Javascript

Related to : How to make the contents of multiple div class elements editable
Detect multiple group elements contain same class by using hasClass
Just use the class name in the selector, then check it's length. Ex: if ( $('.div1.active').length > 0 && $('.div2.active').length > 0 ) { // do stuff }

Categories : Jquery
Get contents of all divs with same class name, change CSS based on their value
Use each in jquery $(".gains").each(function() { var gain_loss = parseInt($(this).text()); console.log("gains_loss = " + gain_loss); if (gain_loss < 0){ // make red }else if (gain_loss == 0){ // make grey }else if (gain_loss > 0){ // make green } });

Categories : Jquery
How can I animate/slide a div into view while moving the contents as opposed to just revealing the contents?
If you want to use jQuery animate check this fiddle: http://jsfiddle.net/cgLy77us/1/ Script: $(document).ready(function(){ var SlideUpAnimate = function(duration, callback){ var $element = $("#slideUp"); var startPosition = $(window).scrollTop() + $(window).height() + $element.height(); var finishPosition = $element.position().top; $element.css("top", startPosition + "px").show(

Categories : Javascript
jquery add a class and cycle it on the elements
Made a FIDDLE with your problem and my solution :) Added following: var pointer = 1; fixed (a dot was missing): var $prev=$('.prev'); var $next=$('.next'); Updated this: li.eq(pointer).addClass('active'); li.eq(pointer+1).addClass('active'); And updated your prev/next: $next.on('click', function(){ if(li.hasClass('active')){ li.removeClass('active'); } pointer++; li.eq(po

Categories : Javascript
Add elements after first and last ul in multiple divs
This was kind of an interesting problem... but I believe this does what you want. JSFiddle $(".parent-div").each(function () { var $div1 = $(this).find(".col-xs-6"); var $div2 = $("<div class='col-xs-6'></div>"); var $lastUl = $div1.children("ul").last(); var $section = $div1.children("ul").first().nextUntil($lastUl); var $after = $lastUl.nextAll(); $div2.appe

Categories : Javascript
Recently Add
Disable Satellizer Popup Window Title Bar
Can't load css, js and image with htaccess
Angular Directive to modify embed
IE9 HTML5 video "play" event not fired on second play
AngularJS filter by select with empty options
Correct way to create custom errors in javascript
HTML elements only show after i reload page?
javascript variable returning null
How to use class names?
Custom scroll function - flickering effect
How to compare time with AM PM in JavaScript
Ionic / How to expect a cached view to be refreshed?
How can I pass the current element to a Javascript function in a Knockout.js binding?
Using custom C++ code for a HTML5 project
bootstrap accordion dropdown behind footer
JQuery show /hide div from drop down list change
Move background-position x px to left/right according to mouse movements (starting from background-position:center)
Create and Insert an Input on "Enter"
Cordova Local Notification playing local sound for iOS and Android
Exclude route from express middleware
Loop over random JSON entries using jQuery
Applying form validation of select menu similar to html5 required attribute of
Syntax error, unrecognized expression: [object HTMLDivElement]input:checkbox[name=]:checked
Page keeps loading even after response is fetched
Is There a way to use Document.getTime() From a Certain Time?
How to change x axis format from d3.js line charts
Google Chart: is it possible to use Strings for the x axis?
'angular' is not defined (scripts not linking together)
extract the value of an array in an existing javascript file
Allow only alphanumeric, dash, underscore, and period in string (Javascript)
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.