Problem with Css & Javascript - javascript

I am having nested DIV's. Below is the Example.
<div id="one">
<div id="two">
</div>
</div>
I am calling a javascript function when we click on div one and div two.
Now the problem is sometimes the size of div two is large so that div one goes behind div two. Actually if i click div two i want to call both div one and div two. Since the javascript function name is dynamic, i am stuck.
Any idea how to call both js functions when we click div 2.

You might find the discussion here interesting. It gives good explanation and examples of event bubbling and propagation.

At the end of div 2's click handler, you could call div 1's.
UPDATE:
What I meant is you could fire a click event on div 1 when div 2 is called.

using jQuery you could do something like this
$('div2').click(function() {
$(this).parent().click();
}

Related

Jquery Select one object but hide others of the same type

I'm new to programming and I've never posted on here before but this problem should be fairly simple yet I can't get it. It goes beyond the basics for me. I have 5 objects all with the same div class. I've experimented with hiding classes and such but my goal is to use an event handler and jquery selectors to select the one object and hide or detach the rest. My code is probably pretty ugly but I'm working toward an answer.However once the object that wasn't hidden is clicked again I want the others to reappear.
Check this out:
.not(this) selects every other element of the common class except from the selected one
.toggle() keeps changing the elements' status from hidden to visible and back forever...
$('.aa').click(function(){
$('.aa').not(this).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aa">1</div>
<div class="aa">2</div>
<div class="aa">3</div>
<div class="aa">4</div>
<div class="aa">5</div>

Which one is best for performance in jquery select class names vs id's

I have along div's for accordion menu with each has id's likes
<div id='sampe_1' class='sample'></div>
<div id='sampe_2' class='sample'></div>
<div id='sampe_3' class='sample'></div>
<div id='sampe_100' class='sample'></div>
For expand and collapse
To find all div's i am using below two methods
$("div[id^='sample_']");
I got all 100 div no i loop 100 times and click event
or
Direct click event with class name
$('.sample').on('click');
In above both which one best or any better process
In this case $('.sample').on('click'); would be faster because with the id's a RegEx has to be executed for every element while for the class every element is just collected for that class only. So there is no comparison happening when binding the click event to the DOM element.

how to toggle a div on click at different div?

I am trying to toggle a div by clicking on a different div. The only relation that two divs share is that they are inside the same div. I have a DIV class comment which holds DIV class button that is supposed to toggle DIV class box when clicked. The box DIV is also inside the comment DIV. I am trying to use jQuery(this).find(".box").toggle();, but it is not working. I am triggering it with $( ".button" ).click(function(). The script is currently at the bottom of my body.
Could anyone please tell me what am I doing wrong here? I've been playing around with the function for a while now, but with no luck at all. Thank you in advance for your replies.
JSFIDDLE here
HTML
<div class="comment">
<div class="button">
show/hide .box with text1
</div>
<div class="box">
text 1
</div>
</div>
<div class="comment">
<div class="button">
show/hide .box with text2
</div>
<div class="box">
text 2
</div>
<div>
jQuery
$( ".button" ).click(function() {
jQuery(this).find(".box").toggle();
});
You can use the jQuery selector .siblings() to re-write your function like this:
$( ".button" ).click(function() {
$(this).siblings().toggle();
});
Here's a working fiddle to demonstrate.
All you really need to do is this:
$(this).parent().find(".box").toggle();
In short, change:
jQuery(this).find(".box").toggle();
To ONE of the following lines:
$(this).parent('.comment').find(".box").toggle();
$(this).closest('.comment').find(".box").toggle();
$(this).siblings(".box").toggle();
Full Explanation:
The reason it's not working is due to the call. Let's break down your call and see what exactly it's doing.
First we see a simple jQuery selector. This tells jQuery to look for a div containing the class button. Keep in mind, jQuery makes use of any CSS selector. So selecting an item in jQuery is as simple as using it's CSS selector!
$( ".button" )
Next you are assigning an event. In this case, that event is click, meaning you're telling a div having the class button to do something every time it is clicked. Keep in mind, however, not including a callback function is an easy way to trigger this event as well.
$( ".button" ).click(function() {
Now this next line is where your mistake takes place.
jQuery(this).find(".box").toggle();
The first mistake is the use of jQuery. after you're already making use of it's short sign, $. You only need use the elongated name if you are using jQuery's noconflict because another JS library you include might use $. In other words, if $('.button') works and is a jQuery object when used, then you don't need to use jQuery.. See more about this here.
Now, that aside, we can look at jQuery(this) as $(this). Whenever you use $(this) in an Event's callback method, you're referring to the element that the event was tied too. That means that $(this) in your function refers to $('.button'). The problem here is that you then want it to find an inner element containing the class box. Well according to your HTML, that can't happen since .box is a sibling, it is not within the inner HTML of .button. Thus you need to make a different call before you can find .box.
There are actually several solutions here. No solution is more "correct" than another, just simply different and possibly causes a different amount of "time" to run. Now I went with what I saw as being the most simple in that it gives you control over the parent element which contains ALL relevant elements to this function. I'll talk about possible alternatives in a minute.
$(this).closest('.comment')
The above line simply tells .button:clicked to look for the first parent element that contains the class .comment. In other words, this won't find any children or siblings, it will only go up from the current element. This allows us to grab the block that contains all relevant elements and information and thus make maneuvers as needed. So, in the future, you might even use this as a variable in the function, such as:
$('.button').click(function(e) {
var container = $(this).closest('.comment');
Now you can find anything within this element block. In this case you want to find box and toggle it. Thus:
$(this).closest('.comment').find(".box").toggle();
// Or with our variable I showed you
container.find(".box").toggle();
Now, there are plenty of alternatives based on your HTML layout. This example I've given would be good even if .box was buried inside more elements inside .comment, however, given your exact HTML, we see that .button and .box are siblings. This means that you could make this call different entirely and get the same result using something like:
$(this).siblings(".box").toggle();
This will allow our currently clicked and selected button element to look for ANY and ALL siblings having class box. This is a great solution and simple if your HTML is that simple.
However, many times, for "comment" type setups, our HTML is not so simple, nor is it static. It's usually something loaded after the page load. This means our general assignment of .click will not work. Given your exact HTML and not knowing a static Parent ID, I would probably write your code as:
$(document).on('click', '.button', function(e) {
$(this).siblings('.box').toggle();
});
What this does is allow for this click event to be assigned to ANY element containing .button for a class, whether loaded with page or even ten minutes after the page is up. However, the caveat often seen here is the assignment is placed on document. Should we assign a lot of events to document it could become quite convoluted and possibly slow down the client's browser. Not to mention the arguments held over all the other headaches this could cause. So here's my recommendation, make a static (loads with page, is a part of page's main HTML) loading area and do our dynamic assignment to that. For instance:
<div id"Comments"><!-- load comments --></div>
Then you can do the assignment as such:
$('#Comments').on('click', '.button', function(e) {
$(this).siblings('.box').toggle();
});
If you have any more questions, just comment!
Side Note .on is for jQuery versions 1.7+. If using older jQuery, use .live or .bind

javascript: function of a div in another div having another function

I have a nested div.
The child div is inside the parent div.
How can I distinguish the correct onClick function?
In this case, only the function of parent div is called no matter clicking where I click on the nested div.
<div class="portfo" onclick="showValue()">
<div id="cross" onclick="deleteValue()">
<img src='cross.png' height='15px' width='15px' alt='some'>
</div>
</div>
However, showValue is always called whenever I click on the children div.
delete is a reserved word. Try renaming that function to something else. Then both events should fire when click on the image. First the delete event and then the showval one
I think a library like jQuery can help you out here. Take a look at the .on() method.
I think your problem has to do with Event Propogation. This should help you solve it: Prevent event propogation
Also, delete() is a predefined function in JavaScript, you should rename it to something else, unless you're trying to use the built-in function, in that case, please look at the proper usage: delete

Clone a div and then clone again from the child

I have the following simple code, where I double click a div (with class container) and it's simply clones itself inside another div (with id containment-wrapper):
html
<span class="container">div one</span>
<div id="containment-wrapper">
</div>
Jquery
$(".container").dblclick(function() {
$(this).clone().appendTo('#containment-wrapper');
});
When I double click the original div, it clones itself and puts a div inside the containment-wrapper but when I double click a cloned div, it doesn't do anything even though it has class=container, why is this happening? I tried many different ways to clone it but nothing worked.
It's because the event handler isn't cloned. Use delegate instead:
$(".container").delegate("","dblclick",function() {
$(this).clone().appendTo('#containment-wrapper');
});
Because dblclick is not bounded to the new div. What you want to achieve can be easily done with live
$(".container").live('dblclick', function() {
$(this).clone().appendTo('#containment-wrapper');
});
Since you're dynamically adding div tags they aren't automatically bound to the .dblclick function you've specified. Using a live event handler is one way to solve this.

Categories

Resources