Develop Reference

Click Propagation failing in Jquery

For part of the site I'm working on, I have a set of sidebars that can pull out. To have them hide when the users are done with them, I've set up a div with a click event (see below) so that whenever the user clicks somewhere outside of the sidebar, the sidebar closes. The problem that I'm running into, however, is that the click event handler is grabbing the event, running its method, and then the click event seems to stop. I've tried using return true and a few other things I've found around here and the internet, but the click event just seems to die.
$('.clickaway').click(function() {
$('body').removeClass(drawerClasses.join(' '));
return true;
});
EDIT: Here is a fiddle with an example: https://jsfiddle.net/2g7zehtn/1/
The goal is to have the drawer out and still be able to click the button to change the color of the text.

The issue is your .clickaway layer is sitting above everything that's interactive, such as your button. So clicking the button, you're actually clicking the layer.
One thing you could do is apply a higher stacking order for elements you want to interact with, above the .clickaway layer. For example, if we apply position: relative, like this:
.show-drawerHotkey .ColorButton {
position: relative;
}
The element will now be in a higher stacking order (since it comes after the clickaway, and we've applied no z-index to clickaway)
Here's a fiddle that demonstrates: https://jsfiddle.net/2g7zehtn/5/

Using this somewhat famous SO answer as a guide, you can bind to the $(document).mouseup(); event and determine whether certain "toggling" conditions apply:
[EDIT] - Example updated to illustrate clicking a link outside of the containing div.
// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
var m = $('#menu');
var c = $('#menuContainer');
var i = $('#menuIcon');
i.click(function() {
m.toggle("slow");
});
$(document).mouseup(function(e) {
console.log(e.target); // <-- see what the target is...
if (!c.is(e.target) && c.has(e.target).length === 0) {
m.hide("slow");
}
});
#menuIcon {
height: 15px;
width: 15px;
background-color: steelblue;
cursor: pointer;
}
#menuContainer {
height: 600px;
width: 250px;
}
#menu {
display: none;
height: 600px;
width: 250px;
border: dashed 2px teal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a link outside of the container
<div id="menuContainer">
<div id="menuIcon"></div>
<div id="menu"></div>
</div>

How to make a div that appear on hover, stay while its hovered on in jquery or css

I have a div called title, and another one called description.
I have managed to make the div description appear while hovering on title.
here is the fiddle
Now I want to make the div description stay visible while I'm hovering on it (ON THE DESCRIPTION DIV).
Once i remove the hover form the div description, it should hide.
Here is my html
<span class="title">Last</span>
<div class="description">some description</div>
Here is my JS
var cancel = false;
$("div.description").hide();
$(".title").hover(function () {
cancel = (cancel) ? false : true;
if (!cancel) {
$("div.description").hide();
} else if (cancel) {
$("div.description").show();
}
});
And this is the CSS
.title { background: red; }
.description { background: yellow; }

You may not need jQuery to do this.
Given the markup you provided, just use plain CSS and utilize the adjacent sibling combinator, +:
Example Here
.description {
display: none;
}
.title:hover + .description,
.description:hover {
display: block;
}
If you need to use jQuery, you can just include the .description element in your jQuery selector:
Updated Example
$(".title, .description").hover(function () {
// ...
});

set a newly created div on top of the older divs

I have a bunch of divs inside a container. The position of the content divs is relative, because I want them to appear one below the other and their height is unknown.
These divs are created dynamically (appendchild) inside the container div. Now, each div appears on the end (bottom) of the stack but my requirement is that the divs have a "newest first" option too, that is, each new div appears on top, not on bottom of the content divs (if the user selects the "newest first" in the settings).
html:
<div class="container">
<div id="div1" class="content">aaa<br>aaa</div>
<div id="div2" class="content">bbb<br><br>bbb</div>
<div id="div3" class="content">ccc</div>
<div id="div4" class="content">ddd</div>
</div>
css:
.container {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid red;
}
.content {
position: relative;
top: 0px;
left: 5px;
width: 200px;
height: auto;
border: 1px solid blue;
margin: 3px;
}
http://jsfiddle.net/jk559/1/
so I'd like the end-user visible order to be: div4, div3, div2, div1.
How can I achieve this? (css/js)
preferrably no jquery.
thanks in advice!

Pure css solution:
Use flexbox to achieve this.
.container {
display:flex;
flex-direction:column-reverse;
justify-content: flex-end;
align-content: flex-end;
}
Updated fiddle here.
Read more information here.

try this
theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.setAttribute("id","div5");
theKid.setAttribute("class","content");
theKid.innerHTML = 'eee';
// append theKid to the end of theParent
theParent.appendChild(theKid);
// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);
Demo Fiddle http://jsfiddle.net/jk559/4/

You can easily do it with JQuery with the following function.
$('.container > div').each(function() {
$(this).prependTo(this.parentNode);
});
UPDATED FIDDLE
As you mentioned in the question, I will try to attain the expected output with the pure javascript.

You can insert content in the beginning simply using .prepend() .
$(".container").prepend("<div id='div5' class='content'>eee</div>");
Demo

JS FIDDLE UPDATED DEMO
Use prepend() to add as first child of an element
/* $( ".container" ).prepend( "Your div with id here" ); */
/* Example */
$( ".container" ).prepend( "<div id='div5' class='content' >div5 on top </div>" );

Take a look at this answer about reordering dom items.
Basically, you have to maintain a state that decides the ordering. When you insert items (see insertItem below) you append or prepend based on the state. When the user selects the newest first option (see newFirst below), you first reverse the dom elements and then flip the state so that subsequent insert happen at the right place.
var newFirst = false;
var list = document.getElementById('my-list');
function newFirst() {
var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
itemsArr.push(items[i]);
}
}
itemsArr.reverse();
for (i = 0; i < itemsArr.length; ++i) {
list.appendChild(itemsArr[i]);
}
newFirst = !newFirst;
}
function insertItem(content) {
var item = document.createElement("div");
item.setAttribute("class","content");
item.innerHTML = content;
if(newFirst) {
list.insertBefore(item, list.firstChild);
} else {
list.appendChild(item);
}
}

try this :
$("div[id*=div]").sort(function(a,b){
if(a.id > b.id) {
return -1;
} else {
return 1;
}
}).each(function() {
var elem = $(this);
$(".container").append(elem);
});
this will sort your divs inside container like this : div4, div3, div2, div1
if you want change the order to : div1, div2, div3, div4 just change if(a.id > b.id) to if(a.id < b.id)
you can add a link called change order then call this code when you click on it

jquery setting correct height for content

I've set up a div that stores text with a nice gradient fade at the bottom with a show hide button. I found this tutorial to help me do that, and for the most part i've managed to get it working for my needs.
However, I'm having an issue where when i have a rather long bit of text. When showing the text, it cuts off the bottom of the text. By doing a console.log($("#id).height()); it appears that it's picking up the div's max-height from the CSS rather than the height of the actual content (but i could be wrong).
I've set up a JSFiddle with my example: http://jsfiddle.net/3gnK7/4/ you'll notice that by clicking the Show button on the first part, the last para of the lorem ipsum text is cut off.

This does add a requirement of jqueryUI to get the animation however it works completely
first change your css to
.category_text {
float: left;
position: relative;
overflow: hidden;
margin-bottom: 1em;
max-height: 120px;
}
.cat-height {
max-height: 9999px;
padding-bottom:30px;
}
then change your javascript to use toggleClass like so
$(document).ready(function () {
$(".showbutton").live("click", function (e) {
e.preventDefault();
var buttonid = $(this).attr("id");
buttonid = buttonid.substring(11, buttonid.length);
$("#text_"+buttonid).toggleClass('cat-height','slow');
if($("#showbutton_" + buttonid).text() == 'Show') {
$("#showbutton_" + buttonid).text("Hide");
}
else {
$("#showbutton_" + buttonid).text("Show");
}
return false;
});
});
DEMO

totalHeight += $(this).outerHeight(true);
True argument will include margins, too.

jQuery - Is it possible to have separate onHover and onClick events?

I am currently building a website that uses alot of jQuery, it involves having an interactive map.
There will be points on the map, but what I need is, when you hover over the map point, a small description is shown (perhaps in a div called .mapitem-smalldescription) and then when you CLICK on the map point, a much larger full description with pictures would be shown (in another div called, for example .mapitem-fulldescription)
I know how to do onclick and onhover events on SEPERATE map points, but I have not been able to successfuly combine them together onto a single map points.
How can I do this please?
Zach

Assuming that each map point will have the class mappoint:
$('.mappoint').hover(function() {
//do something on mouseover...
}, function() {
//do something on mouseout...
}).click(function() {
//do something on click...
});

If each one of your map points had the class point this might work:
Try this: http://jsfiddle.net/nrwyz/8/ .
Code:
HTML
<div class="point">
</div>
Javascript
$(".point").live("mouseover", function() {
//code to show description
$(this).append('<div class="mapitem-smalldescription">Small description</div>');
});
$(".point").live("mouseout", function() {
//code to show description
$(".mapitem-smalldescription").fadeOut(200);
});
$(".point").live("click", function() {
//code to full description
$(this).append('<div class="mapitem-fulldescription">Full description</div>');
});
CSS
.point {
width: 40px;
height: 40px;
border-radius: 100px;
background-color: #550000;
}
.mapitem-smalldescription {
width: 100px;
height: 100px;
background-color: #00FF00;
}
.mapitem-fulldescription {
width: 100px;
height: 100px;
background-color: #FF0000;
}
EDIT: Here is a version which behaves more closely to the way you described: http://jsfiddle.net/nrwyz/23/ .
Let me know if there is anything else you need modified or added.
I hope that helps!