I have three dynamically created divs on a page. when the user click on a div, an 'edit text' button appears.
When the user clicks the edit text button, I want a nicedit format bar to appear over the div so the user can edit the text.
I have created most of the code below but am having an issue with removing the format bar from one box when editing another box. Also once a box has been edited it cannot be edited again.
Where am I going wrong?
I have created a jsfiddle so you can see what my problem is - http://jsfiddle.net/j6FLa/7/
and here is the code
<style>
.dragbox {
position:absolute;
width:10px;
height:25px;
padding: 0.0em;
margin:25px;
z-index:2
}
.textarea1 {
width: 300px;
height:75px;
padding: 0.5em;
z-index:3;
resize:none;
}
#content {
display: block;
position:absolute;
top:150px;
left:0px;
margin:auto;
z-index:1;
}
.editbutton {
background-color:#CCC;
width:50px;
height:20px;
font-size:10px;
z-index:1003;
}
#myNicPanel {
visibility:hidden;
}
</style>
<script>
var startleft = -100;
var myNicEditor;
for (var m = 1; m < 4; m++) {
startleft = +startleft + 200;
OldTextArea(m, 'draggable', 50, startleft, '150', '150', 'new textbox', m, '5', 'solid', '#ff0000', '5');
}
function OldTextArea(i, id, top, left, width, height, content, zindex, borderwidth, borderstyle, bordercolor, padding) {
id = id + i;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
newdiv.setAttribute('class', 'dragbox');
newdiv.setAttribute('iterate', i);
newdiv.style.position = "absolute";
newdiv.style.top = top + "px";
newdiv.style.left = left + "px";
newdiv.innerHTML = "<br><div id='div" + i + "' name='textarea[" + i + "]' class='textarea1' style='padding:" + padding + "px; border-width:" + borderwidth + "px; border-style:" + borderstyle + "; border-color:" + bordercolor + "; width:" + width + "px; height:" + height + "px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;'><span id='span" + i + "'>" + content + "</span></div></div>";
document.getElementById("frmMain").appendChild(newdiv);
var top_button_left_pos = -75;
var area1 = "";
var edit = document.createElement('input');
edit.setAttribute('type', 'button');
edit.setAttribute('value', 'edit this text');
edit.setAttribute('class', 'editbutton');
edit.style.position = "absolute";
edit.style.top = "30px";
edit.style.width = "75px";
edit.style.left = +top_button_left_pos + "px";
edit.style.float = "left";
edit.style.visibility = "hidden";
edit.onclick = function(e) {
if (area1 == "") {
myNicEditor = new nicEditor({
buttonList: ['fontSize', 'fontFamily', 'fontFormat', 'bold', 'italic', 'underline', 'left', 'centre', 'right', 'justify', 'ol', 'ul', 'removeformat', 'indent', 'outdent', 'hr', 'forecolor', 'bgcolor', 'link', 'unlink']
});
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('div' + i);
var contentclick = document.getElementById('span' + i);
contentclick.style.cursor = "select";
contentclick.onmousedown = function(event) {
event.stopPropagation();
e.cancelBubble = true;
};
document.getElementById('myNicPanel').style.position = 'relative';
document.getElementById('myNicPanel').style.top = +top + "px";
document.getElementById('myNicPanel').style.left = +left + "px";
document.getElementById('myNicPanel').style.visibility = 'visible';
area1 = '1';
} else {
area1 = "";
document.getElementById('myNicPanel').style.visibility = 'hidden';
myNicEditor.removeInstance('div' + i);
}
};
newbr = document.createElement('BR');
document.getElementById(id).appendChild(newbr);
document.getElementById(id).appendChild(edit);
$('.dragbox').click(function() {
$(".editbutton").css('visibility', 'hidden');
$(this).find(".editbutton").css('visibility', 'visible');
});
$('.dragbox').focusout(function() {
$(".editbutton").css('visibility', 'hidden');
$('#frmMain').find('#myNicPanel').style.visibility = 'hidden';
});
}
</script>
<div id="myNicPanel" style="width: 600px;"></div>
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div19.php" method="post">
<div id="content"></div>
</form>
EDIT
I have managed to get the edit bars to dissapear and reappear when clicking from box to box, but once edited I cannot get the bar to reappear ove that box - http://jsfiddle.net/j6FLa/8/
I managed to get it working by removing the focusout function.
Related
I have a script that displays smiles in a textarea.
I would like to know how to adapt it to work with a contenteditable instead of a textarea.
To see the full script : https://pastebin.com/HavdikMj
thank you so much
// EMOJI CLICK EVENT
$( document ).off( "click", "." + emojiContainer + " section .emojione" );
$( document ).on( "click", "." + emojiContainer + " section .emojione",
function()
{
var caretPos = activeEl.selectionStart;
var textAreaTxt = $( activeEl ).val();
var txtToAdd;
if( settings.type=="shortcode" )
{
txtToAdd = $( this ).attr( "title" ) + " ";
}else{
txtToAdd = $( this ).attr( "alt" ) + " ";
}
$( activeEl ).val( textAreaTxt.substring( 0, caretPos ) + txtToAdd + textAreaTxt.substring( caretPos ) );
$( activeEl ).focus();
activeEl.selectionStart = caretPos + txtToAdd.length;
activeEl.selectionEnd = caretPos + txtToAdd.length;
}
);
};
The problem is that the emojione textarea picker relies on the selectionStart and selectionEnd properties of the textarea element. Both aren't available for a div. Furthermore the picker gets & sets the text inside the textarea using element.val() which also doesn't work with divs.
There's hope though it isn't too easy.
We need to enhance the HTMLDivElement with selectionStart and selectionEnd properties
HTMLDivElement.prototype.selectionStart = 0;
HTMLDivElement.prototype.selectionEnd = 0;
Get the values for those properties using the Selection API
function update(e) {
var caret = window.getSelection().anchorOffset;
e.target.selectionStart = caret;
e.target.selectionEnd = caret + window.getSelection().focusOffset;
}
Apply the values as soon as the user either clicks or moves the keys inside a div
['mousedown', 'mouseup', 'keydown', 'keyup'].forEach(function(evt) {
document.getElementById("theDiv").addEventListener(evt, update);
});
Finally rewrite the on click function you've posted to make it aware of divs and if it's a div set & get the text using element.firstChild.data instead of element.val()
$(document).on("click", "." + emojiContainer + " section .emojione",
function() {
var textAreaTxt;
var caretPos = activeEl.selectionStart;
if (activeEl.constructor.name == "HTMLDivElement") {
textAreaTxt = activeEl.firstChild.data;
} else {
textAreaTxt = $(activeEl).val();
}
var txtToAdd;
if (settings.type == "shortcode") {
txtToAdd = $(this).attr("title") + " ";
} else {
txtToAdd = $(this).attr("alt") + " ";
}
if (activeEl.constructor.name == "HTMLDivElement") {
activeEl.firstChild.data = textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos);
} else {
$(activeEl).val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
}
$(activeEl).focus();
activeEl.selectionStart = caretPos + txtToAdd.length;
activeEl.selectionEnd = caretPos + txtToAdd.length;
}
);
Here's a working example. Please note I had to remove a lot of the emojis because of a 30000 chars per post limit. This doesn't affect the functionality though.
(function($) {
$.fn.emojionePicker = function(options) {
var emojiContainer = "emojionepicker",
activeEl;
// DEFAULT SETTINGS
var settings = $.extend({
pickerTop: 5, // Picker top margin
pickerRight: 5, // Picker right margin
type: "shortcode", // What to send to textarea, valid values are "shortcode" and "unicode"
}, options);
var $el = this;
// EMOJI LIST
var emojiList = {
people: {
header: ":smiley:",
content: ":grinning: :grin: :joy: :rofl: :smiley: :smile: :sweat_smile: :laughing: :wink: :blush: :yum: :sunglasses: :heart_eyes: :kissing_heart: :kissing: :kissing_smiling_eyes: :kissing_closed_eyes: :relaxed: :slight_smile: :hugging: :thinking: :neutral_face: :expressionless: :no_mouth: :rolling_eyes: :smirk: :persevere: :disappointed_relieved: :open_mouth: :zipper_mouth: :hushed: :sleepy: :tired_face: :sleeping: :relieved: :nerd: :stuck_out_tongue: :stuck_out_tongue_winking_eye: :stuck_out_tongue_closed_eyes: :drooling_face: :unamused: :sweat: :pensive: :confused: :upside_down: :money_mouth: :astonished: :frowning2: :slight_frown: :confounded: :disappointed: :worried: :triumph: :cry: :sob: :frowning: :anguished: :fearful: :weary: :grimacing: :cold_sweat: :scream: :flushed: :dizzy_face: :rage: :angry: :innocent: :cowboy: :clown: :lying_face: :mask: :thermometer_face: :head_bandage: :nauseated_face: :sneezing_face: :smiling_imp: :imp: :japanese_ogre: :japanese_goblin: :skull: :ghost: :alien: :robot: :poop: :smiley_cat: :smile_cat: :joy_cat: :heart_eyes_cat: :smirk_cat: :kissing_cat: :scream_cat: :crying_cat_face: :pouting_cat: :boy: :boy_tone1: :boy_tone2: :boy_tone3: :boy_tone4: :boy_tone5: :girl: :girl_tone1: :girl_tone2: :girl_tone3: :girl_tone4: :girl_tone5: :man: :man_tone1: :man_tone2: :man_tone3: :man_tone4: :man_tone5: :woman: :woman_tone1: :woman_tone2: :woman_tone3: :woman_tone4: :woman_tone5: :older_man: :older_man_tone1: :older_man_tone2: :older_man_tone3: :older_man_tone4: :older_man_tone5: :older_woman: :older_woman_tone1: :older_woman_tone2: :older_woman_tone3: :older_woman_tone4: :older_woman_tone5: :baby: :baby_tone1: :baby_tone2: :baby_tone3: :baby_tone4: :baby_tone5: :angel: :angel_tone1: :angel_tone2: :angel_tone3: :angel_tone4: :angel_tone5: :cop: :cop_tone1: :cop_tone2: :cop_tone3: :cop_tone4: :cop_tone5: :spy: :spy_tone1: :spy_tone2: :spy_tone3: :spy_tone4: :spy_tone5: :guardsman: :guardsman_tone1: :guardsman_tone2: :guardsman_tone3: :guardsman_tone4: :guardsman_tone5: :construction_worker: :construction_worker_tone1: :construction_worker_tone2: :construction_worker_tone3: :construction_worker_tone4: :construction_worker_tone5: :man_with_turban: :man_with_turban_tone1: :man_with_turban_tone2: :man_with_turban_tone3: :man_with_turban_tone4: :man_with_turban_tone5: :person_with_blond_hair: :person_with_blond_hair_tone1: :person_with_blond_hair_tone2: :person_with_blond_hair_tone3: :person_with_blond_hair_tone4: :person_with_blond_hair_tone5: :santa: :santa_tone1: :santa_tone2: :santa_tone3: :santa_tone4: :santa_tone5: :mrs_claus: :mrs_claus_tone1: :mrs_claus_tone2: :mrs_claus_tone3: :mrs_claus_tone4: :mrs_claus_tone5: :princess: :princess_tone1: :princess_tone2: :princess_tone3: :princess_tone4: :princess_tone5: :prince: :prince_tone1: :prince_tone2: :prince_tone3: :prince_tone4: :prince_tone5: :bride_with_veil: :bride_with_veil_tone1: :bride_with_veil_tone2: :bride_with_veil_tone3: :bride_with_veil_tone4: :bride_with_veil_tone5: :man_in_tuxedo: :man_in_tuxedo_tone1: :man_in_tuxedo_tone2: :man_in_tuxedo_tone3: :man_in_tuxedo_tone4: :raised_hands_tone1: :raised_hands_tone2: :raised_hands_tone3: :raised_hands_tone4: :raised_hands_tone5: :pray: :pray_tone1: :pray_tone2: :pray_tone3: :pray_tone4: :pray_tone5: :handshake: :handshake_tone1: :handshake_tone2: :handshake_tone3: :handshake_tone4: :handshake_tone5: :nail_care: :nail_care_tone1: :nail_care_tone2: :nail_care_tone3: :nail_care_tone4: :nail_care_tone5: :ear: :ear_tone1: :ear_tone2: :ear_tone3: :ear_tone4: :ear_tone5: :nose: :nose_tone1: :nose_tone2: :nose_tone3: :nose_tone4: :nose_tone5: :footprints: :eyes: :eye: :tongue: :lips: :kiss: :zzz: :eyeglasses: :dark_sunglasses: :necktie: :shirt: :jeans: :dress: :kimono: :bikini: :womans_clothes: :purse: :handbag: :pouch: :school_satchel: :mans_shoe: :athletic_shoe: :high_heel: :sandal: :boot: :crown: :womans_hat: :tophat: :mortar_board: :helmet_with_cross: :lipstick: :ring: :closed_umbrella: :briefcase:".split(" ")
},
nature: {
header: ":four_leaf_clover:",
content: ":see_no_evil: :hear_no_evil: :speak_no_evil: :sweat_drops: :dash: :monkey_face: :monkey: :gorilla: :dog: :dog2: :poodle: :wolf: :fox: :cat: :cat2: :lion_face: :tiger: :tiger2: :leopard: :horse: :racehorse: :deer: :unicorn: :cow: :ox: :water_buffalo: :cow2: :pig: :pig2: :boar: :pig_nose: :ram: :sheep: :goat: :dromedary_camel: :camel: :elephant: :rhino: :mouse: :mouse2: :rat: :hamster: :rabbit: :rabbit2: :chipmunk: :bat: :bear: :koala: :panda_face: :feet: :turkey: :chicken: :rooster: :hatching_chick: :baby_chick: :hatched_chick: :bird: :penguin: :dove: :eagle: :duck: :owl: :frog: :crocodile: :turtle: :lizard: :snake: :dragon_face: :dragon: :whale: :whale2: :dolphin: :fish: :tropical_fish: :blowfish: :shark: :octopus: :shell: :crab: :shrimp: :squid: :butterfly: :snail: :bug: :ant: :bee: :beetle: :spider: :spider_web: :scorpion: :bouquet: :cherry_blossom: :rosette: :rose: :wilted_rose: :hibiscus: :sunflower: :blossom: :tulip: :seedling: :evergreen_tree: :deciduous_tree: :palm_tree: :cactus: :ear_of_rice: :herb: :shamrock: :four_leaf_clover: :maple_leaf: :fallen_leaf: :leaves: :mushroom: :chestnut: :earth_africa: :earth_americas: :earth_asia: :new_moon: :waxing_crescent_moon: :first_quarter_moon: :waxing_gibbous_moon: :full_moon: :waning_gibbous_moon: :last_quarter_moon: :waning_crescent_moon: :crescent_moon: :new_moon_with_face: :first_quarter_moon_with_face: :last_quarter_moon_with_face: :sunny: :full_moon_with_face: :sun_with_face: :star: :star2: :cloud: :partly_sunny: :thunder_cloud_rain: :white_sun_small_cloud: :white_sun_cloud: :white_sun_rain_cloud: :cloud_rain: :cloud_snow: :cloud_lightning: :cloud_tornado: :fog: :wind_blowing_face: :umbrella2: :umbrella: :zap: :snowflake: :snowman2: :snowman: :comet: :fire: :droplet: :ocean: :jack_o_lantern: :christmas_tree: :sparkles: :tanabata_tree: :bamboo:".split(" ")
},
food: {
header: ":hamburger:",
content: ":grapes: :melon: :watermelon: :tangerine: :lemon: :banana: :pineapple: :apple: :green_apple: :pear: :peach: :cherries: :strawberry: :kiwi: :tomato: :avocado: :eggplant: :potato: :carrot: :corn: :hot_pepper: :cucumber: :peanuts: :bread: :croissant: :french_bread: :pancakes: :cheese: :meat_on_bone: :poultry_leg: :bacon: :hamburger: :fries: :pizza: :hotdog: :taco: :burrito: :stuffed_flatbread: :egg: :cooking: :shallow_pan_of_food: :stew: :salad: :popcorn: :bento: :rice_cracker: :rice_ball: :rice: :curry: :ramen: :spaghetti: :sweet_potato: :oden: :sushi: :fried_shrimp: :fish_cake: :dango: :icecream: :shaved_ice: :ice_cream: :doughnut: :cookie: :birthday: :cake: :chocolate_bar: :candy: :lollipop: :custard: :honey_pot: :baby_bottle: :milk: :coffee: :tea: :sake: :champagne: :wine_glass: :cocktail: :tropical_drink: :beer: :beers: :champagne_glass: :tumbler_glass: :fork_knife_plate: :fork_and_knife: :spoon:".split(" ")
},
objects: {
header: ":bulb:",
content: ":skull_crossbones: :love_letter: :bomb: :hole: :shopping_bags: :prayer_beads: :gem: :knife: :amphora: :map: :barber: :frame_photo: :bellhop: :door: :sleeping_accommodation: :bed: :couch: :toilet: :shower: :bathtub: :hourglass: :hourglass_flowing_sand: :watch: :alarm_clock: :stopwatch: :timer: :clock: :thermometer: :beach_umbrella: :balloon: :tada: :confetti_ball: :dolls: :flags: :wind_chime: :ribbon: :gift: :joystick: :postal_horn: :microphone2: :level_slider: :control_knobs: :radio: :iphone: :calling: :telephone: :telephone_receiver: :pager: :fax: :battery: :electric_plug: :computer: :desktop: :printer: :keyboard: :mouse_three_button: :trackball: :minidisc: :floppy_disk: :cd: :dvd: :movie_camera: :film_frames: :projector: :tv: :camera: :camera_with_flash: :video_camera: :vhs: :mag: :mag_right: :microscope: :telescope: :satellite: :candle: :bulb: :flashlight: :izakaya_lantern: :notebook_with_decorative_cover: :closed_book: :book: :green_book: :blue_book: :orange_book: :books: :notebook: :ledger: :page_with_curl: :scroll: :page_facing_up: :newspaper: :shopping_cart: :triangular_flag_on_post: :crossed_flags: :flag_black: :flag_white: :rainbow_flag:".split(" ")
},
activity: {
header: ":football:",
content: ":space_invader: :levitate: :fencer: :trumpet: :violin: :drum: :clapper: :bow_and_arrow:".split(" ")
},
travel: {
header: ":red_car:",
content: ":race_car: :motorcycle: :japan: :mountain_snow: :mountain: :volcano: :mount_fuji: :camping: :beach: :desert: :island: :park: :stadium: :classical_building: :construction_site: :homes: :cityscape: :house_abandoned: :house: :house_with_garden: :office: :post_office: :european_post_office: :hospital: :bank: :hotel: :love_hotel: :convenience_store: :school: :department_store: :factory: :japanese_castle: :european_castle: :wedding: :tokyo_tower: :statue_of_liberty: :church: :mosque: :synagogue: :shinto_shrine: :kaaba: :fountain: :tent: :foggy: :night_with_stars: :sunrise_over_mountains: :sunrise: :city_dusk: :city_sunset: :bridge_at_night: :milky_way: :carousel_horse: :ferris_wheel: :roller_coaster: :steam_locomotive: :railway_car: :bullettrain_side: :bullettrain_front: :train2: :metro: :light_rail: :station: :tram: :monorail: :mountain_railway: :train: :bus: :oncoming_bus: :trolleybus: :minibus: :ambulance: :fire_engine: :police_car: :oncoming_police_car: :taxi: :oncoming_taxi: :red_car: :oncoming_automobile: :blue_car: :truck: :articulated_lorry: :tractor: :bike: :scooter: :motor_scooter: :busstop: :motorway: :railway_track: :fuelpump: :rotating_light: :traffic_light: :vertical_traffic_light: :construction: :anchor: :sailboat: :canoe: :speedboat: :cruise_ship: :ferry: :motorboat: :ship: :airplane: :airplane_small: :airplane_departure: :airplane_arriving: :seat: :helicopter: :suspension_railway: :mountain_cableway: :aerial_tramway: :rocket: :satellite_orbital: :stars: :rainbow: :fireworks: :sparkler: :rice_scene: :checkered_flag:".split(" ")
},
symbols: {
header: ":hash:",
content: ":100: :1234: :eye_in_speech_bubble: :cupid: :heart: :heartbeat: :broken_heart: :two_hearts: :sparkling_heart: :heartpulse: :blue_heart: :green_heart: :yellow_heart: :purple_heart: :black_heart: :gift_heart: :revolving_hearts: :heart_decoration: :heart_exclamation: :anger: :boom: :dizzy: :speech_balloon: :speech_left: :anger_right: :thought_balloon: :white_flower: :globe_with_meridians: :hotsprings: :octagonal_sign: :clock12: :clock1230: :clock1: :clock130: :clock2: :clock230: :clock3: :clock330: :clock4: :clock430: :clock5: :clock530: :clock6: :clock630: :clock7: :clock730: :clock8: :clock830: :clock9: :clock930: :clock10: :clock1030: :clock11: :clock1130: :cyclone: :spades: :hearts: :diamonds: :clubs: :black_joker: :mahjong: :flower_playing_cards: :mute: :speaker: :sound: :loud_sound: :loudspeaker: :mega: :bell: :no_bell: :musical_note: :notes: :chart: :currency_exchange: :heavy_dollar_sign: :atm: :put_litter_in_its_place: :potable_water: :wheelchair: :mens: :womens: :restroom: :baby_symbol: :wc: :passport_control: :customs: :baggage_claim: :regional_indicator_c: :regional_indicator_b: :regional_indicator_a:".split(" ")
},
flags: {
header: ":flag_black:",
content: ":flag_ac: :flag_ad: :flag_ae: :flag_af: :flag_ag: :flag_ai: :flag_al: :flag_am: :flag_ao: :flag_aq: :flag_ar: :flag_as: :flag_at: :flag_au: :flag_aw: :flag_ax: :flag_az: :flag_ba: :flag_bb: :flag_bd: :flag_be: :flag_bf: :flag_bg: :flag_bh: :flag_bi: :flag_bj: :flag_bl: :flag_bm: :flag_bn: :flag_bo: :flag_bq: :flag_br: :flag_bs: :flag_bt: :flag_bv: :flag_bw: :flag_by: :flag_bz: :flag_ca: :flag_cc: :flag_cd: :flag_cf: :flag_cg: :flag_ch: :flag_ci: :flag_ck: :flag_cl: :flag_cm: :flag_cn: :flag_co: :flag_cp: :flag_cr: :flag_cu: :flag_cv: :flag_cw: :flag_cx: :flag_cy: :flag_cz: :flag_de: :flag_dg: :flag_dj: :flag_dk: :flag_dm: :flag_do: :flag_dz: :flag_ea: :flag_ec: :flag_ee: :flag_eg: :flag_eh: :flag_er: :flag_es: :flag_et: :flag_eu: :flag_fi: :flag_fj: :flag_fk: :flag_fm: :flag_fo: :flag_fr: :flag_ga: :flag_gb: :flag_gd: :flag_ge: :flag_gf: :flag_gg: :flag_gh: :flag_gi: :flag_gl: :flag_gm: :flag_gn: :flag_gp: :flag_gq: :flag_gr: :flag_gs: :flag_gt: :flag_gu: :flag_gw: :flag_gy: :flag_hk: :flag_hm: :flag_hn: :flag_hr: :flag_ht: :flag_hu: :flag_ic: :flag_id: :flag_ie: :flag_il: :flag_im: :flag_in: :flag_io: :flag_iq: :flag_ir: :flag_is: :flag_it: :flag_je: :flag_jm: :flag_jo: :flag_jp: :flag_ke: :flag_kg: :flag_kh: :flag_ki: :flag_km: :flag_kn: :flag_kp: :flag_kr: :flag_kw: :flag_ky: :flag_kz: :flag_la: :flag_lb: :flag_lc: :flag_li: :flag_lk: :flag_lr: :flag_ls: :flag_lt: :flag_lu: :flag_lv: :flag_ly: :flag_ma: :flag_mc: :flag_md: :flag_me: :flag_mf: :flag_mg: :flag_mh: :flag_mk: :flag_ml: :flag_mm: :flag_mn: :flag_mo: :flag_mp: :flag_mq: :flag_mr: :flag_ms: :flag_mt: :flag_mu: :flag_mv: :flag_mw: :flag_mx: :flag_my: :flag_mz: :flag_na: :flag_nc: :flag_ne: :flag_nf: :flag_ng: :flag_ni: :flag_nl: :flag_no: :flag_np: :flag_nr: :flag_nu: :flag_nz: :flag_om: :flag_pa: :flag_pe: :flag_pf: :flag_pg: :flag_ph: :flag_pk: :flag_pl: :flag_pm: :flag_pn: :flag_pr: :flag_ps: :flag_pt: :flag_pw: :flag_py: :flag_qa: :flag_re: :flag_ro: :flag_rs: :flag_ru: :flag_rw: :flag_sa: :flag_sb: :flag_sc: :flag_sd: :flag_se: :flag_sg: :flag_sh: :flag_si: :flag_sj: :flag_sk: :flag_sl: :flag_sm: :flag_sn: :flag_so: :flag_sr: :flag_ss: :flag_st: :flag_sv: :flag_sx: :flag_sy: :flag_sz: :flag_ta: :flag_tc: :flag_td: :flag_tf: :flag_tg: :flag_th: :flag_tj: :flag_tk: :flag_tl: :flag_tm: :flag_tn: :flag_to: :flag_tr: :flag_tt: :flag_tv: :flag_tw: :flag_tz: :flag_ua: :flag_ug: :flag_um: :flag_us: :flag_uy: :flag_uz: :flag_va: :flag_vc: :flag_ve: :flag_vg: :flag_vi: :flag_vn: :flag_vu: :flag_wf: :flag_ws: :flag_xk: :flag_ye: :flag_yt: :flag_za: :flag_zm: :flag_zw:".split(" ")
}
};
// CREATE EMOJI CONTAINER AND LOAD SECTION HEADER
var createContainer = function(el) {
$('<div class="' + emojiContainer + '"><nav></nav></div>').insertAfter(el);
var navItems = '';
$.each(emojiList,
function(k, v) {
var emoji = emojione.shortnameToImage(v["header"]);
navItems += '<div class="tab' + (navItems == "" ? ' active' : '') + '" data-tab="' + k + '" onclick="">' + emoji + '</div>';
}
);
$("." + emojiContainer + " nav").append(navItems);
$("." + emojiContainer + " nav .tab").click(
function() {
loadEmojies($(this).attr("data-tab"));
}
);
// EMOJI CLICK EVENT
$(document).off("click", "." + emojiContainer + " section .emojione");
$(document).on("click", "." + emojiContainer + " section .emojione",
function() {
var textAreaTxt;
var caretPos = activeEl.selectionStart;
if (activeEl.constructor.name == "HTMLDivElement") {
textAreaTxt = activeEl.firstChild.data;
} else {
textAreaTxt = $(activeEl).val();
}
var txtToAdd;
if (settings.type == "shortcode") {
txtToAdd = $(this).attr("title") + " ";
} else {
txtToAdd = $(this).attr("alt") + " ";
}
if (activeEl.constructor.name == "HTMLDivElement") {
activeEl.firstChild.data = textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos);
} else {
$(activeEl).val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));
}
$(activeEl).focus();
activeEl.selectionStart = caretPos + txtToAdd.length;
activeEl.selectionEnd = caretPos + txtToAdd.length;
}
);
};
// GENERATE / CHANGE EMOJI SECTION
var loadEmojies = function(section) {
if ($("." + emojiContainer + " section." + section).length > 0) {
if ($("." + emojiContainer + " .tab[data-tab='" + section + "']").hasClass("active")) {
return;
}
$("." + emojiContainer + " section").fadeOut().promise().done(
function() {
$(this).hide();
$("." + emojiContainer + " section." + section).fadeIn();
$("." + emojiContainer + " .tab").removeClass("active");
$("." + emojiContainer + " .tab[data-tab='" + section + "']").addClass("active");
}
);
return;
}
if (typeof(emojiList[section]) == "undefined") {
return;
}
var sectionHtml = '';
$.each(emojiList[section].content,
function(k, v) {
sectionHtml += emojione.shortnameToImage(v);
}
);
$('<section class="' + section + '">' + sectionHtml + '</section>').insertAfter("." + emojiContainer + " nav");
$("." + emojiContainer + " section").fadeOut().promise().done(
function() {
$("." + emojiContainer + " section." + section).fadeIn();
$("." + emojiContainer + " .tab").removeClass("active");
$("." + emojiContainer + " .tab[data-tab='" + section + "']").addClass("active");
}
);
};
// LOAD EMOJIONE
var init = (function() {
var script = document.createElement("script"),
head = document.querySelector("head"),
style = document.createElement('link');
script.src = 'https://cdn.jsdelivr.net/emojione/2.2.7/lib/js/emojione.min.js';
style.type = "text/css";
style.href = "https://cdn.jsdelivr.net/emojione/2.2.7/assets/css/emojione.min.css";
head.appendChild(style);
head.appendChild(script);
script.onload = function() {
createContainer($el[0]);
$.each($el, function(i, el) {
var picker = $('<div class="emojionepicker-picker" data-index="' + i + '"></div>').insertAfter(el);
// SET ACTIVE TEXTAREA
picker.bind("click", function() {
activeEl = el;
});
var elOffset = $(el).offset();
picker.css({
"top": elOffset["top"] + settings.pickerTop + "px",
"left": $(el).width() + elOffset["left"] - $(".emojionepicker-picker").width() - settings.pickerRight + "px",
}).show();
});
// EMOJI PICKER CLICK EVENT
$(".emojionepicker-picker").click(
function() {
if ($("." + emojiContainer).is(":visible")) {
$("." + emojiContainer).fadeOut();
return;
}
// LOAD SECTION EMOJIES
loadEmojies($("." + emojiContainer + " nav div.active").attr("data-tab"));
var containerH = $("." + emojiContainer).height();
var containerW = $("." + emojiContainer).width();
var pickerOffset = $(this).offset();
var top, left;
if (pickerOffset["top"] > (containerH - 15)) {
top = pickerOffset["top"] - containerH - 15;
} else {
top = pickerOffset["top"] + $(this).height() + 15;
}
if (pickerOffset["left"] > containerW) {
left = pickerOffset["left"] - containerW + $(this).width();
} else {
left = pickerOffset["left"];
}
$("." + emojiContainer).css({
"top": top + "px",
"left": left + "px",
}).fadeIn();
}
);
// HIDE EMOJI CONTAINER ON CLICK ANYWHERE OUTSIDE THE ELEMENT
$(document).on("click",
function(e) {
if ($("." + emojiContainer).is(":visible") == false || $(e.target).is(".emojionepicker-picker, .emojione")) {
return;
}
$("." + emojiContainer).fadeOut();
}
);
}
})();
return this;
};
}(jQuery));
HTMLDivElement.prototype.selectionStart = 0;
HTMLDivElement.prototype.selectionEnd = 0;
function update(e) {
var caret = window.getSelection().anchorOffset;
e.target.selectionStart = caret;
e.target.selectionEnd = caret + window.getSelection().focusOffset;
}
['mousedown', 'mouseup', 'keydown', 'keyup'].forEach(function(evt) {
document.getElementById("theDiv").addEventListener(evt, update);
});
$("#theDiv").emojionePicker();
#theDiv {
margin-top: 2em;
height: 75px;
width: 90%;
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.jqueryscript.net/demo/jQuery-EmojiOne-Based-Emoji-Picker-For-Textarea/dist/emojione.picker.css" rel="stylesheet" type="text/css">
<div id="theDiv" contentEditable="true">
A contentEditable div
</div>
I have a ribbon button to execute custom workflow. this action a setup from JavaScript and it worked perfectly. In this case I wanna show progress loading when after click or during custom workflow execution.
I just followed the tutorial HERE. this my javascript function code:
function showLoadingMessage() {
try{
tdAreas.style.display = 'none';
var newdiv = document.createElement('div');
newdiv.setAttribute('id', "msgDiv");
newdiv.valign = "middle";
newdiv.align = "center";
var divInnerHTML = "<table height='100%' width='100%' style='cursor:wait'>";
divInnerHTML += "<tr>";
divInnerHTML += "<td valign='middle' align='center'>";
divInnerHTML += "<img alt='' src='/_imgs/AdvFind/progress.gif'/>";
divInnerHTML += "<div/><b>Working…</b>";
divInnerHTML += "</td></tr></table>";
newdiv.innerHTML = divInnerHTML;
newdiv.style.background = '#FFFFFF';
newdiv.style.fontSize = "15px";
newdiv.style.zIndex = "1010";
newdiv.style.width = document.body.clientWidth;
newdiv.style.height = document.body.clientHeight;
newdiv.style.position = 'absolute';
document.body.insertBefore(newdiv, document.body.firstChild);
document.all.msgDiv.style.visibility = 'visible';
}
catch(ex){
alert(ex.message);
}
}
and this one is to hide progress:
function hideLoadingMessage(){
document.all.msgDiv.style.visibility = 'hidden';
}
this is the function that I called in my ribbon button action for testing loading progress work or not:
function ribbonButton()
{
var guid = Xrm.Page.data.entity.getId();
if (guid != null)
{
showLoadingMessage(); //show progress
/*var workflowId = '04E84379-87E4-E711-814E-000C294D2FF8';
var workflowName = 'CloneReward';
ExecuteWorkflow(workflowId, workflowName, function ()
{
RefreshForm();
});*/
//hideLoadingMessage(); //hide progress
}
}
when I pressed the button I get the following error message:
Need any suggestions. Thanks.
There is new nice client API for exact this feature: https://learn.microsoft.com/en-us/dynamics365/customer-engagement/developer/clientapi/reference/xrm-utility/showprogressindicator
Here is example on how it looks in work: http://www.itaintboring.com/dynamics-crm/dynamics-365-v9-progress-indicator-api/
The only downside is that it's only applicable to Dynamics version 9.
just tried this THIS tutorial and it will fix the problem above.
show loading progress:
function _buildLoadingDiv(_entityName) {
var loadingDiv = "<div id='divLoading'style='width: 100%; height: 100%; display: block; position: fixed; top:0px; background:rgba(255,255,255,0.5);'><table style='width: 100%; height: 100%;'><tr><td align='center' style='vertical-align: middle;'>";
loadingDiv += "<img id='loading' alt='' src='/_imgs/AdvFind/progress.gif'/><br/>";
loadingDiv += "<label id='lblStatus'>Loading... " + _entityName + " Execute Workflow</label>";
loadingDiv += "</td></tr></table></div>";
$($('body', window.parent.document)).append(loadingDiv);
}
hide loading progress:
function _removeLoading() {
$($('body', window.parent.document)).find("#divLoading").remove();
}
hi i have a table which is editable .i want change my table exactly like a excel page .i have two button left and right that are my indent button for adjusting the Td content padding
my requirement is
1.the first row TD always bold
2.and the second row TD will move 20px when it select and click the left button with normal font weight
3.similar way next row TD are move 20 on first click 40 on second click with small font size
$(function () {
$("tr").on("click", function () {
$(this).toggleClass('selected1');
});
$("td.cat").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing1")
$(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");
})
$("tr").on("click", function () {
$(this).toggleClass('selected1');
});
$(".cat").on("click", function () {
$(this).toggleClass('selected');
});
$("#key").click(function () {
var sl = parseInt($(".selected").css("padding-left"));
sl = sl >= 100 ? "100" : "+=20";
$(".selected").css({
"padding-left": sl
});
$(".cat.selected").each(function () {
var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
console.log('Current td index: ' + $(this).index());
console.log('Previous td content: ' + prevTd.text());
var paddingLeftpl = parseInt($(this).css("padding-left"));
var isPaddingLeft20 = "", isPaddingLeft40 = '';
if (paddingLeftpl > 20)
isPaddingLeft20 = paddingLeftpl;
if (paddingLeftpl > 40)
isPaddingLeft40 = paddingLeftpl;
if (isPaddingLeft20) {
prevTd.addClass("mainfunctionstyle");
prevTd.find('input').addClass("mainfunctionstyle");
prevTd.addClass("mainfunctionstyle")
}
if (isPaddingLeft40) {
prevTd.find('input').addClass("sunfunctionstyle");
prevTd.addClass("subfunctionstyle");
prevTd.addClass("subfunctionstyle");
}
else $(this).css("color", "grey");
});
});
$("#key1").click(function () {
var sl = parseInt($(".selected").css("padding-left"));
sl = sl >= 100 ? "100" : "+=20";
$(".selected").css({
"padding-left": sl
});
$(".cat.selected").each(function () {
var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
console.log('Current td index: ' + $(this).index());
console.log('Previous td content: ' + prevTd.text());
var paddingLeftpl = parseInt($(this).css("padding-left"));
var isPaddingLeft20 = "", isPaddingLeft40 = '';
if (paddingLeftpl > 20)
isPaddingLeft20 = paddingLeftpl;
if (paddingLeftpl > 40)
isPaddingLeft40 = paddingLeftpl;
if (isPaddingLeft20) {
prevTd.addClass("mainfunctionstyle");
prevTd.find('input').addClass("mainfunctionstyle");
prevTd.addClass("mainfunctionstyle")
}
if (isPaddingLeft40) {
prevTd.find('input').addClass("sunfunctionstyle");
prevTd.addClass("subfunctionstyle");
prevTd.addClass("subfunctionstyle");
}
else prevTd.css("color", "grey");
});
});
});
.selected {
background-color: lightblue;
}
.editableTable {
position: static;
width: 100%;
border-collapse: collapse;
}
.editableTable td {
border: 1px solid;
height: 17px;
}
.editableTable .cellEditing1 input[type=text] {
width: 100%;
border: none;
text-align: left;
background-color: transparent;
}
.editableTable .cellEditing1 {
padding: 0;
height: 1px;
}
.mainfunctionstyle {
color: yellow;
font-weight: bold;
font-size: 10px;
}
.sunfunctionstyle {
color: black;
font-weight: normal;
font-size: 8px;
}
.taskstyle {
color: red;
font-weight: normal;
font-size: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">left</button>
<button id="key1">right</button>
<table class="editableTable">
<tr>
<td class="cat">rose11</td>
<td class="cat">red12</td>
</tr>
<tr>
<td class="cat">rose21</td>
<td class="cat">red22</td>
</tr>
<tr>
<td class="cat">rose31</td>
<td class="cat">red32</td>
</tr>
<tr>
<td class="cat">rose41</td>
<td class="cat">red42</td>
</tr>
</table>
4.next is become 20 ,40,60px with gray color
this is my code i also share a image for under stand the requirement i want exactly like that image
Added a few lines in jquery.
$(function () {
$("tr").on("click", function () {
$(this).toggleClass('selected1');
});
$("td.cat").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing1")
$(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");
var col = $(this).parent().children().index($(this));
var row = $(this).parent().parent().children().index($(this).parent());
//alert('Row: ' + row + ', Column: ' + col);
var pad_left_val = (row+1)*10 + "px";
$(this).css("padding-left", pad_left_val);
})
$("tr").on("click", function () {
$(this).toggleClass('selected1');
});
$(".cat").on("click", function () {
$(this).toggleClass('selected');
});
$("#key").click(function () {
var sl = parseInt($(".selected").css("padding-left"));
sl = sl >= 100 ? "100" : "+=20";
$(".selected").css({
"padding-left": sl
});
$(".cat.selected").each(function () {
var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
console.log('Current td index: ' + $(this).index());
console.log('Previous td content: ' + prevTd.text());
var paddingLeftpl = parseInt($(this).css("padding-left"));
var isPaddingLeft20 = "", isPaddingLeft40 = '';
if (paddingLeftpl > 20)
isPaddingLeft20 = paddingLeftpl;
if (paddingLeftpl > 40)
isPaddingLeft40 = paddingLeftpl;
if (isPaddingLeft20) {
prevTd.addClass("mainfunctionstyle");
prevTd.find('input').addClass("mainfunctionstyle");
prevTd.addClass("mainfunctionstyle")
}
if (isPaddingLeft40) {
prevTd.find('input').addClass("sunfunctionstyle");
prevTd.addClass("subfunctionstyle");
prevTd.addClass("subfunctionstyle");
}
else $(this).css("color", "grey");
});
});
$("#key1").click(function () {
var sl = parseInt($(".selected").css("padding-left"));
sl = sl >= 100 ? "100" : "+=20";
$(".selected").css({
"padding-left": sl
});
$(".cat.selected").each(function () {
var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
console.log('Current td index: ' + $(this).index());
console.log('Previous td content: ' + prevTd.text());
var paddingLeftpl = parseInt($(this).css("padding-left"));
var isPaddingLeft20 = "", isPaddingLeft40 = '';
if (paddingLeftpl > 20)
isPaddingLeft20 = paddingLeftpl;
if (paddingLeftpl > 40)
isPaddingLeft40 = paddingLeftpl;
if (isPaddingLeft20) {
prevTd.addClass("mainfunctionstyle");
prevTd.find('input').addClass("mainfunctionstyle");
prevTd.addClass("mainfunctionstyle")
}
if (isPaddingLeft40) {
prevTd.find('input').addClass("sunfunctionstyle");
prevTd.addClass("subfunctionstyle");
prevTd.addClass("subfunctionstyle");
}
else prevTd.css("color", "grey");
});
});
});
Hope this helps...
I've got this script which fetches stuff from a JSON. Onclick of the thumbnail, it opens up an iframe next to it. Well I want the iframe to pop out and make the background darker ( you know the drill ). How can I do that?
$(function() {
var i=0;
var twitchApi = "https://api.twitch.tv/kraken/streams";
var twitchData;
$.getJSON(twitchApi, function(json) {
twitchData = json.streams;
setData()
});
function setData(){
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length;
for (; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
$('#twitch').append(img);
img.click(function(){
$('#twitch iframe').remove()
$('#twitchframe').append( '<iframe frameborder="0" style="overflow:hidden; margin-left: 25px; width:400px; height:250px; position: fixed; top: 0; margin-top: 23.55%;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
I am dynamically generating textboxes and only 5 textbox are allowed.
Now say i have generated 5 textbox with Txtopt1,Txtopt2,Txtopt3 resp..
and i am removing 2nd textbox and then again I am generating 1 new
textbox then i want to assign Txtopt2 to newly generated textbox
instead of Txtopt4.
This is my Code:
var cnt = 1;
var usedIds = [];
var maxNumberOfTextboxAllowed = 5;
function Generatetextbox() {
if (cnt <= maxNumberOfTextboxAllowed) {
var id = findAvailableId();
var OrderingField = $("<div class='OrderingField' id='OrderingField" + id + "'/>");
var LeftFloat = $("<div class='LeftFloat' id='LeftFloat" + id + "'/>");
var RightFloatCommands = $("<div class='RightFloat Commands' id='RightFloat Commands" + id + "'/>");
var upButton = $("<button value='up'>Up</button>");
var downButton = $("<button value='down'>Down</button>");
var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "' name='TxtoptNm" + id + "'/>");
var removeButton = $("<img class='remove' src='../remove.png' />");
LeftFloat.append(fName);
LeftFloat.append(removeButton);
RightFloatCommands.append(upButton);
RightFloatCommands.append(downButton);
OrderingField.append(LeftFloat);
OrderingField.append(RightFloatCommands);
$("#FieldContainer").append(OrderingField);
cnt = cnt + 1;
}
else
alert("Cant create more than 5 route points")
}
function findAvailableId() {
var i = 1;
while (usedIds[i]) i++;
usedIds[i] = true;
return i;
};
function removeId(idToRemove) {
usedIds[idToRemove] = false;
};
$(document).on('click', "img.remove", function() {
$(this).parent().parent().fadeOut(1000, function() {
if (cnt > maxNumberOfTextboxAllowed)
cnt = cnt - 2;
else if (cnt == 1)
cnt = 1;
else
cnt = cnt - 1;
var id = $(this).attr("id").substr(5);
removeId(id);
$(this).remove();
console.log(cnt)
});
});
.LeftFloat
{
float: left
}
.RightFloat
{
float: right
}
.FieldContainer
{
border: 1px solid black;
width: 400px;
height: 300px;
overflow-y: auto;
font-family:tahoma;
}
.OrderingField
{
margin: 3px;
border: 1px dashed #0da3fd;
background-color: #e8efff;
height: 50px;
}
.OrderingField div.Commands
{
width: 60px;
}
button
{
width: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="FieldContainer">
</div>
<button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>
Keep track of the IDs you've assigned, and always take the lowest ones available.
Also, You don't need to use escape characters inside your html, you can use the single quote marks to specify strings.
Something like this should help:
var cnt = 1;
var maxNumberOfTextboxAllowed = 5;
var usedIds = [];
function findAvailableId() {
var i = 1;
while (usedIds[i]) i++;
usedIds[i] = true;
return i;
};
function removeId(idToRemove) {
usedIds[idToRemove] = false;
};
function Generatetextbox() {
if (cnt <= maxNumberOfTextboxAllowed) {
var id = findAvailableId();
var fieldWrapper = $("<div class='fieldwrapper' id='field" + id + "'/>");
var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "' name='TxtoptNm" + id + "' />");
var removeButton = $("<img class='remove' src='../remove.png' />");
fieldWrapper.append(fName);
fieldWrapper.append(removeButton);
fieldWrapper.append('<br />');
fieldWrapper.append('<br />');
$("#abc").append(fieldWrapper);
cnt = cnt + 1;
} else
alert("Cant create more than 5 textbox")
}
$(document).on('click', "img.remove", function() {
$(this).parent().fadeOut(1000, function() {
if (cnt > maxNumberOfTextboxAllowed)
cnt = cnt - 2;
else if (cnt == 1)
cnt = 1;
else
cnt = cnt - 1;
var id = $(this).attr("id").substr(5);
removeId(id);
$(this).remove();
console.log(cnt)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc"></div>
<button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>