I'm using the packery library for Angularjs from here. It works fine but I found out that I cannot edit the textarea content when I click on it. After spending some time I was able to make it editable when I right click on the textarea element, but it still doesn't work if I click on it. So now I'm trying to manually trigger the right click event when I click on the textarea so it makes the element editable.
Here's the code
<packery ng-model="files" gutter="12" style="border:0px solid black;width:710px;" >
<packery-object ng-init="user_text='Write something ...';" class="large text sans-font medium-font box-border-raduis">
<div class="hidden-overflow sans-font medium-font" style="clear: both; border: 0px solid purple;
background: white; border-top: 6px solid #00a2d3; padding: 10px; ">
<textarea id="Mytextarea" contenteditable="true" style="margin: 0px;"
ng-click="click();"
>{{user_text}}
</textarea>
</div>
</packery-object>
</packery>
and here's the click() function that tries to trigger the oncontextmenu (right click) event:
$scope.click = function(){
console.log('clicked!');
var e = angular.element(document.querySelector('#Mytextarea'));
console.log(e);
angular.element(e).triggerHandler("oncontextmenu");
};
But this solution doesn't seem to be working. What am I doing wrong?
I would definitely recommend finding out what is preventing you to focus on the textarea since clicking on it and focusing is the default behaviour, however, you can try to instead of having a div wrapping the textarea use a label where the 'for' attribute is the textarea's id e.g:
<label for="Mytextarea" class="hidden-overflow sans-font medium-font" ...>
Textarea here
</label>
I'd usually not accept this since label is an inline element and textarea is a block element but in your case it might help you.
For tracking what is preventing you to focus I'd recommend right click on the textarea > inspect element, and then on the elements tab of Chrome dev tools look for the 'Event Listeners' tab (should be around the right corner of the window) there should be able to see all listeners that have been bound to that element and might help you track the source of the problem.
Related
I would like to remove the focusable HTML tags' outline only when focus is triggered by a click event. This means I would like to keep outline for tabbing.
Does anyone know a practice or library I could use here?
If not, my idea is attaching an event listener to window that listens to click events and is nullifying target style outline on focus in the global styled component.
Is that a viable solution?
(Using React)
You don't need a library or JavaScript to do this. CSS has you covered.
Use the focus-visible pseudo selector to help you out.
*:focus-visible {
outline: 3px dashed rebeccapurple;
outline-offset: 3px;
}
<button>Click me to see no focus but tab to me and you will see my focus</button>
<br>
<button>Click me to see no focus but tab to me and you will see my focus</button>
I would like to learn more about the "HTML contenteditable =' true '" attribute and the javascript focus () function.
For example, I would like to know how I can influence the position of the focused line or how to edit the background of a focused line.
I have already googled some things but I can't find the right information.
Does anyone have a good tip?
You can check which element is on focus by writing in the Google Chrome console:
document.activeElement
The contenteditable attribute specifies whether the content of an element is editable or not.
If you want to trigger the focus on a contenteditable element you can do it by:
$(".contenteditableClassName").focus();
Any other background change on this element is done by CSS for example you can use
.no-touchevents &:hover, &:focus, &:active {
border-color: white;
color: blue;
You can apply different changes on the element on focus this way.
Also you can remove the focus border on click by using:
.pointer-focus &:focus {
outline: none;
}
The following code shows a disabled textbox wrapped in a div with a jQuery UI tooltip attached to it. The jQuery tooltip will be shown properly in Chrome, Safari and IE when hovering the textbox (or, more precisely, the textbox covered div) but not in Firefox (28.0). Can somebody explain this behaviour and offer a fix? I know that event are generally not fired on disabled elements, so that's why it is bound to the wrapping div.
HTML:
foo
<div id="container" title="Tooltip test"
style="background: green; display: inline; position: relative; z-index: 10">
<input id="box" type="textbox" disabled="disabled" value="baz"
style="position: relative; z-index: 1"></input>
</div>
bar
JavaScript:
$("#container").tooltip();
Here is a jsfiddler
I found a trick. you can use display:inline-block; and background:transparent; and add the trick which is padding:2px; to the #container div. and it will work the way you want ;)
http://jsfiddle.net/banded_krait/TAD2w/33/
You are correct, disabled elements do not fire jQuery mouse events, and because of this, your tooltip is still not firing.
If you hover over the little green sliver on the right side of the textbox, it does fire. One solution to this is to move the textbox behind its container onDisabled.
input[disabled]
{
z-index: -1;
}
Obviously, this has the limitation of the background needing to be transparent if you want to still see the element, however, it does work in firefox.
JSFiddle
Solution:
type about:config in firefox address bar and press enter search for below option browser.chrome.toolbar_tips and toggle it.
Go to "about:config" and toggle "browser.chrome.toolbar_tips" to "true".
Rahul
What I'm trying to do is make it so that, when a user clicks in the textarea, it expands the div to show the 'Post' button.
Here's a picture of what I mean:
So, when the user clicks in the textbox area, I need the background div to expand and show the 'Post' button.
Here's the JSFiddle I started: http://jsfiddle.net/MgcDU/6018/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary" type="button">Post</button>
<div class="clearfix"></div>
</div>
CSS:
textarea {
margin-bottom: 0;
}
.btn {
float: right;
margin-top: 12px;
}
.container {
margin:20px 0 0 20px;
}
.well {
width: 476px;
padding: 12px;
}
I have no JavaScript experience, but I think this is a simple enough project to look at when finished to be able to understand the basics.
Add the following to your markup and styling and include the script.
HTML
<button class="btn btn-primary btn-toggle" type="button">Post</button>
CSS
.btn-toggle{
display: none;
}
Javascript
$("textarea").click(function(){
$(".btn-toggle").slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(".btn-toggle").slideUp();
}
});
This segment of Javascript binds click event handlers to the textarea and the document. The event handler bound to the textarea simply slides down the button to make it visible.
The event handler bound to the document is fired on every click on the page since the click events propagate up the DOM to the document. Once the document fires the event, the handler checks to see if the target (aka element clicked) has a parent inside the well. If it does we do not perform any actions since we do not want to hide the button when the user clicks inside the textarea or the button itself. If the click is outside of the well we call the slideup function on the button to hide it in a stylish manner.
Working Example: http://jsfiddle.net/MgcDU/6025/
Kevin's answer is the one you want, but I was just feeling experimental with some CSS I had, so I just wanted to post it. This is a fadeInDown button. You may want to host the CSS on your website. I just used some code I had. You can change this fiddle to fadeIn or something else (just search Google for animate.css). http://jsfiddle.net/shaansingh/MgcDU/6024/embedded/result/
Seeing as though Nested Anchor Tags are not possible, could Javascript be utilized to have a Div Box hyperlink to Page-A, while having a word of a Text within the Div Box hyperlink to Page-B?
Have tried working with the following Javascript (works for hyperlinking the Box or the Text, but not both):
<script type="text/javascript">
// Content-Link Click Events
$('.content-link-page-a').click(function(){
window.location.href = "page-a.html";
});
$('.content-link-page-b').click(function(){
window.location.href = "page-b.html";
});
</script>
Here's some CSS:
<style>
.box {
height: 50px;
width: 100px;
border: 1px solid #000;
}
</style>
And here's the HTML:
<div class="box content-link-page-a">
<div id="username" class="content-link-page-b">UserName</div>
</div><!--/box-->
You should remove the A from around the inner DIV, give it a bigger z-index than the outer, and handle the inner click event with calling event.stopPropagation to prevent bubbling of the event to the outer div. Here is a fiddle to solve the task.
Sample for the inner handler:
$('.content-link-page-b').click(function(e){
alert("page-b.html");
e.stopPropagation();
});
EDIT: In my comment above, I mentioned e.preventDefault() call. I didn't mean that, because that means the native DOM element's handler will be prevented, and not the jQuery event bubbling.