1–8

Div Positioning + Other stuff

From: ANT_THOMAS27 Oct 2010 16:01
To: ALL1 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.
EDITED: 28 Oct 2010 15:01 by ANT_THOMAS
Reply
0/0
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.

Reply
0/0
From: ANT_THOMAS27 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.
Reply
0/0
From: ANT_THOMAS27 Oct 2010 19:01
To: Iain (WIBBLEBOY) 4 of 8
37806.4 In reply to 37806.2
Indeed it did work, thanks!
Reply
0/0
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.

EDITED: 28 Oct 2010 09:23 by CAER
Reply
0/0
From: ANT_THOMAS28 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.
Reply
0/0
From: ANT_THOMAS28 Oct 2010 15:04
To: ALL7 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.

Reply
0/0
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;
 
EDITED: 28 Oct 2010 15:49 by CAER
Reply
0/0