I cannot seem to get my head around this problem.
I have a contenteditable div.
I want to wrap all words and special characters in a tag but keep line breaks.
I’ve tried sanitize (allowing only spans and br tags) and using all kinds of regular expressions.
Do you guys know any npms or have ideas as to how this might be done?
It doesn’t neccesarilly need to happen as the user types.
I have categories which the user must select after typing the text. Ie. “Animal”, “Food” and “People”. The user must select a category and the he/she can click on any word in the contenteditable.
Let’s say I enter:
Peter loves his dog.
<span class=“word”>Peter</span> <span class=“word”>loves</span> <span class=“word”>his</span> <span class=“word”>dog</span><span class=“word”>.</span>
User then clicks “People” and then clicks “Peter” =>
<span class=“people”>Peter</span> <span class=“word”>loves</span> <span class=“word”>his</span> <span class=“word”>dog</span><span class=“word”>.</span>
Then user clicks “Animal” and then clicks “dog” =>
<span class=“people”>Peter</span> <span class=“word”>loves</span> <span class=“word”>his</span> <span class=“animal”>dog</span><span class=“word”>.</span>
I know how to change the class name of a clicked span class, but the formatting leasing to these steps, I cannot get my head around :(
Any ideas are really appreciated.
Thanks in advance for any guidance to npm installations or simply ideas.
Related
I would like to remove things from the main page but the information I need is stored on the next site. How do I approach this?
This is stored on the first page where I can see all articles and all links in href have different numbers, sometimes numbers and letters.
<div class="NewsArticle">
<div class="featured-content-image">
<a href="/27312/72410214/" rel="bookmark">
<img class="imageclass" referrerpolicy="no-referrer" data-original"https/domainname.com/2021/0/Article01.jpg" src="https/domainname.com/2021/0/Article01.jpg" alt="Article01" style="display: inline;">
<div class="link-overlay"></div>
</a>
<span class"article-views">170392 Views</span>
</div>
This is on the second site where, for example, "military" is stored for whatever reason. Is it possible to remove the articles that contain "military"?
<a title="military" href="/category/military" rel="tag" style="margin-right:3px;margin-bottom:3px;" class="btn btn-info btn-md">military</a>
using jquery you can do something like
$("div").remove()
this selects all the divs and removes them
or you can do
$( "div:contains('military')" ).remove()
this looks at all divs if the divs have military in it it is then removed
IMPORTANT:
Make sure to have
// #require https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
And declare the variable
/* globals jQuery, $, waitForKeyElements */
I am using angularjs and trying to make the website accessible. When a user doesn't enter or forget to enter into required field, jaws doesn't read out the error message. I have tried adding role="alert" to the div but it doesn't seem to like it. Any suggestions
<div aria-type-label="{{'some:error'}}">
<span role="alert" class="error-message">Error</span>
</div>
Jaws and the browser are looking for updated content to alert so I found that I had to add and remove the data completely in order to get the alerts to work consistently. For example, I had the text removed when the error would go away, and had the text placed back in once there was an error. This can be done in a couple ways. One, using an ng-if={{error}} then the HTML will get removed from the DOM if there is no error, and put back into the DOM once there is an error.
The other way is to set an errorMessage value to either an empty string when there is no error, or an error message when there is an error. That way the text in the DOM is actually changing, resulting in an alert.
Possible example using both methods mentioned:
<input name="theTextInput" type="text" ng-model="filled" placeholder="Add something"/>
<div role="alert" ng-if="filled" aria-type-label="">
<span class="error-message">{{message}}</span>
</div>
<span class="sr-only" style="display: none;">{{message = "Has Error"}}</span>
Plunker
NOTE: This worked in Chrome in October 2016 and November 2016, but today it looks like it's not alerting at the moment. Still works in Firefox.
You have to use aria-described by and role alert together.
Please have a look:
<input type="textbox" id="yourField" aria-describedby="yourFieldError">
<span role="alert" data-bind="visible:yourCondition" class="error-message" id="yourFieldError">Error</span>
Hope it will help.
I know that this question has been asked a lot but I tried re-downloading Bootstrap (I've got the latest version - 3.3.6), my #font-face{ } has the correct paths to my font files, I don't know what else to try. I get the same results in both Chrome and Firefox. One thought I had is that I'm trying to put my icons w/in <em> tags, but when I tried moving them to outside the tags, they still looked like squiggley lines, so that didn't fix it.
I want to use glyphicon-chevron-up and glyphicon-chevron-down (which show up as ≅ and [ ) but when I do something like <span class="caret"></span> then it looks perfectly normal.
Here is how I am using them:
<em class="pull-right">
<em class="pull-left">
<span class="glyphicon-chevron-up" ng-click="plusOne($index)"></span><br>
<span class="glyphicon-chevron-down" ng-click="minusOne($index)"></span>
</em>
{{ post.upvotes - post.downvotes }}
</em>
I can still click the icons and increase/decrease the vote count so I don't think it is a problem with Angular, but just for reference I am using angular1.4.9 and django1.9. Again, I know several variations of this question have been asked but none of the solutions I found worked for me so any additional ideas would be appreciated!
Maybe its for this:
<span class="glyphicon glyphicon-chevron-up" ng-click="plusOne($index)"></span><br>
In my page works great.
Just add glyphicon before the glyphicon-icon name.
I'm using the getbootstrap typeahead to populate an input value. I've setup everything so that the user has to pick something from this list:
<input type="text" class="form-control" id="birdname" ng-model="birdname" required ng-disabled="checked" autocomplete="off" placeholder="Check the box if you don't know!"
uib-typeahead="bird for bird in birds | filter:$viewValue | limitTo:8" typeahead-no-results="noResults"
uib-tooltip="Pick a bird or check the box if unsure!"
tooltip-placement="top-right"
tooltip-trigger="mouseenter"
tooltip-enable="!birdname">
</div>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found - Please Try Again!
</div>
As you can see, the user has to pick something from this list or the validation won't allow it, though I am having one issue: If the user starts typing and is typing a birdname that exists (list showing with birds on input), but then clicks out of the input with his mouse. typeahead accepts this as 'correct' even though the full name hasn't been picked.
Is there a fix to this?
If you didn't understand what I mean, the following picture should hopefully explain it:
Is there a solution to this? For example, it picking the first option in the list when clicked?
I'm experiencing some very peculiar behaviour--I'm new to angular, to spare you the noob questions, I tired my best to find the solution but after many hours, I think it's time to give in and ask.
Code Summary: Alphabet array, is looped(ng-repeat) and each letter is linked to a function called clickLetter(), this function sets a $scope variable that reflects the current chosen alphabet letter.
Problem: the model/variable in charge of displaying the current active letter is not updating ALL the time, it only appears to update sometimes, randomly it seems.
Code (plunker)
My guess is, angular is not updating the model (two-way data-binding?) as fast as it should?
It looks like the <a> tag is triggering a route change. Either add an $event.preventDefault() to it or remove the <a> altogether. (doesn't seem like it's adding any value)...
<div class="ui icon button padding5" ng-class="{'active': letter == activeLetter}" ng-repeat="letter in letters" ng-click="clickLetter(letter, $event)">
{{letter}}
</div>
or
<div class="ui icon button padding5" ng-class="{'active': letter == activeLetter}" ng-repeat="letter in letters" ng-click="clickLetter(letter, $event)">
{{letter}}
</div>
The problem is, when you click on letter and not on button,the link stops the propagation of your mouse click.
Add this class in your css file and apply to <a> tag, which holds the letter:
.ignore-mouse-event {
pointer-events: none;
}
<a> tag should be changed to this:
{{letter}}