Editor one Click with dropdowns

Developer
Zivcos
Size
4,925 Kb
Views
42,504
  1. Editor one Click with dropdowns Previews
  2. Editor one Click with dropdowns HTML Codes
  3. Editor one Click with dropdowns CSS Codes
  4. Editor one Click with dropdowns JS Codes

How do I make an editor one click with dropdowns?

What is a editor one click with dropdowns? How do you make a editor one click with dropdowns? This script and codes were developed by Zivcos on 08 September 2022, Thursday.

Editor one Click with dropdowns Previews
IQ Test

Editor one Click with dropdowns - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Editor one Click with dropdowns</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<select name="" id="select0">
<option value="0"></option> <option value="1">Test 1</option><option value="2">test 2</option><option value="3">test 3</option>
</select>
<div class="outer"> <span class="readonly">Read only text is not interactive</span> <span class="black">1 Lorem ipsum</span> <span class="red_selected">(ENTER text)</span> <span class="black"> consectetur adipisicing elit. Alias ad voluptate quas non cumque eum sed aperiam earum</span> <span class="select"><span>[Select 1]</span><select id="select1"><option value="0">[Select 1]</option><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select></span> <span class="black">some text comes here</span> <span class="select"><span>[Select 2]</span><select id="ziv2"><option value="0">[Select 2]</option><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option></select></span> <span class="black">repudiandae nostrum qui consectetur ipsam ab. Possimus sint adipisci doloribus sapiente commodi. </span> <span class="readonly"> This is some read only text</span> <span class="red_selected">(ENTER some red text)</span> <span class="black"> Lorem ipsum dolor sit amet</span> <span class="readonly">Read only text alternative look</span> <span class="red_selected">this is a red span </span> <span class="black">some text comes here....</span> <span class="red_selected ">(ENTER Some other text here)</span> <span class="black"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur recusandae deserunt dignissimos ipsam quos debitis tempora officiis. Rerum commodi dolor provident autem accusamus facilis quo ea eius non fugit perferendis.</span> <span class="red_selected">red text</span> <span class="black">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nihil dolore labore quam eos debitis explicabo </span><span class="red_selected">(ENTER Text)</span> <span class="readonly"> Read only alternative look</span> <span class="black">ut laborum quo mollitia sit consequuntur nisi aperiam laudantium veniam minus nesciunt ipsum est</span><span>.</span>
</div>
<!--
<div class="console"> <span class="no">0.</span> Console Initialized
</div>
--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.hammerjs/1.1.2/jquery.hammer-full.js'></script> <script src="js/index.js"></script>
</body>
</html>

Editor one Click with dropdowns - Script Codes CSS Codes

html body{ padding: 10px; margin: 0; font-size:30px; font-family: Arial; font-weight: bold;
}
.clickBlock{ position: fixed; /* background:rgba(255,0,0,.2); */ width: 100%; height: 100%; z-index: 2;
}
.outer span:last{ margin-left:30px;
}
.black{ display: inline;
}
/* Console */
.console{ background: rgba(0,0,0,.8); font-size: 16px; font-family: courier; color:#fff; padding: 20px;
}
.console .no{ min-width:50px; color:#777;
}
/* Additions */
.red_selected.focus{ position:absolute; left:-5000px;
}
.readonly{ color:#999;
}
.red,
.select,
.red_selected{ color:red; display: inline; border-left:3px solid #fff; border-right:3px solid #fff;
}
.red_selected.selected{ background:#ccdded; color:#cc1121; border-left:3px solid #146fe1; border-right:3px solid #146fe1;
}
.red_selected.selected:before,
.red_selected.selected:after{ display:inline; position:absolute; /*content:'•';*/ content:''; width: 11px; height: 11px; border-radius:50px; background: #146fe1; color:#146fe1; font-size:48px;
}
/* New Select */
.select span,
.select{ cursor: pointer; display: inline-block; z-index: 2; position: relative;
}
.select select{ display:inline-block; position: absolute; z-index: 1; left: 0; top: 5px; width: 0;
}
.select.active ul{ display: block;
}
.select ul{ z-index: 6; display: none; list-style:none; padding: 0; margin:8px 0 0; background: #fff; position: absolute; box-shadow:0 0 30px rgba(0,0,0,.6); border-radius:5px;
}
.select ul:before{ content: ""; position: absolute; margin-top: -10px; margin-left:10px; font-size: 0; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid white;
}
.select ul li{ padding: 10px; font-size: 14px; font-weight:normal; color:#444; border-bottom:1px solid #ccc; min-width:120px;
}
.select ul li:hover{ background:#eee;
}
.select ul li:first-child{ border-radius: 5px 5px 0 0;
}
.select ul li:last-child{ border-radius: 0 0 5px 5px; border-bottom:0;
}
/*
.red_selected.selected:before{ margin-top:-34px; margin-left:-11px;
}
.red_selected.selected:after{ margin-top:13px; margin-left:-7px;
}
*/
.red_selected.selected:before{ margin-top:-10px; margin-left:-7px;
}
.red_selected.selected:after{ margin-top:33px; margin-left:-4px;
}
.red_selected.cursor,
.red_selected.selected.cursor{ color:red; background:none; -webkit-animation: blink 0.5s step-end infinite alternate; animation: blink 0.5s step-end infinite alternate; /* border-right:3px solid #4e53d7; border-left:0; */
}
.red_selected.cursor:before,
.red_selected.cursor:after,
.red_selected.selected.cursor:before,
.red_selected.selected.cursor:after{ display:none;
}
@-webkit-keyframes blink { 0% {border-right:3px solid #146fe1; border-left:3px solid #fff;} 50% {border-right:3px solid #fff; border-left:3px solid #fff;}
}
@keyframes blink { 0% {border-right:3px solid #146fe1; border-left:3px solid #fff;} 50% {border-right:3px solid #fff; border-left:3px solid #fff;}
}

Editor one Click with dropdowns - Script Codes JS Codes

$(document).ready(function(){ $.msgCount = 0; $.redFlagNotSelected = true; $.disableRedClick = false; /* $("span").focusin(function(){ var element = $(this).prop('outerHTML'); //trace('Focus in: '+$(this).prop('outerHTML').toString()); traceHtml($(this)); }); */ initEditableDiv(); initPreselect(); initKeyControl(); // keep keyboard up fix var input = $("<input id='keyboardUp' type='text' style='top:-500px; position:absolute; opacity:0;'/>"); $('body').prepend(input); // init value on when loose focus $('#keyboardUp').focusout(function(){ $(this).val(''); $('.cursor').removeClass('cursor'); }); initSelect();
})
function initSelect(){ $('.select').click(function(){ var clickBlocker = $('<div class="clickBlock"></div>'); clickBlocker.click(function(){ $(this).remove(); $('.select.active').removeClass('active').find('ul').remove(); }) $('body').prepend(clickBlocker); var list = $('<ul></ul>'), select = $(this).find('select'); select.find('option').each(function(){ var listItem = $('<li>'+ $(this).text() +'</li>'); listItem.click(function(e){ e.stopPropagation(); $('.clickBlock').remove(); var txt = $(this).text(); var optionSelected = $(this).parent().children().index($(this)); //var optionSelected = $(this).parent(); console.log('selected option '+ optionSelected); $('.select.active').removeClass('active').find('span').text(txt); select.val(optionSelected); }) list.append(listItem); }); $(this).append(list); $(this).addClass('active'); })
}
function initKeyControl(){ $(document).keydown(function(e) { if($.redFlagNotSelected == true){ return; }else{ /* //e.preventDefault(); $.redFlagNotSelected = false; var target = $('.selected'); target.removeClass('selected'); target.attr("contenteditable", "true"); //alert(target.html()); //target.empty().focus(); */ //alert(String.fromCharCode(e.which)); /* // working var target = $('.selected'); target.removeClass('selected'); target.attr("contenteditable", "true"); //target.empty().text(String.fromCharCode(e.which));//.focus(); //var charTyped = String.fromCharCode(e.which); target.text(String.fromCharCode(e.which)).focus(); //target.text("").focus(); setCursorToEnd(target.get(0)); $.redFlagNotSelected = true; //target.addClass('cursor'); //target.html($('#keyboardUp').val()); */ $.redFlagNotSelected = true; $('.red_selected.selected').remove(); $('.focus').removeClass('focus'); $('.red_selected').unbind('click'); initPreselect(); } });
}
function setCursorToEnd(ele){ var range = document.createRange(); var sel = window.getSelection(); range.setStart(ele, 1); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); ele.focus();
}
function initPreselect(){ var options = { //preventDefault: true }; // Long Press Timer /* var timer; $('.red_selected').on("touchstart", function(){ timer = setTimeout(function(){ //alert("Long Press"); $.disableRedClick = true; $('.selected').attr("contenteditable", "true").focus().removeClass('selected'); },1500); }).on("touchend",function(){ $.disableRedClick = false; clearTimeout(timer); }); */ /* $('.red_selected').on('touchend', function(e){ $('.red_selected').removeClass('cursor'); $('#keyboardUp').focus(); $('.red_selected').removeClass('selected'); $(this).addClass('selected'); $.redFlagNotSelected = false; }); */ /* //Working .... $('.red_selected').click(function(){ if($.disableRedClick){ }else{ $('.red_selected').removeClass('cursor'); $('#keyboardUp').focus(); $('.red_selected').removeClass('selected'); $(this).addClass('selected'); $.redFlagNotSelected = false; } }); */ // Mix Selection with editable div $('.red_selected').click(function(){ var isSelected = $(this).hasClass('selected'); //alert(thisClass); var str = $(this).text(); if(str.match("^.ENTER")){ if(isSelected){ // $('#keyboardUp').focus(); $('.focus').focus(); return; }else{ /* $('.red_selected').removeClass('selected').removeAttr("contenteditable"); $('#keyboardUp').focus(); $(this).addClass('selected'); $.redFlagNotSelected = false; */ $.redFlagNotSelected = false; $('.focus').remove(); $('.selected').removeClass('selected'); $(this).addClass('selected'); $( "<span autocapitalize='none' class='red_selected focus' contenteditable='true'></span>" ).insertBefore( ".red_selected.selected" ); $('.focus').focus(); } }else{ $('.red_selected').removeClass('selected'); $(this).attr("contenteditable","true").focus(); } }); /* var hammertime = new Hammer($('.red_selected'), options); hammertime.on("tap", function(ev){ //alert('hammertime'); $('.red_selected').removeClass('cursor'); $('#keyboardUp').focus(); $('.red_selected').removeClass('selected'); $(this).addClass('selected'); $.redFlagNotSelected = false; }); */ /* $('.red_selected').on("tap", function(event){ //event.preventDefault(); $('.red_selected').removeClass('cursor'); $('#keyboardUp').focus(); $('.red_selected').removeClass('selected'); $(this).addClass('selected'); $.redFlagNotSelected = false; }); */ /* $('.red_selected').on('doubletap', function(event){ event.preventDefault(); $('body').css('background','green'); })*/
}
function initEditableDiv(){ $(".black").attr("contenteditable", "true"); $(".black").focusin(function(){ $('.red_selected').removeClass('selected').removeClass('cursor'); $.redFlagNotSelected = true; }); //$(".red_selected").attr("contenteditable", "true"); //$(".red").attr("contenteditable", "true");
}
Editor one Click with dropdowns - Script Codes
Editor one Click with dropdowns - Script Codes
Home Page Home
Developer Zivcos
Username zivcos
Uploaded September 08, 2022
Rating 3
Size 4,925 Kb
Views 42,504
Do you need developer help for Editor one Click with dropdowns?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zivcos (zivcos) Script Codes
Name
Editor
HTML5 Video Autoplay
A Pen by zivcos
Random Background Generator
Editor one Click alternative
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!