JavaScript: Expand area on click - javascript

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/

Related

How can I enable/disable an element's click handler with CSS?

I am using it in JavaScript to enable and disable a div element:
$("#divbutton").css("pointer-events","auto");
But I want a property that enables and disables the element. How can I do that?
html
<div class="buttonSender" id="divbutton">Invia</div>
While I strongly recommend using a <button> instead of a <div>, I can think of one case where you might not be able to change the HTML markup to do that.
I start below with the case you should strive for, using a <button> for a button, but follow further below with how you can "disable" a div that is acting as a button.
You can make a div act like a button by adding a click handler to it, then disable it simply by adding a class with the proper CSS, mainly by disabling pointer-events.
Here, the <div> is acting as a button by using a class, and it gets disabled by adding another class, "disabled". The click handler on the div demonstrates it is clickable by using an alert, and you will see that it no longer reacts to clicks when the "disabled" class gets added to the div.
$('#divbutton').click(function(e) {
// This is where you would put your code that
// does something when the div is clicked.
alert('The Fake Button was Clicked');
});
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').addClass('disabled');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').removeClass('disabled');
});
div.buttonSender {
margin: 1px;
padding: 4px;
border: 1px solid darkgray;
border-radius: 2px;
max-width: 20em;
pointer-events: auto;
color: black;
background-color: peachpuff;
}
div.buttonSender.disabled {
background-color: lightgray;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="divbutton" class="buttonSender" role="button">
This is the div that is acting like a button.<br> Click Me
</div>
</section>
<section class="demo-buttons">
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
I've added the role="button" on the div for the purposes of accessibility, but that is not all you would have to do for proper accessibility — see the "Note:" in the ARIA: button role documentation.
You would be much better off using a <button> instead of a <div> since you are able to put any HTML in the button tag that you could put in the div.
The only reason (that I can think of) that you would "have to" use a div is if the HTML is written by someone else and you have no access to change it and no way to influence the author of the HTML.
In that case you also aren't able to add classes or an ID, or write any new CSS, and would have to work with what is already there.
This demo does that by modifying the CSS using jQuery's .css() method, disabling then restoring the pointer-events — note jQuery uses the camelCased property name, so it is pointerEvents not pointer-events.
/*
* This is NOT your code - this would be the click handler that already exists.
*/
$('#divbutton').click(function(e) {
// Assume there is already a click handler, and you want to disable it.
// This code would be the existing handler, somewhere else, not written by you.
alert("Invia was clicked");
});
/*
* This would be your code, and it wouldn't be packaged with the code above
*/
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').css('pointerEvents', 'none');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').css('pointerEvents', 'auto');
});
#divbutton {
border: 1px solid darkgray;
border-radius: 2px;
padding: 5px;
max-width: 5em;
}
#demo-controls {
margin-top: 2em;
border-top: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<p>
This area would be part of the page that you don't control.<br>
The div acting like a button is below, and you can't change it.
</p>
<div class="buttonSender" id="divbutton">Invia</div>
</section>
<section id="demo-controls">
<p>
This area would not be part of the HTML, over which you have no control,
but somehow you need a way to fire your code that disables the existing div#divbutton
<br>
There needs to be <em>something</em> that fires your javascript;
these buttons simulate that.
</p>
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
Try creating a CSS class with the value of pointer-events that you want like in the following example:
document.querySelector('button').addEventListener('click', () => {
document.getElementById('divbutton').classList.toggle('disabled');
});
#divbutton.disabled {
pointer-events: none;
user-select: none;
background:yellow;
}
#divbutton {
height: 2rem;
}
<div class="buttonSender" id="divbutton">Invia</div>
<button>click me</button>

Trigger oncontextmenu event in textarea element Angularjs

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.

Clicking link inside div firing div's onclick

I have this simple issue: a div that contains a link, and the div has an onclick function defined. However, when I click the link, I just want to follow the link, and not fire the containing div's function.
Fiddle
HTML
<div>
Google
</div>
JQuery
$('div').click(function() {
alert("test");
});
CSS
div {
height: 100px;
width: 200px;
border: 1px solid red
}
So here, when I click the div, an alert is shown: that's fine. When the link is clicked, I don't want the alert to show.
How to avoid this?
You can apply event.stopImmediatePropagation(); to the link. According to the API, this keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree (https://api.jquery.com/event.stopimmediatepropagation/).
Here is the fiddle: http://jsfiddle.net/dxrdrqrc/

jQuery Traversing and simple code?

Okay, before I ask this question. Let me explain my goal: I want to write as little code as possible, and still be able to have tons of functionality at the same time. I have coined this as 'beautiful code' to myself and colleagues.
Here's the problem: I want to click a box, and a panel to fade in with the desired content based on which box I clicked. Except that I cant use two classes and cannot re-use id's.
Here's the code: http://jsfiddle.net/2Yr67/
$('.maingrid').click(function(){
//'maingrid' fade out
//'panel' fade in with proper content
});
I had two ideas that would please me.
A) Have one panel fade in, and content fill into the panel based on which 'maingrid' box that was 'click'ed
B) Have a specific panel with the content fade in, based on which 'maingrid' was selected
I'm not asking for you to do it for me, simply push me towards the syntax needed to do what I want
Thanks in advance!
The first thing to do is to move your panel HTML elements closer to the maingrid elements. This allows you to hide/show the correct elements in order. Having all of the panels in their own separate element causes you to do DOM manipulation should shouldn't need to do. For simplicity, I put each panel right after the maingrid element that it was associated with it.
HTML Structure
<div class=".mainContainer">
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
</div>
I added the panel class to have the same CSS as maingrid, as well as make it invisible at the start:
.maingrid, .panel {
height: 345px;
width: 345px;
float: left;
/* [disabled]background-color: #000; */
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
overflow: hidden;
}
.panel{
display:none;
color:white;
}
This will fade out the current element clicked and fade in the next panel element.
$('.maingrid').click(function(){
var $that = $(this);
$(this).fadeOut(function(){ //This will wait until the fadeOut is done before attempting to fadeIn.
$that.next().fadeIn();
});
});
$('.panel').click(function(){
var $that = $(this);
$(this).fadeOut(function(){
$that.prev().fadeIn();
});
});
There also seems to be a bug where the hover does not show the text on the first hover event.
JSFiddle: http://jsfiddle.net/mDJfE/

JQuerymobile on an iPad: vclick triggers a scroll to the top of the page, then executes the vclick

SUPER SHORT VERSION:
Elements on a jQuerymobile-based html5 webapp don't respond directly to vclicks on an iPad. Instead, they silently scroll to the top of the page and trigger a vclick on whatever's under the same region of the screen.
LONG VERSION WITH PICTURES AND CODE:
I'm using JQuerymobile and I'm having a problem with my page responding to some vclick events when I'm using my iPad. I've got a page with a bunch of elements that are bound to respond to vclick events. If everything fits onto my iPad's display without scrolling, everything works perfectly. If I need to scroll to see the element I want to click, I get the following behavior:
I tap my finger where the red circle is here:
The page flickers and the page responds as if I clicked the area in the little blue circle:
(blue circle image redacted for lack of hyperlinks to noobs (It's Q43ri.png on imgur)
I was confused as to what the heck was happening until I superimposed the screens:
So when I click one of my divs, it seems like it's paying attention to the coordinates I click on the display, but then scrolling to the top of the window and actually executing the click from that perspective. How do I fix this?
Here's the html for that section of the page:
<div id="inventoryPageContainer" style="padding-right: 100px;">
<div id="inventoryDisplayHeaders">
<div class="inventoryPageName inventoryPageColumn header">Name</div>
<div class="inventoryPageQuant inventoryPageColumn header">#</div>
<div class="inventoryPageWt inventoryPageColumn header">Wt.</div>
</div>
</div>
<div id="inventoryTemplate" class="inventoryPageRow" style="display: none;">
<div class="inventoryPageName inventoryPageColumn">Template Item Name</div>
<div class="inventoryPageQuant inventoryPageColumn">#</div>
<div class="inventoryPageWt inventoryPageColumn">X lb</div>
</div>
<div style="clear: both; border-bottom: 2px solid black;"></div>
All of the divs are clones of that inventoryTemplate item. If you need the CSS for that (I don't know man, I'm trying to give anyone reading this all the info I've got):
#inventoryPage .inventoryPageName {
width: 100%;
}
#inventoryPage .inventoryPageQuant {
width: 50px;
margin-right: -50px;
vertical-align: middle;
}
#inventoryPage .inventoryPageWt {
width: 50px;
margin-right: -50px;
right: -50px;
vertical-align: middle;
}
Here's the event binding code:
templateCopy.find('.inventoryPageName').text(row.itemName).bind('vclick.inventoryPage', { row: row }, generateItemDescriptionDialog);
templateCopy.find('.inventoryPageQuant').text(row.quantity).bind('vclick.inventoryPage', { row: row }, generateItemQuantityDialog);
generateItemDescriptionDialog and generateItemQuantityDialog both set some values on some dialog pages and then trigger the dialog pages to show with $.changePage("#thepages").
So uh.. why's this happen and how do I make it not happen?
(It's an RPG character sheet webapp if anyone's wondering why I'm cataloging weapons and guns.)
I think my problem was how I wrote my event handlers. I went through and added:
if (event.preventDefault)
event.preventDefault();
to the beginning of each handler and made sure the handlers returned false. Admittedly, I don't know precisely what this did, so I'm cargo-culting a bit here, but it did solve the problem.

Categories