I've been trying to do a design which requires a preview of an image within an input box and playing around hide and show elements. I have successfully done the preview image with the help of someone on this site and now I've been trying to solve the hide and show element using JS but to no avail.
Let me explain my problem, I have six main boxes and one orange box. But I just want to show 3 boxes on the form and hide the other 3 boxes, so that whenever a user clicks on the orange box it will display the 3 hidden box and hide itself and show a checkbox which will be marked or checked. When for example someone unchecks the check box it will return as it was before.
I tried doing it this way , here is my script
$(function() {
var count = 0;
$('.upload-img').on('change', function(evt) {
var file = evt.target.files[0];
var _this = evt.target;
$(this).parent('.upload-section').hide();
var reader = new FileReader();
reader.onload = function(e) {
var span = '<img class="thumb mrm mts" src="' + e.target.result + '" title="' + escape(file.name) + '"/><span class="remove_img_preview"></span>';
$(_this).parent('.upload-section').next().append($(span));
};
reader.readAsDataURL(file);
evt.target.value = "";
});
$('.preview-section').on('click', '.remove_img_preview', function() {
$(this).parent('.preview-section').prev().show();
$(this).parent('.preview-section').remove();
});
});
$(function(){
var answer = $(".answer");
var clickable = $(".clickable");
answer.hide()
$(".file_container-orange").on("click", function(){
$(this).hide()
if(!answer.is(":visible")){
answer.show().addClass("clickable")
}else{
answer.hide();
}
})
//EXTRA:: makes the button and answer toggle on click
$("body").on("click", ".clickable", function(){
$(this).hide();
if(!answer.is(":visible")){
$(".file_container-orange").show();
}
})
})
and also you can check the link and see, more on it
https://plnkr.co/edit/jtUvlq4lClyfFHrFmzzO?p=preview
But don't know how I can make it return to how it was before when I will click on the check box.
To check the checkbox when click on the orange box, use this below code after the line
answer.show().addClass("clickable")
$("[type='checkbox']").prop("checked", "checked")
But don't know how I can make it return to how it was before when I will click on the check box. Use the below code:
$("body").on("change", "[type='checkbox']", function() {
if (!$(this).prop("checked")) {
answer.hide();
$(".file_container-orange").show();
}
})
Please refer the working sample here https://plnkr.co/edit/5Wy6rNkATY3cbT8v4RWH?p=preview
Related
Text Selection and highlighting is not working when I want to select the text on clicking of a dynamic button, but it works when I directly select the text from paragraph (on mouseup) itself. (see JSFiddle for complete code)
I have generated dynamic buttons for each tag with various color, eg. Tag1-Green, Tag2-Blue, Tag3-Red,...etc
So when user clicks on :
Tag1 button, selected text from the paragraph should get highlighted in the green color
Tag2 button, selected text from the paragraph should get highlighted in the blue color
Tag3 button, selected text from the paragraph should get highlighted in the red color
...etc
var getSelectedText = function() {
var selectedRange ="";
try {
if (window.getSelection) {
selectedRange = window.getSelection().getRangeAt(0);
} else {
selectedRange = document.getSelection().getRangeAt(0);
}
} catch (err) {
console.log(err)
}
return selectedRange
};
function highlight(){
//Below Commented code works fine
// $("p.raw_text").on("mouseup", function(e) {
// e.preventDefault()
// var selection = getSelectedText();
// alert("Selection: " + selection);
// });
//But this code does not work as buttons with id that starts with highlight are dynamically generated
$(document).on('click', '[id^=highlight]', function(e) {
e.preventDefault()
var selection = getSelectedText();
alert("Selection: " + selection);
});
}
$(function(){
highlight();
});
P.S Highlighting of the text is not yet implemented as I am not getting the selected text to highlight it..
EDIT
Note - I am trying to build a data annotation tool to annotate my machine learning training data. What it does is, it allows users to select the NER text to be annotated and mark it with specific label(or tag). Ex. selected text could be a person's name from the paragraph, then user should click on the Tag (Person) and highlight the selected text from the paragraph with some color, similarly there could be any number of Tags(labels) in the paragraph such as organization, city, country, etc User should be able to highlight each NER with specific color. (which further, I will pass that resultant data along with its highlighted indexes to build a machine learning model.)
Below code perfectly worked for me as I moved button click inside paragraph click.
function highlight(){
$(document).on('click', 'p.raw_text', function(e) {
e.stopPropagation()
var selectedRange = getSelectedText()
$(document).off('click', '[id^=highlight]')
$(document).on('click', '[id^=highlight]', function(ev) {
var text = selectedRange.toString();
if(!text)return;
console.log(selectedRange.toString())
hiliter(text, e.target, $(ev.target).data())
});
});
}
function hiliter(word, element, data) {
console.log("data", data.color)
var rgxp = new RegExp(word, 'g');
var repl = '<span style="background-color:'+ data.color +';">' + word + '</span>';
element.innerHTML = element.innerHTML.replace(rgxp, repl);
}
P.S- With my little knowledge of jquery, I am not sure if I am doing it right way. Please verify someone. Thank you
I am creating a Private Messaging system, and I wanted to make it start with a textbox for the "To" field, then when you click out of it for the first time (it starting as a text box) it turns into a Link such as this:
POC0bob (edit) and when you click the Username, it will take you to their profile in a blank tab, when you click the edit it all goes back to a textbox.
Link to jsfiddle with what I have so far.
$(document).ready(function() {
$('a.edit').click(function () {
var dads = $(this).parent().parent();
var dad = $(this).parent();
dads.find('label').hide();
dad.find('editusnm').hide();
dads.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
});
I sorta stole that code, and edited it from another stackoverflow question, but it didn't help much.
That is kind of the basic idea I have, but I need the textbox and link to change based on the value of each other.
You can change the text and href attribute of the link on focusout by updating the focusout function to this:
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
// Get username
var username = $(this).val();
// Set the jQuery object to a variable so we're not getting it twice
var $usernamelink = $('#username');
// Set the link text to the text box value
$usernamelink.text(username);
// Set the link href incorporating the textbox value
$usernamelink.attr("href", "/Profile/?user=" + username + "");
});
Then add an id to your anchor:
<p class="text-info"><a id="username" href="/Profile/?user=[Username]">Username</a></p>
See this Fiddle: http://jsfiddle.net/j2sgdx22/
I am building a WYSIWYG rich text editor.
When the user selects a portion of his/her text, I would like to present a menu in a tooltip. Presenting the menu works fine but I would like to only show it if the user hovers over the selected text.
As Illustrated:
I also haven't decided on positioning (I like the way that it's illustrated) but to clarify, that's not the point of the question.
The question is: How do I filter for a hover event that happens over selected text?
The Problems:
I can't just listen for a text selection event or test hover events to see whether they are over elements that have selected text inside them. The left image would generate a false positive with that.
I know how to get the selected text but I don't know how to get the selected region.
To my mind, the ideal solution is somehow to calculate the region of the selected text and test whether mouseover events happen in that region.
On mouseup, use Range.getClientRects to grab the bounding rectangles of each line of the selection.
You can then test if the mouse is over the selection like this:
var cr= [];
$(document).on({
'mouseup': function() {
cr= window.getSelection().getRangeAt(0).getClientRects();
},
'mousemove': function(ev) {
//hide the pop up
for(var i = 0 ; i < cr.length ; i++) {
if(ev.pageX >= cr[i].left && ev.pageX <= cr[i].right &&
ev.pageY >= cr[i].top && ev.pageY <= cr[i].bottom
) {
//show the pop up
break;
}
}
}
});
Fiddle
Try this way:
JS
$(document).ready(function () {
$(document).on("mouseup", ".conttext", function () {
var highlight = window.getSelection();
console.log(highlight);
var spn = '<span class="highlight">' + highlight + '</span>';
var text = $('.conttext').text();
$('.conttext').html(text.replace(highlight, spn));
});
$(document).on("mouseover", ".highlight", function () {
alert("You hovered on selected tex"); // Your tooltip code goes here
})
});
CSS:
.highlight {
color:#888;
position:relative;/*This will not matter if you inject tooltip using JS*/
display:inline-block;/*This will not matter if you inject tooltip using JS*/
}
HTML:
<div class="conttext">Sample text</div>
Demo: http://jsfiddle.net/lotusgodkk/BGKSN/202/
Okay here is what i have:
<script type="text/javascript">
var where = document.getElementById("info")
var texts = false;
function clear() {
where.innerHTML = "";
};
function dostuff(what) {
if(where.style.value === ""){
var comm = document.createTextNode(what);
where.appendChild(comm);
}else {
clear();
}
};
</script>
the id "info" is a div
this is basically a vertical navigation bar that shows tooltips in a div under the buttons when you hover over them.
So I want to first check if the div has no value then if it doesn't then it will append text into it, else it will clear the text but i also want it to append the text after it clears. I'm not sure how to do this and help would be appreciated. thanks
Since you want to clear the item anyways and put your new text in, why even bothering with the conditional? You could just as easily do:
function dostuff(what) {
where.innerHTML = what;
};
Working example
I am learning JavaScript and testing things. I have made a text-area which takes some html code and prints the result out.Its working well but I want that whenever a tag is typed like <h1> the color should change from white to red. This is my code which does not do so, Please help me in fixing it ..
Code:
<script>
$("#_co").on("input propertychange", function(){
$("#out").html($("#_co").val());
var text = jQuery("#_co").val();
if (text.contains("<")){
text.css('color','red');
}
}); </script>
There no direct way to achieve the same, but this would help you work around
jsfiddle
Pls have a look
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<div>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
viewableText.click(divClicked);
}
$(document).ready(function() {
$("div.div").click(divClicked);
});
Something like this one below?
Fiddle
$("#dummy").blur(function(){
var color = $(this).val()=='' ? 'red' : 'white';
$(this).css('background-color', color);
});