Make entire DIV block clickable - javascript

I have a script on my site and using jQuery it makes the variation-value div element clickable.
Unfortunately the areas with the p & div tags aren't clickable. Is there an easy fix for this?
jsfiddle example ::: http://jsfiddle.net/xb4qkdLu/ :::
<div class="variation-value">
<p class="left" style="background:green">left aligned text</p>
<div class="right" style="background:red">right aligned text</div>
<p></p>
</div>

What I'm seeing in the jsfiddle you posted afterward, is that you are binding the click to the td element within the variation class ($('.variation').on('click', 'td', function(event){...).
Based on what you wrote, and the comment I've left under your original post, hooking a click trigger listener to the .variation-value' class would solve this for you (as you've currently got no events tied to it).
If you would like to supplement you original script, you would either have to go around with some CSS "hack", by adding to the css of p and span within the td the following pointer-events:none; (will require some extra IE fine-tuning), or you could also add the other elements within the td to the trigger listener.
Code sample:
The CSS would be like (considering normal-case browser):
.variation-value > p, .variation-value > div { pointer-events:none; }
The Jquery would be:
$('.variation-value').on('click', function(event){ ... }
Do keep in mind that your left element is bound to reset your values list if it is visible (haven't found any trigger set for the right element). If you are enabling a click-through effect for all the elements within your .variation-values, you are losing the reset-effect bound to the left element. Is that surely what you are looking to achieve? If so, just go wihout the above CSS snippet, and you will have it all function as you would like.
Also just to note, in your HTML markup, you are putting elements in the following hierarchy:
div.variation-value
p[left]
div[right]
You aren't closing your p element before adding in the div for the right element that is it becomes a child of the p. I'm assuming you should've closed the p tag to ensure functionality as intended.

http://jsfiddle.net/hasecbinusr/pctgs5ke/
$(document).ready( function(e) {
$('.variation-value').click(function () {
alert('You clicked it!');
});
});

Related

How can I display further text after a div element is clicked?

Currently I am working on a personal project. You can see the website I am making so far here:
https://codepen.io/JoyFulCoding/pen/EzWyKv
The problem is that I am struggling to add the following feature. The feature is when a user clicks on any of the 6 colored boxes, a further information section should display like below:
I have tried adding a paragraph with an id that has it's display set to none initially. When the user clicks on one of the boxes, the corresponding text for that topic should be shown.
HTML
<p id="fbAdCampaignText> Example Text here </p>
CSS
#fbAdCampaignText {
display:none;
}
.display {
display:inline-block;
}
jQuery
$("#fbAdCampaigns").on('click', function(){
$("#fbAdCampaignText").toggleClass("display");
});
Note: i am using display:none instead of visibility:hide because I don't want the hidden text to take up space since if it did, it may mess up the structure of each of the 6 boxes.
However, this code doesn't seem to do what I want, that is, show corresponding further information depending on which 1 of the 6 boxes is clicked. How can I display further text after an element is clicked in this manner?
You meant this?
https://codepen.io/dravas/pen/NVgvgN?editors=1010
Just change
$("#fbAdCampaignText").toggleClass("display")
to
$("#fbAdCampaignText").toggle()
And if you want to trigger only that div that is inside clicked element then:
$(".fbAdCampaigns").on('click', function(){
$(this).find("#fbAdCampaignText").toggle();
});
Okay, a couple of things here. Firstly, you can't have more than 1 of the same id in your document, so if you have 6 of those paragraphs, lose the id and use a class instead.
Using an id also gives you specificity issues, where the .display class would still have been overridden by the id's styles.
The other thing is that in your jQuery, you're going to toggle the class on all of those elements if you use a class. You need to specifically toggle the class for the element you clicked, so use $(this) instead - to target the element you clicked.
HTML:
<p class="fbAdCampaignText> Example Text here </p>
CSS:
.fbAdCampaignText {
display:none;
}
.fbAdCampaignText.display { // you would have had specificity issues with the id otherwise
display:inline-block;
}
jQuery
$(".fbAdCampaigns").on('click', function(){
$(this).toggleClass("display"); // only target the clicked element
});

Getting the current div id in content-editable div(specific)

I am recently working on one of my projects and currently i am stuck in some problem. Well, i have made a content editable div where the user can type its input. This content_editable div contains several div's in which user has to type. I tried document.activeElement but it gives me the content_editable div not the specific div and that the one with id second_div
I want to know how to find that specific div in content_editable div where user is type.For example:-
<div contenteditable="true" id="content_editable_div">
<div id="first_div">
I am the first div
</div>
<div id="second_div">
I am the second div and i want to know if the focus is on me
</div>
</div>
My Javascript:
window.onload = function () {
getDivwhohasfocusincontentedtiablediv(); // Something like that
};
I can use jquery but only at the last choice. I want to use only javascript for this purpose.Please help me to solve this, i didn't find solution for this all the net ( it could be that i haven't searched carefully). Thanks in advance
One possible solution is to attach an Event Listener on each inner div to listen for "focus" event. However I found out that not all elements emit "focus" events.
JQuery docs says:
The focus event is sent to an element when it gains focus. This event
is implicitly applicable to a limited set of elements, such as form
elements (input, select, etc.) and links (a href). In recent
browser versions, the event can be extended to include all element
types by explicitly setting the element's tabindex property. An
element can gain focus via keyboard commands, such as the Tab key, or
by mouse clicks on the element.
Adding tabindex attribute to each inner div will make it possible to listen to focus events.
Example at JSFiddle. Note: I wrote the code in JQuery but it can easily be written in JS.
You can find focus element in js using this,
var focused = document.activeElement;
What about this ,
<div contenteditable="true" id="content_editable_div">
<div id="first_div">
First Div
</div>
<div id="second_div">
Second Div
</div>
</div>
$(document).ready(function () {
function onMouseUp(e) {
console.log(this.id);
}
document.getElementById("first_div").addEventListener("mouseup", onMouseUp, false);
document.getElementById("second_div").addEventListener("mouseup", onMouseUp, false);
});
Demo Here JS FIDDLE
to get specific div
in Javascript you can use
document.getElementById("second_div")
or using Jquery
$("#second_div")
make sure your id was unique. This is the fastest way to find obj in any browser.
now for getting getting the active div. why not put specific event whenever the div was clicked or edited. like:
$("#second_div").click (function (){
//raise flag or something
currentDiv = "second_div";
})
function getCurrentDiv()
{
//do something in currentDiv
}
or try also explore other event such as, on mouse over, on mouse leave, etc.
i hope that might help. other wise, please elaborate your question if I missed something.

How can I exclude this element from an inherited link?

I have a site at whensayfeed.meteor.com. Each of those "Posts" is a nested in a <a></a> element. The heart on the right side of each one is supposed to be a "like button" so it also needs to be clickable. However, since it's nested in an <a> it just goes to that address when clicked. I need a way to either exclude this element, or do this in some other way. I've tried to just nest the .chant element in the link, but it doesn't pick up that click. What do you believe I should do?
Nesting tags is illegal
Try making your like button a link that's outside of the post link. You can then use position: absolute to overlap your like button on top of the post.
Try this:
Set the z-index: 0; of .post-contain instead of previous z-index: -20;.
Have a function receiving anchor click events like so:
function onAnchorClicked(e){
if(e.target.nodeName==='IMG'){
console.log('Image clicked');
e.preventDefault();
}else{
console.log('Anchor clicked');
}
}
Assign the click event to all anchor tags: $('a').on('click',onAnchorClicked);
This way, you can do what you want to do when img is clicked.
Having said that, although HTML5 does allow block-level elements to be nested inside an anchor tag but legacy browsers will have a hard time.
A solution to that perhaps could be to have your posts wrapped around a div element instead of anchor which behaves like an anchor tag accompanied by a data-link attribute with values containing your links that you can populate from backend e.g.:
<div class="anchor-link" data-link="LINK GOES HERE">...</div> and then assign the click as described above (changing the selector obviously).
Hope this helps.

how to hide a div that is empty and another div associated with it which may or maynot be empty?

I have a speech bubble called philosophy bubble which is just a div styled to look like a quote bubble and the sharepoint control is what fills up the content of the bubble but sometimes the bubble may not have any text and needs to be hidden. Not just the bubble but also the text below which is like 'Mr. X's saying' should be hidden since the bubble is empty. How is is achieved in jquery?
<div class="philosophy-bubble">Quote goes here
</div>
<span class="credit">
Quoter..
</span>
Assuming you only want to hide the bubbles that have no text in them, you could do it this way:
$(".philosophy-bubble").each(function() {
if (this.innerHTML.match(/\S/)) {
$(this).hide().next(".credit").hide();
}
});
If you have access to the HTML, you could wrap both the <div> and <span> in a parent <div> tag. The parent could then be hidden.
$('.philsophy-bubble').parent().hide()
If you have access to jQuery (I see you tagged this jQuery), you can use the .next() function which gets the next sibling (vertically).
Something like...
$('.philosophy-bubble').hide().next().hide();

Keypress event on nested content editable (jQuery)

I have a CONTENTEDITABLE div and inside that div I have a CONTENTEDITABLE span, what I want to do is being able to handle the onkeypress event on the inner SPAN.
So, the javascript code would be:
$(function()
{
$('#someid').keypress(function(event){alert('test');});
});
And the HTML content would be:
<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>
If you test it on a browser you'll see you won't see the 'test' dialog when you press a key over Some TEXT, I know the problem is that the event is being triggered in the parent div, so the SPAN doesn't get the event, also because it doesn't have the focus. So I'd like your help to find a solution for this.
The exact code you posted in your question seems to work just fine at http://jsfiddle.net/gaby/TwgkC/3/
Tested and working with FF, Opera, Chrome, Safari, IE8 ..
only change is the removal of the comment which in its current form creates a syntax error.
The #someid need to have focus in order for the keypress to work.
If you want your code to give focus to the element right after creating it, use the .focus() method.
function AppendSpan()
{
$('#mydiv').append('<span id="someid" contenteditable="true">Some TExt</span>');
//Then I want to handle the keypress event on the inserted span
$('#someid').keypress(function(event){
//do something here
alert(this.id);
}).focus();// bring focus to the element once you append it..
}
Update
Two ways to handle this (the fact that there are nested contenteditable elements), not sure if any is acceptable for your case but here they are..
wrap the new contenteditable span in another one, which is set to have contenteditable="false"
(demo: http://jsfiddle.net/gaby/TwgkC/10/)
make #mydiv to not be contenteditable once you add the span..
(demo: http://jsfiddle.net/gaby/TwgkC/11/)
You might be better to bind the keypress event to the #mydiv element like this:
$('#mydiv').delegate("span", "keypress", function(){
console.alert('A key has been pressed: ' + this.id);
});
On further investigation though, it seems that DOM elements such as regular spans and divs are incapable of receiving focus. You may be able to get around this however, by adding a tabindex attribute to each span.

Categories