I have a textarea where users can enter some text en sometimes they use a little html in there to make it look better. Sometimes this goes a wrong so I tried to make it easier for them by adding a few images with functions. Like wrapping text in <b> <i> <u> <del> tags. This works great. Only now I want them to add url's and this is where I got stuck.
What I want:
I want a popup with a title bar and a url bar. after pressing OK I want the text to appear in the textarea where the user had left his cursor. the text in the textarea needs to look like ' + title + '. If a user selects some text i want that to appear in the popup title field.
If the add link button is pressed the script needs to look if there is a selection in the textarea
if there is a selection the script remembers that
the popup opens
in the title-input of the popup the selection appears.
the user fills in the url
the user presses the OK button
the popup disappears and the selected text gets replaced by a link
the link looks like ' + title + '
this is some code I have:
function wrapAsLink(url) {
var textArea = $('.area'),
len = textarea.value.length,
start = textarea.selectionStart,
end = textarea.selectionEnd,
sel = textarea.value.substring(start, end),
replace = '' + sel + '';
textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
$('.area').keyup();
}
and a fiddle
You can do something like this:
The fiddle.
Change your html as:
<div class="editor">
<div class="toolbar">
<span id="btnedit-bold" title="Vergedrukte text"><img src="images/bold.png" /></span>
<span id="btnedit-italic" title="Italic text"><img src="images/italic.png" /></span>
<span id="btnedit-underline" title="Onderstreep text"><img src="images/underline.png" /></span>
<span id="divider"> </span>
<span id="btnedit-delete" title="verwijder (doorstreep) text"><img src="images/delete.png" /></span>
<span id="divider"> </span>
<span id="btnedit-link" title="Insert link"><img src="images/link.png" /></span>
</div>
<textarea name="editor-preview" class="area" placeholder="Uw bericht"></textarea>
</div>
<p> </p>
<div class="editor-preview"></div>
<div id="prompt">
<div class="prompt-background"></div>
<div class="prompt-dialog">
<div class="prompt-message">
<p><b>Insert Hyperlink</b></p>
</div>
<form class="prompt-form">
<p>titel</p>
<input id="btnedit-title" type="text" style="display: block; width: 80%; margin-right: auto; margin-left: auto;">
<p>http://example.com/</p>
<input id="btnedit-url" type="text" style="display: block; width: 80%; margin-right: auto; margin-left: auto;">
<button id="btnedit-ok" class="btn-orange" onClick="$('#prompt').show();">OK</button>
<button id="btnedit-cancel" class="btn-orange" onClick="$('#prompt').hide();">cancel</button>
</form>
</div>
</div>
And add those to your javascript as:
$('#btnedit-bold').on("click",function(e) {
wrapText('b');
});
$('#btnedit-italic').on("click",function(e) {
wrapText('i');
});
$('#btnedit-underline').on("click",function(e) {
wrapText('u');
});
$('#btnedit-delete').on("click",function(e) {
wrapText('del');
});
$('#btnedit-link').on("click",function(e) {
var textArea = $('.area'),
len = textArea.val().length,
start = textArea[0].selectionStart,
end = textArea[0].selectionEnd,
selectedText = textArea.val().substring(start, end);
$('#btnedit-title').val(selectedText);
$('#btnedit-url').val('http://');
$('#prompt').show();
});
$('#btnedit-ok').on("click",function(e) {
e.preventDefault();
$('#prompt').hide();
replacement = '<a title="'+$('#btnedit-title').val()+'" href="'+$('#btnedit-url').val()+'" rel="external">' + $('#btnedit-title').val() + '</a>';
wrapLink(replacement);
});
$('#btnedit-cancel').on("click",function(e) {
e.preventDefault();
$('#prompt').hide();
});
function wrapLink(link) {
var textArea = $('.area'),
len = textArea.val().length,
start = textArea[0].selectionStart,
end = textArea[0].selectionEnd,
selectedText = textArea.val().substring(start, end);
textArea.val(textArea.val().substring(0, start) + link + textArea.val().substring(end, len));
$('.area').keyup();
}
Related
I have a paragraph tag with number init. I want to replace the numbers with stars/round circles on clicking the button beside it. Also, I am attaching a screenshot to which I want to apply the concept(on clicking the eye icon the Patient Id should be replaced with round circles and vice versa). Attaching the code which I have tried. Your solutions are very important for me in learning the things. TIA
enter image description here
$('.hide-id').on('click', function () {
$('.patient-id-content').attr('type', 'password');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p>
<span class="patient-id-content" type="text">34324345</span>
<button class="hide-id">
Hide
</button>
</p>
</div>
Here is what you need.
$(".hide-id").on("click", function () {
var span = $(".patient-id-content");
var spanText = span.text();
if (!spanText.indexOf("*")) {
$(".patient-id-content").text(span.attr("data-oldText"));
return;
}
var starText = "";
for (let i = 0; i < spanText.length; i++) starText += "*";
$(".patient-id-content")
.attr("data-oldText", spanText)
.text(starText);
});
working example on jsfiddle: https://jsfiddle.net/ynojkf0q/
So your jQuery code from the OP was not correct. You have what you want as the password in a span and are applying a type attribute to that.
If you check the MDN Docs, you will learn that there is no type attribute for a span, as spans only support Global Attributes. The input element uses both the type: text and type: password, see the docs here.
But if you want to have the span as your element, you can change your jQuery event handler to the following: .toggleClass('hidden'); and create a hidden CSS class with the properties display: none;
$('.hide-id').on('click', function () {
$('.patient-id-content').toggleClass('hidden');
});
.hidden { display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p>
<input class="patient-id-content" type="text" value="34324345">
<button class="hide-id">
Hide
</button>
</p>
</div>
This is a simple solution for the functionality you want. It will need more styling to get it to look exactly the the example you provided above.
HTML
<div class="container">
<p>
<input class="patient-id-content" type="password" value="34324345">
<button id="pass-toggle" class="hide-id" onclick="toggleShowPassword()">
Show
</button>
</p>
</div>
JS
let passwordVisible = false;
function toggleShowPassword() {
let inputType = 'password';
passwordVisible = !passwordVisible;
if (passwordVisible) {
inputType = 'text';
$('#pass-toggle').addClass( "show-id" ).text( 'Hide' );
} else {
$('#pass-toggle').removeClass( "show-id" ).text( 'Show' );
}
$('.patient-id-content').attr('type', inputType);
CSS
.patient-id-content {
border: 0;
}
You could do something like:
to have hidden by default:
<span class="patient-id-content" type="text" data-patient-id="34324345" data-visible="false">********</span>
to show by default:
<span class="patient-id-content" type="text" data-patient-id="34324345" data-visible="true">34324345</span>
$('.hide-id').on('click', function () {
const patientId = $(this).prev('span'); // dependent on this DOM placement
const patientIdValue = patientId.attr('data-patient-id');
const isShowing = patientId.data('visible');
const valueToShow = isShowing ? '********' : patientIdValue;
patientId.text(valueToShow);
patientId.data('visible', !isShowing)
});
Included a JS Fiddle: https://jsfiddle.net/w7shxztp/20/
I have fixed the issue with the below solution:
$(".icofont-eye").on("click", function() {
$('#Patient-id-icon-element').toggleClass('icofont-eye-blocked');
$('#Patient-id-icon-element').toggleClass('icofont-eye');
var patientIdcontent = $(".patient-id-content");
var patientIdcontentText = patientIdcontent.text();
if (patientIdcontentText.indexOf("*")) {
$(".patient-id-content").text('***************');
} else {
$(".patient-id-content").text('3d4532403d453240');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mt-1">
<div class="col-4 text-right mychart-label">Patient ID</div>
<div class="col-8 section-content">
<span class="patient-id-content">****************</span> <span class="patient-id-icon">
<a class="icofont icofont-eye cl-icon-1-point-3x mt-1" id="Patient-id-icon-element" type="button">Show</a>
</span>
</div>
</div>
my problem is the following, I have a javascript function that is responsible for copying the mail of a span from a webform
aspx
<div id="thisEmail" name="thisEmail" style="display:none; margin-left:40px; font-size: 20px;font-weight: 400;color: #F32D28">
<label id="copyEmailToClipboard" class="widget-chashier-bitcoin-textcopy" onclick="copytext(this)" style="cursor:pointer;padding-right: 25px;">
<span >
<span class="icon icon-copy"></span><span id="copyarea" style="text-align:left" class="txt">cs#betonline.ag</span>
<p></p>
</span>
</label>
<br/>
<small id="copiedToClipboard" class="widget-chashier-bitcoin-textcopy" style="display: none; font-size:12px; padding-right: 30px;">Copied to clipboard!</small>
</div>
JavaScript
function copytext(elemento) {
var $temp = $("<input>")
$("body").append($temp);
$temp.val($(elemento).text()).select();
try {
document.execCommand("copy");
} catch (ignore) {
// user should manually copy
}
if (elemento.id == 'copyEmailToClipboard') {
console.log( $("#copiedToClipboard"))
$("#copiedToClipboard").fadeIn();
setTimeout(function() {
$("#copiedToClipboard").fadeOut();
}, 1500);
}
$temp.remove();
}
when paste in the browser works fine, paste:
cs#betonline.ag
but you paste in notepad paste:"
cs#betonline.ag
Thnks
You can try stripping the white space with something like this
str = str.replace(/\s+/g, '');
In your case:
var text = $(elemento).text();
text = text.replace(/\s+/g, '');
$temp.val(text).select();
Here's the code:
function bold() {
var text = document.getElementById("post-body");
var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
var text = '**';
$('#post-body').val(function(_, val) {
return val + text + t + text;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="post-body" id="post-body" rows="20" style="margin-left: 0px; margin-right: 0px; width: 400px;"></textarea>
<div>
<button id="bold" value="**" onclick="bold()">B</button>
</div>
What I am trying to do is similar to how comments on Stack Overflow work: you highlight text in the text box, and click a button. The button then appends and prepends the proper syntax to the text. I am able to apply the proper syntax, but the highlighted text is duplicated.
I know it's because in my code, I have
return val + text + t + text;
where val is all of the text in the textarea, and t is the highlighted text, but I'm not sure how to remove the highlighted text from val and add the new version in the form of t.
Any help would be greatly appreciated.
You can record the text before and after and then return the text before, the selection and the text after.
function bold() {
var text = document.getElementById("post-body");
var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
var before = text.value.slice(0, text.selectionStart);
var after = text.value.slice(text.selectionEnd);
var text = '**';
$('#post-body').val(function(_, val) {
return before + text + t + text + after;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="post-body" id="post-body" rows="20" style="margin-left: 0px; margin-right: 0px; width: 400px;">Select some text here.</textarea>
<div>
<button id="bold" value="**" onclick="bold()">B</button>
</div>
I have a div of online users which are dynamically inserted:
<div id="users">
<div class="privateMessage" data="John">John</div>
<div class="privateMessage" data="Maria">Maria</div>
<div class="privateMessage" data="Tony">Tony</div>
</div>
Then I have a div for private messages:
<div id="messageBox">
</div>
Now, I'm struggling how to dynamically append a div inside the messageBox when I click on the user.
What I need is this below:
<div id="messageBox">
//when I click on John from users div this below should be appended
<div class="private-chat" data-conversation-between="John"></div>
//when I click on Maria from users div this below should be appended and John above
//will be hidden
<div class="private-chat" data-conversation-between="Maria"></div>
//when I click on Tony from users div this below should be appended and John and Maria
//will be hidden
<div class="private-chat" data-conversation-between="Tony"></div>
</div>
Whatever I tried, the divs inside messageBox get appended more than once.
Can someone help me to solve this with jQuery please?
Link: fiddle
What about something like this?
http://jsfiddle.net/thetimbanks/hfuurcL7/
The click event is delegated since the users can be added to the list dynamically. I also search the messageBox for an existing div for that user in order to not add another one.
Adding code here as to not just link to fiddle:
HTML
<div id="users">
<div class="privateMessage" data-user="John">John</div>
<div class="privateMessage" data-user="Maria">Maria</div>
<div class="privateMessage" data-user="Tony">Tony</div>
</div>
<div id="messageBox">
</div>
js
$("#users").on("click", ".privateMessage", function() {
var user = $(this),
private_chat = $("#messageBox .private-chat[data-conversation-between='" + user.data("user") + "']");
if (private_chat.length == 0) {
private_chat = $('<div class="private-chat" data-conversation-between="' + user.data("user") + '">Chat with ' + user.data("user") + '</div>');
$("#messageBox").append(private_chat);
}
private_chat.show().siblings().hide();
});
After short clarification in the comments, I'm posting a working solution:
$('.privateMessage').on('click', function (e) {
$messageBox = $('#messageBox');
var whoIsIt = $(this).attr('data');
var isAlreadyThere = $messageBox.find('div[data-conversation-between="' + whoIsIt + '"]').length;
if (isAlreadyThere == 0) {
$messageBox.append('<div class="private-chat" data-conversation-between="' + whoIsIt + '"></div>');
}
});
jsfiddle: http://jsfiddle.net/pLe01k57/2/
Basically: check if #messageBox already has conversation (div) with clicked-on user, and if not - append it there.
How about this?
$('.privateMessage').on('click', function (e) {
var whoIsIt = $(this).attr('data');
$('#messageBox').append('<div class="private-chat" data-conversation-between="' + whoIsIt + '"></div>');
$(this).unbind();
});
https://jsfiddle.net/lemoncurry/5cq2sw8m/1/
Basically bardzusny's solution above plus a $(this).unbind().
Hope it does what you are expecting .Can check data-attribute before appending div's.
$('.privateMessage').on('click', function(e) {
var isPresent = false;
var whoIsIt = $(this).attr('data');
$('#messageBox .private-chat').each(function(index, element) {
if ($(this).attr('data-conversation-between') == whoIsIt) {
isPresent = true;
}
});
if (!isPresent) {
$('#messageBox').append('<div class="private-chat" data-conversation-between="' + whoIsIt + '"></div>');
}
});
.private-chat {
height: 20px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="users">
<div class="privateMessage" data="John">John</div>
<div class="privateMessage" data="Maria">Maria</div>
<div class="privateMessage" data="Tony">Tony</div>
</div>
<div id="messageBox"></div>
You should avoid using data attribute in this way.
Read more about .data() attribute
HTML:
<div id="users">
<div class="privateMessage" data-selected="" data-who="John">John</div>
<div class="privateMessage" data-selected="" data-who="Maria">Maria</div>
<div class="privateMessage" data-selected="" data-who="Tony">Tony</div>
</div>
<div id="messageBox"></div>
Script:
$("#users").on("click", '.privateMessage', function () {
if(!$(this).data('selected')){
$(this).data('selected', 'selected');
// do not use '.attr()', use natvie jQuery '.data()'
var $msgTo = $(this).data('who');
$("#messageBox").append("<div class='private-chat' data-conversation-between=" + $msgTo + ">"+$msgTo+"</div>");
}
});
DEMO
Alternatively, you could just use .one() event, and reactivate it later for specific button (f.ex. after the person was removed from the chat):
function singleClick(el) {
$(el).one("click", function () {
var $msgTo = $(this).data('who');
$("<div class='private-chat' data-conversation-between=" + $msgTo + ">"+$msgTo+"</div>").appendTo("#messageBox");
});
}
singleClick('.privateMessage');
DEMO (with delete example using .one())
I have prev and next button:
This is function of next button:
var nextFn = function(e)
{
var current = $('.active');
alert(current);
var prev = $('#prev');
pos = $('.active').attr('id');
$("#num").text('(' + pos + '/' + researchPlaces.length + ')');
$(current).next().attr("class", "active");
$(current).attr("class", "passive");
//e.stopPropagation();
};
When I click next, it supposed to show the next span. However, it also shows the next span in other li(s) in the page.
<li class="memberElement" style="width: 100%; padding: 10px 0 10px 0; border-bottom: 1px solid #ccc;">
<div class="MemberImageHolder" style="float:left">
<a href="#">
<img class="memberpic" src="picture.php?action=display&contentType=members&id=5&quality=medium" alt="">
</a>
</div>
<div class="memberDetails">
Charles Darwin
<div id="title">Professor</div><div id="unit">
<b>University of Ottawa</b>
</div>
<div id="address">
<a id="prev">Prev </a>
<span id="1" class="active">150 York Street</span>
<span id="2" class="passive">80 Elgin Street</span>
<span id="num" class="passive">(0/2)</span>
<a id="next"> Next</a>
</div>
</div>
<span class="divider"></span>
</li>
This is my one of the li(s). What's wrong?
I think is because of your selector :
$('.active');
This selector select all the control that has active class. I guess you have one active span in each li.
To modify class, you should use addClass instead of modifying the attribute :
$(current).next().addClass("active");
$(current).removeClass("passive");
This way you won't lose other class associated with your control.
Edit :
You can get the li by the link clicked :
$("#prev").click(function()
{
var li = $(this).closest("li");
var current = $(li).find('.active');
alert(current);
var prev = $('#prev');
pos = $('.active').attr('id');
$("#num").text('(' + pos + '/' + researchPlaces.length + ')');
$(current).next().attr("class", "active");
$(current).attr("class", "passive");
//e.stopPropagation();
});
If each div with class 'address' is structured as in your code you can try:
var current = $(this).parent().find('.active');