Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to format line of code correctly

Status
Not open for further replies.

EAHamline

Programmer
Jan 13, 2009
2
US
I'm in the process of editing a wordpress theme, and i'm having a hell of a time trying to figure this out- i'm really fresh to JS too, so that isn't helping much.

The Code:

var MIN_COLS = 2;
var COL_WIDTH = 220;
var GAP = 10;

var offx, offy = 0;
maxy = new Array();

// on site load (DOM READY)
$(function() {
offy = $('#allposts').offset().top;
offx = $('#allposts').offset().left;
arrange();
});

// on window resize, call again
$(window).resize( function() { arrange(); } );

arrange();

function arrange() {

// how many columns fits here?
var columns = Math.max(MIN_COLS, parseInt($('body').innerWidth() / (COL_WIDTH+GAP)));
$('.toppost').css('width',COL_WIDTH + 'px');
$('.eachpost').css('width',COL_WIDTH + 'px');
$('.twocols').css('width', COL_WIDTH*2 + GAP );
$('.threecols').css('width', COL_WIDTH*3 + GAP*2);


for (x=0; x < columns; x++) {
maxy[x] = 0;
}

// lets iterate over all posts
$('.toppost').each(function(i) {


var pos, cursor, w , altura= 0;

w = (Math.floor($(this).outerWidth() / COL_WIDTH));
cursor = 0;

if (w>1) {
for (x=0; x < columns-(w-1); x++) {
cursor = maxy[x] < maxy[cursor] ? x : cursor;
}
pos = cursor;

for (var x=0; x<w; x++) {
altura = Math.max(altura, maxy[pos+x]);
}
for (var x=0; x<w; x++)
maxy[pos+x] = parseInt($(this).outerHeight()) + GAP + altura;

$(this).css('left', pos*(COL_WIDTH+GAP) + offx).css('top',altura + offy);
}
else {

for (x=0; x < columns; x++) {
cursor = maxy[x] < maxy[cursor] ? x : cursor;
}

$(this).css('left', cursor*(COL_WIDTH+GAP) + offx).css('top',maxy[cursor] + offy);
maxy[cursor] += $(this).outerHeight() + GAP;
}
});


}


What I'm Trying to Achieve:

On Line #34:
// lets iterate over all posts
$('.toppost').each(function(i) {

I am trying to include the .eachpost value (from line #25) alongside the .toppost value, so they both hold the same characteristics, and I have no idea how to format .eachpost into there without everything getting screwed up.

A huge thanks in advance for anyone willing to offer suggestions/help/advice.
 
That's jQuery code and looks like it's laying your content out in columns.

I'm not 100% clear on what you're trying to do but it sounds like you simply need to add some CSS.

What do you mean by "characteristics"?

Do you have a link to the page itself so we can see what you mean?

Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
This
Code:
        $('.toppost').each(function(i) {

means "get everything with a class of .toppost and do the following to it..."

So if you want to apply the same things to everything with the .eachpost class you can modify the selector get .toppost and .eachpost elements (note the comma)

Code:
        $('.toppost[COLOR=red], .eachpost[/color]').each(function(i) {



Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Thanks guys,

It is jquery, and it is setting in columns.

The site is hosted locally on my comp, unfortunately, so Im not able to show it, sorry man.

Essentially what Ive got is a top menu, which is fixed and holds the .toppost class while the other class, .eachpost is assigned to the posts underneath which is not fixed. The site is set up with a fixed height and a horizontal overflow.

The problem I'm having is that I can only get one of the classes (either .toppost or .eachpost) to hold the properties. Even with the $('.toppost, .eachpost').each(function(i) { ...which I did try. What happens is that the class that is not assigned in the tag lays out all overlapped- and when both are assigned as such, they both display as overlapped content.

I apologize for my lack of understanding in all of this, Im just looking for some pointers or direction so Ive got something to work towards instead of just scratching my head. Ha, thanks again.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top