We Keep Coding

Roll over divs with transition delay?

I'm trying to add a transition delay to my rollover on hover divs, from reading I understand that "display:none" can't have a transition delay which is what is stopping me, it needs to be done another way.
I have tried using z-index with no success and also played with visibility but this causes separate issues as I am going to have different text and images displayed as defaut and hovered and the visibility function is affecting spacing as I believe they still occupy the space but don't show.
Here is what I have so far:
http://jsfiddle.net/hfs323h7/
Does anyone have or know a way to make it rollover with a transition delay while completely changing the div displayed? Either with pure css, jquery or javascipt?
Thanks!

You can do this by CSS with opacity.
.parentItem{ height:200px; background-color:#e7e7e7; float:left; margin-left:1px;width:33%;}
.hoveredItem{opacity:0;transition:opacity 1s;position:absolute;}
.itemDisplay{opacity:1;transition:opacity 1s;position:absolute;}
.parentItem:hover .hoveredItem {opacity:1; }
.parentItem:hover .itemDisplay{opacity:0;}
<div class="clearfix"></div>
<div class="parentItem">
<div class="itemDisplay">ok</div>
<div class="hoveredItem">hai</div>
</div>
<div class="parentItem">
<div class="itemDisplay">ok</div>
<div class="hoveredItem">hai</div>
</div>
<div class="parentItem">
<div class="itemDisplay">ok</div>
<div class="hoveredItem">hai</div>
</div>

You can achieve a fading hovering effect using jQuery,
$(document).ready(function() {
$(".parentItem").on("mouseover", function () {
$(this).find('.itemDisplay').hide();
$(this).find('.hoveredItem').fadeIn();
});
});
This is basically checking if a item is hovered and then fade's in the new item.
Here's a fiddle for your case.
JSFiddle
You can then ofcourse also check for a mouseout event,
$(".parentItem").on("mouseout", function () {
$(this).find('.hoveredItem').hide();
$(this).find('.itemDisplay').fadeIn();
});

Reorganizing divs vertically with jquery

I have 5 divs going vertically down a page.
I want to be able to click any one, and have it move to be the first div in the order, the top of the "list" in a way. In a perfect world, the others would dim/decrease opacity and the clicked one would slide/animate up to the top while the others bumped down. But, that can come later. I've seen div-reordering done with CSS, but that's not continuously dynamic on the page.
I tried putting all 5 divs inside a container wrapper and doing this in css:
#wrapper { display: table; }
with this javascript (example for clicking second div):
$('#secondDiv').css("display","table-header-group");
$('#firstDiv').css("display","table-row-group");
$('#thirdDiv').css("display","table-row-group");
$('#fourthDiv').css("display","table-row-group");
$('#fifthDiv').css("display","table-row-group");
but that messed up my rounded corners on the div, my alignment, and other parts of my existing css.
This seems like it shouldn't be that hard, but I can't figure it out. Thanks for any help!

A very simple solution: move the element to the top using jQuery's prepend() to the parent element.
$("div").click(function() {
$(this).parent().prepend($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>
<div>Div7</div>
<div>Div8</div>
<div>Div9</div>
<div>Div10</div>

$('.reorderable').click(function(){
$(this).prependTo(this.parentNode);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="reorderable">first</div>
<div class="reorderable">second</div>
<div class="reorderable">third</div>
<div class="reorderable">fourth</div>
<div class="reorderable">fifth</div>
</div>

Look at the jQuery UI tools that enable sortable displays.
Your end goal seems to be consistent with this jQuery UI feature.

scroll() event not firing when attached to a div

<div class="row">
<div class="col-md-8" id="homeview-story"></div>
<div class="col-md-4" id="homeview-stream">
<div id="log"></div>
</div>
</div>
#homeview-story {
overflow: scroll;
width: 72%;
height: 800px;
}
#homeview-stream {
overflow: scroll;
width: 28%;
height: 800px;
}
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
Objective is to implement infinite scrolling for both homeview-story and homeview-stream separately to load respective data. The scroll function works on the window obj ($(window).scroll) but is not working with specific div.

"scroll" only works when the element is actually scrollable / scrolling. If you want scroll data regardless of element size, you can use "wheel" if your browser supports it.
document.addEventListener("wheel", function(event) {
console.log(event);
});

The issue is that, #homeview-story isn't overflowing, So it isn't scrolling. First of all it should have some content larger than that for it to scroll, which is missing in your code.
Here's a Demo, where #logo has a height greater than it's parent #homeview-stream and we're listening to it's scroll.

Well I can't see what's not working for you. Here is a working fiddle
Have to paste some code so:
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});

Are you actually scrolling inside the #homeview-story div? So not the page itself, because the jquery scroll() event obvious needs that (http://api.jquery.com/scroll/)
Are you loading your custom CSS after the bootstrap CSS? Otherwise your div might still not be set to overflow:scroll. Hmm, on second thought it probably would since you are referencing an ID. Just to make sure then.

Put a inner div in #homeview-story
<div class="row">
<div id="homeview-story">
<div class="inner"></div>
</div>
<div id="homeview-stream"></div>
</div>
$(document).ready(function() {
$('#homeview-story').bind('scroll',function() {
var html = "<div id='log'>Hello</div>";
$('#homeview-stream').append(html);
});
});
Hope this demo can help you in what you want to achieve.

I was facing the same problem as you do, and I solved it by putting that specific selector that I want to be triggered by the scroll() function inside the $(window).scroll() function like this:
$(window).scroll(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
I'm not sure if this solution is correct way of fixing this, but works fine for me.

Setting Div position up on another content

I have a page content which have text in it.
underneath the content, there is a navigator bar, and I would like that whenever I Hover one of the element in the navigator, a div will open up just above the element I have just hovered on, and show some content.
I don't want the DIV that will pop-up to push any object on the page, I would like it to be, like up on all of the objects on the page.
some code since I have to insert code tags if I want to post fiddle
here's a fiddle to demonstrate:
Click here for fiddle
In the fiddle, I want that whenever I hover First, the first-feedback will be shown just above him.
This is pretty much my code, I have just used jQuery to calculate my desired width, but I just can't get the div to be above the div he should be above. I can't just calculate by my eye and say how many pixels because the website is pretty much dynamic, so I need a formula to calculate that for me every time.
If you have any code suggestion, such as relocating the feedback div, please feel free to edit the fiddle!
Thanks in advance!

Update: Okay, I did it the way you specified: http://jsfiddle.net/2U7jB/3/. There are other ways to do it - it depends on your HTML.
Original Response: This is close to what you want: http://jsfiddle.net/2U7jB/2/
.popup {
display: none;
height: 35px;
width: 100%;
background-color: blue;
}
<div id="first">
<div class="popup"></div>
</div>
<div id="second">
<div class="popup"></div>
</div>
<div id="third">
<div class="popup"></div>
</div>
$('#first, #second, #third').on('mouseover', function() {
$(this).children('.popup').show();
});
$('#first, #second, #third').on('mouseleave', function() {
$(this).children('.popup').hide();
});
To get what you want, just create two divs inside #first, #second, and #third - the first div for the hidden (popup) content, and the second div for the nav menu / background color.

Moving content inside of a div?

UPDATE:
The parent div (#container) must have a fixed height. I jsut want to shift the content in it so the active div is at the top and all overflow is hidden.
I am working on a webpage where a parent div has a fix size and will have several child divs in it. Each of these child divs will have an anchor tag that is always visible and it's own child div that will only be shown when it's sibling anchor tag is clicked.
I have this much working but I am running into the issue that when the sibling div is shown it sometimes goes out of the parent div and it's content is hidden. I would like to have the contents of this div repositioned to the top of the parent div so that it's content is never hidden. How would I accomplish this using jQuery?
You can see what I'm talking about by clicking Item2 in this Fiddle: http://jsfiddle.net/Broham/LA22t/1/
Html:
<div id="container">
<div class="item">
Item1
<div class="desc">A bunch of stuff about item 1!</div>
</div>
<div class="item">
Item2
<div class="desc">
A bunch of stuff about item 2!<br/>More stuff for item 2!<br/>last item 2 thing
</div>
</div>
<div class="item">
Item3
<div class="desc">
A bunch of stuff about item 3!<br/>More stuff for item 3
</div>
</div>
</div>
css:
.desc
{
display:none;
}
#container
{
height:75px;
overflow:hidden;
border-style:solid;
border-width:1px;
}
jQuery:
$(".item a").click(function () {
$(this).siblings(".desc").animate({ height: 'toggle' });
});
What I have tried so far:
http://jsfiddle.net/Broham/LA22t/3/
But this only moves the active div, what I need to do is shift all of the content up and hide the overflow...

You have two options.
You can either hid all of the div above it (thus making it appear at the top), or you can float the div over the top of the other elements, which sounds more like what you want. However, floating it to the top is difficult, and requires different methods in different browsers, so the easiest way for you is just to set all the other items to display:none, and then display:block again when you click to close the one you are viewing.
Here, this does what you want:
$(".item a").click(function () {
if(!this.opvar)this.opvar=false;
$(this).siblings(".desc").animate({ height: 'toggle' });
if(!this.opvar)$(this).parent().siblings(".item").css('display','none');
else $(this).parent().siblings(".item").css('display','block');
this.opvar = !this.opvar;
});
Just a crude example though, there are better ways to do it.

Wrap everything inside the container div in another div (e.g. wrapper) and then animate the position (top) of this wrapper div to achieve desired result.
HTML
<div id="container">
<div id="wrapper">
<div class="item">
.........
</div>
</div>
CSS
#wrapper{
height:100%;
position:relative;
}
JS
$(".item a").click(function () {
$(this).siblings(".desc").animate({ height: 'toggle' });
$("#wrapper").animate({top:-1*$(this).position().top},"slow");
});
Something like this might help you getting started:
http://jsfiddle.net/sethi/zfdmC/2/

this should do the trick,
but you probably want to close the inactive headers also
$(".item a").click(function () {
var a= $(this).parent();
$(this).parent().remove();
$("#container > div.item").first().before(a);
$('.removeMe').remove();
$(this).siblings(".desc").animate({ height: 'toggle' });
});

http://jsfiddle.net/LA22t/2/
Just removed height .

The trick is to actually move the elements in the DOM. Use .prependTo("#container"):
http://jsfiddle.net/LA22t/7/
$(".item a").click(function() {
$(".desc").hide();
$(this).parent().prependTo("#container").find(".desc").animate({height:"show"});
});