1

I made a question a couple days ago here: Responsive perfect squares inside a fixed positioned div. could anyone help me?.

and I had the perfect solution from web-tiki (ty again) and working fine so far. If interested you can check here: http://asadordearanda.com/movil (web still under construction and just for mobile, you won't see what is about on a pc browser unless you mimize a lot your window).

the fiddle that web-tiki made is http://jsfiddle.net/webtiki/7jJsf/12/.

And now I am starting to change the layout of this web for landscape orientation using

@media all and (orientation:landscape) {}

I need the "perfect squares" to be fixed positioned at the left of the window, perfectly distribute from top to bottom. I have tried to modified the fiddle but I can't seem to make it work. it seemes the dummy div trick is not working on with width insteed of height http://jsfiddle.net/7jJsf/14/.

Could anyone help me and make this work?

as always ty so much in advance and excuse my english. hope the question is clear enough

Community
  • 1
  • 1
Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • You might want to accept the answer that helped you in the previous question..? – T J Mar 31 '14 at 10:30
  • Duplicate of [Responsive perfect squares inside a fixed positioned div. could anyone help me?](http://stackoverflow.com/questions/22686478/responsive-perfect-squares-inside-a-fixed-positioned-div-could-anyone-help-me) – if you have further issues with this, you can expand your original question. – CBroe Mar 31 '14 at 10:40
  • The answer from my previous question was right, tilwin, but (maybe I explained myself not well enough) I need a new positioned squares now: from top to bottom, squares aligned to the left of the window insteed of from right to left at the bottom of the page. as I have said I can't adapt the solution they gave me and even posted a fiddle showing my problem. – Alvaro Menéndez Mar 31 '14 at 10:45
  • Ty Cbroe, I didn't know I could expand a previous question that already had a right answer. I will see if I can find how to do it. – Alvaro Menéndez Mar 31 '14 at 10:46
  • The issue here can't be solved with the technique I pointed out in the other question because it is based on the width of the container and you need on this issue to adapt to the height of the container. So this is not a duplicate and you did well by opening an new question. – web-tiki Apr 01 '14 at 09:37

2 Answers2

2

if you want to reverse use the use % vertical padding or margin , CSS cannot. You need , to retrieve height of document and use to set the width of your container, then , it can be used for reference to size your squares .

5 squares : http://jsfiddle.net/7jJsf/30/

basic javascript (to call in onload/onresize function ): 

var height = window.innerHeight;
var menu = document.getElementById("container");
menu.style.width=height/6 +"px";

On onload & onresize events : 

window.onload= function() {
    squarethem();
}

window.onresize= function() {
    squarethem();
}
function squarethem() {
    var height = window.innerHeight;
    var menu = document.getElementById("container");
    menu.style.width=height/6 +"px";
}
                  }

http://jsfiddle.net/7jJsf/33/

You can overwrites this using mediaquerie for orientation:landscape.

You must then set !important to the width given to container in this orientation in order to overwrite the width applied by Javascript.

http://jsfiddle.net/7jJsf/34/ and here the set of files zipped to test ZIP .

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • thanks Gcyrillus, but those squares are not responsive as I'm looking for filling the height of the window from top to bottom (squares getting bigger or smaller depending of height and width of the brwoser. – Alvaro Menéndez Mar 31 '14 at 11:07
  • **as written** , you need to wrap this in onload and on resize function : http://jsfiddle.net/7jJsf/33/ – G-Cyrillus Mar 31 '14 at 11:12
  • My apologize. and THANKS a lot. I'll try your solution – Alvaro Menéndez Mar 31 '14 at 11:17
  • Did you understand how your squares where drawn using padding-top% and parent's width ? , your welcome , we all keep learning – G-Cyrillus Mar 31 '14 at 11:20
  • my understanding of javascript is quite limited atm but working on it. I don't understand it fully but all these solutions help me quite a lot learning it (no yet to write my own codes but to be familiar with then and at least understand what these codes achieve.) – Alvaro Menéndez Mar 31 '14 at 11:29
  • and thanks again. Working perfectly as intended. you can check your solution here: http://www.asadordearanda.com/movil when landscape orientation (all layout need still to adapt to landscape. working on it) – Alvaro Menéndez Mar 31 '14 at 11:47
  • no probleme , you can test this mediaqueries as well to see how it reacts http://jsfiddle.net/7jJsf/34/ and files in a zip http://codepen.io/anon/share/zip/Lzkhl/ , so you can test from tablets or mobile the mediaquerie overwrites the width injected by js if you are in landscape mode – G-Cyrillus Mar 31 '14 at 11:50
  • do not forget to flag answers as accepted where ever you posted a question that got the answer you were looking for. Regards – G-Cyrillus Mar 31 '14 at 11:59
0

I understand what it is you want to do, first I would do something like this:

http://jsfiddle.net/7jJsf/27/

and by looking at your website I see that you are using images in all boxes so what I would do is to set a specific size in the img tag in the css and not worry about the height on the boxes because they will autoscale with the width of the img since it is a square. Hope you understand, if not, I will try again if I get some more code and so on.

//had to post some code to be able to link the jsfiddle... dont care about this line
user3471898
  • 13
  • 1
  • 3
  • Yes. that was my first attempt but when you change the size of the browser, the space between background images increase and decrease (even if the distance between containers do not). the problem is that (as it's already made for the portrait orientation I want the "squares" to be a "div" because it will change colors and opacity dinamically (often, and depending of the page you are, those squares (that are goign to be links) will be "deactivated" changing the opacity and background color... I could change background img insteed butthe "programming" is already been done by a mate). anyway ty – Alvaro Menéndez Mar 31 '14 at 11:04