Ok, so I started working on my image gallery page, did all the stuff I could alone and now its time to start asking questions 
I’ll ask em’ one by one to ease on everyone.
First question, how do I make the form to the right start going down only when the viewport actually reaches it?
I mean like this:
url: http://test.petpal.co.il/dogs
Thanks!
delete {position:fixed}
Dedicate a column on the right side for the form to use when it slides vertically.
Then JavaScript to effect the movement.
You can click the flag and ask a moddie to move this topic into the JS catagory.
For sure it can’t? I was sure it was something some CSS could solve…
Hate JS, was never good at it ;p
I’ll request to move it, thanks.
Be sure to reframe the content portion of the page so it has 2 columns, a fixed width column for the form and a flexible width column for the pups.
Didn’t quite understand what do you mean, also what is it good for?
The blocks of pups are floating to the right. The form needs a clear column to itself so it can stay just below the top of the window as the user scrolls down the page. The blocks of pups cannot be allowed to flow beneath the form as they do now.
ehm I got no idea why you see it like that, I still haven’t teted it in all browsers thought, no reason you will see 2 columns and then 3 columns below them…
Anyways I found the jquery method that does what I wanted with the search form, but when scrolling fast towards bottom or top its all jumpy, how to make it smooth? any ideas?
The images are aligned that way because I disabled position:fixed on the form… because the form was overlaying the images. You may want to use position:absolute and let JS set the top to keep it where you wish while the user scrolls. If you did that, you wouldn’t necessarily need to create two columns, just code a wide “column” with padding or border on the right side and the pups would not enter it but the form would flow over it.
No, I am JS challenged.
beh, reverted it all ^^.
applying css with jquery to move it causes the element to jump if scrolling too fast
Tried animate() aswell, but I don’t like the effect. >_<
Need help! 
Finally achieved it 
it was rather simple after all, lol.
Yep, the top of the scrolling form works perfectly. :respect:
But give the page another look at different window widths. Looks like media queries need some adjustments as does the space around the form at really wide window widths. Again, position:absolute instead of position:fixed. Pos:fixed is relative to the edges of the window. Pos:absolute is relative to the page or any parent container on the page that is given pos:relative.
I don’t understand whats the problem with it, its excactly as I want it
Can you check it now and see if you got any issues? because you shouldn’t.
It appears to me that you are moving the form from inside to outside of
<div id="content_wrap_inner" class="padding">
possibly with JS?
When it is outside, the form hugs the right edge of the window.
It seems to me that, #content_wrap_inner, should be outside of the content at all times. The page would remain centered and width properly styled media queries, the distance between the form and the images could be constant instead of varying.
If that’s not important to you, then I’m off base.
If you’re feeling generous, please tell me how you set up the JS to pick up the form and keep it at the top of the window.
I would enjoy learning a new trick
I will tell you everything I did from the beggining, but first to answer you:
When page load the form is outside of #wrap_inner by default, thats to make it at the far side of the site like I want, and in case your screen width gets too low, it goes inside with JS, also as height gets low, the form gets lower in height aswell, and when moving it inside the #wrap_inner div, the gallery moves left and makes space for it, so there’s no more overlapping, there’s probably better methods to do what I want, but I can’t really understand your point.
I cannot make it absolute positioned from a simple reason, because then I will have to control its movement with JS, which I found out is very slow and ugly, so I passed…
I put it outside so it will be relative to the outer_div which is 100% width (the inner one is 1000px width and so is not suitable location), and if I dont set top in css it stays excactly where it is, if i set top it then goes relative to browser, that means that with JQuery I can do:
$(window).scroll(function() {
validateCSS();
});
function validateCSS() {
add = $(window).width() < 1500 ? 42 : 0;
if ($(window).scrollTop() > $('header').eq(0).height() + add)
$('#search_form').css('top', '0');
else
$('#search_form').css('top', $('header').eq(0).height() - $(window).scrollTop() + add + 'px');
}
which gies top:0 to make the element fixed positioned with the browser viewport if the height I scrolled is higher than the header’s height, and if not it puts it back relative to thte outer div.
That achieves the effect I want, so far all resolutions above 350px wide works perfectly, now I will probably make a button in that width that will make the form appear on user’s request and i’ll finish with the page.
Now my question is: the form can actually go as low as 300px in height, and that page in general to as low as 315px in width, is it ok to leave it like that? @PaulOB @RyanReese
Generally 320px width is considered the target for mobile although some older devices do only have 240px screens but I think that is a step too far to go (height is not an issue).
Just make sure that your layout does fit inside the 320px including any scrollbars or margins otherwise that will trigger a scroll n the viewport resulting in content being squashed and offset (or cut off).
Thanks Paul.
Its complex for me making it too much free to play with the width, since images are dynamic, their height/width unknown and once I position them inside the divs its some kind of absolute, if i’ll make the divs bigger their size will break.
As I mentioned previously this is not an issue as in the CSS you just set the image width to 100% and its height to auto. The image will retain its aspect ratio automatically. Use a max-width equal to the image’s original width to make it display normally until it doesn’t fit and then it scales smaller with the viewport. If you don;t know then images original width then use a suitable max-width as I would assume the image would still need to fit into a specified location
A simple demo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.img {text-align:center}
.img img {
width:100%;
max-width:450px;
height:auto
}
</style>
</head>
<body>
<div class="img"><img src="http://placehold.it/450x150" alt=""></div>
</body>
</html>
Just close the window to see the effect.
Hey paul,
Well there are a few important stuff to be considered.
first off, I decided to go for width:auto;height:100%, because I don’t want images of different heights spread out in the gallery, it will make it utterly ugly.
The other reason is for centering the images, some images can be bigger in height so for them I set width:100%;height:auto since they will always take 100% of the height of the box, and then I can center them using negative margin-left, about images with width > height I need to set negative margin-top to center.
We can continue discussing it on my new topic since its more relevant there:
Thanks.