Expandable Div Width With Dynamic Items

Does anyone know how to create this? 1. The Div will be a fix height.2. The Div will be auto expanding with a minimum width of 600px3. The Div will show items depending on the amount of width available. The other requirements like navigating buttons are not as important as the expanding and changing amount of items being displayed at this stage. I will try and get those done once the first 3 requirements are meet.Any links or suggestions on how to go about this appreciated.CheersSone

Will there be a minimum of the three Images as per your Sample up there? Or are those div's of text?
Looks to me like a javascript solution to supply the left and right arrow scroll markers.
Because IE will not recognize the min-width element is CSS, that will require an IE conditional comment to supply certain CSS to it.

Google javascript scrollers and see what you come up with.
*edit*
Found this one http://forums.xisto.com/no_longer_exists/
It uses a slider instead of the Arrow head images you have shown.

Thanks for the link jlhaslip. Unfortunately that is not exactly what I'm after. I need the outer most containing Div to be dynamic in width. The items inside them will be thumb nails and maybe also text including descriptions.

I came up with something that does pretty much what you want. The only problem is getting it to look nice inside the container; that is, centering the objects or distributing them evenly. For that, i'll just leave it to you. And by the way, this script uses JQuery, so you'll need to download that and edit the code to include that version of JQuery.

Thanks again for the excellent code truefusion. This seems to work perfectly on its own but as I try and integrate it into my existing site it reports function undefined errors under firebug. This could be of course my own fault but I've tried including the jquery file in the header and also just in the body before the acutual slide show begins.

I am beginning to suspect it may have something to do with my other included .js files in the header conflicting? I have an idea I will try remove them and see how it goes.

example of problem and one working fine at this stage.
http://forums.xisto.com/no_longer_exists/
http://forums.xisto.com/no_longer_exists/



update 9.19pm NZL Time 24/01/2009

I have checked and taken some screen shoots to confirm that does appear to be conflicts with the 3 scripts

<script type=\"text/javascript\" src=\"js/prototype.js\"></script><script type=\"text/javascript\" src=\"js/scriptaculous.js?load=effects,builder\"></script><script type=\"text/javascript\" src=\"js/lightbox.js\"></script>

When I comment these out there is no error and the page functions fine. Now I'm at a loss at to what to do right at this time. Any ideas welcome ^^


update 11.10pm NZL Time 24/01/2009

fixed js conflicted. change functions prev, next to prevItem, nextItem (conflict with next function somewhere).
jQuery.noConflict();

Edited January 25, 2009 by truefusion (see edit history)

Just a question concerning how its structured. You've used an unordered list for the containers of Div's. Does this help in keeping them displayed inline? I am having trouble trying to find a way to center them. I have tried to apply text-align: center for the container div "slideArea" but still no effect. I can live with not being able to center them nicely but it would be nicer looking centered

you can see it at http://forums.xisto.com/no_longer_exists/

You've used an unordered list for the containers of Div's. Does this help in keeping them displayed inline? I am having trouble trying to find a way to center them.

Yeah, the inline list items is what made it possible to actually work with the block-level divisions. I had and have an idea on how to center or distribute the list items evenly, which includes margins and another math equation. I'll include the code when i implement it.

<script type="text/javascript">//<![CDATA[var index = 0;var children;var parentWidth;var parentPadding;var childWidth;var visChildren;$(document).ready(	function(){		children = $("div#sliderArea ul li").children("div");		parentWidth = $("div#sliderArea").width();		parentPadding = $("div#sliderArea").css("margin-left");		childWidth = $(children[0]).width();		visChildren = Math.floor(parentWidth/childWidth);		distribute();	});function prevItem(){	index = index - 1;	if (index < 0){		index = 0;	}	$(children[index]).removeClass("hidden");	distribute();}function nextItem(){	if (index < (children.length-visChildren))	{		$(children[index]).addClass("hidden");		index = index + 1;	}	distribute();}function distribute(){	var margin = parentWidth - (childWidth * visChildren);	margin = margin/(2*visChildren);	margin -= parseInt(parentPadding)*2;	for (var i = 0; i < children.length; i++){		$(children[i]).css("margin", "0");	}	for (var i = index; i < (index+visChildren+1); i++){		$(children[i]).css({"margin-left" : margin, "margin-right" : margin});	}}//]]></script>

This code evenly and dynamically (as best as it can) distributes the items.

I have a horizontal navigation,I need that it should dynamically adjust its width according to the number of links.As if it would have 10 links it will be taking the complete area of its div ,and also if one link is added or deleted from it ,it will take the same area[spread out throughout its parent div]How is this possible.Please reply..Its urgent.