We Keep Coding

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.

Get a marquee to begin repeating as soon as space is available

Here is a pen for what I have so far. I've been using CSS3 however I'm open to using other methods if it will work better:
.userAttributes > .attributeGroup > .favoriteArtistsAttr {
max-width: 74%;
animation: marquee 10s linear infinite;
}
#keyframes marquee {
0% { text-indent: 0; }
100% { text-indent: -100%; }
}
I'd like the marquee to begin repeating itself the moment that as the end of the p has slid into frame. I also need the marque to stop with a mousover and be scrollable (this part works already).
I found this example that accomplishes what I want to achieve. I noticed that they are doing so by duplicating the content, however I've been unable to get this to work correctly. I also wonder if this is the best way to achieve my goal, maybe it would be better to use javascript or some jquery plugin? I want to make sure that it works and looks the same on all browsers (within reason)

I've updated your originally linked example fiddle with your 'genres' heading:
http://codepen.io/anon/pen/oxEPeZ
What I've noticed is that your markup you provided is a bit wrong, so going on the original this is what's happening:
The title block should be in it's own separate div. I've set my version of your title to float to the left of the marquee div.
Then, the marquee div needs to be wide enough to contain all the text- I set it to 500px so the items don't start stacking when they reach the maximum width of the container.
After that, you need to make sure you have two spans with your content. In your link you were working on, you only had one paragraph tag for each list of items. That's the main reason why it wasn't repeating.
So now, our markup for just the Genre section looks like this:
<div class="title">
Genres:
</div>
<div class="marquee">
<div>
<span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
<span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
</div>
</div>
I've put the marquee and title into a container div and duplicated it for the favourite artists.... (this can be named whatever, but what I have done here is used margin-bottom to create the space below each item, instead of <br> tags).
Because our second ticker has more content, I've added another class called 'stretched' to give the marquee more width.
I know I haven't directly edited your fiddle sorry, however hopefully this helps get you out of trouble.

Change DIV width that is before another DIV

I have this structure with dynamic DIVs and all have the same class, since all are created automatically.
The problem here is that, the last of them prior to other DIV with other class, I would like to have his style as width:100% instead of width:50% as all others set by CSS.
Here's a sample:
<div class="awp_box awp_box_inner"></div>
<div class="awp_box awp_box_inner"></div>
<div class="awp_box awp_box_inner"></div>
<div class="awp_stock_container awp_sct" style="max-width: 400px !important;"></div>
So I only want to change that third DIV, which sometimes is the first and only one, other times is the second, other times is the fourth, etc...
I am usually good with CSS but this time I'm having a hard time finding a solution for this one.
Can someone please give me a hand here guiding me in the right track so I could put this working?

If I was correct in my question above then add this CSS
div.awp_box.awp_box_inner:nth-last-child(1) {
width: 100%;
}
Source: TutsPlus

Based on the comments, the following script could give you what you need.
$(document).ready(function(){
$('.awp_sct').prev().addClass('full');
});
It will add a class to the previous element of the .awp_sct.
DEMO

How do I create a div that expands with more information upon mouseover (with a background image?

I would like to create a div that expands to two paragraphs when someone mouses over the first paragraph. The first paragraph would be an introduction. The second paragraph would explain a bit more and may contain a link to another page. I would like the second paragraph to be hidden until the person moused over the introductory paragraph. I have a background image which looks like a Post-it note.
My attempts at this are here: http://jsfiddle.net/sAW2c/52/. The second paragraph isn't hidden, even though I constrained the size of the div and the padding on the P isn't working either. Can someone head me in the correct direction?

Adding overflow: hidden; to your #div1 seems to fix the issue: little link.
Note: Please use jsFiddle's CSS tab for styles next time. Inline styles are generically not very preferable.

Adding overflow hidden to the div should help. Check out this jsFiddle example. You should get the basic idea here but you'll need to tweak your background and text padding.
jQuery
$("#div1").hover(function() {
$(this).animate({
height: '300px'
});
}, function() {
$(this).animate({
height: '100px'
});
});​
HTML
<div id="div1" style="height:120px; width:206px;overflow:hidden;background: url('http://quiltersbee.com/images/white-postit.png') no-repeat 0 0; ">
<p style="padding-left: 8;padding-right: 8;">This is the paragraph that I would like to be only 190px wide and placed on the background image. It should be left-aligned. </p><br />
<p style="padding-left: 8;padding-right: 8;">This is the paragraph I would like to hide until someone mousesovers the above paragraph. Both paragraphs should be indented so they don't overlap the shading on the background image when this paragraph shows. This paragraph may include a link.</p>
</div>​

JS/jquery hiding content in HTML/CSS

Is there a 'best practice' how to hide all except one content-DIV of an HTML5 website?
Is there also a 'most used' library/libraries? Or is it often written in own JS code?
My goal is to have 9 DIVs loaded. The one in the center is the navigation, the others are content. When a nav-point is selected the specific div 'slides' to the middle and all the other DIVs are hidden.
Thank you

I usually do this:
$('.your_div').show().siblings().hide();
Replace .show() and .hide() with your desired effects.

I would add a class to all the hide and show able divs probably a class name like section.
<div class="section" id="home"> home content here... </div>
<div class="section" id="page-slug"> another page here... </div>
<div class="section" id="contact"> contact information here... </div>
Then give each div an id. FInally, in order to show the contact section you would:
$('#contact').show().siblings('.section').hide();
This method of giving like elements the same classand giving container elements an id is really just good practice regardless of the ease of use when selecting jQuery elements.

Jquery's hide, .show or .toggle are good enough.