I am currently making rich text editor with maths equation writing.
As per above image you can see yellow marker which is mathquill-editable span.
and i made button with containing some maths symbols.
What I want!!
When user click button than equation should be print at cursor location.
I selected mathquill-editable span with class.
example $('#classname') for write equation from button.
Its works fine but problem comes when I add another mathquill-editable span.
When multiple span are there than every time when i click button than their value printed in every class at same time.
How I detect particular span is active and value will print on cursor's span only.
This is my little efforts to find just one element from all class.
$(document).ready(function(){ /* when the page has loaded... */
$('.mathquill-editable').click(function(){ /* ...bind click event to .boxSet elements */
$('.mathquill-editable').removeClass('hilite'); /* On click, remove any 'hilite' class */
$(this).addClass('hilite'); /* ...and add 'hilite' class to clicked element */
});
});
DEMO HERE
Related
I want to make something like Grammarly, exactly like this:
The text is in a textarea, and a div for highlighting is under it, when I click on the red line, the correction card appears, but with z-index of the div less than the textarea's one, I am losing the events on it !
How can I implement such thing ?
If Element A has a lower z-index than (ie. is underneath) Element B but Element B has the following applied (either in the initial stylesheet or later, dynamically):
element-b {
pointer-events: none;
}
then any user clicking on Element B will actually be clicking on Element A.
Essentially the click goes straight through the element which cannot take pointer-events and instead hits the element beneath.
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Solved. The answer to the question bellow was given to me by #freedomn-m and to found there: Set focus on div contenteditable element
For a Rich Text Editor using an editable div:
I wish the caret to be showing again in the div after, for example, a click on the font size selector. I thought that giving back the focus to the div would be enough but it isn't. Maybe I could save the position of the caret and set it back at its right position after the interruption. But something tells me there must be a much easier way to do that... Maybe something in jquery? So far I've got that:
$("#fontSizeChanger").change(function(){
var newSize = $("#fontSizeChanger").val();
$("#editor").css("font-size", newSize);
$("#editor").focus();
});
"fontSizeChanger" is the id of a drop-down box and "editor" the id of the div.
Any ideas?
Update: What I really want is to see the caret blinking in the div after for example I clicked on a button outside of it.
I'm trying to attach click events to a couple of divs. One of which has no height or width, just borders. Maybe it's just the browser, but the clicks are being triggered very unreliably. Even the css parameters .class:hover{} isn't really working.
$("body").on("click", "._tlh_dropdown, ._tlh_dropdown *", function (event) {
isn't working when the a div contained by ._tlh_dropdown is clicked. And the div ._tlh_dropdown_close_button is not removing it's parent div when clicked, nor turning a darker shade of gray when it is hovered over. What am I doing wrong here? I assume it has to do with the click event not being applied to the areas of the divs that are "just padding". Is this the case? How can I overcome this?
http://jsfiddle.net/UrNUM/7/
This is happening because the underline element that is a div element overlaps the elements in question . As you know div is a block level element.
One work around is to to set the 2 divs to inline-block
._tlh_dropdown_input_container, ._tlh_dropdown{
display: inline-block;
}
Check Fiddle for hover
If you want the div to be block level as it is then you can also play around with the z-index
._tlh_dropdown_close_button{
z-index: 1;
}
This will make sure the close div is always on top of the underlying container
UPDATE
2 events fire for every click event on the page..
So the content is not shown when u click on the image because of this condition
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown_content').length)
return;
This happens because the e.target when you click on the arrow image will be the arrow and not the tlh_dropdown .. So it fails on this condition and moves to the next statement where the content is removed.
Change it
if ($targ.hasClass('_tlh_dropdown')
|| $targ.closest('._tlh_dropdown').length
|| $targ.closest('._tlh_dropdown_content').length)
return;
It should work..
Check Fiddle
Also I feel the same can be accomplished with a lot less code. You can always have the HTML already built and then hide or show based on the condition.
Regarding the close button, if you hover "_tlh_dropdown_input_container" in the inspector, you can see that it overlaps the bottom part of the X button. That's why the hover/click event on the X is not caught below the middle of it.
Regarding the down arrow, just wrap it with another DIV on which you'll add the events. You can achieve minimal HTML by using a single DIV and adding the arrow to it using CSS :before or :after.
I'm realy new to css and jquery and I need help for my project.
I have 3 buttons: disadvantage - average - advantage and I need to make this buttons to work like radio buttons so if I click on disadvantage this button change background color and other butons lose colors if was clicked on him. and disadvantage button get red backrground color.
If I click on average button, this button must get yellow color and other lose color if was clicked on him before
-If I click on average button this button must get green background color and other buttons to lose color. so like radio buttons
BUt I try to do that based on #ID's
$('#price_quality_adv').css('background-color','#C90');
$('#reliability_adv').css('background-color','#C90');
http://jsfiddle.net/EC44Z/5/
please help. sorry for my english
THANKS!
Seems to be a scope issue of some kind, not sure if it is exclusive to jsFiddle environment. When I make this change, it is fixed (for the advantage button at least)
setQuality = function(qulaity, type_rating, name)
Fiddle: http://jsfiddle.net/EC44Z/8/
There are still some other issues however, the code is a little complex. It is better to do something like...
HTML
advantage
CSS
.button{ /* styles for all buttons */ }
.selected{ /* styles for selected button */ }
JS (jQuery)
$("#button_advantage").on('click',function(){
$(this).addClass('selected')
$(this).siblings().removeClass('selected')
})
Summary
The code should be separated, so it is easier to maintain, works well in various environments, and gets good search ranking etc...
HTML is for content, and should be marked up as such, with appropriate classes to group similar items, and unique id for relevant elements.
CSS is for style, and all styles should be kept together there where possible.
JS is for dynamic functionality, so in this case, adding a class, so that the style changes.
I'm making something where a textarea gets more and more text appended. In firefox, the textarea scroll back up to the top each time.
I currently have something like textarea.scrollTop=1000000; to scroll it back down each time it changes, but it still goes up to the top for a very short time.
Is there any way to stop it doing so?
I ran into this problem, too. It happens in IE and Firefox but not Opera and Chrome.
I thought of hiding the momentary jumps to the top by "double-buffering" changes to the textarea:
Create two textareas with the exact same properties and dimensions. Only one of these is visible; the other one is hidden.
Append text to the hidden textarea: set [the value of the hidden textarea] to [the value of the visible textarea] + [text to append]. (The textarea will automatically scroll to the top, but this textarea is hidden!)
Scroll the hidden textarea to the bottom: set scrollTop to a high integer value like (-1 >>> 1).
Swap the hidden textarea with the visible one. Now the new text is shown, sans jumping to top!
You can swap the hidden/visible textareas by using one of two methods:
Use absolute positioning to place the textareas on top of each other in conjunction with toggling their visible property.
Swap the actual DOM elements. I'm not sure if this will introduce a new type of "flicker." You may have to create a div to contain the visible textarea so the layout of the page doesn't keep changing...
i thing that is problem of adding the content via the script, paste your code which append text to your textarea