Comments on: jSquares for jQuery

By: Sol

Sol — Tue, 15 May 2012 09:31:18 +0000

fantastic work Jordan. I was wondering if you could help me. Mouseout doesn’t work on ie9. So the overlay appears on mouseover but doesn’t disappear on mouseout.

Also, is there any js version that calls the overlay onclick or any other way of getting this to work on mobile devices.

Thanks

By: Jason

Jason — Thu, 03 May 2012 23:58:31 +0000

Well, in reality, it would be the same idea if you just resize the browser. So say the jsquares layout is originally designed to fit in a 1000px wide window. So when you resize the browser to 768px (iPad portrait orientation), and pretend that is the full width of the screen, I need the layout to actually look different.

So what I’ve done is use media queries to resize the “js-image” div and the image inside it, so when the browser is 768px wide, they are all smaller than their original size. When I resize the browser to that, the images shrink as they should. However the problem is that they are all still positioned by the javascript in their original positions (based on the wider 1000px screen). So there are big gaps inbetween them.

Does that make sense?

By: Jordan Boesch

Jordan Boesch — Thu, 03 May 2012 23:23:08 +0000

@Jason: I’m not sure. I would have to test it on an iPad… which I don’t have

By: Jason

Jason — Thu, 03 May 2012 22:55:29 +0000

Hi there! Awesome script! I have a question about mobile devices.

I have everything working the way it should in my browser, but if I’m looking at it in an iPad, then I switch to portrait, I have the images that are inside the class “js-image” resize using media queries, but their positions stay exactly where they were before. So when you rotate the iPad to portrait mode, the images all become smaller, but now there are huge gaps in between all of them. Is there any way to remedy this?

By: Yuri

Yuri — Fri, 27 Apr 2012 11:57:08 +0000

Great, thank you!
How do i script the possibility of a mouseout which hides the overlay content with a fade? (slow parameter or int)

By: Corretores

Corretores — Sat, 17 Mar 2012 21:48:58 +0000

gOOD wORK ! well it should managed by the css…. Thanks for sharing !

By: mixmedia

mixmedia — Tue, 13 Mar 2012 15:47:01 +0000

I am just building your jSquares into a WordPress-Page and there is one open question for me: how can I position the captions according to the Images position, like positioning them on 50% of the height and 50% on the width of the original picture. I have found the vars curleft and curtop that seem to do that. But as I have different-sized images is there a way to set these vars to %-values?

By: Makro Web Design

Makro Web Design — Mon, 12 Mar 2012 22:40:46 +0000

Nice work.Thank you.

By: Today’s Read March 8, 2012 — Nguyen K. Do

Today’s Read March 8, 2012 — Nguyen K. Do — Thu, 08 Mar 2012 11:12:02 +0000

[...] boedesign – canadian based web developer eh » Blog Archive » jSquares for j [...]

By: P Williams

P Williams — Thu, 01 Mar 2012 12:36:50 +0000

THis is such a beautiful thing! not right for my current project but I can’t wait to find something it is right for!