Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Set Isotope block to an exact position on click.

We have an isotope based site that when you click on a block, it enlarges the block and shows additional information. Our problem is sometimes the block ends up behind a menu in column 1 and 2. We want it so that an open isotope block (when clicked) never opens in column 1 or 2 behind a menu.

User Gravatar

seanbajuice

Posted Feb 3 2014 17:29 UTC

$100


  • Expired
  • jquery
    isotope
  • 1082 Views

15 Replies


On the opened block, in CSS give it a big z-index.

.(your opened block class name) {
   z-index:999999999;
}

Attach some code/link if it doesn't work.

User Gravatar

elado

Posted Feb 3 2014 17:31 UTC

@elado this wont work in our case as it will just put it on top of column 1 and 2 (which we are doing). We want it to never be in column 1 or 2.. You can see our dev site here, if we could only move it over two columns, that would solve our problem. http://nikolas.bbxdevelopment.com

User Gravatar

seanbajuice

Posted Feb 3 2014 17:35 UTC

You'll want to just give the content a left margin while the nav container is there, and then when your website responds drop the margin as it'll be fine to fill the page at that point. Add .view-content { margin-left:300px; } to your base css *Adjust the px to your preference of space behind the nav. And within your media query for tablet drop it .view-content { margin-left:0; } **The responsive override (margin-left:0) you'll add into your responsive.tablet.landscape.css

User Gravatar

nightbook

Posted Feb 3 2014 18:01 UTC

@nightbook, thanks for the response, that's a good idea and I will consider it, the only issue with that is while the big block is open none of the "closed" isotope blocks will appear behind the menu (columns 1 and 2).

User Gravatar

seanbajuice

Posted Feb 3 2014 18:05 UTC

Thanks @seanbajuice, if you look at the base of your page when big block is open there's a few tiles behind your nav, not overly noticable just wanted to point that out. Are you wanting the big block to stay overtop of the nav when it's open or you want the nav visible when big block open?

User Gravatar

nightbook

Posted Feb 3 2014 18:10 UTC

@nightbook. 1. Yes, we want those items to be behind the nav but off to the edge enough where they are barely clickable, This is our intended action. 2. Notice 2 columns fit exactly behind the navigation on the left. We want the big block to always open to the right of the navigation in block 3 of any row if possible., at-least always open to the right of the first to columns (which are behind the menu). 3. The unopen (small blocks) need to remain behind the menu.

User Gravatar

seanbajuice

Posted Feb 3 2014 18:15 UTC

If you want the big block to always stay up tight over the nav you can compensate the margin-left:300px I mentioned first by dropping the overflow:hidden; (may need to be overflow:visible; if you find stuff being cut off). And then place a left:-300px !important; onto your active big block So in your main css .view-content { overflow:visible !important; margin-left:300px; } .largeActive { left:-300px !important; } And into your responsive css overrides to drop it all as it's no longer needed. .view-content { overflow:hidden !important; margin-left:0px !important; } .largeActive { left:0px !important; } Let me know how that goes.

User Gravatar

nightbook

Posted Feb 3 2014 18:18 UTC

Shit sorry didn't catch that before my last post. So you want the first two columns behind the nav that's casual and the big block open to the right of the nav. Does a .largeActive { margin-left: 300px !important; } or a .largeActive { left: 300px !important; } Work with responsive setbacks in your responsive css. .largeActive { margin-left: 0px !important; } OR .largeActive { left: 0px !important; } This leaves your isotope behind the nav and makes sure the large Active element isn't overlapping your navigation.

User Gravatar

nightbook

Posted Feb 3 2014 18:23 UTC

Played around some more, you'll want to use the margin-left approach over the left as the left causes the big block to overlap other blocks where the margin-left keeps it's space moving the other blocks from the way.

So in your home.css

Update - .view-home-page .views-row.isotope-item.largeActive.element { width:1000px; height:655px; margin: 10px; z-index: 9999; overflow:hidden; opacity:1 !important;}

To - .view-home-page .views-row.isotope-item.largeActive.element { width:1000px; height:655px; margin: 10px; z-index: 9999; overflow:hidden; opacity:1 !important; margin-left:300px;}

And you don't actually need to reset in your tablet css as you already do that with an !important margin:0 .view-home-page .views-row.isotope-item.largeActive { position:fixed !important; top:97px !important; left:0 !important; width:100% !important; margin:0 !important; height:517px !important; *so you're covered for tablet/mobile and can just apply the 300px left margin in your home.css.

Fingers crossed ;)

User Gravatar

nightbook

Posted Feb 3 2014 18:41 UTC

thanks @nightbook, I will talk it over with the team in the morning and see if it works out.

User Gravatar

seanbajuice

Posted Feb 3 2014 20:30 UTC

Hi @nightbook, take a look at the dev site above. Although your method works, it pushes away the blocks from behind the menu, which doesn't look good. Any other ideas? I can't believe isotope doesn't have the ability to open at a specific location?

User Gravatar

seanbajuice

Posted Feb 4 2014 11:35 UTC

Hi @seanbajuice, that's too bad I look around and not sure if these methods will work but worth a try.

There's the stamp option http://isotope.metafizzy.co/beta/options.html#stamp

Which has two approaches, either set-up your .largeActive to have a left: 350px; and then update your isotope call with the stamp param below the itemSelector: stamp: '.largeActive'

Or there's the dynamic method to it. http://isotope.metafizzy.co/beta/methods.html#stamp

Which handles the stamp dynamically as you open the largeActive block.

And if there's no luck there maybe we need to look at the Masonry Column Shift layout; http://isotope.metafizzy.co/custom-layout-modes/masonry-column-shift.html

Instead of height though handle with left css.

Hope that all made sense, Cheers

User Gravatar

nightbook

Posted Feb 4 2014 14:32 UTC

Hi @seanbajuice, Did you guys have any luck with the Stamp or Column Shift approaches? Let me know if you're still plugging away and I'll see if I can assist you further. All the best, Cheers

User Gravatar

nightbook

Posted Feb 10 2014 14:35 UTC

@nightbook not yet... still not working, but the client asked us to stop because they are thinking they want to scrap everything and go back to flash.

User Gravatar

seanbajuice

Posted Feb 10 2014 19:18 UTC

Sorry to hear @seanbajuice, best of luck with your transition. Cheers

User Gravatar

nightbook

Posted Feb 11 2014 10:45 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions