Develop Reference

Child div affects parent div in css and triggers jquery method

I have parent div with class a "very-big-div" that nests another "container-div" that by its turn also nests another child divs. The very big div's made to act like a button and the div that come right after it is a container that appears when I click the very big div.
<div class="very-big">
<div class="container">
<!-- Some other more nested divs that has anchors and buttons -->
<div class="friend-request">
<div class="button-div">
<button class="accept">Trigger</button>
<button class="refuse">Trigger</button>
</div>
</div>
</div>
</div>
The problem is 2 things first: the css problem has not yet been solved
I assigned a hover pseudo class for the "very-big-div", and whenever I hover the "container-div" the hover properties(background-color) is applied to the "very-big-div". This is not what I intend to make, I want to only hover "very-big" div for the hover to apply.
.very-big{
background-color:green;
}
The second problem is : I have a jquery that deals with the container so it is toggled on/off by the "very-big-div"
$(document).ready(function(){
$("#container-div").hide();
$("#very-big-div").click(function(){
$("#container-div").toggle();
});
});
the container has both anchor and button tags whenever I click the an anchor or a button inside the container it is toggled to close itself, and that is not what I want, what I want is just when I only press the "very-big-div" the toggle is activated.

Same as #Jhecht has given the answer, I have just inherited his to mine.
You can stop propagation of the click of child element that trigger toggle by using target and excluding all the child elements of your .very-big container as:
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
Code Snippet:
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>

This works for me, but I am not sure if it is what you need.
Please add in the minimum HTML, CSS, and Javascript needed to fully recreate the error you are seeing.
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
console.log(e);
var current = $(e.toElement);
if (current.is('.container')) {
e.stopPropagation();
return false;
}
$('.container').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>

Jquery Hover - allow hover on another DIV the appears on hover of a button

I have a homepage with 4 buttons. When hovered over a button, a menu appears behind the buttons. When you hover over another button, a different colored menu appears in it's place.
Currently, I can get the buttons to show the menus, but when I hover onto the menus (and hover off the button) I lose the menu.
Here's my simple code:
Jquery at top:
$(".mybutton").hover(
function () {
$(".mybox").fadeIn();
},
function () {
$(".mybox").fadeOut();
}
);
$(".mybutton2").hover(
function () {
$(".mybox2").fadeIn();
},
function () {
$(".mybox2").fadeOut();
}
);
And my HTML:
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
<div class="mybutton2">
/* Button 2 image here */
</div>
</div>
So I need some way to keep the box that fades in active when it is hovered over. I was thinking of not doing the callback for the fadeout, and somehow only doing the fadeout if they fade off the .mybox DIV or if they hover over another button. But it's a little unclear to me how to accomplish that.
Thanks in advance.

you need to include your menu and the button inside a container and have a hover event on the container. this way your menu will be visible as long as you're hovering over the container.
here's what you need to do.
declare the container like this with your menu and button both inside it.
<div id='container'>
<div class="mybox box">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
</div>
</div>
here's what you need to do in jquery.
$(document).ready(function() {
$("#container").hover(
function() {
console.log($(".mybox").fadeIn());
$(".mybox").fadeIn();
},
function() {
$(".mybox").fadeOut();
}
);
});
here's a working JSFIDDLE with 2 buttons

It's because you're no longer hovering over the button and instead going to a different element "mybox" so you could rearrange the html structure for it to work by keeping the menu in the button class like so:
<div class="buttons">
<div class="mybutton">
/* Button image here */
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
</div>
</div>
this should keep the menu active as long as the curser is in there.

I don't recommend this as a UI design pattern for various reasons (one of them being the complexity of implementing it); you could instead consider changing it so that the menu appears when the user clicks.
Having said that, here's a way to do it. Get rid of your existing fadeOut() calls and add this:
$("body").on("mousemove", function(e) {
var $hovered = $(e.target);
var $myButton = $(".myButton");
var $box = $(".myBox");
if ( $hovered.is( $myButton ) ) return;
if ( $hovered.is( $box ) ) return;
if ( $.contains( $box.get(0), $hovered ) ) return;
$box.fadeOut();
});
...and similar for button2. The basic principle is this - whenever the mouse moves, we check whether the mouse is hovering over the button, or the box, or over an element contained in the box (using $.contains()). If not, we hide the box.

Drag and Drop an element which is not part of the same container

I would like to drag the clone the element id="btn" and drop it into the div class="ui-layout-content". I'm able to drag and drop elements from one div to another which are under a container. But I'm not able to do the same between divisions which are not part of the same container. Here is my code:
<div class="ui-layout-west">
<h3 class="hdr">Drag and Drop Toolbar</h3>
<div class="ui-layout-content">
<div id=“btn”>button</div>
</div>
</div>
<div id="mainContent">
<div class="ui-layout-center">
<h3 class="hdr">Design Area</h3>
<div class="ui-layout-content">
</div>
</div>
</div>

Use the jQuery UI Draggable and you can have something like this:
var is_Over_Right_Element = false;
$( "#dropHere" ).mouseover(function() {
is_Over_Right_Element = true;
});

Either set the position to absolute on the div element that is "draggable".
OR
Set the other window as the new parent element.
$("#btnCLONE").appendTo("#someOtherDiv");
If everything fails. Put both areas into one large "draggable" container and add a mouseover event listener that checks that you are hovering over the right area to be able to drop the clone in.
var is_Over_Right_Element = false;
$( "#dropHere" ).mouseover(function() {
is_Over_Right_Element = true;
});

jquery expand / collapse?

Im trying to make my jquery expand when clicked anywhere ( except the top left box ) and try to collapse when clicking only in the ( top left box )
http://jsfiddle.net/wzbAh/1/
HTML:
<div id="box">
<div class="collapsed container" >
<div class="nav" class="closed">0</div>
box 1 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
<div class="collapsed_content">
collapsed only content #1
</div>
</div>
<div class="collapsed container">
<div class="nav" class="closed">0</div>
box 2 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
</div>
<div class="collapsed container">
<div class="nav" class="closed">0</div>
box 3 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
</div>
</div>
JavaScript:
$("#box").delegate(".container", "click", function(e) {
$(this).addClass("expanded");
});
$("#box").delegate(".container.expanded .nav ", "click", function(e) {
$(this).addClass("collapsed");
});
Seems to be almost there but not quite, what would be the right way to do it? Since toggle seems not the option here.

Here you go mate...
$("#box").delegate(".container", "click", function(e) {
if ($(e.target).hasClass("container")) {
$(this).addClass("expanded");
}
});
$("#box").delegate(".container.expanded .nav", "click", function(e) {
$(this).parent().removeClass("expanded");
e.stopPropagation();
});
​
The class "collapsed" is never removed so to remove the expanded state you need to use removeClass("expanded"), so it goes back to its initial state. Also, when the .nav element is clicked, the div you want to affect is the parent.
Finally, e.stopPropagation() stops the click firing both event handlers and removing the class and then adding it again.
Here's a working jsfiddle...
http://jsfiddle.net/wzbAh/11/

$("#box").delegate(".container", "click", function(e) {
if (!$(e.target).is("div.nav")) {
$(this).addClass("expanded");
}
});
$("#box").delegate(".container .nav ", "click", function(e) {
$(this).parent().removeClass("expanded").addClass("collapsed");
});
http://jsfiddle.net/jensbits/wzbAh/9/

Move div to top after click

$(document).ready(function() {
$('div.post').click(function() {
// the clicked LI
var clicked = $(this);
// all the LIs above the clicked one
var previousAll = clicked.prevAll();
// only proceed if it's not already on top (no previous siblings)
if(previousAll.length > 0) {
// top LI
var top = $(previousAll[previousAll.length - 1]);
// immediately previous LI
var previous = $(previousAll[0]);
// how far up do we need to move the clicked LI?
var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');
// how far down do we need to move the previous siblings?
var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());
// let's move stuff
clicked.css('position', 'relative');
previousAll.css('position', 'relative');
clicked.animate({'top': -moveUp});
previousAll.animate({'top': moveDown}, {complete: function() {
// rearrange the DOM and restore positioning when we're done moving
clicked.parent().prepend(clicked);
clicked.css({'position': 'static', 'top': 0});
previousAll.css({'position': 'static', 'top': 0});
}});
}
});
});
How can I move a div to the top of a list of divs upon clicking a link.
eg;
<div id=1>Div One <a>Click to update</a><a>a different link</a></div>
<div id=2>Div One <a>Click to update</a><a>a different link</a></div>
<div id=3>Div One <a>Click to update</a><a>a different link</a></div>
<div id=4>Div One <a>Click to update</a><a>a different link</a></div>
<div id=5>Div One <a>Click to update</a><a>a different link</a></div>
and when you click ONLY on the link "CLICK TO UPDATE" for any div, it should move that div to the top of the page!
80% done. Thanx guys for the swift response. Preciate it to the max. Anyways thanx to #valipour I managed to get the div to move ONLY when you click on a specific link by adding a class to the link and changing my first two lines from;
$('div.post').click(function() {
// the clicked LI
var clicked = $(this);
to;
$("a.rep").click(function() {
var clicked = $(this).closest("div.post");
html code is;
<div id="wrapper">
<div class="post"><a class="rep">1 Aasdjfa</a> <a>6 Aasdjfa</a></div>
<div class="post"><a class="rep">2 Aasdjfa</a> <a>7 Aasdjfa</a></div>
<div class="post"><a class="rep">3 Aasdjfa</a> <a>8 Aasdjfa</a></div>
<div class="post"><a class="rep">4 Aasdjfa</a> <a>9 Aasdjfa</a></div>
<div class="post"><a class="rep">5 Aasdjfa</a> <a>10 Aasdjfa</a></div>
</div>
Thanks!
BUT it doesn't work with div's that were dynamically loaded? eg. I have 10 divs showing by default then I have a script that loads more divs when you scroll...this script won't move the divs in the autoload section when you click on any of them...any idea why???

If you put them all inside another wrapper div you could do
(This is now the most upto date version):
$("#wrapper a.rep").live('click', function(){
$(this).parents('.post').hide().prependTo("#wrapper").slideDown();
});
EDITED my answer. This one works. With animation aswell ;).
If you dont like animation, have just $(this).parent().prependTo("#wrapper") **
http://jsfiddle.net/2DjXW/18/
To load Divs that are dynamically added afterwards, you will have to use the 'live'. When document is ready the divs that are not there cannot have events added. But live adds the events when new are dynamically added.
New edit:
http://jsfiddle.net/tVhqz/8/
Should work now well.

give "update" class to those links that you want to do the action and then:
$("a.update").click(function()
{
var myparent = $(this).closest("div");
var parentparent = myparent.parent();
myparent.detach().prependTo(parentparent );
return false;
});
jsFiddle link: http://jsfiddle.net/g56ap/4/
NOTES:
we are keeping parentparent separately because myparent.parent() would be invalid after detach.

Ok so through a combination of #valipour and #pehmolenu scripts I was able to get what I was looking for. I have tested it only on chrome but am sure it should work on other browsers. The complete working code is below.
Javascript;
$("#wrapper a.rep").live('click', function(){
$(this).parents('.post').hide().prependTo("#wrapper").slideDown();
});
html;
<div id="wrapper">
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
</div>
This will also work if you divs are loaded dynamically based on scroll!
Thanx guys! See it in action at repjesus.com! click "rep it" on any item!