Develop Reference

Using custom attr to add css?

I'm using a generic CSS banner code with a little CSS3 animation (Not the point, but providing background). What I'm trying to achieve is setting the banner class with a custom attribute and getting that attributes content and using jQuery to append a style with it? Like so, However their is alot of these divs that will be using the same technique on the same page...
<div class="banner banner-small animate" data-bg="https://domain.com/path/img/bg.png">
....
</div>
Then jQuery would run and output the code like...
<div class="banner banner-small animate" data-bg="https://domain.com/path/img/bg.png" style="background-image: url('https://domain.com/path/img/bg.png')">
....
</div>
I hope that this wasn't to vague. I've only recently started learning jQuery and I'm loving it! Just don't really know how to go around doing this.

Sure, there are a variety of ways that you can use data attributes as selectors and then access their data via the data() function :
// Iterate through each element with the data-bg attribute
$('[data-bg]').each(function(){
// Set the background image for each element to it's respective
// attribute value
$(this).css('background-image','url(' + $(this).data('bg') + ')');
});
Or if you don't want to invoke jQuery twice, you can use Niet's suggestion:
$('[data-bg]').each(function(){
this.style.backgroundImage = url(' + this.getAttribute('data-bg') + ')';
});
Or the following one from adeneo, which forgoes an explicitly loop entirely:
$('[data-bg]').css('background-image', function() {
return 'url(' + $(this).data('bg') + ')';
});

Max-height based on height of other element

I would like to be able to set the max-height of one element based on the (variable) height of another one — though I'm very much a JS beginner, I'm just about positive there's a way to do so with it. This is not the parent element I want to base the max-height on. Obviously, I want this solution to work regardless of whatever the height of the element might be at any given time on any given page.
Just to be clear, I want to find the height of, let's say, an element with the class "ElementOne", and then set the max-height of "ElementTwo" to, say, height-of-ElementOne plus 113px.
How do I go about doing this?

I use this snippet by Paul Irish to do just that:
$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}
// usage: $(‘div.unevenheights’).setAllToMaxHeight()

I think thats what you mean:
var h = document.getElementById("ElementOne").style.height;
document.getElementById("ElementTwo").style.maxHeight = h + 113 + "px";

This uses jquery to assign an event listener to the resize event of the window and ELementOne (Note: I don't think that most html trigger there own resize event). Here is a jsfiddle: http://jsfiddle.net/xiondark2008/UPqsV/
I add color to the divs so you can see them.
html:
<div class="ElementOne"></div>
<div class="ElementTwo"></div>
javascript:
function setHeight(){
var elementOne = $(".ElementOne").height();
$(".ElementTwo").height( elementOne +113);
}
$(window,".ElementOne").resize(setHeight);
setHeight();

How to calculate each element's height and use these values as a variable in function?

I am trying to create a simple text accordion which calculates each panel's height and return this value as a variable. I can get values with if statements like if ( i === 0 ) { $(this).height(); } but can't get this variable to the outside.I can do this without using variable but it became useless in long term.
Brıefly: I want to calculate each element's height and use this variable inside click function.
Here is jsFiddle which includes the problem.
var panel = $('.holder div');
var trigger = $('a');
panel.each(function(i) {
//problem starts when i try to calculate each ele's height
var eachEleHeight = i.height();
trigger.click(function() {
$(this).prev('div').animate({'height':eachEleHeight+'px'},500);
//this works widthout var eachEleHeight but became useless
//$(this).prev('div').animate({'height':'300px'},500);
});
//this is for hiding text at doc.ready
panel.css('height','56px');
});​

If I well understood, try this :
panel.each(function(i, el) {
// create a reference to te current panel
var $el = $(el);
// execute a function immediately, passing both the panel and its height
(function(p, h) {
// the trigger is targeted as the next link after the current panel
p.next('a').click(function() {
p.animate({ height : h + 'px'},500);
});
}($el, $el.height()));
// set each panel height
$el.css('height','56px');
});
Example fiddle : http://jsfiddle.net/Aw39W/55/

There is a problem with the code you posted. i is the index of the current element. Not the element itself.
Try var eachEleHeight = $(this).height();
Fiddle

The sequence of events you've used seems a bit weird. You're actually binding a click event to all a tags for each panel element. Try this: Fiddle
I just used the min-height and max-height css attributes to store the initial to/from height variables. This will automatically get you your starting heights.

If I understand the question, you want to have the elements height for the accordion animation function. This is a trick but it works. I frequently use Mootools so I'll write using it. You should be able to figure it out.
var orgHeight = i.offsetHeight;
i.setStyle('height','100%');
var eachEleHeight = i.offsetHeight;
i.setStyle('height',orgHeight);
Essentially you would be flipping the element to reveal it's height and flipping it back before the document has time to make it visible on screen.
Not sure this is exactly what you were looking for, but hope it helps.

how to change content in div, without over writing current content?

I thought this one would be easy, but after an hour of googling, i still haven't found anything.
I know how to update content in a div with jquery:
$(".div").html("stuff");
but that replaces the current content in the DIV (over writes it). I need the current content to remain there.
I don't mind if you know a way in Javascript or Jquery.
Thanks

You can either use append(), prepend() or html()'s inbuilt function:
$('div').html(
function(index,oldhtml){
var newString = 'something';
$(this).html(newString + ' ' + oldhtml);
});
JS Fiddle demo.
References:
append().
html().
prepend().

I think you're looking for .append()

Concat?
var old_content = $(".div").html();
$(".div").html(old_content + "newstuff");

jQuery: load method reload same div in div?

i'm a little confused.
i want to actually reload the same page and fetch a div with a certain id from it. so i'm trying to reload a part of website into the same part of the website. ;) i know it sounds weird.
somehow i don't get what i'm doing wrong or better how i have to do it.
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view");
so in this case the same div gets loaded into the same div and that's not what i want.
it then looks like:
<div id="#server_view"> <div id="#server_view"> blabla</div> blabbla </div>
i actually just want to grab the contents of the div inside and reload them. how can i solve this little problem.

You can grab the children with the selector you're passing to .load(), like this:
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view>*");
All we're doing different is getting all direct children to insert using the > child selector.

use .get and replace the element
$.get('/server/ftp/' + goToURL, function(response){
var newContent = $(response).find('#server_view').html();
$('#server_view').replaceWith( newContent );
});

Simple end fast.
$( "#content" ).load( "# #content>*" );

if you are using $('#server_view');, you must have DIV ID as server_view, not #server_view