Div Positioning + Other stuff

From:	ANT_THOMAS	27 Oct 2010 16:01
To:	ALL	1 of 8

37806.1
I'm totally shit at positioning Divs and gettings them to resize accordingly when changing the size of the browser window. How hard can it be? I want a frame-like page. Column on the left with set width and left positioning Column on the right with set width and right positioning Horizontal scrollable area taking the remaining space width-ways in the centre. Here's what I've got already to give you an idea. Answers on a postcard.

0/0

Reply Quote

More

From:	Iain (WIBBLEBOY)	27 Oct 2010 17:36
To:	ANT_THOMAS	2 of 8

37806.2 In reply to 37806.1

When I've done this in the past I think I did something like this:

1) Declare a wrapper div around the content of the centre panel. Set this to 100% width.
2) Inside that div, add another div with the centre panel content. Set the left and right margins to be that of the width of the left and right panels.
3) Add the left div, float it left and set the width to the relevant value.
4) Add the right div, float it right and set the width to the relevant value.

1 & 2 fill the screen, but leave space for the left and right columns.
3 & 4 define the left and right columns,

If that's not good enough, I may get a chance to look into more detail later.

0/0

Reply Quote

More

From:	ANT_THOMAS	27 Oct 2010 18:19
To:	Iain (WIBBLEBOY)	3 of 8

37806.3 In reply to 37806.2
Sounds like it should do the trick. I'll give it a go.

0/0

Reply Quote

More

From:	ANT_THOMAS	27 Oct 2010 19:01
To:	Iain (WIBBLEBOY)	4 of 8

37806.4 In reply to 37806.2
Indeed it did work, thanks!

0/0

Reply Quote

More

From:	af (CAER)	28 Oct 2010 09:10
To:	ANT_THOMAS	5 of 8

37806.5 In reply to 37806.1

Something Mikee uses which he loves (but I find a bit heavy for my needs):
http://layout.jquery-dev.net/

ALSO: slightly off-topic but have you tried using square frames for your thumbnails? As it is now, your landscape-orientated thumbs are bigger (and visually more prominent) than the portrait-oriented ones.

0/0

Reply Quote

More

From:	ANT_THOMAS	28 Oct 2010 15:01
To:	af (CAER)	6 of 8

37806.6 In reply to 37806.5
I'd like to use square frames for portrait photos but I haven't generated the thumbs myself, they're generated by the PHP script.

0/0

Reply Quote

More

From:	ANT_THOMAS	28 Oct 2010 15:04
To:	ALL	7 of 8

37806.7

May as well keep it in the same thread because it's more stuff about my gallery.

I'm fairly happy with how it looks and works but one thing I'd love it to do it be able to go to next and previous photos like you can with Facebook and Lightbox galleries, as well as many others online, by pressing the right and left cursor keys.

I've been searching for hours now trying to figure it out. Looking at onkeypress, onkeyup, onkeydown but can't figure out how to get anything in a workable form.

The next and previous links are generated by PHP so it just needs to be able to replicate those.

0/0

Reply Quote

More

From:	af (CAER)	28 Oct 2010 15:47
To:	ANT_THOMAS	8 of 8

37806.8 In reply to 37806.7

A quick search suggests keyboard event detection is a bitch.
However, this page offers some clues.

javascript code:

 
var keyDown = function(e) {
    var evt = e || window.event;
    switch (evt.keyCode) {
        case 37: { // left arrow key
            window.location = URL_FOR_NEXT_PAGE;
        }
        case 39: { // right arrow key
            window.location = URL_FOR_PREV_PAGE;
        }
    }
    return document.defaultAction; // might not be needed
    // (I use jQuery which makes a lot of this stuff easier)
}; // keyDown()
 
// I dunno where you'd put this bit - <body onload="..."> maybe?
document.onkeydown = keyDown;

0/0

Reply Quote

More