I have contenteditable div with following HTML in it
<div contenteditable="true" class="editor-note" id="FqzHgBZeHHT3QECD2">
<span id="mSFK7wMphfKgBaCQg">Well</span>
<span id="8jHKJyhFfqHw9WPpR">over</span>
<span id="EGmCtEKaiPJkMKGSE">one</span>
<span id="soDGqwvxvmzg9hF5W">,</span>
<span id="uTEWcPrqoq9tZGYnK">my</span>
<span id="8HQEjMNKLiv6XJkqp">guest</span>
<span id="bYzzWYq5P4jTHLQ4S">today</span>
<span id="uey8ghQ4yNN62aY8J">is</span>
</div>
When I want to enter extra text into it, when I enter any key it is adding lot of at the end of the div being made.
This gif shows what's happening: http://g.recordit.co/l8m6IQwmNb.gif
This is what happens when I entered one letter n
<div contenteditable="true" class="editor-note" id="FqzHgBZeHHT3QECD2">
<span id="mSFK7wMphfKgBaCQg">Well</span>
<span id="8jHKJyhFfqHw9WPpR">over</span>
<span id="EGmCtEKaiPJkMKGSE">one</span>
<span id="soDGqwvxvmzg9hF5W">,</span>
<span id="uTEWcPrqoq9tZGYnK">my</span>
<span id="8HQEjMNKLiv6XJkqp">guest</span>
<span id="bYzzWYq5P4jTHLQ4S">today</span>
<span id="uey8ghQ4yNN62aY8J">is</span>
n
</div>
Here as you can see there is a lot of here, how can I solve this issue? I tried this in safari, same issue so this is not related to a browser at all.
Also, there are no event listeners attached to this div.
Any help appreciated, thanks.
EDIT
I'm using meteor js framework and this is the html code i'm using to generate this html
<div class="seg-editor">
<div contenteditable="true" class="editor-note" id="{{segmentId}}">
{{#each items}}
<span id="{{_id}}">{{text}}</span>
{{/each}}
</div>
</div>
my items helper just returns values from db, there are no event listeners attached to this
If I change my meteor code to remove spaces in html like below in single line
<div contenteditable="true" class="editor-note" id="{{segmentId}}">{{#each items}}{{showSpace #index}}<span id="{{_id}}">{{text}}</span>{{/each}}</div>
instead of spreading in multiple line
<div class="seg-editor">
<div contenteditable="true" class="editor-note" id="{{segmentId}}">
{{#each items}}
<span id="{{_id}}">{{text}}</span>
{{/each}}
</div>
</div>
that extra space issue was gone. Hope this helps someone
Possibly there will some script or CSS in your code which is the cause for this, So please check the cause or post a fiddle where this issue will reproduce.
Note: Checked your code on chrome and firefox, and it's working fine. You too can check this fiddle.
Related
So, I know I would be able to solve this issue IF I were able to implement extra handlebars helpers, but that is not an option.
We are using a third-party back end system for our Help Desk [ZenDesk], which uses handlebars as its general markup for dynamic content. I have a section on the home page of our Help Center website that I want to list the first 5-6 FAQ articles, and then a SEE MORE link underneath for the user to see the rest of the articles in that particular section.
Out of the box, they allow us to use the IF and IS conditional, but no comparative aside from TRUE or FALSE, no greater than, no less than, no greater or equal than, etc. I wrote up a simple helper that would allow for this, but no matter where I put it in the templates available to us, it would always generate an error that the function was not valid.
After discussing this with this application's support team, I was informed that NO CUSTOM HELPERS ARE ALLOWED TO BE USED. I have to rely SOLELY on HTML, CSS and JAVASCRIPT/JQUERY to find the solution.
So.... Does anybody know of a possible solution of how I can cap off a handlebars #each loop at 5 iterations by using CSS or JAVASCRIPT?
UPDATE: 09/05/2018:
Here's the #each loop I am using for the section "Frequently Asked Questions"
<h2>Frequently Asked Questions</h2>
<section class="section faq-base">
<section class="categories">
<ul class="">
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="">
<a href='{{url}}' class="">
<h4 class="blocks-item-title">{{name}}</h4>
</a>
</li>
{{else}}
{{#each sections}}
{{#is id //ID FOR FREQUENTLY ASKED QUESTIONS SECTION}}
<div class="accordion homeFAQ" id="homeFAQ">
{{#each articles}}
<div class="card">
<div class="card-header" id="heading{{#index}}">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse{{#index}}" aria-expanded="true" aria-controls="collapse{{#index}}">
{{title}}
</button>
</h5>
</div>
<div id="collapse{{#index}}" class="collapse" aria-labelledby="heading{{#index}}" data-parent="#homeFAQ">
<div class="card-body">
{{body}}
</div>
</div>
</div>
{{/each}}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
...SEE MORE
</h5>
</div>
</div>
</div>
{{/is}}
{{/each}}
{{/if}}
{{/each}}
</ul>
</section>
</section>
As you can see from the above code, I am inserting the FAQ into a Bootstrap Accordion, and at the end is the ...SEE MORE button
Could you add a display:none to the articles by default, then use JS to count the number of articles on the page, based on the class (or something) of the articles on the page, and then use JS again to remove the display:none from the first 5-6 articles? May not be the most elegant approach but should be one way to accomplish what you are looking for.
I am creating a contenteditable component for angular2+ which should be editable anywhere. With anywhere I mean at the start of a tag, between tags and end of tag (not within the actual tag text). Here is the code with pre-loaded data from the API.
<div id="txt" contenteditable="true">
<span id="annyoing-html" contenteditable="false">
<span class="badge">I AM ANNOYING</span>
</span>
<span id="annyoing-html" contenteditable="false">
<span class="badge">I AM ANNOYING TOO</span>
</span>
</div>
Full demo code:
https://jsfiddle.net/9kqkbuvr/5/
To see how it should work, open it with Chrome or Opera.
mmm.... padding is not white-space... it should not be selectable... I am not sure which interpretation is correct. A workaround is to place a space between the two non-editable spans.
<div id="txt" contenteditable="true">
<span id="annyoing-html" contenteditable="false">
<span class="badge">I AM ANNOYING</span>
</span>
<span id="annyoing-html" contenteditable="false">
<span class="badge">I AM ANNOYING TOO</span>
</span>
</div>
Did anyone knew how a tags in the browser are indexed?
I have in my html page 12 items wich are created with a tags, the problem is that when I want to focus the first tag with
document.getElementsByTagName("a")[0].focus(); the browser don't focus the first item! and if I just want to focus the third item by document.getElementsByTagName("a")[2].focus(); it focuses the item number 5.
I am wandering why I have this problem since in my page I have only the wanted items to be focused by a tags and the other html items are div and img tags!
Thanks a lot in advance for your help and reply :)
here is an exmaple of 2 items created in my html page:
<div id="carousel_items">
<div id="indicators" class="carousel-indicators" style="visibility: visible;">
<div id="nextBtn" class="right_indicator">
<img id="indicators_right" src="images/nextbtn.gif" style="width:45px;height:25px;">
</div>
</div>
<div id="div_slides" class="thumbnailList_slides">
<div class="div_vid">
<a id="btn0" class="btn_vid" href="#" onclick="javascript:activate('0');"> </a>
</div>
<div class="div_vid">
<a id="btn1" class="btn_vid" href="#" onclick="javascript:activate('1');"> </a>
</div>
</div>
Elements are returned in the order in which they appear in the DOM.
Various things can make that order different to the order you see them when viewing from left-right and top-bottom including:
text direction
float: right
CSS positioning
Flex order
I implemented that in JavaScript:
$('#dash_adc_avg').html(adc_avg);
And this in HTML:
(part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" id="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML:
(part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" id="dash_adc_avg"></div><br>
etc.
Unfortunately, the visualization of the content from var adc_avg works properly for "part A" ONLY. Does anyone know why?
Thank you!
By the way and independent: I'm looking for a way to visualize JSON-Data (as Objects) on the website, without changing them. Any ideas?
From the id attribute section of the HTML specification:
The id attribute specifies its element's unique identifier (ID).
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
IDs must be unique in HTML. Because of this, JavaScript only ever looks for one instance of an ID and then stops searching. In your case, the ID being pulled is the one in part A - your code never bothers looking further than that.
Change your "dash_adc_avg" ID into a class instead:
<!-- Part A -->
<div class="big-text dash_adc_avg"></div>
<!-- Part B -->
- Test: <div class="text dash_adc_avg"></div><br>
Then with your jQuery select on the class instead of the ID:
$('.dash_adc_avg').html(adc_avg);
I'm not going to bother answering the second part of your question, which is about visualising JSON data, as it has absolutely nothing to do with the main part of the question and is completely separate. Please ask that as a different question.
An identity has to be unique in the page.
It's still possible to use the id attribute to find the elements, but then you have to use it as an attribute, not as an identity:
$('[id=dash_adc_avg]').html(adc_avg);
Generally a class is used instead when you want to put it on multiple elements. There is no benefit of keeping the dupliate id attributes as they don't work as identities.
You are using duplicate id's dash_adc_avg which is a invalid HTML instead of id's use class and modify your Jquery selector as shown :-
$('.dash_adc_avg').html(adc_avg);
you should use class when you are using same name for more than once on same page in your html:
$('.dash_adc_avg').html(adc_avg);
It is considered bad practice to use the same id tag on multiple places, I would suggest that you instead use class for your dash_adc_avg
$('.dash_adc_avg').html(adc_avg)
And this in HTML: (part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" class="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML: (part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" class="dash_adc_avg"></div><br>
Your id must be unique and if not the first element found by that id will be selected.
For multiple selection for same thing/functionality use class instead of id.
A twitter-like website in Chinese. When I type a message and click a submit "button", a new entry is created. But I can't figure out the event listener for the submit "button".
I studied the source code, there is no form at all, and the "button" is actually an 发布 element.
So I think the website is using ajax to do the actual submission. I use google chrome to inspect the submit "button", but there is no event listener at all! So how could the submission be done?
Here is some relevant html code:
<div class="publishBox-ft clearfix">
<div class="fl">
<div class="uploadPic">
<em class="icon-uploadPic"></em>
<a class="link-lb js-link">图片</a>
</div>
<div class="insertFace">
<em class="icon-face"></em>
<a class="link-lb js-link">表情</a>
</div>
<div class="topic-trigger">
<em class="icon-topic"></em>
<a class="link-lb js-link">话题</a>
</div>
<div class="insertVideo video-trigger">
<em class="icon-video"></em>
<a class="link-lb js-link">视频</a>
</div>
<div class="insertPoi">
<em class="icon-lbsB"></em>
<span class="sendinfo-lbsbox link-lb">
<span class="sendinfo-showPoi">
<a class="sendinfo-currentPoi sendinfo-changePoi js-link poi-trigger" data-poi-id="null" data-poiname="发布地点">地点</a>
<a title="删除位置信息" class="js-link sendinfo-closePoi default-close-icon"></a>
</span>
</span>
</div>
</div>
<div class="fr">
发布
<span class="js-wordCounter word-counter sendinfoTip">还可以输<span class="char-constantia">152</span>字</span>
</div>
</div>
If somebody want to go the acutal website to study, here is the url and username and password:
http://t.163.com/4729009840
username: fatieji_test#163.com
password: 1a2b3c4d
Be aware: the website is in Chinese.
The click event is bound at runtime in the JavaScript file.
The relevant parts to search for are t.sendBtnElem=$(t.wrapperElem.$(".sendinfo-btn")[0]) and t.sendBtnElem.addEvent("click", ...
This is done using Javascript code that adds a click handler at runtime.