?

Log in

No account? Create an account

Jeff's GeekBearCave on LJ

[no user serviceable parts inside.]


March 3rd, 2011

Geek Needs Assistance w/ CSS & JQuery, etc... @ 07:37 pm

Location: apartment 9B
Mood: curious curious
Music: Sirius Satellite Radio

OK this one is for all my geeky [said lovingly] LJ Friends;

In CSS (and possibly JQuery) - Is there a way to make one of several collections within  <div id="aa01">...</div>,  <div id="aa02">...</div> ... etc tags to just simply disappear and relinquish their space until I want the grouping to appear and take up space on the page by changing some properties of the aa## tag?

There will be several groupings identified by id="aa##" and I only want the non-hidden grouping to actually take up space when its visible - its for a page switching effect for an image gallery menu.

The page is build by a PHP script currently and the thumbnails just stream two-by-two down the page.  I want to create some kind of page switching menu so that the page length will remain manageable.  I've created another, simpler PHP generated page and I'm using logic to determine the group number and id aa##. 

I've got CSS that will make the first grouping initially visible and hide all the others - partially working.  The hidden/visible part seems to be working, but the hidden groups are still taking up space on the page, so the page, with 5 of the 6 groupings hidden, is as long as it was when all the groups were visible.  I haven't (yet) found the way to make the hidden groups take up NO space on the page, or stack on each other below the visible grouping.

I'll be using the JQuery framework, because there is a JQuery plugin already on the page and some other suitable plugin to modify the aa01, aa02... tags to do the visible / invisible stuff.

Hum stacking via positioning - maybe that's what I need to try...  Hum, interesting...

TIA!

Jeff
 
Share  |  |

Comments

 
(no subject) - (Anonymous)
[User Picture Icon]
From:geekbearjeff
Date:March 5th, 2011 04:49 am (UTC)
(Link)
Kevin, sounds like a wonderful idea, Thank You!

I'll give it a try in the next day or two. Weekends are clean out the house up North Jersey days, so it may be a little while before I know how it works out.

Edited at 2011-03-05 04:49 am (UTC)
(no subject) - (Anonymous)
[User Picture Icon]
From:geekbearjeff
Date:March 5th, 2011 05:00 am (UTC)
(Link)
Hi Chris and welcome.

I'm trying to do an infinitely expanding paging function for an image gallery. Dave tells me that the customer wants to put 575+ images in a single directory/gallery - he's trying to convince the client to rotate the images in and through every month or so.

Ya see, we don't know how many images they're going to use at any one time. We want to make it as easy as it can be for the site owner to update - think throw a couple of dozen images in a pre-defined directory and the hit the reload on your browser and the images are resized and cached for the main panel and the thumbnails are created on the fly. To keep the page tidy we need to page the thumbnails after a (pleasing quantity) are displayed.

So, there will be swapping, there will be programmatic control of the CSS to make the stuff in the groups of DIVs appear and disappear.

Basically I'm trying to reverse engineer something that I'm not all that familiar with - a JScript plugin called galleria with another language that I'm a little more familiar with - PHP. I would prefer to use PERL but Dave is a little familiar with modifying PHP, he's never seen PERL.

So a couple of ideas I had on your animation functions; have a look at the JScript library and peruse the plugins - you might find a set of functions that's ready to use...
[User Picture Icon]
From:marmtx
Date:March 5th, 2011 05:44 am (UTC)
(Link)
*shakes mane* Confused :)
Do you have any control over it? If yes, add a class, then flip it at the end:
- <div id="aa02" class="hidden">...</div> .... </div>
- with just css: div[id^="aa"] {display: none;} div[id="aa01"] {display: block} - first rule says hide completely all divs whose ID starts with "aa", second rule (has to go after the first one) says for div with ID of aa01 do the display block (default for div)

Or am I mixing up something and that's not what you want to do? :)
display: none; is what generally is used to "remove" things (including space the element would occupy)
[User Picture Icon]
From:marmtx
Date:March 5th, 2011 05:47 am (UTC)
(Link)
err... first one piece of javascript got eaten :D
at the end of string of divs do <script>$("div[id^='aa']").removeClass('hidden')<script> and don't forget to have .hidden {display: none;} in css
[User Picture Icon]
From:geekbearjeff
Date:May 14th, 2011 03:46 pm (UTC)
(Link)
Thanks for the suggestions!

Sorry for the late reply.

I think I understand what you're going for and its similar to what I'm trying to do. There will be M pages of n images, where M=n/(~20). The client wants the initial set of images to be visible as they are loaded by the browser, so the first, say aa01 would need to be visible initially. I've figured out the PHP to get that to work. However the issue I was having is that the non-visible groups were still taking up space, so if I wanted, say aa05, to be visible it have 4 hidden, but space-taking groups above it on the page. Kevin's suggestion, above, works, but the resetting to visible is getting me hung up.

In the end we tried adding the JCarousel JQuery plugin to the mix and it did a good job of handling a larger number of thumbnails, but the client has expressed that they want to have 500+ images in the same gallery and initial tests have shown that some browsers take several minutes to reveal the first images when faced with that quantity.

The site had a .swf based gallery that has a "pro/paid" version and it looks like that will do what the client wants, so this project has been tabled.

I've learned some CSS and JS and JQuery from the books, tutorials and from the comments on this thread - Thanks to y'all!
[User Picture Icon]
From:marmtx
Date:May 14th, 2011 07:00 pm (UTC)
(Link)
500 images PER PAGE? :) Are they kinda mad?
In case like that I recommend to render one page w/images, and then lazy-load the next ones as they come into view. At least people who don't scroll don't get punished with a torrent of image traffic (customer probably doesn't give a hoot that their bandwidth use will be 10x)

Jeff's GeekBearCave on LJ

[no user serviceable parts inside.]